allow onBeforeChange to cancel

pedronauck · Jan 30, 2015 · 15b16cc · 15b16cc
1 parent ee6c4e8
commit 15b16cc
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 15 deletions.
diff --git a/dist/react-simpletabs.css b/dist/react-simpletabs.css
@@ -1,7 +1,7 @@
 /*!
  * 
  *  React Simpletabs - Just a simple tabs component built with React
- *  @version v0.3.1
+ *  @version v0.4.1
  *  @link /~https://github.com/pedronauck/react-simpletabs
  *  @license MIT
  *  @author Pedro Nauck (/~https://github.com/pedronauck)

diff --git a/dist/react-simpletabs.js b/dist/react-simpletabs.js
@@ -1,7 +1,7 @@
 /*!
  * 
  *  React Simpletabs - Just a simple tabs component built with React
- *  @version v0.3.1
+ *  @version v0.4.1
  *  @link /~https://github.com/pedronauck/react-simpletabs
  *  @license MIT
  *  @author Pedro Nauck (/~https://github.com/pedronauck)
@@ -104,7 +104,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  },
 	  render:function () {
 	    return (
-	      React.createElement("div", {className: "tabs"}, 
+	      React.DOM.div({className: "tabs"}, 
 	        this._getMenuItems(), 
 	        this._getSelectedPanel()
 	      )
@@ -117,7 +117,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var $selectedTabMenu = this.refs[("tab-menu-" + index)];
 
 	    if (onBeforeChange) {
-	      onBeforeChange(index, $selectedPanel, $selectedTabMenu);
+	      var cancel = onBeforeChange(index, $selectedPanel, $selectedTabMenu);
+	      if(cancel === false){ return }
 	    }
 
 	    this.setState({ tabActive: index }, function()  {
@@ -146,17 +147,17 @@ return /******/ (function(modules) { // webpackBootstrap
 	      });
 
 	      return (
-	        React.createElement("li", {ref: ref, key: index, className: classes}, 
-	          React.createElement("a", {href: "#", onClick: this.setActive.bind(this, index + 1)}, 
+	        React.DOM.li({ref: ref, key: index, className: classes}, 
+	          React.DOM.a({href: "#", onClick: this.setActive.bind(this, index + 1)}, 
 	            title
 	          )
 	        )
 	      );
 	    }.bind(this));
 
 	    return (
-	      React.createElement("nav", {className: "tabs-navigation"}, 
-	        React.createElement("ul", {className: "tabs-menu"}, $menuItems)
+	      React.DOM.nav({className: "tabs-navigation"}, 
+	        React.DOM.ul({className: "tabs-menu"}, $menuItems)
 	      )
 	    );
 	  },
@@ -165,7 +166,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var $panel = this.props.children[index];
 
 	    return (
-	      React.createElement("article", {ref: "tab-panel", className: "tab-panel"}, 
+	      React.DOM.article({ref: "tab-panel", className: "tab-panel"}, 
 	        $panel
 	      )
 	    );
@@ -182,7 +183,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    ]).isRequired
 	  },
 	  render:function () {
-	    return React.createElement("div", null, this.props.children);
+	    return React.DOM.div(null, this.props.children);
 	  }
 	});
 

diff --git a/dist/react-simpletabs.min.css b/dist/react-simpletabs.min.css
@@ -1,7 +1,7 @@
 /*!
  * 
  *  React Simpletabs - Just a simple tabs component built with React
- *  @version v0.3.1
+ *  @version v0.4.1
  *  @link /~https://github.com/pedronauck/react-simpletabs
  *  @license MIT
  *  @author Pedro Nauck (/~https://github.com/pedronauck)

diff --git a/dist/react-simpletabs.min.js b/dist/react-simpletabs.min.js
diff --git a/lib/__tests__/test-reactsimpletabs.jsx b/lib/__tests__/test-reactsimpletabs.jsx
@@ -108,7 +108,6 @@ describe('Tabs', function() {
     it('calls the function and then changes the tab', function(){
       var indexes = [];
       var spy = function(i){ indexes.push(i) };
-
       var c = TU.renderIntoDocument(
         <Tabs onBeforeChange={spy}>
           <Tabs.Panel title='item1'>content1</Tabs.Panel>
@@ -126,5 +125,21 @@ describe('Tabs', function() {
       expect(currentPanelText(c)).toEqual('content1');
       expect(indexes).toEqual([2,2,1]);
     });
+
+    it('cancels the click by returning false', function(){
+      var cancel = function(){return false};
+      var c = TU.renderIntoDocument(
+        <Tabs tabActive={2} onBeforeChange={cancel}>
+          <Tabs.Panel title='item1'>content1</Tabs.Panel>
+          <Tabs.Panel title='item2'>content2</Tabs.Panel>
+        </Tabs>
+      );
+      var tabsClickable = scryClass(c, 'tabs-menu-item').map(function(li){
+        return li.getDOMNode().firstChild; //anchor with the click handler
+      });
+      expect(currentPanelText(c)).toEqual('content2');
+      sim.click(tabsClickable[0]);
+      expect(currentPanelText(c)).toEqual('content2');
+    });
   });
 });
diff --git a/lib/react-simpletabs.jsx b/lib/react-simpletabs.jsx
@@ -52,7 +52,8 @@ var Tabs = React.createClass({
     var $selectedTabMenu = this.refs[`tab-menu-${index}`];
 
     if (onBeforeChange) {
-      onBeforeChange(index, $selectedPanel, $selectedTabMenu);
+      var cancel = onBeforeChange(index, $selectedPanel, $selectedTabMenu);
+      if(cancel === false){ return }
     }
 
     this.setState({ tabActive: index }, () => {