allow passing items to TabBar instead of children

ethanshar · ethanshar · commit 63fe2ac6886c · 2019-08-26T21:59:56.000+03:00
diff --git a/demo/src/screens/incubatorScreens/TabControllerScreen/index.js b/demo/src/screens/incubatorScreens/TabControllerScreen/index.js
@@ -6,9 +6,16 @@ import Tab1 from './tab1';
 import Tab2 from './tab2';
 import Tab3 from './tab3';
 
+const TABS = ['tab1', 'tab2' , 'tab3', 'account', 'groups', 'blog'];
+
 class TabControllerScreen extends Component {
   state = {
     selectedIndex: 0,
+    items: [
+      ..._.map(TABS, tab => ({label: tab, key: tab})),
+      {key: 'addTabs', icon: Assets.icons.settings, ignore: true, onPress: this.addTab},
+    ],
+
     tabsCount: 3,
     key: Date.now(),
   };
@@ -35,23 +42,31 @@ class TabControllerScreen extends Component {
     }
   };
 
-  renderTabItems() {
+  getItems = () => {
     const {tabsCount} = this.state;
-    const tabs = [
-      <Incubator.TabController.TabBarItem key="tab1" label="tab1" onPress={() => console.warn('press tab1')} />,
-      <Incubator.TabController.TabBarItem key="tab2" label="tab2" />,
-      <Incubator.TabController.TabBarItem key="tab3" label="tab3" />,
-      <Incubator.TabController.TabBarItem key="account" label="account" badge={{label: '9'}} />,
-      <Incubator.TabController.TabBarItem key="groups" label="groups" />,
-      <Incubator.TabController.TabBarItem key="blog" label="blog" />,
-    ];
-
-    return [
-      ..._.take(tabs, tabsCount),
-      <Incubator.TabController.TabBarItem key="addTabs" icon={Assets.icons.settings} ignore onPress={this.addTab} />,
-    ];
+    const items = _.chain(TABS).take(tabsCount).map(tab => ({label: tab, key: tab})).value();
+    items.push({key: 'addTabs', icon: Assets.icons.settings, ignore: true, onPress: this.addTab});
+
+    return items;
   }
 
+  // renderTabItems() {
+  //   const {tabsCount} = this.state;
+  //   const tabs = [
+  //     <Incubator.TabController.TabBarItem key="tab1" label="tab1" onPress={() => console.warn('press tab1')} />,
+  //     <Incubator.TabController.TabBarItem key="tab2" label="tab2" />,
+  //     <Incubator.TabController.TabBarItem key="tab3" label="tab3" />,
+  //     <Incubator.TabController.TabBarItem key="account" label="account" badge={{label: '9'}} />,
+  //     <Incubator.TabController.TabBarItem key="groups" label="groups" />,
+  //     <Incubator.TabController.TabBarItem key="blog" label="blog" />,
+  //   ];
+
+  //   return [
+  //     ..._.take(tabs, tabsCount),
+  //     <Incubator.TabController.TabBarItem key="addTabs" icon={Assets.icons.settings} ignore onPress={this.addTab} />,
+  //   ];
+  // }
+
   renderTabPages() {
     return (
       <View flex>
@@ -78,7 +93,7 @@ class TabControllerScreen extends Component {
   }
 
   render() {
-    const {key, selectedIndex} = this.state;
+    const {key, selectedIndex, items} = this.state;
     return (
       <View flex bg-dark80>
         <View flex>
@@ -88,6 +103,7 @@ class TabControllerScreen extends Component {
             _onChangeIndex={index => console.warn('tab index is', index)}
           >
             <Incubator.TabController.TabBar
+              items={this.getItems()}
               // key={key}
               uppercase
               // indicatorStyle={{backgroundColor: 'green', height: 3}}
@@ -98,7 +114,7 @@ class TabControllerScreen extends Component {
               // selectedIconColor={'blue'}
               activeBackgroundColor={Colors.blue60}
             >
-              {this.renderTabItems()}
+              {/* {this.renderTabItems()} */}
             </Incubator.TabController.TabBar>
             {this.renderTabPages()}
           </Incubator.TabController>
diff --git a/src/incubator/TabController/TabBar.js b/src/incubator/TabController/TabBar.js
@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 
 import TabBarContext from './TabBarContext';
+import TabBarItem from './TabBarItem';
 import ReanimatedObject from './ReanimatedObject';
 import {asBaseComponent, forwardRef} from '../../commons';
 import View from '../../components/view';
@@ -26,6 +27,10 @@ class TabBar extends PureComponent {
   static contextType = TabBarContext;
 
   static propTypes = {
+    /**
+     * The list of tab bar items
+     */
+    items: PropTypes.arrayOf(PropTypes.shape(TabBarItem)),
     /**
      * Tab Bar height
      */
@@ -83,9 +88,12 @@ class TabBar extends PureComponent {
 
   constructor(props, context) {
     super(props, context);
-    const {registerTabItems} = this.context;
-    const itemsCount = React.Children.count(this.children);
-    const ignoredItems = [];
+
+    if (this.props.children) {
+      console.warn('uilib: Please pass the "items" prop to TabController.TabBar instead of children');
+    }
+
+    const itemsCount = this.itemsCount;
 
     this.tabBar = React.createRef();
 
@@ -102,18 +110,48 @@ class TabBar extends PureComponent {
       itemsWidths: undefined,
     };
 
-    React.Children.toArray(this.children).forEach((child, index) => {
-      if (child.props.ignore) {
-        ignoredItems.push(index);
-      }
-    });
-    registerTabItems(itemsCount, ignoredItems);
+    this.registerTabItems();
   }
 
   get children() {
     return _.filter(this.props.children, child => !!child);
   }
 
+  get itemsCount() {
+    const {items} = this.props;
+    if (items) {
+      return _.size(items);
+    } else {
+      return React.Children.count(this.children);
+    }
+  }
+
+  registerTabItems() {
+    const {registerTabItems} = this.context;
+    const {items} = this.props;
+    const ignoredItems = [];
+    let itemsCount;
+
+    if (items) {
+      itemsCount = _.size(items);
+      _.forEach(items, (item, index) => {
+        if (item.ignore) {
+          ignoredItems.push(index);
+        }
+      });
+      // TODO: deprecate with props.children
+    } else {
+      itemsCount = React.Children.count(this.children);
+      React.Children.toArray(this.children).forEach((child, index) => {
+        if (child.props.ignore) {
+          ignoredItems.push(index);
+        }
+      });
+    }
+
+    registerTabItems(itemsCount, ignoredItems);
+  }
+
   onItemLayout = (itemWidth, itemIndex) => {
     this._itemsWidths[itemIndex] = itemWidth;
     if (!_.includes(this._itemsWidths, null)) {
@@ -170,6 +208,7 @@ class TabBar extends PureComponent {
   renderTabBarItems() {
     const {itemStates} = this.context;
     const {
+      items,
       labelColor,
       selectedLabelColor,
       labelStyle,
@@ -178,7 +217,33 @@ class TabBar extends PureComponent {
       selectedIconColor,
       activeBackgroundColor,
     } = this.props;
-    if (!_.isEmpty(itemStates)) {
+
+    if (_.isEmpty(itemStates)) {
+      return;
+    }
+
+    if (items) {
+      return _.map(items, (item, index) => {
+        return (
+          <TabBarItem
+            labelColor={labelColor}
+            selectedLabelColor={selectedLabelColor}
+            labelStyle={labelStyle}
+            uppercase={uppercase}
+            iconColor={iconColor}
+            selectedIconColor={selectedIconColor}
+            activeBackgroundColor={activeBackgroundColor}
+            {...item}
+            {...this.context}
+            index={index}
+            state={itemStates[index]}
+            onLayout={this.onItemLayout}
+          />
+        );
+      });
+    } else {
+      // TODO: Remove once props.children is deprecated
+
       if (this.tabBarItems) {
         return this.tabBarItems;
       }
diff --git a/src/incubator/TabController/TabBarItem.js b/src/incubator/TabController/TabBarItem.js
@@ -110,7 +110,7 @@ export default class TabBarItem extends PureComponent {
     {
       nativeEvent: {state: this.props.state},
     },
-  ]);
+  ], {useNativeDriver: true});
 
   onLayout = ({
     nativeEvent: {
@@ -191,7 +191,7 @@ export default class TabBarItem extends PureComponent {
 
     return (
       <TouchableOpacity
-        state={state}
+        pressState={state}
         style={[styles.tabItem, this.getItemStyle()]}
         onLayout={this.onLayout}
         feedbackColor={activeBackgroundColor}
diff --git a/src/incubator/TouchableOpacity.js b/src/incubator/TouchableOpacity.js
@@ -14,29 +14,36 @@ export default class TouchableOpacity extends Component {
     backgroundColor: PropTypes.string,
     activeOpacity: PropTypes.number,
     onPress: PropTypes.func,
-    state: PropTypes.object,
+    pressState: PropTypes.object,
   };
 
   static defaultProps = {
     activeOpacity: 0.2,
     feedbackColor: 'transparent',
     onPress: _.noop,
-    state: new Value(-1),
   };
 
+  state = {
+    pressState: new Value(-1)
+  }
+
+  get pressState() {
+    return this.props.pressState || this.state.pressState;
+  }
+
   onStateChange = event([
     {
-      nativeEvent: {state: this.props.state},
+      nativeEvent: {state: this.pressState},
     },
-  ]);
+  ], {useNativeDriver: true});
 
   _opacity = block([
-    cond(eq(this.props.state, State.END), call([], () => this.props.onPress(this.props))),
-    cond(eq(this.props.state, State.BEGAN), this.props.activeOpacity, 1),
+    cond(eq(this.pressState, State.END), call([], () => this.props.onPress(this.props))),
+    cond(eq(this.pressState, State.BEGAN), this.props.activeOpacity, 1),
   ]);
 
   _color = cond(
-    eq(this.props.state, State.BEGAN),
+    eq(this.pressState, State.BEGAN),
     processColor(this.props.feedbackColor || this.props.backgroundColor),
     processColor(this.props.backgroundColor),
   );
