Add a cancel option to tab change event handler (#73)

Author: danez

src/components/Tabs.js

@@ -76,12 +76,17 @@ module.exports = React.createClass({
     // Keep reference to last index for event handler
     const last = this.state.selectedIndex;
 
-    // Update selected index
-    this.setState({ selectedIndex: index, focus: focus === true });
+    // Check if the change event handler cancels the tab change
+    let cancel = false;
 
     // Call change event handler
     if (typeof this.props.onSelect === 'function') {
-      this.props.onSelect(index, last);
+      cancel = this.props.onSelect(index, last) === false;
+    }
+
+    if (!cancel) {
+      // Update selected index
+      this.setState({ selectedIndex: index, focus: focus === true });
     }
   },
 

src/components/__tests__/Tabs-test.js

@@ -282,4 +282,17 @@ describe('react-tabs', () => {
 
     expect(wrapper.prop('selectedIndex')).toBe(undefined);
   });
+
+  it('should cancel if event handler returns false', () => {
+    const wrapper = mount(createTabs({ onSelect: () => false }));
+
+    assertTabSelected(wrapper, 0);
+
+    wrapper.childAt(0).childAt(1).simulate('click');
+    assertTabSelected(wrapper, 0);
+
+    wrapper.childAt(0).childAt(2).simulate('click');
+    assertTabSelected(wrapper, 0);
+
+  });
 });