s

agsulimko · Sep 12, 2023 · 48dc1f4 · 48dc1f4
1 parent 495e7f9
commit 48dc1f4
Show file tree

Hide file tree

Showing 10 changed files with 3,543 additions and 1,440 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,12 +4,17 @@
   "private": true,
   "homepage": "https://agsulimko.github.io/goit-react-hw-03-image-finder/",
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.8",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.0.7",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -60,6 +60,8 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+
+    <div id="modal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -1,16 +1,48 @@
-export const App = () => {
-  return (
-    <div
-      style={{
-        height: '100vh',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: 40,
-        color: '#010101'
-      }}
-    >
-      React homework template
-    </div>
-  );
-};
+import React, { Component } from 'react'
+import Searchbar from './Searchbar/Searchbar'
+import Modal from './Modal/Modal'
+//  import styled from 'styled-components'
+// import styled from '@emotion/styled'
+
+
+//  export default 
+class App extends Component {
+
+
+     state = { showModal: false, };
+
+//  Открытие и закрытие модального окна
+   toggleModal = () => {
+   this.setState(({ showModal })=> ({
+      showModal: !showModal,
+}));
+   };
+
+
+   render() {
+     const { showModal } = this.state;
+
+
+
+
+    return (
+      <> 
+         <Searchbar/> 
+          <button type='button' onClick={this.toggleModal}>Open modal</button> 
+        {/* <ImageGallery />
+        <ImageGalleryItem />
+        <Loader />*/}
+        {/* <Button />  */}
+
+        {showModal &&  <Modal onClose={this.toggleModal} > <h2>Modal Hallo</h2>
+        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, molestias assumenda aliquid incidunt corrupti a pariatur ratione rerum numquam alias omnis in non totam voluptatum quas voluptatem! Non, aspernatur? Suscipit!</p>
+        <button type='button' onClick={this.toggleModal}>Close modal</button> 
+         </Modal> }  
+
+      </>
+    )
+  }
+}
+export default App
+
+
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
@@ -0,0 +1,72 @@
+ import { Component } from 'react'
+import css from './Modal.module.css'
+import {createPortal} from 'react-dom';
+
+const modalRoot= document.querySelector('#modal-root');
+export default class Modal extends Component {
+
+ componentWillUnmount() {
+        console.log('modal WillUnmount ');
+		document.removeEventListener('keydown', this.handleKeyEsc)
+	}
+	componentDidMount() {
+        console.log(' modal DidMount');
+		// /??????????????????????????????
+        window.addEventListener('keydown', this.handleKeyEsc);
+
+        };
+        // /??????????????????????????????
+
+
+
+
+	 handleKeyEsc = (e) => {
+		if (e.key === 'Escape') this.props.onClose()
+		console.log('Esc');
+	}
+
+// 		const { children, toggleModal } = this.props
+render() {
+    return createPortal(
+        <div className={css.modalBackdrop}>
+<div className={css.modalContent}>{this.props.children} </div> 
+</div>,
+modalRoot,
+    );
+}
+
+}
+
+
+
+
+
+
+
+
+// const Modal = ({ children}) => {
+// 	return (
+// 		<div
+// 			className='modal fade show'
+// 			style={{ display: 'block', backdropFilter: 'blur(5px)' }}
+// 			// onClick={toggleModal}
+// 		>
+// 			<div className='modal-dialog'>
+// 				<div className='modal-content'>
+// 					<div className='modal-header'>
+// 						<h5 className='modal-title'> Modal</h5>
+// 						<button
+// 							type='button'
+// 							className='btn-close'
+// 							aria-label='Close'
+// 							// onClick={toggleModal}
+// 						></button>
+// 					</div>
+// 					<div className='modal-body'>{children}</div>
+// 				</div>
+// 			</div>
+// 		</div>
+// 	)
+// }
+
+// export default Modal
diff --git a/src/components/Modal/Modal.module.css b/src/components/Modal/Modal.module.css
@@ -0,0 +1,23 @@
+.modalBackdrop{
+   position: fixed; 
+   top: 25%;
+   left: 25%;
+   width:50% ;
+   height: 50%;
+   background-color: rgb(195, 195, 222);
+   border-radius: 5px;
+   border: 0.5px solid ;
+   border-color: brown;
+   /* z-index: 999; */
+}
+
+.modalContent {
+    position: absolute;
+    top:50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    /* max-width: 600px;
+  min-height: 300px;
+  border-radius: 5px; */
+}
diff --git a/src/components/Modal/Modal.styled.jsx b/src/components/Modal/Modal.styled.jsx
diff --git a/src/components/Searchbar/Searchbar.jsx b/src/components/Searchbar/Searchbar.jsx
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+
+export default class Searchbar extends Component {
+
+
+
+
+    render() {
+
+
+
+
+
+
+
+    return (
+      <div>
+        <header class="searchbar">
+  <form class="form">
+    <button type="submit" class="button">
+      <span class="button-label">Search</span>
+    </button>
+
+    <input
+      class="input"
+      type="text"
+      autocomplete="off"
+      autofocus
+      placeholder="Search images and photos"
+    />
+  </form>
+
+  {/* <button type='button' onClick={this.toggleModal}>Open modal</button>   */}
+</header>
+      </div>
+    )
+  }
+}
+
+
+// 38614458-d50fcc5469c58311283d9e834
+
+// https://pixabay.com/api/?key=38614458-d50fcc5469c58311283d9e834&q=yellow+flowers&image_type=photo&pretty=true