From 4284f4f8fceb465a46635be166bde83a69a16c20 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 29 May 2019 11:28:06 -0500 Subject: [PATCH 1/5] add onToggle callback to EuiAccordion --- src/components/accordion/accordion.js | 15 ++++++++++++--- src/components/accordion/index.d.ts | 3 ++- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/accordion/accordion.js b/src/components/accordion/accordion.js index ca844827abf..ce183d757fc 100644 --- a/src/components/accordion/accordion.js +++ b/src/components/accordion/accordion.js @@ -50,9 +50,14 @@ export class EuiAccordion extends Component { } onToggle() { - this.setState(prevState => ({ - isOpen: !prevState.isOpen, - })); + this.setState( + prevState => ({ + isOpen: !prevState.isOpen, + }), + () => { + this.props.onToggle && this.props.onToggle(this.state.isOpen); + } + ); } setChildContentRef = node => { @@ -183,6 +188,10 @@ EuiAccordion.propTypes = { * The padding around the exposed accordion content. */ paddingSize: PropTypes.oneOf(PADDING_SIZES), + /** + * Optional callback method called on open and close with a single `isOpen` parameter + */ + onToggle: PropTypes.func, }; EuiAccordion.defaultProps = { diff --git a/src/components/accordion/index.d.ts b/src/components/accordion/index.d.ts index f20ce142e4f..63c0dfc9996 100644 --- a/src/components/accordion/index.d.ts +++ b/src/components/accordion/index.d.ts @@ -11,10 +11,11 @@ declare module '@elastic/eui' { buttonContent?: ReactNode; extraAction?: ReactNode; initialIsOpen?: boolean; + onToggle?: (isOpen: boolean) => void; paddingSize?: EuiAccordionSize; } export class EuiAccordion extends Component< CommonProps & HTMLAttributes & EuiAccordionProps - > {} + > {} } From 28c46313302428afc388d08c42bb1b121b0d74f4 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 29 May 2019 11:29:11 -0500 Subject: [PATCH 2/5] add onToggle tests --- .../__snapshots__/accordion.test.js.snap | 104 ++++++++++++++++++ src/components/accordion/accordion.test.js | 18 +++ 2 files changed, 122 insertions(+) diff --git a/src/components/accordion/__snapshots__/accordion.test.js.snap b/src/components/accordion/__snapshots__/accordion.test.js.snap index 120e8bb7edb..ab19c2f5905 100644 --- a/src/components/accordion/__snapshots__/accordion.test.js.snap +++ b/src/components/accordion/__snapshots__/accordion.test.js.snap @@ -1,5 +1,109 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`EuiAccordion behavior accepts and calls an optional callback on open and close 1`] = ` + +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+
+ +`; + exports[`EuiAccordion behavior closes when clicked twice 1`] = ` { expect(component).toMatchSnapshot(); }); + + it('accepts and calls an optional callback on open and close', () => { + const onToggleHandler = sinon.stub(); + const component = mount( + + ); + + component.find('button').simulate('click'); + sinon.assert.calledOnce(onToggleHandler); + sinon.assert.calledWith(onToggleHandler, true); + + component.find('button').simulate('click'); + sinon.assert.calledTwice(onToggleHandler); + sinon.assert.calledWith(onToggleHandler, false); + + expect(component).toMatchSnapshot(); + }); }); }); From c276fa3411b7522a236b1a20764b655fbe6fa065 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 29 May 2019 11:30:25 -0500 Subject: [PATCH 3/5] add docs example for onToggle prop --- .../src/views/accordion/accordion_callback.js | 22 +++++++++++++ .../src/views/accordion/accordion_example.js | 33 +++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 src-docs/src/views/accordion/accordion_callback.js diff --git a/src-docs/src/views/accordion/accordion_callback.js b/src-docs/src/views/accordion/accordion_callback.js new file mode 100644 index 00000000000..aa2b204347e --- /dev/null +++ b/src-docs/src/views/accordion/accordion_callback.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import { EuiAccordion, EuiText, EuiCode } from '../../../../src/components'; + +export default () => ( +
+ + console.log(`EuiAccordion is now ${isOpen ? 'open' : 'closed'}`) + } + paddingSize="l"> + +

+ Any content inside of EuiAccordion will appear + here. +

+ + +
+); diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js index 047954390d4..29535eb7f9b 100644 --- a/src-docs/src/views/accordion/accordion_example.js +++ b/src-docs/src/views/accordion/accordion_example.js @@ -71,6 +71,18 @@ const accordionOpenSnippet = ` `; +import AccordionCallback from './accordion_callback'; +const accordionCallbackSource = require('!!raw-loader!./accordion_callback'); +const accordionCallbackHtml = renderToHtml(AccordionCallback); +const accordionCallbackSnippet = ` handleOnToggle(isOpen)} + > + + +`; + import AccordionGrow from './accordion_grow'; const accordionGrowSource = require('!!raw-loader!./accordion_grow'); const accordionGrowHtml = renderToHtml(AccordionGrow); @@ -204,6 +216,27 @@ export const AccordionExample = { snippet: accordionOpenSnippet, demo: , }, + { + title: 'Accordion can call a function on open and close', + source: [ + { + type: GuideSectionTypes.JS, + code: accordionCallbackSource, + }, + { + type: GuideSectionTypes.HTML, + code: accordionCallbackHtml, + }, + ], + text: ( +

+ Use the onToggle prop to pass a callback method + that will be called on open and close. +

+ ), + snippet: accordionCallbackSnippet, + demo: , + }, { title: 'Accordion content can dynamically change height', source: [ From 806897d4ec582d6e4e98d002df28fc5ae0c54cac Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 29 May 2019 14:21:23 -0500 Subject: [PATCH 4/5] use jest.fn; remove snapshot --- .../__snapshots__/accordion.test.js.snap | 104 ------------------ src/components/accordion/accordion.test.js | 13 +-- 2 files changed, 5 insertions(+), 112 deletions(-) diff --git a/src/components/accordion/__snapshots__/accordion.test.js.snap b/src/components/accordion/__snapshots__/accordion.test.js.snap index ab19c2f5905..120e8bb7edb 100644 --- a/src/components/accordion/__snapshots__/accordion.test.js.snap +++ b/src/components/accordion/__snapshots__/accordion.test.js.snap @@ -1,109 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiAccordion behavior accepts and calls an optional callback on open and close 1`] = ` - -
- -
- -
- -
- -
- -
- -
-
-
- -
-
- -`; - exports[`EuiAccordion behavior closes when clicked twice 1`] = ` { }); it('accepts and calls an optional callback on open and close', () => { - const onToggleHandler = sinon.stub(); + const onToggleHandler = jest.fn(); const component = mount( ); component.find('button').simulate('click'); - sinon.assert.calledOnce(onToggleHandler); - sinon.assert.calledWith(onToggleHandler, true); + expect(onToggleHandler).toBeCalled(); + expect(onToggleHandler).toBeCalledWith(true); component.find('button').simulate('click'); - sinon.assert.calledTwice(onToggleHandler); - sinon.assert.calledWith(onToggleHandler, false); - - expect(component).toMatchSnapshot(); + expect(onToggleHandler).toBeCalled(); + expect(onToggleHandler).toBeCalledWith(false); }); }); }); From 8e83cdca634126ddc803d926b80690e52b81116a Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 29 May 2019 14:29:52 -0500 Subject: [PATCH 5/5] #1974 CL entry --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f6424248fdc..51087f17b3d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,8 +2,9 @@ - Converted `EuiTableRowCellCheckbox` to TS ([#1964](https://github.com/elastic/eui/pull/1964)) - Updated `caniuse-lite` version resolution ([#1970](https://github.com/elastic/eui/pull/1970)) -- Added a webpack directive for naming icon chunks ([#1944])(https://github.com/elastic/eui/pull/1944)) +- Added a webpack directive for naming icon chunks ([#1944](https://github.com/elastic/eui/pull/1944)) - Added ability to update `EuiInMemoryTable` `sorting` prop and remove columns after sorting is applied ([#1972](https://github.com/elastic/eui/pull/1972)) +- Added `onToggle` callback to `EuiAccordion` ([#1974](https://github.com/elastic/eui/pull/1974)) **Bug fixes**