[EuiAccordion] Allow external control (#3614)

* call onToggle * test it * onToggle returns expected state after click * invert isOpen for docs
elastic · Jun 16, 2020 · 2c47d9c · 2c47d9c
1 parent e5f54e6
commit 2c47d9c
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,7 +11,7 @@
 - Updated `logoElastic` to meet brand guidelines ([#3613](https://github.com/elastic/eui/pull/3613))
 - Allowed user to enter hexcode for colors in `EuiStat` ([#3617](https://github.com/elastic/eui/pull/3617))
 - Extended `CommonProps` in `EuiColorPalettePickerPaletteTextProps`, `EuiColorPalettePickerPaletteFixedProps` and `EuiColorPalettePickerPaletteGradientProps` types ([#3616](https://github.com/elastic/eui/pull/3616))
-
+- Updated `onToggle` callback in `EuiAccordion` to  allow for external state control ([#3614](https://github.com/elastic/eui/pull/3614))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js
@@ -332,7 +332,7 @@ export const AccordionExample = {
       demo: <AccordionForm />,
     },
     {
-      title: 'Force accordion state',
+      title: 'External state control',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -346,7 +346,8 @@ export const AccordionExample = {
       text: (
         <p>
           Use the <EuiCode>forceState</EuiCode> prop to control open and close
-          state.
+          state. The <EuiCode>onToggle</EuiCode> callback prop can still be used
+          to update external state or perform side effects.
         </p>
       ),
       snippet: accordionForceStateSnippet,

diff --git a/src-docs/src/views/accordion/accordion_forceState.js b/src-docs/src/views/accordion/accordion_forceState.js
@@ -29,6 +29,12 @@ export default () => {
     setID(id);
   };
 
+  const onToggle = isOpen => {
+    const newState = isOpen ? 'open' : 'closed';
+    setTrigger(newState);
+    setID(`${idPrefix}--${newState}`);
+  };
+
   return (
     <div>
       <EuiButtonGroup
@@ -41,6 +47,7 @@ export default () => {
       <EuiAccordion
         id="accordion--forceState"
         forceState={trigger}
+        onToggle={onToggle}
         buttonContent="I am controlled via prop">
         <EuiText>
           <p>

diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiAccordion behavior closes when clicked twice 1`] = `
 <EuiAccordion
   arrowDisplay="left"
-  id="9"
+  id="10"
   initialIsOpen={false}
   paddingSize="none"
 >
@@ -14,7 +14,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
       className="euiAccordion__triggerWrapper"
     >
       <button
-        aria-controls="9"
+        aria-controls="10"
         aria-expanded={false}
         className="euiAccordion__button"
         onClick={[Function]}
@@ -42,7 +42,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
     </div>
     <div
       className="euiAccordion__childWrapper"
-      id="9"
+      id="10"
     >
       <EuiResizeObserver
         onResize={[Function]}
@@ -61,7 +61,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
 exports[`EuiAccordion behavior opens when clicked once 1`] = `
 <EuiAccordion
   arrowDisplay="left"
-  id="8"
+  id="9"
   initialIsOpen={false}
   paddingSize="none"
 >
@@ -72,7 +72,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
       className="euiAccordion__triggerWrapper"
     >
       <button
-        aria-controls="8"
+        aria-controls="9"
         aria-expanded={true}
         className="euiAccordion__button"
         onClick={[Function]}
@@ -100,7 +100,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
     </div>
     <div
       className="euiAccordion__childWrapper"
-      id="8"
+      id="9"
     >
       <EuiResizeObserver
         onResize={[Function]}

diff --git a/src/components/accordion/accordion.test.tsx b/src/components/accordion/accordion.test.tsx
@@ -117,6 +117,21 @@ describe('EuiAccordion', () => {
 
         expect(component).toMatchSnapshot();
       });
+
+      it('accepts and calls an optional callback on click', () => {
+        const onToggleHandler = jest.fn();
+        const component = mount(
+          <EuiAccordion
+            id={getId()}
+            onToggle={onToggleHandler}
+            forceState="closed"
+          />
+        );
+
+        component.find('button').simulate('click');
+        expect(onToggleHandler).toBeCalled();
+        expect(onToggleHandler).toBeCalledWith(true);
+      });
     });
   });
 

diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
@@ -121,15 +121,19 @@ export class EuiAccordion extends Component<
 
   onToggle = () => {
     const { forceState } = this.props;
-    if (forceState) return this.setState({ isOpen: forceState === 'open' });
-    this.setState(
-      prevState => ({
-        isOpen: !prevState.isOpen,
-      }),
-      () => {
-        this.props.onToggle && this.props.onToggle(this.state.isOpen);
-      }
-    );
+    if (forceState) {
+      this.props.onToggle &&
+        this.props.onToggle(forceState === 'open' ? false : true);
+    } else {
+      this.setState(
+        prevState => ({
+          isOpen: !prevState.isOpen,
+        }),
+        () => {
+          this.props.onToggle && this.props.onToggle(this.state.isOpen);
+        }
+      );
+    }
   };
 
   setChildContentRef = (node: HTMLDivElement | null) => {