gt - Update BlockPanel dropdown

src/components/BlockPanel.js

@@ -6,6 +6,7 @@ import Card from './Card';
 import CardBody from './CardBody';
 import CardHeader from './CardHeader';
 import CardTitle from './CardTitle';
+import Collapse from './Collapse';
 import Icon from './Icon';
 
 class BlockPanel extends React.Component {
@@ -34,25 +35,37 @@ class BlockPanel extends React.Component {
     super(props);
 
     this.state = {
-      open: props.open
+      open: props.open,
+      closed: !props.open
     };
   }
 
   toggle = () => {
     const open = !this.state.open;
-    this.setState({ open }, () => this.props.onToggle(open));
+    const newState = open ?
+      { open, closed: false } :
+      { open };
+    this.setState(newState, () => this.props.onToggle(open));
+  };
+
+  onClosed = () => {
+    this.setState({ closed: true });
   };
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.open !== this.props.open) {
-      this.setState({ open: nextProps.open });
+      if (nextProps.open) {
+        this.setState({ open: true, closed: false });
+      } else {
+        this.setState({ open: false });
+      }
     }
   }
 
   render() {
     // eslint-disable-next-line no-unused-vars
     const { children, className, color, controls, expandable, hideOnToggle, title, onEdit, onToggle, ...props } = this.props;
-    const { open } = this.state;
+    const { closed, open } = this.state;
 
     // TODO simplify - these styles should be default Card, CardHeader styles in theme, not util classes
     const headerClassNames = classnames(
@@ -107,11 +120,18 @@ class BlockPanel extends React.Component {
             )}
           </div>
         </CardHeader>
-        {children && (!expandable || open || hideOnToggle) ?
-          <CardBody hidden={expandable && !open && hideOnToggle}>
-            {children}
-          </CardBody>
-          : null}
+        {children && (
+          <Collapse
+            isOpen={children && (!expandable || open)}
+            onExited={() => this.onClosed()}
+          >
+            {(hideOnToggle || !closed) ?
+              <CardBody>
+                {children}
+              </CardBody> :
+              null}
+          </Collapse>
+        )}
       </Card>
     );
   }

test/components/BlockPanel.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import assert from 'assert';
 import { mount, shallow } from 'enzyme';
 import sinon from 'sinon';
-import { Button, CardBody, CardTitle, Icon, BlockPanel } from '../../src';
+import { Button, CardTitle, Collapse, Icon, BlockPanel } from '../../src';
 
 describe('<BlockPanel />', () => {
   it('should be empty with no children', () => {
@@ -40,6 +40,7 @@ describe('<BlockPanel />', () => {
       );
 
       assert.equal(component.find('#hi').length, 0);
+      assert.equal(component.find(Collapse).prop('isOpen'), false, 'inner block should be hidden');
     });
 
     it('should be open when true passed as prop', () => {
@@ -60,12 +61,12 @@ describe('<BlockPanel />', () => {
       );
 
       assert.equal(component.find('#hi').length, 1, 'inner block should be visible');
-      assert.equal(component.find(CardBody).prop('hidden'), false, 'inner block should not be hidden');
+      assert.equal(component.find(Collapse).prop('isOpen'), true, 'inner block should not be hidden');
       component.find(CardTitle).simulate('click');
-      assert.equal(component.find('#hi').length, 0, 'inner block should not be visible');
+      assert.equal(component.find(Collapse).prop('isOpen'), false, 'inner block should be hidden');
       component.find(Icon).simulate('click');
       assert.equal(component.find('#hi').length, 1, 'inner block should be visible');
-      assert.equal(component.find(CardBody).prop('hidden'), false, 'inner block should not be hidden');
+      assert.equal(component.find(Collapse).prop('isOpen'), true, 'inner block should not be hidden');
     });
 
     it('should honor state of open if state passed as prop', () => {
@@ -76,10 +77,10 @@ describe('<BlockPanel />', () => {
       );
 
       assert.equal(component.find('#hi').length, 1, 'inner block should be visible');
-
+      assert.equal(component.find(Collapse).prop('isOpen'), true, 'inner block should be visible');
       component.setProps({ open: false });
 
-      assert.equal(component.find('#hi').length, 0);
+      assert.equal(component.find(Collapse).prop('isOpen'), false, 'inner block should be hidden');
     });
 
     it('should show and hide when hideOnToggle is true', () => {
@@ -90,13 +91,13 @@ describe('<BlockPanel />', () => {
       );
 
       assert.equal(component.find('#hi').length, 1, 'inner block should be visible');
-      assert.equal(component.find(CardBody).prop('hidden'), false, 'inner block should not be hidden');
+      assert.equal(component.find(Collapse).prop('isOpen'), true, 'inner block should not be hidden');
       component.find(CardTitle).simulate('click');
       assert.equal(component.find('#hi').length, 1, 'inner block should be present');
-      assert.equal(component.find(CardBody).prop('hidden'), true, 'inner block should be hidden');
+      assert.equal(component.find(Collapse).prop('isOpen'), false, 'inner block should be hidden');
       component.find(Icon).simulate('click');
       assert.equal(component.find('#hi').length, 1, 'inner block should be visible');
-      assert.equal(component.find(CardBody).prop('hidden'), false, 'inner block should not be hidden');
+      assert.equal(component.find(Collapse).prop('isOpen'), true, 'inner block should not be hidden');
     });
 
     it('should call onToggle when clicked', () => {
@@ -170,6 +171,5 @@ describe('<BlockPanel />', () => {
       assert.equal(component.find('#title').first().text(), 'WE ARE THE CHAMPIONS');
       assert.equal(component.find('#action').first().text(), 'Go!');
     });
-
   });
 });