From d6f814a17e8c38d65352f5d45e1b03958fceb307 Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Tue, 18 Oct 2022 16:14:42 -0400 Subject: [PATCH 1/5] chore(ToggleGroup): converted examples to typescript --- .../ToggleGroup/examples/ToggleGroup.md | 196 +----------------- .../examples/ToggleGroupCompact.tsx | 37 ++++ .../examples/ToggleGroupDefaultMultiple.tsx | 50 +++++ .../examples/ToggleGroupDefaultSingle.tsx | 32 +++ .../ToggleGroup/examples/ToggleGroupIcon.tsx | 49 +++++ .../examples/ToggleGroupTextIcon.tsx | 52 +++++ 6 files changed, 225 insertions(+), 191 deletions(-) create mode 100644 packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx create mode 100644 packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx create mode 100644 packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx create mode 100644 packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx create mode 100644 packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md index ba0723bb5c2..c9ae050331a 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md @@ -14,207 +14,21 @@ import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square ## Examples ### Default with multiple selectable -```js -import React from 'react'; -import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core'; - -class DefaultToggleGroupExample extends React.Component { - constructor(props) { - super(props); - this.state = { - isSelected: { - first: false, - second: false, - disableAll: false - } - }; - this.handleItemClick = (isSelected, event) => { - const id = event.currentTarget.id; - this.setState(prevState => { - prevState.isSelected[id] = isSelected; - return { - isSelected: prevState.isSelected - }; - }); - }; - this.disableAllClick = () => { - this.setState(prevState => ({ disableAll: !prevState.disableAll })); - }; - } - - render() { - const { isSelected } = this.state; - - return ( - - - - - - - - - - - - - ); - } -} +```ts file="./ToggleGroupDefaultMultiple.tsx" ``` ### Default with single selectable -```js -import React from 'react'; -import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; - -class DefaultAsRadioToggleGroupExample extends React.Component { - constructor(props) { - super(props); - this.state = { - isSelected: "" - }; - this.handleItemClick = (isSelected, event) => { - const id = event.currentTarget.id; - this.setState({ isSelected: id }); - }; - } - - render() { - const { isSelected } = this.state; - - return ( - - - - - - ); - } -} +```ts file="./ToggleGroupDefaultSingle.tsx" ``` ### Icons -```js -import React from 'react'; -import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; -import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon'; -import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; -import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon'; - -class IconToggleGroupExample extends React.Component { - constructor(props) { - super(props); - this.state = { - isSelected: { - "icons-1": false, - "icons-2": false, - "icons-3": true - } - }; - this.handleItemClick = (isSelected, event) => { - const id = event.currentTarget.id; - this.setState(prevState => { - prevState.isSelected[id] = isSelected; - return { - isSelected: prevState.isSelected - }; - }); - }; - } - - render() { - const { isSelected } = this.state; - return ( - - } aria-label="copy icon button" buttonId="icons-1" isSelected={isSelected["icons-1"]} onChange={this.handleItemClick} /> - } aria-label="undo icon button" buttonId="icons-2" isSelected={isSelected["icons-2"]} onChange={this.handleItemClick} /> - } aria-label="share square icon button" buttonId="icons-3" isSelected={isSelected["icons-3"]} onChange={this.handleItemClick} /> - - ); - } -} +```ts file="./ToggleGroupIcon.tsx" ``` ### Text and icons -```js -import React from 'react'; -import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; -import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon'; -import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; -import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon'; - -class TextIconToggleGroupExample extends React.Component { - constructor(props) { - super(props); - this.state = { - isSelected: { - "text-icons-1": false, - "text-icons-2": false, - "text-icons-3": true - } - }; - this.handleItemClick = (isSelected, event) => { - const id = event.currentTarget.id; - this.setState(prevState => { - prevState.isSelected[id] = isSelected; - return { - isSelected: prevState.isSelected - }; - }); - }; - } - - render() { - const { isSelected } = this.state; - return ( - - } text="Copy" aria-label="copy icon button" buttonId="text-icons-1" isSelected={isSelected["text-icons-1"]} onChange={this.handleItemClick} /> - } text="Undo" aria-label="undo icon button" buttonId="text-icons-2" isSelected={isSelected["text-icons-2"]} onChange={this.handleItemClick} /> - } text="Share" aria-label="share square icon button" buttonId="text-icons-3" isSelected={isSelected["text-icons-3"]} onChange={this.handleItemClick} /> - - ); - } -} +```ts file="./ToggleGroupTextIcon.tsx" ``` ### Compact variant -```js -import React from 'react'; -import { ToggleGroup, ToggleGroupItem, ToggleGroupVariant } from '@patternfly/react-core'; - -class CompactToggleGroupExample extends React.Component { -constructor(props) { - super(props); - this.state = { - isSelected: { - "compact-1": false, - "compact-2": false - } - }; - this.handleItemClick = (isSelected, event) => { - const id = event.currentTarget.id; - this.setState(prevState => { - prevState.isSelected[id] = isSelected; - return { - isSelected: prevState.isSelected - }; - }); - }; - } - - render() { - const { isSelected } = this.state; - - return ( - - - - - - ); - } -} +```ts file="./ToggleGroupCompact.tsx" ``` diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx new file mode 100644 index 00000000000..a198bd8b6b7 --- /dev/null +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; + +export const ToggleGroupCompact: React.FunctionComponent = () => { + const [state, setState] = React.useState({ + isSelected: { + 'compact-1': false, + 'compact-2': false + } + }); + const handleItemClick = (isSelected, event) => { + const id = event.currentTarget.id; + setState(prevState => { + prevState.isSelected[id] = isSelected; + return { + isSelected: prevState.isSelected + }; + }); + }; + return ( + + + + + + ); +}; diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx new file mode 100644 index 00000000000..491d1d32f63 --- /dev/null +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core'; + +export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => { + const [state, setState] = React.useState({ + isSelected: { + first: false, + second: false + } + }); + const [disableAll, setDisableAll] = React.useState(false); + const handleItemClick = (isSelected, event) => { + const id = event.currentTarget.id; + setState(prevState => { + prevState.isSelected[id] = isSelected; + return { + isSelected: prevState.isSelected + }; + }); + }; + const disableAllClick = () => { + setDisableAll(!disableAll); + }; + return ( + + + + + + + + + + + + + ); +}; diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx new file mode 100644 index 00000000000..43bd7e185ce --- /dev/null +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; + +export const ToggleGroupDefaultSingle: React.FunctionComponent = () => { + const [isSelected, setIsSelected] = React.useState(''); + const handleItemClick = (isSelected, event) => { + const id = event.currentTarget.id; + setIsSelected(id); + }; + return ( + + + + + + ); +}; diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx new file mode 100644 index 00000000000..7dadb5db3ff --- /dev/null +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; +import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon'; +import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; +import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon'; + +export const ToggleGroupIcon: React.FunctionComponent = () => { + const [state, setState] = React.useState({ + isSelected: { + 'icons-1': false, + 'icons-2': false, + 'icons-3': true + } + }); + const handleItemClick = (isSelected, event) => { + const id = event.currentTarget.id; + setState(prevState => { + prevState.isSelected[id] = isSelected; + return { + isSelected: prevState.isSelected + }; + }); + }; + return ( + + } + aria-label="copy icon button" + buttonId="icons-1" + isSelected={state.isSelected['icons-1']} + onChange={handleItemClick} + /> + } + aria-label="undo icon button" + buttonId="icons-2" + isSelected={state.isSelected['icons-2']} + onChange={handleItemClick} + /> + } + aria-label="share square icon button" + buttonId="icons-3" + isSelected={state.isSelected['icons-3']} + onChange={handleItemClick} + /> + + ); +}; diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx new file mode 100644 index 00000000000..550e821dfed --- /dev/null +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; +import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon'; +import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; +import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon'; + +export const ToggleGroupIcon: React.FunctionComponent = () => { + const [state, setState] = React.useState({ + isSelected: { + 'text-icons-1': false, + 'text-icons-2': false, + 'text-icons-3': true + } + }); + const handleItemClick = (isSelected, event) => { + const id = event.currentTarget.id; + setState(prevState => { + prevState.isSelected[id] = isSelected; + return { + isSelected: prevState.isSelected + }; + }); + }; + return ( + + } + text="Copy" + aria-label="copy icon button" + buttonId="text-icons-1" + isSelected={state.isSelected['text-icons-1']} + onChange={handleItemClick} + /> + } + text="Undo" + aria-label="undo icon button" + buttonId="text-icons-2" + isSelected={state.isSelected['text-icons-2']} + onChange={handleItemClick} + /> + } + text="Share" + aria-label="share square icon button" + buttonId="text-icons-3" + isSelected={state.isSelected['text-icons-3']} + onChange={handleItemClick} + /> + + ); +}; From bef32de9e51e5811b35e1df7bf747ae4abb2f5c0 Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Tue, 25 Oct 2022 15:37:09 -0400 Subject: [PATCH 2/5] fix(ToggleGroup): refactored states and typed function arguments --- .../examples/ToggleGroupCompact.tsx | 26 ++++++------- .../examples/ToggleGroupDefaultMultiple.tsx | 26 ++++++------- .../examples/ToggleGroupDefaultSingle.tsx | 14 +++---- .../ToggleGroup/examples/ToggleGroupIcon.tsx | 32 +++++++--------- .../examples/ToggleGroupTextIcon.tsx | 37 ++++++++----------- 5 files changed, 58 insertions(+), 77 deletions(-) diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx index a198bd8b6b7..f83607fd6eb 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx @@ -2,33 +2,29 @@ import React from 'react'; import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; export const ToggleGroupCompact: React.FunctionComponent = () => { - const [state, setState] = React.useState({ - isSelected: { - 'compact-1': false, - 'compact-2': false - } + const [isSelected, setIsSelected] = React.useState({ + 'toggle-group-compact-1': false, + 'toggle-group-compact-2': false }); - const handleItemClick = (isSelected, event) => { + const handleItemClick = (isSelected: boolean, event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => { const id = event.currentTarget.id; - setState(prevState => { - prevState.isSelected[id] = isSelected; - return { - isSelected: prevState.isSelected - }; + setIsSelected(prevIsSelected => { + prevIsSelected[id] = isSelected; + return { ...prevIsSelected }; }); }; return ( diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx index 491d1d32f63..455804cdc22 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx @@ -2,20 +2,16 @@ import React from 'react'; import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core'; export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => { - const [state, setState] = React.useState({ - isSelected: { - first: false, - second: false - } + const [isSelected, setIsSelected] = React.useState({ + 'toggle-group-multiple-1': false, + 'toggle-group-multiple-2': false }); const [disableAll, setDisableAll] = React.useState(false); - const handleItemClick = (isSelected, event) => { + const handleItemClick = (isSelected: boolean, event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => { const id = event.currentTarget.id; - setState(prevState => { - prevState.isSelected[id] = isSelected; - return { - isSelected: prevState.isSelected - }; + setIsSelected(prevIsSelected => { + prevIsSelected[id] = isSelected; + return { ...prevIsSelected }; }); }; const disableAllClick = () => { @@ -31,15 +27,15 @@ export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => { diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx index 43bd7e185ce..608c8d93503 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx @@ -3,7 +3,7 @@ import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; export const ToggleGroupDefaultSingle: React.FunctionComponent = () => { const [isSelected, setIsSelected] = React.useState(''); - const handleItemClick = (isSelected, event) => { + const handleItemClick = (isSelected: boolean, event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => { const id = event.currentTarget.id; setIsSelected(id); }; @@ -11,20 +11,20 @@ export const ToggleGroupDefaultSingle: React.FunctionComponent = () => { diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx index 7dadb5db3ff..0d148e605d5 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx @@ -5,20 +5,16 @@ import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon'; export const ToggleGroupIcon: React.FunctionComponent = () => { - const [state, setState] = React.useState({ - isSelected: { - 'icons-1': false, - 'icons-2': false, - 'icons-3': true - } + const [isSelected, setIsSelected] = React.useState({ + 'toggle-group-icons-1': false, + 'toggle-group-icons-2': false, + 'toggle-group-icons-3': true }); - const handleItemClick = (isSelected, event) => { + const handleItemClick = (isSelected: boolean, event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => { const id = event.currentTarget.id; - setState(prevState => { - prevState.isSelected[id] = isSelected; - return { - isSelected: prevState.isSelected - }; + setIsSelected(prevIsSelected => { + prevIsSelected[id] = isSelected; + return { ...prevIsSelected }; }); }; return ( @@ -26,22 +22,22 @@ export const ToggleGroupIcon: React.FunctionComponent = () => { } aria-label="copy icon button" - buttonId="icons-1" - isSelected={state.isSelected['icons-1']} + buttonId="toggle-group-icons-1" + isSelected={isSelected['toggle-group-icons-1']} onChange={handleItemClick} /> } aria-label="undo icon button" - buttonId="icons-2" - isSelected={state.isSelected['icons-2']} + buttonId="toggle-group-icons-2" + isSelected={isSelected['toggle-group-icons-2']} onChange={handleItemClick} /> } aria-label="share square icon button" - buttonId="icons-3" - isSelected={state.isSelected['icons-3']} + buttonId="toggle-group-icons-3" + isSelected={isSelected['toggle-group-icons-3']} onChange={handleItemClick} /> diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx index 550e821dfed..244c54662b4 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx @@ -5,46 +5,39 @@ import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon'; export const ToggleGroupIcon: React.FunctionComponent = () => { - const [state, setState] = React.useState({ - isSelected: { - 'text-icons-1': false, - 'text-icons-2': false, - 'text-icons-3': true - } + const [isSelected, setIsSelected] = React.useState({ + 'text-icons-1': false, + 'text-icons-2': false, + 'text-icons-3': true }); - const handleItemClick = (isSelected, event) => { + const handleItemClick = (isSelected: boolean, event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => { const id = event.currentTarget.id; - setState(prevState => { - prevState.isSelected[id] = isSelected; - return { - isSelected: prevState.isSelected - }; + setIsSelected(prevIsSelected => { + prevIsSelected[id] = isSelected; + return { ...prevIsSelected }; }); }; return ( - + } text="Copy" - aria-label="copy icon button" - buttonId="text-icons-1" - isSelected={state.isSelected['text-icons-1']} + buttonId="toggle-group-text-icons-1" + isSelected={isSelected['toggle-group-text-icons-1']} onChange={handleItemClick} /> } text="Undo" - aria-label="undo icon button" - buttonId="text-icons-2" - isSelected={state.isSelected['text-icons-2']} + buttonId="toggle-group-text-icons-2" + isSelected={isSelected['toggle-group-text-icons-2']} onChange={handleItemClick} /> } text="Share" - aria-label="share square icon button" - buttonId="text-icons-3" - isSelected={state.isSelected['text-icons-3']} + buttonId="toggle-group-text-icons-3" + isSelected={isSelected['toggle-group-text-icons-3']} onChange={handleItemClick} /> From 471d4af746d3b5029133a1ad5ac4bbf8d187a9e1 Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Thu, 27 Oct 2022 12:04:43 -0400 Subject: [PATCH 3/5] fix(ToggleGroup): removed unnecessary text --- .../src/components/ToggleGroup/examples/ToggleGroupIcon.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx index 0d148e605d5..e030b7548fd 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx @@ -21,21 +21,21 @@ export const ToggleGroupIcon: React.FunctionComponent = () => { } - aria-label="copy icon button" + aria-label="copy" buttonId="toggle-group-icons-1" isSelected={isSelected['toggle-group-icons-1']} onChange={handleItemClick} /> } - aria-label="undo icon button" + aria-label="undo" buttonId="toggle-group-icons-2" isSelected={isSelected['toggle-group-icons-2']} onChange={handleItemClick} /> } - aria-label="share square icon button" + aria-label="share square" buttonId="toggle-group-icons-3" isSelected={isSelected['toggle-group-icons-3']} onChange={handleItemClick} From f4a4d69417c2a1ab2c3d2b7e996fe621bf74dee2 Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Mon, 7 Nov 2022 01:18:08 -0500 Subject: [PATCH 4/5] fix(ToggleGroup): fixed requested changes --- .../components/ToggleGroup/examples/ToggleGroupCompact.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx index f83607fd6eb..ea64b90b02b 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx @@ -8,10 +8,7 @@ export const ToggleGroupCompact: React.FunctionComponent = () => { }); const handleItemClick = (isSelected: boolean, event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => { const id = event.currentTarget.id; - setIsSelected(prevIsSelected => { - prevIsSelected[id] = isSelected; - return { ...prevIsSelected }; - }); + setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected })); }; return ( From daf9dcacd4a243954fd21f5ff0ac5fcd12334801 Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Mon, 7 Nov 2022 01:18:25 -0500 Subject: [PATCH 5/5] fix(ToggleGroup): fixed requested changes --- .../ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx | 5 +---- .../src/components/ToggleGroup/examples/ToggleGroupIcon.tsx | 5 +---- .../components/ToggleGroup/examples/ToggleGroupTextIcon.tsx | 5 +---- 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx index 455804cdc22..aa05d672585 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx @@ -9,10 +9,7 @@ export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => { const [disableAll, setDisableAll] = React.useState(false); const handleItemClick = (isSelected: boolean, event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => { const id = event.currentTarget.id; - setIsSelected(prevIsSelected => { - prevIsSelected[id] = isSelected; - return { ...prevIsSelected }; - }); + setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected })); }; const disableAllClick = () => { setDisableAll(!disableAll); diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx index e030b7548fd..7bb0eef13f1 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx @@ -12,10 +12,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => { }); const handleItemClick = (isSelected: boolean, event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => { const id = event.currentTarget.id; - setIsSelected(prevIsSelected => { - prevIsSelected[id] = isSelected; - return { ...prevIsSelected }; - }); + setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected })); }; return ( diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx index 244c54662b4..2755727da5f 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx @@ -12,10 +12,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => { }); const handleItemClick = (isSelected: boolean, event: React.MouseEvent | React.KeyboardEvent | MouseEvent) => { const id = event.currentTarget.id; - setIsSelected(prevIsSelected => { - prevIsSelected[id] = isSelected; - return { ...prevIsSelected }; - }); + setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected })); }; return (