Merge pull request #219 from appfolio/addBlockPanelOnToggle

gt - Add onToggle to BlockPanel
appfolio · May 18, 2017 · 8af991d · 8af991d
2 parents 7ba2b52 + 2579cc8
commit 8af991d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/src/components/BlockPanel.js b/src/components/BlockPanel.js
@@ -9,13 +9,15 @@ class BlockPanel extends Component {
     className: React.PropTypes.string,
     expandable: React.PropTypes.bool,
     onEdit: React.PropTypes.func,
+    onToggle: React.PropTypes.func,
     title: React.PropTypes.string.isRequired
   };
 
   static defaultProps = {
     className: '',
     open: true,
-    expandable: false
+    expandable: false,
+    onToggle: () => {}
   };
 
   constructor(props) {
@@ -26,10 +28,15 @@ class BlockPanel extends Component {
     };
   }
 
-  toggle = () => this.setState({ open: !this.state.open });
+  toggle = () => {
+    const open = !this.state.open;
+    this.setState({ open });
+    this.props.onToggle(open);
+  };
 
   render() {
-    const { children, className, controls, expandable, title, onEdit, ...props } = this.props;
+    // eslint-disable-next-line no-unused-vars
+    const { children, className, controls, expandable, title, onEdit, onToggle, ...props } = this.props;
     const { open } = this.state;
 
     return (

diff --git a/stories/BlockPanel.js b/stories/BlockPanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { action, storiesOf } from '@kadira/storybook';
 
 import { BlockPanel, Button, Icon, HelpBubble } from '../src';
 import { boolean, text } from '@kadira/storybook-addon-knobs';
@@ -24,6 +24,15 @@ storiesOf('BlockPanel', module)
       Now you don't.
     </BlockPanel>
   ))
+  .addWithInfo('onToggle', () => (
+    <BlockPanel
+      title={text('title', 'Click me you fool')}
+      onToggle={action('onToggle')}
+      expandable={boolean('expandable', true)}
+    >
+      Now you don't.
+    </BlockPanel>
+  ))
   .addWithInfo('components for title and controls', () => (
     <BlockPanel
       title={

diff --git a/test/components/BlockPanel.spec.js b/test/components/BlockPanel.spec.js
@@ -64,6 +64,20 @@ describe('<BlockPanel />', () => {
       component.find(Icon).simulate('click');
       assert.equal(component.find('#hi').length, 1, 'inner block should be visible');
     });
+
+    it('should call onToggle when clicked', () => {
+      const onToggle = sinon.spy();
+
+      const component = mount(
+        <BlockPanel title="Open" expandable onToggle={onToggle}>
+          <h1 id="hi">Hello World!</h1>
+        </BlockPanel>
+      );
+      component.find(CardTitle).simulate('click');
+      assert.equal(onToggle.calledWith(false), true);
+      component.find(CardTitle).simulate('click');
+      assert.equal(onToggle.calledWith(true), true);
+    });
   });
 
   context('contains headerComponent', () => {