From d2b00d4b6d5c0329febf2f083dd09e8fd5e028ed Mon Sep 17 00:00:00 2001 From: "rosenstein.samuel1" Date: Sun, 5 Jul 2020 14:05:17 +0300 Subject: [PATCH 1/2] added Modal component, demo, and docs --- src/components/Modal/Modal.jsx | 41 +++++++++++++++++++++ src/components/Modal/Modal.scss | 31 ++++++++++++++++ src/components/Modal/Modal.test.jsx | 11 ++++++ src/demos/DemoDisplay.jsx | 36 +++++++++++-------- src/demos/ModalDemo.jsx | 43 ++++++++++++++++++++++ src/docs/avatar.md | 13 ++++--- src/docs/modal.md | 56 +++++++++++++++++++++++++++++ src/exports/exports.js | 3 +- 8 files changed, 211 insertions(+), 23 deletions(-) create mode 100644 src/components/Modal/Modal.jsx create mode 100644 src/components/Modal/Modal.scss create mode 100644 src/components/Modal/Modal.test.jsx create mode 100644 src/demos/ModalDemo.jsx create mode 100644 src/docs/modal.md diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx new file mode 100644 index 0000000..1a4582d --- /dev/null +++ b/src/components/Modal/Modal.jsx @@ -0,0 +1,41 @@ +import React, { useState, forwardRef, useImperativeHandle } from 'react'; +import './Modal.scss'; + +const Modal = forwardRef((props, ref) => { + const [display, setDisplay] = useState(props.isOpen); + + useImperativeHandle(ref, () => { + return { + openModal: () => open(), + closeModal: () => close(), + }; + }); + + const open = () => { + setDisplay(true); + }; + + const close = () => { + setDisplay(false); + }; + + if (display) { + return ( +
+
+
{props.children}
+
+ ); + } + return null; +}); + +export default Modal; + +Modal.propTypes = { + isOpen: Boolean, +}; + +Modal.defaultProps = { + isOpen: false, +}; diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss new file mode 100644 index 0000000..6df35af --- /dev/null +++ b/src/components/Modal/Modal.scss @@ -0,0 +1,31 @@ +.modal-wrapper { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.modal-backdrop { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 100; + background-color: rgba(0, 0, 0, 0.3); +} + +.modal-box { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 70%; + width: 60%; + background-color: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); + z-index: 101; + overflow-y: auto; + padding: 40px; +} diff --git a/src/components/Modal/Modal.test.jsx b/src/components/Modal/Modal.test.jsx new file mode 100644 index 0000000..582dc92 --- /dev/null +++ b/src/components/Modal/Modal.test.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import Modal from './Modal'; + +describe('', () => { + it('should create the component', () => { + const { container } = render(); + expect(container).toBeTruthy(); + }); +}); diff --git a/src/demos/DemoDisplay.jsx b/src/demos/DemoDisplay.jsx index 014dddc..160b0c3 100644 --- a/src/demos/DemoDisplay.jsx +++ b/src/demos/DemoDisplay.jsx @@ -1,21 +1,27 @@ - -import React from 'react' -import './demodisplay.css' +import React from 'react'; +import './demodisplay.css'; /*add your demo in the import statement below */ -import { SimpleButtonDemo, HeadingDemo, ProgressBarDemo } from '../exports/exports' +import { + SimpleButtonDemo, + HeadingDemo, + ProgressBarDemo, + ModalDemo, +} from '../exports/exports'; const switchTo = (componentName) => { - switch (componentName) { - case 'Simple Button': - return - case 'Heading': - return - case 'Progress Bar': - return - default: - return '' - } -} + switch (componentName) { + case 'Simple Button': + return ; + case 'Heading': + return ; + case 'Progress Bar': + return ; + case 'Modal': + return ; + default: + return ''; + } +}; const importView = (DemoComponentName) => React.lazy(() => diff --git a/src/demos/ModalDemo.jsx b/src/demos/ModalDemo.jsx new file mode 100644 index 0000000..f5a0fb6 --- /dev/null +++ b/src/demos/ModalDemo.jsx @@ -0,0 +1,43 @@ +import React, { useRef } from 'react'; +import '../components/Modal/Modal.scss'; + +import Modal from '../components/Modal/Modal'; + +function App() { + const modalRef = useRef(); + + const openModal = () => { + modalRef.current.openModal(); + }; + + return ( +
+ + + +

Modal Header

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint eum + alias neque fuga asperiores, deleniti pariatur sapiente eligendi + doloremque. Mollitia, facere tempora modi asperiores eum perspiciatis + iste ipsum eaque explicabo. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi odit + ducimus similique quo a quis itaque hic, impedit atque voluptatem + doloribus assumenda nulla saepe molestiae aliquid corrupti magnam sint + laboriosam. +

+ +
+ ); +} + +export default App; diff --git a/src/docs/avatar.md b/src/docs/avatar.md index 9f8a58d..f8dc805 100644 --- a/src/docs/avatar.md +++ b/src/docs/avatar.md @@ -1,4 +1,4 @@ -## Usage +## Usage ``` import React from 'react' @@ -17,11 +17,10 @@ export default App; ### Properties -| Property | Type | Required | Default value | Description | -|----------|--------|----------|---------------|------------| -| name | string | yes | \- |Alternative text description of the image or Title avatar| -| src | string | no | \- |Image to display.| -| size | string | no | md | sx, sm, md, lg and xl font sizes. | - +| Property | Type | Required | Default value | Description | +| -------- | ------ | -------- | ------------- | --------------------------------------------------------- | +| name | string | yes | \- | Alternative text description of the image or Title avatar | +| src | string | no | \- | Image to display. | +| size | string | no | md | sx, sm, md, lg and xl font sizes. | ### Sample diff --git a/src/docs/modal.md b/src/docs/modal.md new file mode 100644 index 0000000..c0f7f6f --- /dev/null +++ b/src/docs/modal.md @@ -0,0 +1,56 @@ +## Usage + +``` +import React, { useRef } from 'react'; +import '../components/Modal/Modal.scss'; + +import Modal from '../components/Modal/Modal'; + +function App() { + const modalRef = useRef(); + + const openModal = () => { + modalRef.current.openModal(); + }; + + return ( +
+ + + +

Modal Header

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint eum + alias neque fuga asperiores, deleniti pariatur sapiente eligendi + doloremque. Mollitia, facere tempora modi asperiores eum perspiciatis + iste ipsum eaque explicabo. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi odit + ducimus similique quo a quis itaque hic, impedit atque voluptatem + doloribus assumenda nulla saepe molestiae aliquid corrupti magnam sint + laboriosam. +

+ +
+ ); +} + +export default App; + +``` + +### Properties + +| Property | Type | Required | Default value | Description | +| :------- | :------ | :------- | :------------ | :------------------------------------ | +| `isOpen` | Boolean | no | false | set to true if the modal is displayed | + +### Sample diff --git a/src/exports/exports.js b/src/exports/exports.js index 966a84e..43df3a1 100644 --- a/src/exports/exports.js +++ b/src/exports/exports.js @@ -2,4 +2,5 @@ export { default as SimpleButtonDemo } from '../demos/SimpleButtonDemo'; export { default as HeadingDemo } from '../demos/HeadingDemo'; export { default as AvatarDemo } from '../demos/AvatarDemo'; -export { default as ProgressBarDemo } from '../demos/ProgressBarDemo' +export { default as ProgressBarDemo } from '../demos/ProgressBarDemo'; +export { default as ModalDemo } from '../demos/ModalDemo'; From af4a44481056d0327cd41849b57d21abd5546d08 Mon Sep 17 00:00:00 2001 From: "rosenstein.samuel1" Date: Mon, 6 Jul 2020 11:56:29 +0300 Subject: [PATCH 2/2] removed refs, update open/close functions --- src/components/Modal/Modal.jsx | 35 ++++++++++----------------------- src/components/Modal/Modal.scss | 6 +++--- src/demos/ModalDemo.jsx | 23 +++++++++++----------- src/docs/modal.md | 30 +++++++++++++--------------- 4 files changed, 38 insertions(+), 56 deletions(-) diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx index 1a4582d..b70930a 100644 --- a/src/components/Modal/Modal.jsx +++ b/src/components/Modal/Modal.jsx @@ -1,39 +1,24 @@ -import React, { useState, forwardRef, useImperativeHandle } from 'react'; -import './Modal.scss'; - -const Modal = forwardRef((props, ref) => { - const [display, setDisplay] = useState(props.isOpen); - - useImperativeHandle(ref, () => { - return { - openModal: () => open(), - closeModal: () => close(), - }; - }); +import React from 'react'; +import PropTypes from 'prop-types'; - const open = () => { - setDisplay(true); - }; - - const close = () => { - setDisplay(false); - }; +import './Modal.scss'; - if (display) { +const Modal = (props) => { + if (props.isOpen) { return ( -
-
-
{props.children}
+
+
+
{props.children}
); } return null; -}); +}; export default Modal; Modal.propTypes = { - isOpen: Boolean, + isOpen: PropTypes.bool, }; Modal.defaultProps = { diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss index 6df35af..3ba80c8 100644 --- a/src/components/Modal/Modal.scss +++ b/src/components/Modal/Modal.scss @@ -1,4 +1,4 @@ -.modal-wrapper { +.modal__wrapper { position: fixed; top: 0; bottom: 0; @@ -6,7 +6,7 @@ right: 0; } -.modal-backdrop { +.modal__backdrop { position: fixed; top: 0; bottom: 0; @@ -16,7 +16,7 @@ background-color: rgba(0, 0, 0, 0.3); } -.modal-box { +.modal__box { position: relative; top: 50%; left: 50%; diff --git a/src/demos/ModalDemo.jsx b/src/demos/ModalDemo.jsx index f5a0fb6..615bb89 100644 --- a/src/demos/ModalDemo.jsx +++ b/src/demos/ModalDemo.jsx @@ -1,25 +1,24 @@ -import React, { useRef } from 'react'; -import '../components/Modal/Modal.scss'; - +import React, { useState } from 'react'; import Modal from '../components/Modal/Modal'; function App() { - const modalRef = useRef(); + const [isOpen, setIsOpen] = useState(false); + + const closeModalHandler = () => { + setIsOpen(false); + }; - const openModal = () => { - modalRef.current.openModal(); + const openModalHandler = () => { + setIsOpen(true); }; return (
- - -

Modal Header

diff --git a/src/docs/modal.md b/src/docs/modal.md index c0f7f6f..68d1bec 100644 --- a/src/docs/modal.md +++ b/src/docs/modal.md @@ -1,28 +1,27 @@ ## Usage ``` -import React, { useRef } from 'react'; -import '../components/Modal/Modal.scss'; - +import React, { useState } from 'react'; import Modal from '../components/Modal/Modal'; function App() { - const modalRef = useRef(); + const [isOpen, setIsOpen] = useState(false); + + const closeModalHandler = () => { + setIsOpen(false); + }; - const openModal = () => { - modalRef.current.openModal(); + const openModalHandler = () => { + setIsOpen(true); }; return (
- - -

Modal Header

@@ -44,13 +43,12 @@ function App() { } export default App; - ``` ### Properties -| Property | Type | Required | Default value | Description | -| :------- | :------ | :------- | :------------ | :------------------------------------ | -| `isOpen` | Boolean | no | false | set to true if the modal is displayed | +| Property | Type | Required | Default value | Description | +| :------- | :------ | :------- | :------------ | :------------------------------------------ | +| `isOpen` | Boolean | yes | none | set to true if the modal is to be displayed | ### Sample