feat(Collapse): add delay prop (#287)

eddywashere · web-flow · commit 2b69ad652684 · 2017-01-10T20:35:26.000-08:00
diff --git a/docs/lib/Components/CollapsePage.js b/docs/lib/Components/CollapsePage.js
@@ -28,7 +28,12 @@ export default class CollapsePage extends React.Component {
 {`Collapse.propTypes = {
   isOpen: PropTypes.bool,
   className: PropTypes.node,
-  navbar: PropTypes.bool
+  navbar: PropTypes.bool,
+  delay: PropTypes.oneOfType([
+    PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
+    PropTypes.number
+  ]),
+  // optionally override show/hide delays - default { show: 350, hide: 350 }
 }`}
           </PrismCode>
         </pre>
diff --git a/src/Collapse.js b/src/Collapse.js
@@ -14,11 +14,21 @@ const propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   cssModule: PropTypes.object,
   navbar: PropTypes.bool,
+  delay: PropTypes.oneOfType([
+    PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
+    PropTypes.number,
+  ]),
+};
+
+const DEFAULT_DELAYS = {
+  show: 350,
+  hide: 350
 };
 
 const defaultProps = {
   isOpen: false,
-  tag: 'div'
+  tag: 'div',
+  delay: DEFAULT_DELAYS,
 };
 
 class Collapse extends Component {
@@ -45,7 +55,7 @@ class Collapse extends Component {
             collapse: SHOWN,
             height: null
           });
-        }, 350);
+        }, this.getDelay('show'));
       });
     } else if (!willOpen && collapse === SHOWN) {
       // will hide
@@ -63,7 +73,7 @@ class Collapse extends Component {
           collapse: HIDDEN,
           height: null
         });
-      }, 350);
+      }, this.getDelay('hide'));
     }
     // else: do nothing.
   }
@@ -72,6 +82,14 @@ class Collapse extends Component {
     clearTimeout(this.transitionTag);
   }
 
+  getDelay(key) {
+    const { delay } = this.props;
+    if (typeof delay === 'object') {
+      return isNaN(delay[key]) ? DEFAULT_DELAYS[key] : delay[key];
+    }
+    return delay;
+  }
+
   getHeight() {
     return this.element.scrollHeight;
   }
@@ -83,7 +101,7 @@ class Collapse extends Component {
       cssModule,
       tag: Tag,
       ...attributes
-    } = omit(this.props, ['isOpen']);
+    } = omit(this.props, ['isOpen', 'delay']);
     const { collapse, height } = this.state;
     let collapseClass;
     switch (collapse) {
diff --git a/src/__tests__/Collapse.spec.js b/src/__tests__/Collapse.spec.js
@@ -18,6 +18,43 @@ describe('Collapse', () => {
     jasmine.clock().uninstall();
   });
 
+  describe('delay', () => {
+    it('should accept a number', () => {
+      const wrapper = mount(<Collapse isOpen={isOpen} delay={200} />);
+      toggle();
+      wrapper.setProps({ isOpen: isOpen });
+      jasmine.clock().tick(200);
+      expect(wrapper.state('collapse')).toEqual('SHOWN');
+      wrapper.unmount();
+    });
+
+    it('should accept an object', () => {
+      const wrapper = mount(<Collapse isOpen={isOpen} delay={{ show: 110, hide: 120 }} />);
+      toggle();
+      wrapper.setProps({ isOpen: isOpen });
+      jasmine.clock().tick(110);
+      expect(wrapper.state('collapse')).toEqual('SHOWN');
+
+      toggle();
+      wrapper.setProps({ isOpen: isOpen });
+      jasmine.clock().tick(120);
+      expect(wrapper.state('collapse')).toEqual('HIDDEN');
+    });
+
+    it('should use default value if value is missing from object', () => {
+      const wrapper = mount(<Collapse isOpen={isOpen} delay={{ show: 110 }} />);
+      toggle();
+      wrapper.setProps({ isOpen: isOpen });
+      jasmine.clock().tick(110);
+      expect(wrapper.state('collapse')).toEqual('SHOWN');
+
+      toggle();
+      wrapper.setProps({ isOpen: isOpen });
+      jasmine.clock().tick(350);
+      expect(wrapper.state('collapse')).toEqual('HIDDEN');
+    });
+  });
+
   it('should render children', () => {
     const wrapper = shallow(<Collapse><p>hello</p></Collapse>).find('p');
     expect(wrapper.text()).toBe('hello');
