From acda6ffd53512847a69e4a7b2041941fd603917d Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Wed, 28 Jan 2015 04:24:47 -0200 Subject: [PATCH] add onMount api method --- README.md | 12 +++++++++--- bower.json | 2 +- dist/react-simpletabs.css | 2 +- dist/react-simpletabs.js | 35 ++++++++++++++++++++++++----------- dist/react-simpletabs.min.css | 2 +- dist/react-simpletabs.min.js | 4 ++-- example/app.js | 9 ++++++++- lib/react-simpletabs.jsx | 33 +++++++++++++++++++++++---------- package.json | 2 +- 9 files changed, 70 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index c9adcc4..31b026f 100644 --- 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 `
` 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 + onAfterChange={this.handleAfter} + onMount={this.handleMount}> ... ); @@ -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 `` component: diff --git a/bower.json b/bower.json index 0339194..1d0d5a8 100644 --- 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 (https://github.com/pedronauck)" diff --git a/dist/react-simpletabs.css b/dist/react-simpletabs.css index aafd1c6..0808311 100644 --- 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 index d3ac605..c57912b 100644 --- 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 index 6f2bb73..fa3d831 100644 --- 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 index 8bf5fb7..fb15d22 100644 --- a/dist/react-simpletabs.min.js +++ b/dist/react-simpletabs.min.js @@ -1,10 +1,10 @@ /*! * * 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) * */ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactSimpleTabs=t(require("react")):e.ReactSimpleTabs=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";var n=r(1),a=r(2);r(3);var s=n.createClass({displayName:"Tabs",propTypes:{tabActive:n.PropTypes.number,onBeforeChange:n.PropTypes.func,onAfterChange:n.PropTypes.func,children:n.PropTypes.oneOfType([n.PropTypes.array,n.PropTypes.element]).isRequired},getDefaultProps:function(){return{tabActive:1}},getInitialState:function(){return{tabActive:this.props.tabActive}},render:function(){return n.createElement("div",{className:"tabs"},this._getMenuItems(),this._getSelectedPanel())},setActive:function(e){var t=parseInt(e.target.getAttribute("data-tab-id")),r=this.props.onAfterChange,n=this.props.onBeforeChange,a=this.refs["tab-panel-"+t],s=this.refs["tab-menu-"+t];n&&n(t,a,s),this.setState({tabActive:t},function(){r&&r(t,a,s)}),e.preventDefault()},_getMenuItems:function(){if(!this.props.children)throw new Error("Tabs must contain at least one Tabs.Panel");Array.isArray(this.props.children)||(this.props.children=[this.props.children]);var e=this.props.children.map(function(e,t){var r="tab-menu-"+(t+1),s=e.props.title,i=a({"tabs-menu-item":!0,"is-active":this.state.tabActive===t+1});return n.createElement("li",{ref:r,key:t,className:i},n.createElement("a",{href:"#","data-tab-id":t+1,onClick:this.setActive},s))}.bind(this));return n.createElement("nav",{className:"tabs-navigation"},n.createElement("ul",{className:"tabs-menu"},e))},_getSelectedPanel:function(){var e=this.state.tabActive-1,t=this.props.children[e];return n.createElement("article",{ref:"tab-panel-"+(e+1),className:"tab-panel"},t)}});s.Panel=n.createClass({displayName:"Panel",propTypes:{title:n.PropTypes.string.isRequired,children:n.PropTypes.oneOfType([n.PropTypes.array,n.PropTypes.component]).isRequired},render:function(){return n.createElement("div",null,this.props.children)}}),e.exports=s},function(t){t.exports=e},function(e){e.exports=function(e){return"object"!=typeof e?Array.prototype.join.call(arguments," "):Object.keys(e).filter(function(t){return e[t]}).join(" ")}},function(){}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactSimpleTabs=t(require("react")):e.ReactSimpleTabs=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var s=r[n]={exports:{},id:n,loaded:!1};return e[n].call(s.exports,s,s.exports,t),s.loaded=!0,s.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";var n=r(1),s=r(2);r(3);var a=n.createClass({displayName:"Tabs",propTypes:{tabActive:n.PropTypes.number,onMount:n.PropTypes.func,onBeforeChange:n.PropTypes.func,onAfterChange:n.PropTypes.func,children:n.PropTypes.oneOfType([n.PropTypes.array,n.PropTypes.element]).isRequired},getDefaultProps:function(){return{tabActive:1}},getInitialState:function(){return{tabActive:this.props.tabActive}},componentDidMount:function(){var e=this.state.tabActive,t=this.refs["tab-panel"],r=this.refs["tab-menu-"+e];this.props.onMount&&this.props.onMount(e,t,r)},render:function(){return n.createElement("div",{className:"tabs"},this._getMenuItems(),this._getSelectedPanel())},setActive:function(e,t){var r=this.props.onAfterChange,n=this.props.onBeforeChange,s=this.refs["tab-panel"],a=this.refs["tab-menu-"+e];n&&n(e,s,a),this.setState({tabActive:e},function(){r&&r(e,s,a)}),t.preventDefault()},_getMenuItems:function(){if(!this.props.children)throw new Error("Tabs must contain at least one Tabs.Panel");Array.isArray(this.props.children)||(this.props.children=[this.props.children]);var e=this.props.children.map(function(e,t){var r="tab-menu-"+(t+1),a=e.props.title,i=s({"tabs-menu-item":!0,"is-active":this.state.tabActive===t+1});return n.createElement("li",{ref:r,key:t,className:i},n.createElement("a",{href:"#",onClick:this.setActive.bind(this,t+1)},a))}.bind(this));return n.createElement("nav",{className:"tabs-navigation"},n.createElement("ul",{className:"tabs-menu"},e))},_getSelectedPanel:function(){var e=this.state.tabActive-1,t=this.props.children[e];return n.createElement("article",{ref:"tab-panel",className:"tab-panel"},t)}});a.Panel=n.createClass({displayName:"Panel",propTypes:{title:n.PropTypes.string.isRequired,children:n.PropTypes.oneOfType([n.PropTypes.array,n.PropTypes.component]).isRequired},render:function(){return n.createElement("div",null,this.props.children)}}),e.exports=a},function(t){t.exports=e},function(e){e.exports=function(e){return"object"!=typeof e?Array.prototype.join.call(arguments," "):Object.keys(e).filter(function(t){return e[t]}).join(" ")}},function(){}])}); \ No newline at end of file diff --git a/example/app.js b/example/app.js index 32bfbd3..577bd6b 100644 --- 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 ( - +

Content #1

 diff --git a/lib/react-simpletabs.jsx b/lib/react-simpletabs.jsx index dc98848..b62952d 100644 --- 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({ ); }, - 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 (
  • - {title} + + {title} +
    • ); }); @@ -87,7 +100,7 @@ var Tabs = React.createClass({ var $panel = this.props.children[index]; return ( -
    +
    {$panel}
    ); diff --git a/package.json b/package.json index 07420ea..fe8761b 100644 --- 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",