From 45b90c4c33cdce6318b1258e7c3434dae682f653 Mon Sep 17 00:00:00 2001 From: Isabelle Viktoria Maciohsek Date: Sun, 6 Sep 2020 13:55:12 +0300 Subject: [PATCH 01/14] Update Accordion --- snippets/Accordion.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/snippets/Accordion.md b/snippets/Accordion.md index 51154f6cd..5948fc5ef 100644 --- a/snippets/Accordion.md +++ b/snippets/Accordion.md @@ -5,15 +5,15 @@ tags: components,children,state,advanced Renders an accordion menu with multiple collapsible content components. -- Define an `AccordionItem` component, pass it to the `Accordion` and remove unnecessary nodes expect for `AccordionItem` by identifying the function's name in `props.children`. -- Each `AccordionItem` component renders a `
- {props.children} + {children}
); -} +}; -function Accordion(props) { - const [bindIndex, setBindIndex] = React.useState(props.defaultIndex); +const Accordion = ({ defaultIndex, onItemClick, children }) => { + const [bindIndex, setBindIndex] = React.useState(defaultIndex); const changeItem = itemIndex => { - if (typeof props.onItemClick === 'function') props.onItemClick(itemIndex); + if (typeof onItemClick === 'function') onItemClick(itemIndex); if (itemIndex !== bindIndex) setBindIndex(itemIndex); }; - const items = props.children.filter(item => item.type.name === 'AccordionItem'); + const items = children.filter(item => item.type.name === 'AccordionItem'); return (
@@ -64,7 +64,7 @@ function Accordion(props) { ))}
); -} +}; ``` ```jsx From f384fc0ee35fb19a5af3a2faabd0a63a19a87ab4 Mon Sep 17 00:00:00 2001 From: Isabelle Viktoria Maciohsek Date: Sun, 6 Sep 2020 14:11:58 +0300 Subject: [PATCH 02/14] Update Alert --- snippets/Alert.md | 58 +++++++++++++++++++++++------------------------ 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/snippets/Alert.md b/snippets/Alert.md index e5edcee2e..4f867ba85 100644 --- a/snippets/Alert.md +++ b/snippets/Alert.md @@ -1,15 +1,15 @@ --- title: Alert -tags: components,beginner,state,effect +tags: components,state,effect,beginner --- Creates an alert component with `type` prop. - Define appropriate CSS styles and animations for the component's elements. -- Use the `React.setState()` hook to create the `isShown` and `isLeaving` state variables and set their values to `false`. +- Use the `React.useState()` hook to create the `isShown` and `isLeaving` state variables and set their values to `false`. - Define `timeoutId` to keep the timer instance for clearing on component unmount. -- Use the `React.setEffect()` hook to update the value of `isShown` to `true` and clear interval by using `timeoutId` when component is unmounted. -- Define `closeNotification` function to set the component is removed from DOM by displaying fading out animation and set `isShown` to `false` via `setTimeout()`. +- Use the `React.useEffect()` hook to update the value of `isShown` to `true` and clear interval by using `timeoutId` when component is unmounted. +- Define `closeAlert` function to set the component is removed from DOM by displaying fading out animation and set `isShown` to `false` via `setTimeout()`. - Define the component, which renders the alert component with user defined `message` and a close button to remove the component from DOM. ```css @@ -64,36 +64,36 @@ Creates an alert component with `type` prop. ``` ```jsx -function Notification(props) { - const [isShown, setIsShown] = React.useState(false); - const [isLeaving, setIsLeaving] = React.useState(false); +const Alert = ({ isDefaultShown = false, timeout = 250, type, message }) => { + const [isShown, setIsShown] = React.useState(isDefaultShown); + const [isLeaving, setIsLeaving] = React.useState(false); - let timeoutId = null; + let timeoutId = null; - React.useEffect(() => { - setIsShown(true); - return () => { - clearTimeout(timeoutId); - } - }, [props.isShown, props.timeout, timeoutId]); + React.useEffect(() => { + setIsShown(true); + return () => { + clearTimeout(timeoutId); + }; + }, [isDefaultShown, timeout, timeoutId]); - const closeNotification = () => { - setIsLeaving(true); - timeoutId = setTimeout(() => { - setIsLeaving(false); - setIsShown(false); - }, 250) - } + const closeAlert = () => { + setIsLeaving(true); + timeoutId = setTimeout(() => { + setIsLeaving(false); + setIsShown(false); + }, timeout); + }; - return isShown && ( -
-
- ) -} + return isShown && ( +
+
+ ); +}; ``` ```jsx -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); ``` From 95746a843b979f83aee5f42fc59f9ddad4ebd305 Mon Sep 17 00:00:00 2001 From: Isabelle Viktoria Maciohsek Date: Sun, 6 Sep 2020 14:20:45 +0300 Subject: [PATCH 03/14] Update snippet formatting --- snippets/AutoLink.md | 4 ++-- snippets/ControlledInput.md | 8 ++++---- snippets/CountDown.md | 11 ++++++----- snippets/DataList.md | 4 ++-- snippets/DataTable.md | 4 ++-- snippets/LimitedTextarea.md | 4 ++-- snippets/LimitedWordTextarea.md | 4 ++-- snippets/Loader.md | 4 ++-- snippets/MappedTable.md | 8 ++++---- snippets/Modal.md | 21 ++++++++++----------- snippets/MultiselectCheckbox.md | 6 +++--- snippets/PasswordRevealer.md | 4 ++-- snippets/RippleButton.md | 6 +++--- snippets/Select.md | 17 +++-------------- snippets/Slider.md | 4 ++-- snippets/TextArea.md | 6 +++--- snippets/TreeView.md | 10 +++++----- snippets/UncontrolledInput.md | 6 +++--- 18 files changed, 60 insertions(+), 71 deletions(-) diff --git a/snippets/AutoLink.md b/snippets/AutoLink.md index 70f077b93..a7785c6b3 100644 --- a/snippets/AutoLink.md +++ b/snippets/AutoLink.md @@ -9,7 +9,7 @@ Renders a string as plaintext, with URLs converted to appropriate `` elements - Return a `` with matched URLs rendered as `` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext. ```jsx -function AutoLink({ text }) { +const AutoLink = ({ text }) => { const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi; return ( @@ -24,7 +24,7 @@ function AutoLink({ text }) { })} ); -} +}; ``` ```jsx diff --git a/snippets/ControlledInput.md b/snippets/ControlledInput.md index 46a5562f8..dcf1488d4 100644 --- a/snippets/ControlledInput.md +++ b/snippets/ControlledInput.md @@ -6,19 +6,19 @@ tags: components,state,effect,intermediate Renders an `` element with internal state, that uses a callback function to pass its value to the parent component. - Use object destructuring to set defaults for certain attributes of the `` element. -- Use the `React.setState()` hook to create the `value` state variable and give it a value of equal to the `defaultValue` prop. +- Use the `React.useState()` hook to create the `value` state variable and give it a value of equal to the `defaultValue` prop. - Use the `React.useEffect()` hook with a second parameter set to the `value` state variable to call the `callback` function every time `value` is updated. - Render an `` element with the appropriate attributes and use the the `onChange` event to upda the `value` state variable. ```jsx -function ControlledInput({ +const ControlledInput = ({ callback, type = 'text', disabled = false, readOnly = false, defaultValue, placeholder = '' -}) { +}) => { const [value, setValue] = React.useState(defaultValue); React.useEffect(() => { @@ -35,7 +35,7 @@ function ControlledInput({ onChange={({ target: { value } }) => setValue(value)} /> ); -} +}; ``` ```jsx diff --git a/snippets/CountDown.md b/snippets/CountDown.md index e8a517d6d..f7fce6729 100644 --- a/snippets/CountDown.md +++ b/snippets/CountDown.md @@ -15,7 +15,7 @@ Renders a countdown timer that prints a message when it reaches zero. - If `over` is `true`, the timer will display a message instead of the value of `time`. ```jsx -function CountDown({ hours = 0, minutes = 0, seconds = 0 }) { +const CountDown = ({ hours = 0, minutes = 0, seconds = 0 }) => { const [paused, setPaused] = React.useState(false); const [over, setOver] = React.useState(false); const [time, setTime] = React.useState({ @@ -27,24 +27,25 @@ function CountDown({ hours = 0, minutes = 0, seconds = 0 }) { const tick = () => { if (paused || over) return; if (time.hours == 0 && time.minutes == 0 && time.seconds == 0) setOver(true); - else if (time.minutes == 0 && time.seconds == 0) + else if (time.minutes == 0 && time.seconds == 0) { setTime({ hours: time.hours - 1, minutes: 59, seconds: 59 }); - else if (time.seconds == 0) + } else if (time.seconds == 0) { setTime({ hours: time.hours, minutes: time.minutes - 1, seconds: 59 }); - else + } else { setTime({ hours: time.hours, minutes: time.minutes, seconds: time.seconds - 1 }); + } }; const reset = () => { @@ -72,7 +73,7 @@ function CountDown({ hours = 0, minutes = 0, seconds = 0 }) { ); -} +}; ``` ```jsx diff --git a/snippets/DataList.md b/snippets/DataList.md index 61efad250..e3058a4ce 100644 --- a/snippets/DataList.md +++ b/snippets/DataList.md @@ -10,10 +10,10 @@ Renders a list of elements from an array of primitives. - Omit the `isOrdered` prop to render a `
    ` list by default. ```jsx -function DataList({ isOrdered, data }) { +const DataList = ({ isOrdered, data }) => { const list = data.map((val, i) =>
  • {val}
    • ); return isOrdered ?
      {list}
    :
      {list}
    ; -} +}; ``` ```jsx diff --git a/snippets/DataTable.md b/snippets/DataTable.md index 1ff0dc8a6..d3d18148c 100644 --- a/snippets/DataTable.md +++ b/snippets/DataTable.md @@ -9,7 +9,7 @@ Renders a table with rows dynamically created from an array of primitives. - Use `Array.prototype.map` to render every item in `data` as a `` element, consisting of its index and value, give it a `key` produced from the concatenation of the two. ```jsx -function DataTable({ data }) { +const DataTable = ({ data }) => { return ( @@ -28,7 +28,7 @@ function DataTable({ data }) {
    ); -} +}; ``` ```jsx diff --git a/snippets/LimitedTextarea.md b/snippets/LimitedTextarea.md index 0d3ddbbf4..d7689b864 100644 --- a/snippets/LimitedTextarea.md +++ b/snippets/LimitedTextarea.md @@ -11,7 +11,7 @@ Renders a textarea component with a character limit. - Use a`
    ` to wrap both the`