feat(tab-set): tab change event

akveo · Oct 23, 2018 · 11f315d · 11f315d
1 parent 141254e
commit 11f315d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/example/screens/tabset/TabViewScreen.js b/example/screens/tabset/TabViewScreen.js
@@ -12,6 +12,10 @@ export class TabViewScreen extends React.Component {
     title: 'Tab Set',
   };
 
+  onItemChange = (change) => {
+    console.log(`onItemChange: ${JSON.stringify(change, null, 2)}`);
+  };
+
   render() {
     return (
       <View style={styles.container}>

diff --git a/src/components/tabset/rkTabView.component.js b/src/components/tabset/rkTabView.component.js
@@ -8,7 +8,7 @@ import { RkTabPager } from './rkTabPager.component';
 /**
  * @extends React.Component
  *
- * @property {function} onGalleryItemChange - Gallery (modal) item change callback
+ * @property {function} onItemChange - tab content change callback
  */
 export class RkTabView extends React.Component {
   static propTypes = {
@@ -36,15 +36,25 @@ export class RkTabView extends React.Component {
     this.state.selectedIndex = this.tabViews.findIndex(child => child.props.isSelected);
   }
 
+  componentDidMount() {
+    this.props.onItemChange({
+      previous: null,
+      current: this.state.selectedIndex,
+    });
+  }
+
   onTabSelect = (index) => {
     this.tabPagerRef.scrollToIndex({ index });
   };
 
   onTabContentSelect = (index) => {
+    this.props.onItemChange({
+      previous: this.state.selectedIndex,
+      current: index,
+    });
     this.setState({
       selectedIndex: index,
     });
-    this.props.onItemChange(index);
   };
 
   setTabBarRef = (ref) => {