Pure <Tabs>

react-toolbox · Nov 11, 2015 · 42b9496 · 42b9496
1 parent bcec735
commit 42b9496
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 27 deletions.
diff --git a/components/tabs/tab.jsx b/components/tabs/tab.jsx
@@ -17,7 +17,7 @@ class Tab extends React.Component {
   };
 
   componentDidMount () {
-    this.active(this.props.active);
+    if (this.props.active) this.active(this.props.active);
   }
 
   componentWillReceiveProps (next_props) {

diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx
@@ -20,16 +20,13 @@ class Tabs extends React.Component {
 
   componentDidMount () {
     setTimeout(() => {
-      this.setState({pointer: this._pointerPosition(this.state.index)});
+      this.setState({pointer: this._pointerPosition(this.props.index)});
     }, 20);
   }
 
   componentWillReceiveProps (next_props) {
     const index = next_props.index || this.state.index;
-    this.setState({
-      index,
-      pointer: this._pointerPosition(index)
-    });
+    this.setState({ index, pointer: this._pointerPosition(index) });
   }
 
   _pointerPosition (index = 0) {
@@ -48,7 +45,7 @@ class Tabs extends React.Component {
       index,
       pointer: this._pointerPosition(index)
     });
-    if (this.props.onChange) this.props.onChange(this);
+    if (this.props.onChange) this.props.onChange(index);
   };
 
   renderLabels (labels) {
@@ -91,13 +88,6 @@ class Tabs extends React.Component {
       </div>
     );
   }
-
-  active (value) {
-    this.setState({active: value});
-    if (this.props.onActive && value) {
-      this.props.onActive(this);
-    }
-  }
 }
 
 export default Tabs;
diff --git a/spec/components/tabs.jsx b/spec/components/tabs.jsx
@@ -1,19 +1,32 @@
 import React from 'react';
 import { Tabs, Tab } from '../../components/tabs';
 
-const TabsTest = () => (
-  <section>
-    <h5>Tabs</h5>
-    <p>This tabs can be disabled or hidden</p>
+class TabsTest extends React.Component {
 
-    <Tabs>
-        <Tab label='Primary'><small>Primary content</small></Tab>
-        <Tab label='Secondary'><small>Secondary content</small></Tab>
-        <Tab label='Third' disabled><small>Disabled content</small></Tab>
-        <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
-        <Tab label='Fifth'><small>Fifth content</small></Tab>
-    </Tabs>
-  </section>
-);
+  state = {
+    index: 1
+  };
+
+  handleTabsOnChange = (index) => {
+    console.log('handleTabsOnChange', index);
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Tabs</h5>
+        <p>This tabs can be disabled or hidden</p>
+
+        <Tabs index={this.state.index} onChange={this.handleTabsOnChange}>
+          <Tab label='Primary'><small>Primary content</small></Tab>
+          <Tab label='Secondary'><small>Secondary content</small></Tab>
+          <Tab label='Third' disabled><small>Disabled content</small></Tab>
+          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
+          <Tab label='Fifth'><small>Fifth content</small></Tab>
+        </Tabs>
+      </section>
+    );
+  }
+}
 
 export default TabsTest;