fix issue with code leftover in TabController.TabBar of optimize prop

Author: ethanshar

demo/src/screens/componentScreens/TabControllerScreen/index.js

@@ -1,19 +1,37 @@
 import React, {Component} from 'react';
 import {ActivityIndicator} from 'react-native';
-import {TabController, Colors, View, Text, Image, Assets, Button} from 'react-native-ui-lib'; //eslint-disable-line
+import {
+  TabController,
+  Colors,
+  View,
+  Text,
+  Button
+} from 'react-native-ui-lib'; //eslint-disable-line
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import _ from 'lodash';
 
 import Tab1 from './tab1';
 import Tab2 from './tab2';
 import Tab3 from './tab3';
 
-const TABS = ['Home', 'Posts', 'Reviews', 'Videos', 'Photos', 'Events', 'About', 'Community', 'Groups', 'Offers'];
+const TABS = [
+  'Home',
+  'Posts',
+  'Reviews',
+  'Videos',
+  'Photos',
+  'Events',
+  'About',
+  'Community',
+  'Groups',
+  'Offers'
+];
 
 class TabControllerScreen extends Component {
   state = {
     asCarousel: true,
     centerSelected: false,
+    fewItems: false,
     selectedIndex: 0,
     items: _.chain(TABS)
       .map((tab) => ({label: tab, key: tab}))
@@ -39,10 +57,32 @@ class TabControllerScreen extends Component {
     const {tabsCount} = this.state;
 
     if (tabsCount < 6) {
-      this.setState({tabsCount: tabsCount + 1, key: Date.now(), selectedIndex: tabsCount});
+      this.setState({
+        tabsCount: tabsCount + 1,
+        key: Date.now(),
+        selectedIndex: tabsCount
+      });
     }
   };
 
+  toggleItemsCount = () => {
+    const {fewItems} = this.state;
+
+    let items;
+    if (fewItems) {
+      items = _.chain(TABS)
+        .map((tab) => ({label: tab, key: tab}))
+        .value();
+    } else {
+      items = _.chain(TABS)
+        .take(3)
+        .map((tab) => ({label: tab, key: tab}))
+        .value();
+    }
+
+    this.setState({fewItems: !fewItems, items, key: Date.now()});
+  };
+
   toggleCarouselMode = () => {
     this.setState({
       asCarousel: !this.state.asCarousel,
@@ -84,7 +124,12 @@ class TabControllerScreen extends Component {
         <TabController.TabPage index={1}>
           <Tab2/>
         </TabController.TabPage>
-        <TabController.TabPage index={2} lazy lazyLoadTime={1500} renderLoading={this.renderLoadingPage}>
+        <TabController.TabPage
+          index={2}
+          lazy
+          lazyLoadTime={1500}
+          renderLoading={this.renderLoadingPage}
+        >
           <Tab3/>
         </TabController.TabPage>
 
@@ -102,14 +147,21 @@ class TabControllerScreen extends Component {
   }
 
   render() {
-    const {key, selectedIndex, asCarousel, centerSelected, items} = this.state;
+    const {
+      key,
+      selectedIndex,
+      asCarousel,
+      centerSelected,
+      fewItems,
+      items
+    } = this.state;
     return (
       <View flex bg-grey70>
         <TabController
           key={key}
           asCarousel={asCarousel}
           selectedIndex={selectedIndex}
-          onChangeIndex={this.onChangeIndex}  
+          onChangeIndex={this.onChangeIndex}
           items={items}
         >
           <TabController.TabBar
@@ -130,6 +182,14 @@ class TabControllerScreen extends Component {
           {this.renderTabPages()}
         </TabController>
         <View absB left margin-20 marginB-100 style={{zIndex: 1}}>
+          <Button
+            bg-green10={!fewItems}
+            bg-green30={fewItems}
+            label={fewItems ? 'Show Many Items' : 'Show Few Items'}
+            marginB-12
+            size="small"
+            onPress={this.toggleItemsCount}
+          />
           <Button
             bg-grey20={!asCarousel}
             bg-green30={asCarousel}

src/components/tabController/TabBar.js

@@ -141,10 +141,6 @@ class TabBar extends PureComponent {
     if ((props.items || this.children) && !context.items) {
       this.registerTabItems();
     }
-
-    if (this.items) {
-      this.measureItems();
-    }
   }
 
   get containerWidth() {
@@ -190,29 +186,6 @@ class TabBar extends PureComponent {
     }
   }
 
-  measureItems = async () => {
-    const {items: contextItems} = this.context;
-    const {labelStyle, items: propsItems} = this.props;
-    const items = contextItems || propsItems;
-    const measuring = _.map(items, (item) => {
-      return Typography.measureTextSize(item.label, labelStyle);
-    });
-    const results = await Promise.all(measuring);
-    const widths = _.map(results, (item) => item.width + Spacings.s4 * 2);
-    const offsets = [];
-    _.forEach(widths, (width, index) => {
-      if (index === 0) {
-        offsets[index] = this.centerOffset;
-      } else {
-        offsets[index] = widths[index - 1] + offsets[index - 1];
-      }
-    });
-    this._itemsWidths = widths;
-    this._itemsOffsets = offsets;
-    // TODO: consider saving this setState and ride registerTabItems setState
-    this.setItemsLayouts();
-  };
-
   registerTabItems() {
     const {registerTabItems} = this.context;
     const {items} = this.props;