feat(Dropdown): Add onOpen and onClose props (carbon-design-system#660)

joshblack · Mar 1, 2018 · 699c621 · 699c621
1 parent eaa3bc5
commit 699c621
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/src/components/Dropdown/Dropdown-story.js b/src/components/Dropdown/Dropdown-story.js
@@ -22,6 +22,8 @@ storiesOf('Dropdown', module)
       <Dropdown
         {...dropdownEvents}
         onChange={action('onChange')}
+        onOpen={action('onOpen')}
+        onClose={action('onClose')}
         defaultText="Dropdown label">
         <DropdownItem itemText="Option 1" value="option1" />
         <DropdownItem itemText="Option 2" value="option2" />
@@ -41,6 +43,8 @@ storiesOf('Dropdown', module)
       <Dropdown
         {...dropdownEvents}
         onChange={selectedItemInfo => console.log(selectedItemInfo)}
+        onOpen={action('onOpen')}
+        onClose={action('onClose')}
         defaultText="Option 1"
         value="all">
         <DropdownItem itemText="Option 1" value="option1" />
@@ -61,6 +65,8 @@ storiesOf('Dropdown', module)
       <Dropdown
         {...dropdownEvents}
         onChange={selectedItemInfo => console.log(selectedItemInfo)}
+        onOpen={action('onOpen')}
+        onClose={action('onClose')}
         defaultText="Dropdown label"
         disabled>
         <DropdownItem itemText="Option 1" value="option1" />
@@ -81,6 +87,8 @@ storiesOf('Dropdown', module)
       <Dropdown
         {...dropdownEvents}
         onChange={selectedItemInfo => console.log(selectedItemInfo)}
+        onOpen={action('onOpen')}
+        onClose={action('onClose')}
         defaultText="Dropdown label"
         value="all"
         selectedText="Option 4">

diff --git a/src/components/Dropdown/Dropdown-test.js b/src/components/Dropdown/Dropdown-test.js
@@ -98,9 +98,11 @@ describe('Dropdown', () => {
 
   describe('events', () => {
     const onClick = jest.fn();
+    const onOpen = jest.fn();
+    const onClose = jest.fn();
 
     const wrapper = mount(
-      <Dropdown onClick={onClick}>
+      <Dropdown onClick={onClick} onOpen={onOpen} onClose={onClose}>
         <DropdownItem
           className="test-child"
           itemText="test-child"
@@ -160,6 +162,17 @@ describe('Dropdown', () => {
       expect(wrapper.state().open).toBe(false);
     });
 
+    it('fires open and close callbacks when the dropdown is clicked', () => {
+      onOpen.mockReset();
+      onClose.mockReset();
+      dropdown.simulate('click');
+      expect(onOpen).toHaveBeenCalled();
+      expect(onClose).not.toHaveBeenCalled();
+      dropdown.simulate('click');
+      expect(onOpen).toHaveBeenCalled();
+      expect(onClose).toHaveBeenCalled();
+    });
+
     it('should not open when disabled', () => {
       const wrapper = mount(
         <Dropdown onClick={onClick} disabled>

diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.js
@@ -13,6 +13,8 @@ export default class Dropdown extends PureComponent {
     tabIndex: PropTypes.number,
     onClick: PropTypes.func,
     onChange: PropTypes.func.isRequired,
+    onOpen: PropTypes.func,
+    onClose: PropTypes.func,
     selectedText: PropTypes.string,
     open: PropTypes.bool,
     iconDescription: PropTypes.string,
@@ -25,6 +27,8 @@ export default class Dropdown extends PureComponent {
     disabled: false,
     iconDescription: 'open list of options',
     onChange: () => {},
+    onOpen: () => {},
+    onClose: () => {},
   };
 
   constructor(props) {
@@ -36,6 +40,15 @@ export default class Dropdown extends PureComponent {
     this.setState(this.resetState(nextProps));
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevState.open && this.state.open) {
+      this.props.onOpen();
+    }
+    if (prevState.open && !this.state.open) {
+      this.props.onClose();
+    }
+  }
+
   resetState(props) {
     const { children, selectedText, value, defaultText, open } = props;
 
@@ -93,6 +106,8 @@ export default class Dropdown extends PureComponent {
       iconDescription,
       disabled,
       selectedText, // eslint-disable-line no-unused-vars
+      onOpen, // eslint-disable-line no-unused-vars
+      onClose, // eslint-disable-line no-unused-vars
       ...other
     } = this.props;