From c7d9e60847e9a13e5dace6945d6836eb0a359539 Mon Sep 17 00:00:00 2001 From: John Haley Date: Tue, 3 Mar 2015 10:35:06 -0700 Subject: [PATCH 1/3] Pass selected tab to `onChange` event The `Tabs` object has an `onChange` event that has no context when the event is fired. This will pass in the new tab into the event so that it now has some context. --- src/js/tabs/tabs.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx index c620e55d6eb472..64709665c009ff 100644 --- a/src/js/tabs/tabs.jsx +++ b/src/js/tabs/tabs.jsx @@ -40,14 +40,14 @@ var Tabs = React.createClass({ }, handleTouchTap: function(tabIndex, tab){ - if (this.props.onChange && this.state.selectedIndex !== tabIndex) this.props.onChange(); + if (this.props.onChange && this.state.selectedIndex !== tabIndex) this.props.onChange(tab); this.setState({selectedIndex: tabIndex}); //default CB is _onActive. Can be updated in tab.jsx if(tab.props.onActive) tab.props.onActive(tab); }, render: function(){ - var _this = this; + var _this = this; var width = this.state.fixed ? this.state.width/this.props.children.length : this.props.tabWidth; @@ -84,4 +84,4 @@ var Tabs = React.createClass({ }); -module.exports = Tabs; \ No newline at end of file +module.exports = Tabs; From ee0c3168435051ab979d4e383cedaad17e59eeb6 Mon Sep 17 00:00:00 2001 From: John Haley Date: Tue, 3 Mar 2015 10:45:09 -0700 Subject: [PATCH 2/3] Add tabIndex to onChange --- src/js/tabs/tabs.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx index 64709665c009ff..92417549dd4bcc 100644 --- a/src/js/tabs/tabs.jsx +++ b/src/js/tabs/tabs.jsx @@ -40,7 +40,10 @@ var Tabs = React.createClass({ }, handleTouchTap: function(tabIndex, tab){ - if (this.props.onChange && this.state.selectedIndex !== tabIndex) this.props.onChange(tab); + if (this.props.onChange && this.state.selectedIndex !== tabIndex) { + this.props.onChange(tabIndex, tab); + } + this.setState({selectedIndex: tabIndex}); //default CB is _onActive. Can be updated in tab.jsx if(tab.props.onActive) tab.props.onActive(tab); From b1204cf027a6f423d195f3f2c21c6a25cb595400 Mon Sep 17 00:00:00 2001 From: John Haley Date: Tue, 3 Mar 2015 10:48:30 -0700 Subject: [PATCH 3/3] Update docs for `Tabs.onChange` changes `Tabs.onChange` now has 2 arguments: tabIndex and tab which are the newly selected tab and its index in the array --- docs/src/app/components/pages/components/tabs.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/app/components/pages/components/tabs.jsx b/docs/src/app/components/pages/components/tabs.jsx index 3b547a57996a95..882cf795b4ecc8 100644 --- a/docs/src/app/components/pages/components/tabs.jsx +++ b/docs/src/app/components/pages/components/tabs.jsx @@ -8,7 +8,7 @@ var Tabs = mui.Tabs; var Tab= mui.Tab; var TabsPage = React.createClass({ - + mixins: [Router.Navigation, Router.State], render: function(){ @@ -51,7 +51,7 @@ var TabsPage = React.createClass({ 'If you need to access a tab directly - you can do so with the first argument of onActive or ' + 'by accessing the props.children array by passing refs to the Tabs container.'; - + var componentInfo = [ { @@ -70,7 +70,7 @@ var TabsPage = React.createClass({ infoArray: [ { name: 'onChange', - type: 'function', + type: 'function(tabIndex, tab)', header: 'optional', desc: 'Fired on touch or tap of a tab.' }