refactor: apply saveref as render children

react-component · Jun 12, 2018 · 4f79980 · 4f79980
1 parent 1bae6ff
commit 4f79980
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 80 deletions.
diff --git a/src/InkTabBar.js b/src/InkTabBar.js
@@ -3,26 +3,19 @@ import PropTypes from 'prop-types';
 import InkTabBarNode from './InkTabBarNode';
 import TabBarTabsNode from './TabBarTabsNode';
 import TabBarRootNode from './TabBarRootNode';
+import SaveRef from './SaveRef';
 
 export default class InkTabBar extends React.Component {
-  getRef = (name) => {
-    return this[name];
-  }
-
-  saveRef = (name) => {
-    return (node) => {
-      if (node) {
-        this[name] = node;
-      }
-    };
-  }
-
   render() {
     return (
-      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
-        <InkTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props} />
-        <TabBarTabsNode onTabClick={this.props.onTabClick} saveRef={this.saveRef} {...this.props} />
-      </TabBarRootNode>
+      <SaveRef>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
+            <TabBarTabsNode onTabClick={this.props.onTabClick} saveRef={saveRef} {...this.props} />
+          </TabBarRootNode>
+        )}
+      </SaveRef>
     );
   }
 }

diff --git a/src/SaveRef.js b/src/SaveRef.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default class SaveRef extends React.Component {
+  getRef = (name) => {
+    return this[name];
+  }
+
+  saveRef = (name) => {
+    return (node) => {
+      if (node) {
+        this[name] = node;
+      }
+    };
+  }
+
+  render() {
+    return this.props.children(this.saveRef, this.getRef);
+  }
+}
diff --git a/src/ScrollableInkTabBar.js b/src/ScrollableInkTabBar.js
@@ -3,28 +3,21 @@ import InkTabBarNode from './InkTabBarNode';
 import TabBarTabsNode from './TabBarTabsNode';
 import TabBarRootNode from './TabBarRootNode';
 import ScrollableTabBarNode from './ScrollableTabBarNode';
+import SaveRef from './SaveRef';
 
 export default class ScrollableInkTabBar extends React.Component {
-  getRef = (name) => {
-    return this[name];
-  }
-
-  saveRef = (name) => {
-    return (node) => {
-      if (node) {
-        this[name] = node;
-      }
-    };
-  }
-
   render() {
     return (
-      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
-        <ScrollableTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props}>
-          <InkTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props} />
-          <TabBarTabsNode saveRef={this.saveRef} {...this.props} />
-        </ScrollableTabBarNode>
-      </TabBarRootNode>
+      <SaveRef>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
+              <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
+              <TabBarTabsNode saveRef={saveRef} {...this.props} />
+            </ScrollableTabBarNode>
+          </TabBarRootNode>
+        )}
+      </SaveRef>
     );
   }
 }
diff --git a/src/ScrollableTabBar.js b/src/ScrollableTabBar.js
@@ -2,27 +2,20 @@ import React from 'react';
 import ScrollableTabBarNode from './ScrollableTabBarNode';
 import TabBarRootNode from './TabBarRootNode';
 import TabBarTabsNode from './TabBarTabsNode';
+import SaveRef from './SaveRef';
 
 export default class ScrollableTabBar extends React.Component {
-  getRef = (name) => {
-    return this[name];
-  }
-
-  saveRef = (name) => {
-    return (node) => {
-      if (node) {
-        this[name] = node;
-      }
-    };
-  }
-
   render() {
     return (
-      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
-        <ScrollableTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props}>
-          <TabBarTabsNode saveRef={this.saveRef} {...this.props} />
-        </ScrollableTabBarNode>
-      </TabBarRootNode>
+      <SaveRef>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
+              <TabBarTabsNode saveRef={saveRef} {...this.props} />
+            </ScrollableTabBarNode>
+          </TabBarRootNode>
+        )}
+      </SaveRef>
     );
   }
 }
diff --git a/src/SwipeableInkTabBar.js b/src/SwipeableInkTabBar.js
@@ -3,28 +3,21 @@ import SwipeableTabBarNode from './SwipeableTabBarNode';
 import TabBarSwipeableTabs from './TabBarSwipeableTabs';
 import TabBarRootNode from './TabBarRootNode';
 import InkTabBarNode from './InkTabBarNode';
+import SaveRef from './SaveRef'
 
 export default class SwipeableInkTabBar extends React.Component {
-  getRef = (name) => {
-    return this[name];
-  }
-
-  saveRef = (name) => {
-    return (node) => {
-      if (node) {
-        this[name] = node;
-      }
-    };
-  }
-
   render() {
     return (
-      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
-        <SwipeableTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props}>
-          <InkTabBarNode saveRef={this.saveRef} getRef={this.getRef} {...this.props} />
-          <TabBarSwipeableTabs saveRef={this.saveRef} {...this.props} />
-        </SwipeableTabBarNode>
-      </TabBarRootNode>
+      <SaveRef>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <SwipeableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
+              <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
+              <TabBarSwipeableTabs saveRef={saveRef} {...this.props} />
+            </SwipeableTabBarNode>
+          </TabBarRootNode>
+        )}
+      </SaveRef>
     );
   }
 }
diff --git a/src/TabBar.js b/src/TabBar.js
@@ -1,21 +1,19 @@
 import React from 'react';
 import TabBarRootNode from './TabBarRootNode';
 import TabBarTabsNode from './TabBarTabsNode';
+import SaveRef from './SaveRef';
 
 export default class TabBar1 extends React.Component {
-  saveRef = (name) => {
-    return (node) => {
-      if (node) {
-        this[name] = node;
-      }
-    };
-  }
-
   render() {
     return (
-      <TabBarRootNode saveRef={this.saveRef} {...this.props}>
-        <TabBarTabsNode saveRef={this.saveRef} {...this.props} />
-      </TabBarRootNode>
+      <SaveRef>
+        {(saveRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <TabBarTabsNode saveRef={saveRef} {...this.props} />
+          </TabBarRootNode>
+        )}
+
+      </SaveRef>
     );
   }
 }