From e4b0e4dd33437569d469a8c73c2aa329862b0207 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Sun, 27 Jan 2019 12:55:57 +0530 Subject: [PATCH 01/12] feat(snippets): add multiselect-checkbox list to snippets --- snippets/MultiselectCheckbox.md | 85 +++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 snippets/MultiselectCheckbox.md diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md new file mode 100644 index 000000000..3222a1ed2 --- /dev/null +++ b/snippets/MultiselectCheckbox.md @@ -0,0 +1,85 @@ +### Multiple Checkbox + +## + +Renders a checkbox list with the options provided through `props`. + +Initially, all the items in the `options` array only have label ( and / or other data provided by the user ) and `checked` is `undefined` if not provided. On clicking any of the items, the `checked` value for the item is toggled and state is updated with the new list. + +The checkbox input in this case is kept as `readOnly` since click events are handled for the item ( label + input ) and not the `input` alone. An `onChange` prop can be passed to the `MultiCheckbox` component to get the updated list on every change event within the list. + + +```jsx +export default class MultiCheckbox extends React.Component { + constructor(props) { + super(props); + this.style = { + listContainer: { + listStyle: 'none', + paddingLeft: 0, + }, + itemStyle: { + cursor: 'pointer', + padding: 5, + } + } + this.state = { + options: props.options, + } + } + + toggle = (item) => { + const { options } = this.state; + const { onChange } = this.props; + options.map((_, key) => { + if(options[key].label === item.label) { + options[key].checked = !item.checked; + } + }); + this.setState({ + options, + }, () => { + onChange(options); + }); + } + + render() { + const { options } = this.state; + return ( + + ) + } +} +``` +```jsx + +const options = [ + { label: 'Item One' }, + { label: 'Item Two' } +]; + +ReactDOM.render( + { + console.log(data); + }} + />, + document.getElementById('root')); +``` \ No newline at end of file From ee917a5bfb395caae0f7833748c36df718ce9945 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Tue, 29 Jan 2019 09:57:47 +0530 Subject: [PATCH 02/12] style(snippets/MultiselectCheckbox.md): lint with prettier --- snippets/MultiselectCheckbox.md | 77 +++++++++++++++------------------ 1 file changed, 34 insertions(+), 43 deletions(-) diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index 3222a1ed2..86827fb86 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -4,82 +4,73 @@ Renders a checkbox list with the options provided through `props`. -Initially, all the items in the `options` array only have label ( and / or other data provided by the user ) and `checked` is `undefined` if not provided. On clicking any of the items, the `checked` value for the item is toggled and state is updated with the new list. +Initially, all the items in the `options` array only have label ( and / or other data provided by the user ) and `checked` is `undefined` if not provided. On clicking any of the items, the `checked` value for the item is toggled and state is updated with the new list. The checkbox input in this case is kept as `readOnly` since click events are handled for the item ( label + input ) and not the `input` alone. An `onChange` prop can be passed to the `MultiCheckbox` component to get the updated list on every change event within the list. - ```jsx export default class MultiCheckbox extends React.Component { constructor(props) { super(props); this.style = { listContainer: { - listStyle: 'none', - paddingLeft: 0, + listStyle: "none", + paddingLeft: 0 }, itemStyle: { - cursor: 'pointer', - padding: 5, + cursor: "pointer", + padding: 5 } - } + }; this.state = { - options: props.options, - } + options: props.options + }; } - toggle = (item) => { + toggle = item => { const { options } = this.state; const { onChange } = this.props; options.map((_, key) => { - if(options[key].label === item.label) { + if (options[key].label === item.label) { options[key].checked = !item.checked; } }); - this.setState({ - options, - }, () => { - onChange(options); - }); - } - + this.setState( + { + options + }, + () => { + onChange(options); + } + ); + }; + render() { const { options } = this.state; return (
    - { - options.map(item => ( -
  • this.toggle(item)} - > - - {item.label} -
    • - )) - } + {options.map(item => ( +
  • this.toggle(item)}> + + {item.label} +
    • + ))}
- ) + ); } } ``` -```jsx -const options = [ - { label: 'Item One' }, - { label: 'Item Two' } -]; +```jsx +const options = [{ label: "Item One" }, { label: "Item Two" }]; ReactDOM.render( { - console.log(data); + onChange={data => { + console.log(data); }} />, - document.getElementById('root')); -``` \ No newline at end of file + document.getElementById("root") +); +``` From 4ccd760bfa818a7c2712122d59781c51e03bc696 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Sun, 24 Feb 2019 14:08:40 +0530 Subject: [PATCH 03/12] fix(mutliselectcheckbox): rewrite with hooks --- snippets/MultiselectCheckbox.md | 89 +++++++++++++++------------------ 1 file changed, 40 insertions(+), 49 deletions(-) diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index 86827fb86..9cf92ac7f 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -2,63 +2,51 @@ ## -Renders a checkbox list with the options provided through `props`. +Renders a checkbox list with the `options` provided through `props`. Initially, all the items in the `options` array only have label ( and / or other data provided by the user ) and `checked` is `undefined` if not provided. On clicking any of the items, the `checked` value for the item is toggled and state is updated with the new list. -The checkbox input in this case is kept as `readOnly` since click events are handled for the item ( label + input ) and not the `input` alone. An `onChange` prop can be passed to the `MultiCheckbox` component to get the updated list on every change event within the list. +An `onChange` prop can be passed to the `MultiCheckbox` component to get the updated list on every change event within the list. ```jsx -export default class MultiCheckbox extends React.Component { - constructor(props) { - super(props); - this.style = { - listContainer: { - listStyle: "none", - paddingLeft: 0 - }, - itemStyle: { - cursor: "pointer", - padding: 5 - } - }; - this.state = { - options: props.options - }; - } +import React, { useState } from 'react' - toggle = item => { - const { options } = this.state; - const { onChange } = this.props; - options.map((_, key) => { - if (options[key].label === item.label) { - options[key].checked = !item.checked; - } - }); - this.setState( - { - options - }, - () => { - onChange(options); - } - ); - }; - - render() { - const { options } = this.state; - return ( -
    - {options.map(item => ( -
  • this.toggle(item)}> - - {item.label} -
    • - ))} -
- ); +const style = { + listContainer: { + listStyle: 'none', + paddingLeft: 0, + }, + itemStyle: { + cursor: 'pointer', + padding: 5, } } + +const MultiCheckbox = ({ options, onChange }) => { + const [data, updateOptions] = useState(options); + + function toggle(item) { + data.map((_, key) => { + if (data[key].label === item.label) { + data[key].checked = !item.checked; + } + }); + updateOptions(data); + onChange(data); + } + + return ( +
    + { + data.map(item => { + return
  • toggle(item)}>{item.label}
    • + }) + } +
+ ) +} + +export default MultiCheckbox; ``` ```jsx @@ -74,3 +62,6 @@ ReactDOM.render( document.getElementById("root") ); ``` + +#### Notes: +* The checkbox input in this case is kept as `readOnly` since click events are handled for the item ( label + input ) and not the `input` alone. \ No newline at end of file From 185b55aa74d55db7a3b389b0a8c1fdc4c01cb033 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Sun, 24 Feb 2019 14:10:06 +0530 Subject: [PATCH 04/12] chore(multiselectcheckbox): add expertise level --- snippets/MultiselectCheckbox.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index 9cf92ac7f..0144c112e 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -64,4 +64,6 @@ ReactDOM.render( ``` #### Notes: -* The checkbox input in this case is kept as `readOnly` since click events are handled for the item ( label + input ) and not the `input` alone. \ No newline at end of file +* The checkbox input in this case is kept as `readOnly` since click events are handled for the item ( label + input ) and not the `input` alone. + +expertise: 0 \ No newline at end of file From 33c1d4b034ee6a1ed4a5294e33880fa10012522e Mon Sep 17 00:00:00 2001 From: rishichawda Date: Sun, 24 Feb 2019 14:13:04 +0530 Subject: [PATCH 05/12] fix(multiselectcheckbox): lint with prettier, update title --- snippets/MultiselectCheckbox.md | 42 +++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index 0144c112e..776ea1dba 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -1,6 +1,4 @@ -### Multiple Checkbox - -## +### MultiselectCheckbox Renders a checkbox list with the `options` provided through `props`. @@ -9,18 +7,18 @@ Initially, all the items in the `options` array only have label ( and / or other An `onChange` prop can be passed to the `MultiCheckbox` component to get the updated list on every change event within the list. ```jsx -import React, { useState } from 'react' +import React, { useState } from "react"; const style = { listContainer: { - listStyle: 'none', - paddingLeft: 0, + listStyle: "none", + paddingLeft: 0 }, itemStyle: { - cursor: 'pointer', - padding: 5, + cursor: "pointer", + padding: 5 } -} +}; const MultiCheckbox = ({ options, onChange }) => { const [data, updateOptions] = useState(options); @@ -37,14 +35,21 @@ const MultiCheckbox = ({ options, onChange }) => { return (
    - { - data.map(item => { - return
  • toggle(item)}>{item.label}
    • - }) - } + {data.map(item => { + return ( +
  • toggle(item)} + > + + {item.label} +
    • + ); + })}
- ) -} + ); +}; export default MultiCheckbox; ``` @@ -64,6 +69,7 @@ ReactDOM.render( ``` #### Notes: -* The checkbox input in this case is kept as `readOnly` since click events are handled for the item ( label + input ) and not the `input` alone. -expertise: 0 \ No newline at end of file +- The checkbox input in this case is kept as `readOnly` since click events are handled for the item ( label + input ) and not the `input` alone. + +expertise: 0 From d18bfe6ad22307546d49ed952744b7f5aa83bcfa Mon Sep 17 00:00:00 2001 From: Rishi Kumar Chawda Date: Sun, 24 Feb 2019 19:28:55 +0530 Subject: [PATCH 06/12] fix(multiselectcheckbox): minor fix --- snippets/MultiselectCheckbox.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index 776ea1dba..c17f65a96 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -29,7 +29,7 @@ const MultiCheckbox = ({ options, onChange }) => { data[key].checked = !item.checked; } }); - updateOptions(data); + updateOptions([...data]); onChange(data); } From 907ce72b47c85e099f2f869b353d5f9f4d4b76b7 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Mon, 25 Feb 2019 13:22:08 +0530 Subject: [PATCH 07/12] fix(multiselectcheckbox): lint with semistandard, minor changes change const to function, update useState function name, and lint with semistandard --- snippets/MultiselectCheckbox.md | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index c17f65a96..bdb6ef5e8 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -7,29 +7,29 @@ Initially, all the items in the `options` array only have label ( and / or other An `onChange` prop can be passed to the `MultiCheckbox` component to get the updated list on every change event within the list. ```jsx -import React, { useState } from "react"; +import React from 'react'; const style = { listContainer: { - listStyle: "none", + listStyle: 'none', paddingLeft: 0 }, itemStyle: { - cursor: "pointer", + cursor: 'pointer', padding: 5 } }; -const MultiCheckbox = ({ options, onChange }) => { - const [data, updateOptions] = useState(options); +export default function MultiCheckbox ({ options, onChange }) { + const [data, setData] = React.useState(options); - function toggle(item) { + function toggle (item) { data.map((_, key) => { if (data[key].label === item.label) { data[key].checked = !item.checked; } }); - updateOptions([...data]); + setData([...data]); onChange(data); } @@ -42,16 +42,14 @@ const MultiCheckbox = ({ options, onChange }) => { style={style.itemStyle} onClick={() => toggle(item)} > - + {item.label} ); })} ); -}; - -export default MultiCheckbox; +} ``` ```jsx From d424daf6cb247c1839f158d96d2addfcf606c63c Mon Sep 17 00:00:00 2001 From: rishichawda Date: Mon, 25 Feb 2019 13:25:26 +0530 Subject: [PATCH 08/12] refactor(multiselectcheckbox): update component name --- snippets/MultiselectCheckbox.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index bdb6ef5e8..5fe3cb13c 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -20,7 +20,7 @@ const style = { } }; -export default function MultiCheckbox ({ options, onChange }) { +export default function MultiselectCheckbox ({ options, onChange }) { const [data, setData] = React.useState(options); function toggle (item) { @@ -56,7 +56,7 @@ export default function MultiCheckbox ({ options, onChange }) { const options = [{ label: "Item One" }, { label: "Item Two" }]; ReactDOM.render( - { console.log(data); From f5ea9d6c66500a141bbf70f7802dc43fbcbdaba8 Mon Sep 17 00:00:00 2001 From: Rishi Kumar Chawda Date: Tue, 26 Feb 2019 14:46:49 +0530 Subject: [PATCH 09/12] fix(multiselectcheckbox): remove export & imports --- snippets/MultiselectCheckbox.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index 5fe3cb13c..eabda25e7 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -7,8 +7,6 @@ Initially, all the items in the `options` array only have label ( and / or other An `onChange` prop can be passed to the `MultiCheckbox` component to get the updated list on every change event within the list. ```jsx -import React from 'react'; - const style = { listContainer: { listStyle: 'none', @@ -20,7 +18,7 @@ const style = { } }; -export default function MultiselectCheckbox ({ options, onChange }) { +function MultiselectCheckbox ({ options, onChange }) { const [data, setData] = React.useState(options); function toggle (item) { From 8af3ef62694f14b98ffdb9de7aa907bf5f411b12 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 27 Feb 2019 15:11:21 +0200 Subject: [PATCH 10/12] Update MultiselectCheckbox.md --- snippets/MultiselectCheckbox.md | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index eabda25e7..c843c94e4 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -1,10 +1,11 @@ ### MultiselectCheckbox -Renders a checkbox list with the `options` provided through `props`. +Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component. . -Initially, all the items in the `options` array only have label ( and / or other data provided by the user ) and `checked` is `undefined` if not provided. On clicking any of the items, the `checked` value for the item is toggled and state is updated with the new list. - -An `onChange` prop can be passed to the `MultiCheckbox` component to get the updated list on every change event within the list. +Use `React.setState()` to create a `data` state variable and set its initial value equal to the `options` prop. +Create a function `toggle` that is used to toggle the `checked` to update the `data` state variable and call the `onChange` callbac passed via the component's props. +Render a `
    ` element and use `Array.prototype.map()` to map the `data` state variable to individual `
  • ` elements with `` elements as their children. +Each `` element has the `type='checkbox'` attribute and is marked as `readOnly`, as its click events are handled by the parent `
  • ` element's `onClick` handler. ```jsx const style = { @@ -21,11 +22,10 @@ const style = { function MultiselectCheckbox ({ options, onChange }) { const [data, setData] = React.useState(options); - function toggle (item) { + const toggle = (item) => { data.map((_, key) => { - if (data[key].label === item.label) { + if (data[key].label === item.label) data[key].checked = !item.checked; - } }); setData([...data]); onChange(data); @@ -64,8 +64,5 @@ ReactDOM.render( ); ``` -#### Notes: - -- The checkbox input in this case is kept as `readOnly` since click events are handled for the item ( label + input ) and not the `input` alone. - -expertise: 0 + + From 6edb6847317b0f8582ad56dfcbd4c0955dc30b23 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 27 Feb 2019 15:11:37 +0200 Subject: [PATCH 11/12] Update MultiselectCheckbox.md --- snippets/MultiselectCheckbox.md | 1 + 1 file changed, 1 insertion(+) diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index c843c94e4..d10992ca2 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -65,4 +65,5 @@ ReactDOM.render( ``` + From cbb8c6064e3886bec04de9bc6cf33d5206b175b5 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 27 Feb 2019 15:11:51 +0200 Subject: [PATCH 12/12] Update MultiselectCheckbox.md --- snippets/MultiselectCheckbox.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index d10992ca2..6c10822a8 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -1,6 +1,6 @@ ### MultiselectCheckbox -Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component. . +Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component. Use `React.setState()` to create a `data` state variable and set its initial value equal to the `options` prop. Create a function `toggle` that is used to toggle the `checked` to update the `data` state variable and call the `onChange` callbac passed via the component's props.