Merge pull request ptomasroos#340 from skv-headless/refactoring-lazy

Refactoring lazy

Author: skv-headless

index.js

@@ -59,14 +59,18 @@ const ScrollableTabView = React.createClass({
       currentPage: this.props.initialPage,
       scrollValue: new Animated.Value(this.props.initialPage),
       containerWidth: Dimensions.get('window').width,
-      sceneKeys: this.updateSceneKeys([], this.props.initialPage),
+      sceneKeys: this.newSceneKeys({ currentPage: this.props.initialPage, }),
     };
   },
 
   componentWillReceiveProps(props) {
     if (props.page >= 0 && props.page !== this.state.currentPage) {
       this.goToPage(props.page);
     }
+
+    if (props.children !== this.props.children) {
+      this.updateSceneKeys({ page: this.state.currentPage, children: props.children, });
+    }
   },
 
   goToPage(pageNumber) {
@@ -87,12 +91,7 @@ const ScrollableTabView = React.createClass({
       }
     }
 
-    if (this._children().length !== this.state.sceneKeys.length) {
-      let newKeys = this.updateSceneKeys(this.state.sceneKeys, pageNumber);
-      this.setState({currentPage: pageNumber, sceneKeys: newKeys, });
-    } else {
-      this.setState({currentPage: pageNumber, });
-    }
+    this.updateSceneKeys({ page: pageNumber, });
   },
 
   renderTabBar(props) {
@@ -105,11 +104,16 @@ const ScrollableTabView = React.createClass({
     }
   },
 
-  updateSceneKeys(sceneKeys = [], currentPage) {
+  updateSceneKeys({ page, children = this.props.children, callback = () => {}, }) {
+    let newKeys = this.newSceneKeys({ previousKeys: this.state.sceneKeys, currentPage: page, children, });
+    this.setState({currentPage: page, sceneKeys: newKeys, }, callback);
+  },
+
+  newSceneKeys({ previousKeys = [], currentPage = 0, children = this.props.children, }) {
     let newKeys = [];
-    this._children().forEach((child, idx) => {
+    this._children(children).forEach((child, idx) => {
       let key = this._makeSceneKey(child, idx);
-      if (this._keyExists(sceneKeys, key) || currentPage === idx) {
+      if (this._keyExists(previousKeys, key) || currentPage === idx) {
         newKeys.push(key);
       }
     });
@@ -201,17 +205,11 @@ const ScrollableTabView = React.createClass({
     if (typeof localCurrentPage === 'object') {
       localCurrentPage = currentPage.nativeEvent.position;
     }
-    // scenekeys length and children length is same then no need to update the keys as all are stored by now
-    if (this._children().length !== this.state.sceneKeys.length) {
-      let newKeys = this.updateSceneKeys(this.state.sceneKeys, localCurrentPage);
-      this.setState({currentPage: localCurrentPage, sceneKeys: newKeys, }, () => {
-        this.props.onChangeTab({ i: localCurrentPage, ref: this._children()[localCurrentPage], });
-      });
-    } else {
-      this.setState({currentPage: localCurrentPage, }, () => {
-        this.props.onChangeTab({ i: localCurrentPage, ref: this._children()[localCurrentPage], });
-      });
-    }
+
+    const callback = () => {
+      this.props.onChangeTab({ i: localCurrentPage, ref: this._children()[localCurrentPage], });
+    };
+    this.updateSceneKeys({ page: localCurrentPage, callback, }, );
   },
 
   _updateScrollValue(value) {
@@ -230,8 +228,8 @@ const ScrollableTabView = React.createClass({
     }
   },
 
-  _children() {
-    return React.Children.map(this.props.children, (child) => child);
+  _children(children = this.props.children) {
+    return React.Children.map(children, (child) => child);
   },
 
   render() {