From b93e4c5b3e3d2dabfbeea8ae88afc7578c6e3037 Mon Sep 17 00:00:00 2001 From: sellalone Date: Mon, 11 Mar 2019 10:25:06 +0100 Subject: [PATCH 1/5] Add Modal Component --- snippets/Modal.md | 136 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 snippets/Modal.md diff --git a/snippets/Modal.md b/snippets/Modal.md new file mode 100644 index 000000000..ee1fabedb --- /dev/null +++ b/snippets/Modal.md @@ -0,0 +1,136 @@ +### Modal + +Renders a Modal component, controllable through events. + +`keydownHandler`, is a method which handles all the Keyboard events. + +The Modal Component has following attributes: + +- `isVisible`, Boolean describing if the modal should be shown or not.(Required) +- `title`, String describing title of Modal.(Required) +- `content`, JSX elements to be rendered in modal body.(Required) +- `footer`, JSX elements to be rendered in modal footer. (optional) +- `onClose`, Function that will be called when Modal needs to be closed like when escape key is pressed.(Required) + + + +```css +.modal { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right:0; + width: 100%; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.25); + animation-name: appear; + animation-duration: 300ms; +} + +.modal-dialog{ + width: 100%; + max-width: 550px; + background: white; + position: relative; + margin: 0 20px; + max-height: calc(100vh - 40px); + text-align: left; + display: flex; + flex-direction: column; + overflow:hidden; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); + -webkit-animation-name: animatetop; + -webkit-animation-duration: 0.4s; + animation-name: slide-in; + animation-duration: 0.5s; +} + +.modal-header,.modal-footer{ + display: flex; + align-items: center; + padding: 1rem; +} +.modal-header{ + border-bottom: 1px solid #dbdbdb; + justify-content: space-between; +} +.modal-footer{ + border-top: 1px solid #dbdbdb; + justify-content: flex-end; +} +.modal-close{ + cursor: pointer; + padding: 1rem; + margin: -1rem -1rem -1rem auto; +} +.modal-body{ + overflow: auto; +} +.modal-content{ + padding: 1rem; +} + +@keyframes appear { + from {opacity: 0;} + to {opacity: 1;} +} +@keyframes slide-in { + from {transform: translateY(-150px);} + to { transform: translateY(0);} +} +``` + + +```jsx +function Modal(props){ + const { isVisible, title, content, footer, onClose } = props; + + useEffect(() => { + document.addEventListener('keydown', keydownHandler); + return () => { + document.removeEventListener('keydown', keydownHandler); + }; + }); + + function keydownHandler({ key }) { + switch (key) { + case 'Escape': onClose(); break; + default: + } + } + + return !isVisible ? null : ( +
+
e.stopPropagation()}> +
+

{title}

+ × +
+
+
{ content }
+
+ {footer &&
{footer}
} +
+
+ ) +} +``` + +```jsx +//Add the component to render function + +ReactDOM.render( + The content goes here

} + footer={} + onClose ={()=> } //Add action to hide modal +/>, + document.getElementById('root') +); +``` From 73b5d802b7f500291f231947ee0c2c5e1d3ee2b6 Mon Sep 17 00:00:00 2001 From: sellalone Date: Thu, 14 Mar 2019 23:07:23 +0100 Subject: [PATCH 2/5] Add some modifications --- snippets/Modal.md | 49 +++++++++++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/snippets/Modal.md b/snippets/Modal.md index ee1fabedb..189f153ed 100644 --- a/snippets/Modal.md +++ b/snippets/Modal.md @@ -9,10 +9,8 @@ The Modal Component has following attributes: - `isVisible`, Boolean describing if the modal should be shown or not.(Required) - `title`, String describing title of Modal.(Required) - `content`, JSX elements to be rendered in modal body.(Required) -- `footer`, JSX elements to be rendered in modal footer. (optional) -- `onClose`, Function that will be called when Modal needs to be closed like when escape key is pressed.(Required) - - +- `footer`, JSX elements to be rendered in modal footer.(optional) +- `onClose`, Function that will be called when Modal needs to be closed like when escape key is pressed.(Required) ```css .modal { @@ -84,16 +82,13 @@ The Modal Component has following attributes: } ``` - ```jsx function Modal(props){ const { isVisible, title, content, footer, onClose } = props; - - useEffect(() => { + + React.useEffect(() => { document.addEventListener('keydown', keydownHandler); - return () => { - document.removeEventListener('keydown', keydownHandler); - }; + return () => document.removeEventListener('keydown', keydownHandler); }); function keydownHandler({ key }) { @@ -105,7 +100,7 @@ function Modal(props){ return !isVisible ? null : (
-
e.stopPropagation()}> +
e.stopPropagation()}>

{title}

× @@ -123,14 +118,26 @@ function Modal(props){ ```jsx //Add the component to render function -ReactDOM.render( - The content goes here

} - footer={} - onClose ={()=> } //Add action to hide modal -/>, - document.getElementById('root') -); +function App() { + const [ isModal, setModal] = React.useState(false); + + return ( + + + Add your content here

} + footer = {} + onClose ={()=> setModal(false)} + /> + + ) +} + +ReactDOM.render( , document.getElementById('root')); ``` + + + + \ No newline at end of file From afc15939146d8f1ab64f50ac4de52c9ca29260b4 Mon Sep 17 00:00:00 2001 From: sellalone Date: Thu, 14 Mar 2019 23:16:19 +0100 Subject: [PATCH 3/5] Fix typo --- snippets/Modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/Modal.md b/snippets/Modal.md index 189f153ed..a5da9f916 100644 --- a/snippets/Modal.md +++ b/snippets/Modal.md @@ -123,7 +123,7 @@ function App() { return ( - + Date: Fri, 15 Mar 2019 11:20:40 +0100 Subject: [PATCH 4/5] Add default tags --- snippets/Modal.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/snippets/Modal.md b/snippets/Modal.md index a5da9f916..de28e0ae1 100644 --- a/snippets/Modal.md +++ b/snippets/Modal.md @@ -1,8 +1,9 @@ ### Modal Renders a Modal component, controllable through events. +To use the component, import `Modal` only once and then display it by passing a boolean value to attribute `is-isVisible`. -`keydownHandler`, is a method which handles all the Keyboard events. +Define `keydownHandler`, a method which handles all the Keyboard events and according to your need you can dispatch any action like when Escape is pressed close modal. The Modal Component has following attributes: @@ -138,6 +139,6 @@ function App() { ReactDOM.render( , document.getElementById('root')); ``` - + \ No newline at end of file From 896f57328d3f9cccf7d0eb6859bbdff736df7a9e Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 27 Mar 2019 08:57:15 +0200 Subject: [PATCH 5/5] Update Modal.md --- snippets/Modal.md | 27 ++++++++++----------------- 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/snippets/Modal.md b/snippets/Modal.md index de28e0ae1..1fe98ccf4 100644 --- a/snippets/Modal.md +++ b/snippets/Modal.md @@ -1,17 +1,13 @@ ### Modal Renders a Modal component, controllable through events. -To use the component, import `Modal` only once and then display it by passing a boolean value to attribute `is-isVisible`. +To use the component, import `Modal` only once and then display it by passing a boolean value to the `isVisible` attribute. -Define `keydownHandler`, a method which handles all the Keyboard events and according to your need you can dispatch any action like when Escape is pressed close modal. - -The Modal Component has following attributes: - -- `isVisible`, Boolean describing if the modal should be shown or not.(Required) -- `title`, String describing title of Modal.(Required) -- `content`, JSX elements to be rendered in modal body.(Required) -- `footer`, JSX elements to be rendered in modal footer.(optional) -- `onClose`, Function that will be called when Modal needs to be closed like when escape key is pressed.(Required) +* Use object destructuring to set defaults for certain attributes of the modal component. +* Define `keydownHandler`, a method which handles all keyboard events, which can be used according to your needs to dispatch actions (e.g. close the modal when Esc is pressed). +* Use `React.useEffect()` hook to add or remove the `keydown` event listener, which calls `keydownHandler`. +* Use the `isVisible` prop to determine if the modal should be shown or not. +* Use CSS to style and position the modal component. ```css .modal { @@ -84,9 +80,7 @@ The Modal Component has following attributes: ``` ```jsx -function Modal(props){ - const { isVisible, title, content, footer, onClose } = props; - +function Modal({ isVisible = false, title, content, footer, onClose }){ React.useEffect(() => { document.addEventListener('keydown', keydownHandler); return () => document.removeEventListener('keydown', keydownHandler); @@ -117,8 +111,7 @@ function Modal(props){ ``` ```jsx -//Add the component to render function - +//Add the component to the render function function App() { const [ isModal, setModal] = React.useState(false); @@ -139,6 +132,6 @@ function App() { ReactDOM.render( , document.getElementById('root')); ``` - + - \ No newline at end of file +