From d47eb52604a682f39a7b3dac0e878e6bf620e065 Mon Sep 17 00:00:00 2001 From: Isabelle Viktoria Maciohsek Date: Wed, 25 Nov 2020 21:12:16 +0200 Subject: [PATCH] Update snippet descriptions --- snippets/Modal.md | 40 ++++++++++++++++++++++------------------ snippets/TagInput.md | 38 +++++++++++++++++++++++++------------- 2 files changed, 47 insertions(+), 31 deletions(-) diff --git a/snippets/Modal.md b/snippets/Modal.md index 6d73a87f8..93633592c 100644 --- a/snippets/Modal.md +++ b/snippets/Modal.md @@ -4,13 +4,12 @@ tags: components,effect,intermediate --- 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 the `isVisible` attribute. -- 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. +- Define `keydownHandler`, a method which handles all keyboard events and is used to call `onClose` when the `Esc` key is pressed. +- Use the `useEffect()` hook to add or remove the `keydown` event listener to the `document`, calling `keydownHandler` for every event. +- Add a styled `` element that acts as a close button, calling `onClose` when clicked. +- Use the `isVisible` prop passed down from the parent to determine if the modal should be displayed or not. +- To use the component, import `Modal` only once and then display it by passing a boolean value to the `isVisible` attribute. ```css .modal { @@ -53,22 +52,27 @@ To use the component, import `Modal` only once and then display it by passing a 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; } @@ -81,6 +85,7 @@ To use the component, import `Modal` only once and then display it by passing a opacity: 1; } } + @keyframes slide-in { from { transform: translateY(-150px); @@ -93,20 +98,20 @@ To use the component, import `Modal` only once and then display it by passing a ```jsx const Modal = ({ isVisible = false, title, content, footer, onClose }) => { + const keydownHandler = ({ key }) => { + switch (key) { + case 'Escape': + onClose(); + break; + default: + } + }; + React.useEffect(() => { document.addEventListener('keydown', keydownHandler); return () => document.removeEventListener('keydown', keydownHandler); }); - const keydownHandler = ({ key }) => { - switch (key) { - case 'Escape': - onClose(); - break; - default: - } - }; - return !isVisible ? null : (
e.stopPropagation()}> @@ -129,9 +134,8 @@ const Modal = ({ isVisible = false, title, content, footer, onClose }) => { ```jsx const App = () => { const [isModal, setModal] = React.useState(false); - return ( - + <> { footer={} onClose={() => setModal(false)} /> - + ); }; diff --git a/snippets/TagInput.md b/snippets/TagInput.md index 8fd984bd2..9f84f80eb 100644 --- a/snippets/TagInput.md +++ b/snippets/TagInput.md @@ -5,12 +5,12 @@ tags: components,input,state,intermediate Renders a tag input field. -- Define a `TagInput` component and use `React.useState()` hook to initialize an array from `tags`. -- Use `Array.prototype.map()` on collected nodes to render the list of tags. -- Define the `addTagData` method, which will be executed on pressing the `Enter` key. -- The `addTagData` method uses the `setTagData` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tagData` array. +- Define a `TagInput` component and use the `useState()` hook to initialize an array from `tags`. +- Use `Array.prototype.map()` on the collected nodes to render the list of tags. +- Define the `addTagData` method, which will be executed when pressing the `Enter` key. +- The `addTagData` method calls `setTagData` to add the new tag using the spread (`...`) operator to prepend the existing tags and add the new tag at the end of the `tagData` array. - Define the `removeTagData` method, which will be executed on clicking the delete icon in the tag. -- Use `Array.prototype.filter()` in `removeTagData` method to remove the tag using the `index` of the tag to filter it out from `tagData` array. +- Use `Array.prototype.filter()` in the `removeTagData` method to remove the tag using its `index` to filter it out from the `tagData` array. ```css .tag-input { @@ -21,22 +21,26 @@ Renders a tag input field. border: 1px solid #d6d8da; border-radius: 6px; } + .tag-input input { flex: 1; border: none; height: 46px; font-size: 14px; padding: 4px 0 0; - &:focus { - outline: transparent; - } } -#tags { + +.tag-input input:focus { + outline: transparent; +} + +.tags { display: flex; flex-wrap: wrap; padding: 0; margin: 8px 0 0; } + .tag { width: auto; height: 32px; @@ -51,9 +55,11 @@ Renders a tag input field. margin: 0 8px 8px 0; background: #0052cc; } + .tag-title { margin-top: 3px; } + .tag-close-icon { display: block; width: 16px; @@ -83,11 +89,14 @@ const TagInput = ({ tags }) => { }; return (
-
    +
      {tagData.map((tag, index) => (
    • {tag} - removeTagData(index)}> + removeTagData(index)} + > x
      • @@ -96,7 +105,7 @@ const TagInput = ({ tags }) => { (event.key === 'Enter' ? addTagData(event) : null)} - placeholder="Press enter to add tags" + placeholder="Press enter to add a tag" />
); @@ -104,5 +113,8 @@ const TagInput = ({ tags }) => { ``` ```jsx -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render( + , + document.getElementById('root') +); ```