From 03cfe42b50c39ad4eb62401e2faef19025696c8a Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Mon, 24 Apr 2023 13:32:08 -0400 Subject: [PATCH] feat(ExpandableSection): Add event to onToggle --- .../components/ExpandableSection/ExpandableSection.tsx | 10 +++++----- .../examples/ExpandableSectionBasic.tsx | 2 +- .../examples/ExpandableSectionCustomToggle.tsx | 2 +- .../examples/ExpandableSectionDisclosure.tsx | 2 +- .../examples/ExpandableSectionIndented.tsx | 2 +- .../examples/ExpandableSectionTruncateExpansion.tsx | 2 +- .../ExpandableSectionDemo/ExpandableSectionDemo.tsx | 4 ++-- .../ExpandableSectionTruncateDemo.tsx | 4 ++-- 8 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx index e280e01da0a..1607d0de06c 100644 --- a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx +++ b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx @@ -38,7 +38,7 @@ export interface ExpandableSectionProps extends React.HTMLProps /** Callback function to toggle the expandable section. Detached expandable sections should * use the onToggle property of the expandable section toggle sub-component. */ - onToggle?: (isExpanded: boolean) => void; + onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void; /** React node that appears in the attached toggle in place of the toggleText property. */ toggleContent?: React.ReactNode; /** Text that appears in the attached toggle. */ @@ -96,7 +96,7 @@ export class ExpandableSection extends React.Component undefined, + onToggle: (event, isExpanded): void => undefined, isActive: false, isDetached: false, displaySize: 'default', @@ -202,8 +202,8 @@ export class ExpandableSection extends React.Component { - this.setState({ isExpanded: isOpen }, () => onToggleProp(this.state.isExpanded)); + onToggle = (event, isOpen) => { + this.setState({ isExpanded: isOpen }, () => onToggleProp(event, this.state.isExpanded)); }; } @@ -219,7 +219,7 @@ export class ExpandableSection extends React.Component onToggle(!propOrStateIsExpanded)} + onClick={(event) => onToggle(event, !propOrStateIsExpanded)} > {variant !== ExpandableSectionVariant.truncate && ( diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx index 92df496258b..60246ffcaca 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx @@ -4,7 +4,7 @@ import { ExpandableSection } from '@patternfly/react-core'; export const ExpandableSectionBasic: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); - const onToggle = (isExpanded: boolean) => { + const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { setIsExpanded(isExpanded); }; diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx index 7601ae3944c..f7a74adfdbb 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx @@ -5,7 +5,7 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle export const ExpandableSectionCustomToggle: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); - const onToggle = (isExpanded: boolean) => { + const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { setIsExpanded(isExpanded); }; diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx index f6bd9885601..9aca30644eb 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx @@ -4,7 +4,7 @@ import { ExpandableSection } from '@patternfly/react-core'; export const ExpandableSectionDisclosure: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); - const onToggle = (isExpanded: boolean) => { + const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { setIsExpanded(isExpanded); }; diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx index 49b73de7f1a..182d9d458c7 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx @@ -4,7 +4,7 @@ import { ExpandableSection } from '@patternfly/react-core'; export const ExpandableSectionIndented: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); - const onToggle = (isExpanded: boolean) => { + const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { setIsExpanded(isExpanded); }; diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx index db9238512aa..eaa4082186a 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx @@ -4,7 +4,7 @@ import { ExpandableSection, ExpandableSectionVariant } from '@patternfly/react-c export const ExpandableSectionTruncateExpansion: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); - const onToggle = (isExpanded: boolean) => { + const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { setIsExpanded(isExpanded); }; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionDemo.tsx index 99d724dccee..4c5a5f68cca 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionDemo.tsx @@ -19,9 +19,9 @@ export class ExpandableSectionDemo extends React.Component this.setState({ isExpanded: isOpen }); + onToggle = (_event: React.MouseEvent, isOpen: boolean) => this.setState({ isExpanded: isOpen }); onToggleDetached = (isOpen: boolean) => this.setState({ isDetachedExpanded: isOpen }); - onToggleDisclosure = (isOpen: boolean) => this.setState({ isDisclosureExpanded: isOpen }); + onToggleDisclosure = (_event: React.MouseEvent, isOpen: boolean) => this.setState({ isDisclosureExpanded: isOpen }); render() { const { isExpanded, isDetachedExpanded, isDisclosureExpanded } = this.state; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionTruncateDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionTruncateDemo.tsx index 405438121fe..ab3e988b362 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionTruncateDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionTruncateDemo.tsx @@ -5,11 +5,11 @@ export const ExpandableSectionTruncateDemo: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const [isResizableExpanded, setIsResizableExpanded] = React.useState(false); - const onToggle = (isExpanded: boolean) => { + const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { setIsExpanded(isExpanded); }; - const onResizableToggle = (isResizableExpanded: boolean) => { + const onResizableToggle = (_event: React.MouseEvent, isResizableExpanded: boolean) => { setIsResizableExpanded(isResizableExpanded); };