add onMount api method

pedronauck · Jan 28, 2015 · acda6ff · acda6ff
1 parent 24d7437
commit acda6ff
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Installing this component is very easy and it has just one dependency: [React](h
   $ bower install --save react-simpletabs
 ```
 
-- Or if you want to [download the lastest release](https://github.com/pedronauck/react-simpletabs/archive/v0.3.1.zip) and put in your website, it will work too!
+- Or if you want to [download the lastest release](https://github.com/pedronauck/react-simpletabs/archive/v0.4.1.zip) and put in your website, it will work too!
 
 **NOTICE:** You need just one thing to make the component work. Put the [base component style](./dist/react-simpletabs.css) at the `<header>` tag. If you don't wanna use the `.css` extension, you can get the `.styl` or `.scss` extension at the folder `./lib`.
 
@@ -120,6 +120,9 @@ And if you want to do something before or after the changed tab, you can do use
 
 ```javascript
   ...
+  handleMount: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
+    console.log('on mount, showing tab ' + selectedIndex);
+  },
   handleBefore: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
     console.log('Something before tab ' + selectedIndex);
   },
@@ -131,7 +134,8 @@ And if you want to do something before or after the changed tab, you can do use
       <Tabs
         tabActive={2}
         onBeforeChange={this.handleBefore}
-        onAfterChange={this.handleAfter}>
+        onAfterChange={this.handleAfter}
+        onMount={this.handleMount}>
         ...
       </Tabs>
     );
@@ -148,8 +152,10 @@ For more details, check out the API below.
 Property | Type | Default | Required | Description
 -------- | ---- | ------- | -------- |-----------
 tabActive | `Number` | 1 | no | The default tab active
+onMount | `Function` | n/a | no | The function that will be executed when the component is mounted
 onBeforeChange | `Function` | n/a | no | The function that will be executed **before** the state of the component change
-onAfterChange | `Function` | n/a | no | The function that will be executed **after** the state of the component change
+onAfterChange | `Function` | n/a | no | The function that will be executed **
+after** the state of the component change
 
 `<Tab.Panel>` component:
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "react-simpletabs",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "homepage": "https://github.com/pedronauck/react-simpletabs",
   "authors": [
     "Pedro Nauck <[email protected]> (https://github.com/pedronauck)"

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.0
+ *  @version v0.3.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.0
+ *  @version v0.3.1
  *  @link https://github.com/pedronauck/react-simpletabs
  *  @license MIT
  *  @author Pedro Nauck (https://github.com/pedronauck)
@@ -77,6 +77,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  displayName: 'Tabs',
 	  propTypes: {
 	    tabActive: React.PropTypes.number,
+	    onMount: React.PropTypes.func,
 	    onBeforeChange: React.PropTypes.func,
 	    onAfterChange: React.PropTypes.func,
 	    children: React.PropTypes.oneOfType([
@@ -88,7 +89,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	    return { tabActive: 1 };
 	  },
 	  getInitialState:function () {
-	    return { tabActive: this.props.tabActive };
+	    return {
+	      tabActive: this.props.tabActive
+	    };
+	  },
+	  componentDidMount:function() {
+	    var index = this.state.tabActive;
+	    var $selectedPanel = this.refs['tab-panel'];
+	    var $selectedMenu = this.refs[("tab-menu-" + index)];
+
+	    if (this.props.onMount) {
+	      this.props.onMount(index, $selectedPanel, $selectedMenu);
+	    }
 	  },
 	  render:function () {
 	    return (
@@ -98,20 +110,19 @@ return /******/ (function(modules) { // webpackBootstrap
 	      )
 	    );
 	  },
-	  setActive:function (e) {
-	    var id = parseInt(e.target.getAttribute('data-tab-id'));
+	  setActive:function(index, e) {
 	    var onAfterChange = this.props.onAfterChange;
 	    var onBeforeChange = this.props.onBeforeChange;
-	    var $selectedPanel = this.refs[("tab-panel-" + id)];
-	    var $selectedTabMenu = this.refs[("tab-menu-" + id)];
+	    var $selectedPanel = this.refs['tab-panel'];
+	    var $selectedTabMenu = this.refs[("tab-menu-" + index)];
 
 	    if (onBeforeChange) {
-	      onBeforeChange(id, $selectedPanel, $selectedTabMenu);
+	      onBeforeChange(index, $selectedPanel, $selectedTabMenu);
 	    }
 
-	    this.setState({ tabActive: id }, function()  {
+	    this.setState({ tabActive: index }, function()  {
 	      if (onAfterChange) {
-	        onAfterChange(id, $selectedPanel, $selectedTabMenu);
+	        onAfterChange(index, $selectedPanel, $selectedTabMenu);
 	      }
 	    });
 
@@ -136,7 +147,9 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	      return (
 	        React.createElement("li", {ref: ref, key: index, className: classes}, 
-	          React.createElement("a", {href: "#", "data-tab-id": index + 1, onClick: this.setActive}, title)
+	          React.createElement("a", {href: "#", onClick: this.setActive.bind(this, index + 1)}, 
+	            title
+	          )
 	        )
 	      );
 	    }.bind(this));
@@ -152,7 +165,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var $panel = this.props.children[index];
 
 	    return (
-	      React.createElement("article", {ref: ("tab-panel-" + (index + 1)), className: "tab-panel"}, 
+	      React.createElement("article", {ref: "tab-panel", className: "tab-panel"}, 
 	        $panel
 	      )
 	    );

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.0
+ *  @version v0.3.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/example/app.js b/example/app.js
@@ -3,6 +3,9 @@
 
 var Tabs = ReactSimpleTabs;
 var App = React.createClass({
+  onMount: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
+    console.log('on mount, showing tab ' + selectedIndex);
+  },
   onBeforeChange: function(selectedIndex, $selectedPanel, $selectedTabMenu) {
     console.log('before the tab ' + selectedIndex);
   },
@@ -11,7 +14,11 @@ var App = React.createClass({
   },
   render: function() {
     return (
-      <Tabs tabActive={2} onBeforeChange={this.onBeforeChange} onAfterChange={this.onAfterChange}>
+      <Tabs
+        tabActive={2}
+        onBeforeChange={this.onBeforeChange}
+        onAfterChange={this.onAfterChange}
+        onMount={this.onMount}>
         <Tabs.Panel title='Tab #1'>
           <h2>Content #1</h2>
         </Tabs.Panel>

diff --git a/lib/react-simpletabs.jsx b/lib/react-simpletabs.jsx
@@ -12,6 +12,7 @@ var Tabs = React.createClass({
   displayName: 'Tabs',
   propTypes: {
     tabActive: React.PropTypes.number,
+    onMount: React.PropTypes.func,
     onBeforeChange: React.PropTypes.func,
     onAfterChange: React.PropTypes.func,
     children: React.PropTypes.oneOfType([
@@ -23,7 +24,18 @@ var Tabs = React.createClass({
     return { tabActive: 1 };
   },
   getInitialState () {
-    return { tabActive: this.props.tabActive };
+    return {
+      tabActive: this.props.tabActive
+    };
+  },
+  componentDidMount() {
+    var index = this.state.tabActive;
+    var $selectedPanel = this.refs['tab-panel'];
+    var $selectedMenu = this.refs[`tab-menu-${index}`];
+
+    if (this.props.onMount) {
+      this.props.onMount(index, $selectedPanel, $selectedMenu);
+    }
   },
   render () {
     return (
@@ -33,20 +45,19 @@ var Tabs = React.createClass({
       </div>
     );
   },
-  setActive (e) {
-    var id = parseInt(e.target.getAttribute('data-tab-id'));
+  setActive(index, e) {
     var onAfterChange = this.props.onAfterChange;
     var onBeforeChange = this.props.onBeforeChange;
-    var $selectedPanel = this.refs[`tab-panel-${id}`];
-    var $selectedTabMenu = this.refs[`tab-menu-${id}`];
+    var $selectedPanel = this.refs['tab-panel'];
+    var $selectedTabMenu = this.refs[`tab-menu-${index}`];
 
     if (onBeforeChange) {
-      onBeforeChange(id, $selectedPanel, $selectedTabMenu);
+      onBeforeChange(index, $selectedPanel, $selectedTabMenu);
     }
 
-    this.setState({ tabActive: id }, () => {
+    this.setState({ tabActive: index }, () => {
       if (onAfterChange) {
-        onAfterChange(id, $selectedPanel, $selectedTabMenu);
+        onAfterChange(index, $selectedPanel, $selectedTabMenu);
       }
     });
 
@@ -71,7 +82,9 @@ var Tabs = React.createClass({
 
       return (
         <li ref={ref} key={index} className={classes}>
-          <a href='#' data-tab-id={index + 1} onClick={this.setActive}>{title}</a>
+          <a href='#' onClick={this.setActive.bind(this, index + 1)}>
+            {title}
+          </a>
         </li>
       );
     });
@@ -87,7 +100,7 @@ var Tabs = React.createClass({
     var $panel = this.props.children[index];
 
     return (
-      <article ref={`tab-panel-${index + 1}`} className='tab-panel'>
+      <article ref='tab-panel' className='tab-panel'>
         {$panel}
       </article>
     );

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-simpletabs",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Just a simple tabs component built with React",
   "author": {
     "name": "Pedro Nauck",