TabBar - start deprecation and remove usages (#1545)

Author: Inbal-Tish

demo/src/index.js

@@ -118,9 +118,6 @@ module.exports = {
       get TabControllerScreen() {
         return require('./screens/componentScreens/TabControllerScreen').default;
       },
-      get TabBarScreen() {
-        return require('./screens/componentScreens/TabBarScreen').default;
-      },
       get TextScreen() {
         return require('./screens/componentScreens/TextScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -95,7 +95,6 @@ export const navigationData = {
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
       {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
-      {title: 'TabBar', tags: 'tab bar', screen: 'unicorn.components.TabBarScreen'},
       {
         title: 'withScrollEnabler',
         tags: 'scroll enabled withScrollEnabler',

demo/src/screens/componentScreens/TabBarScreen.tsx

@@ -41,7 +41,6 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
   registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);
   registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
-  registrar('unicorn.components.TabBarScreen', () => require('./TabBarScreen').default);
   registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
   registrar('unicorn.components.TextFieldScreen', () => require('./TextFieldScreen').default);
   registrar('unicorn.wrappers.TouchableOpacityScreen', () => require('./TouchableOpacityScreen').default);

demo/src/screens/componentScreens/index.js

@@ -2,7 +2,8 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {TabBar, Colors, Typography, View, Text} from 'react-native-ui-lib';
+import {TabController, Colors, Typography, View, Text} from 'react-native-ui-lib';
+
 
 const WEIGHTS = ['Thin', 'Light', 'Default', 'Regular', 'Medium', 'Bold', 'Heavy', 'Black'];
 
@@ -15,10 +16,6 @@ export default class TypographyScreen extends Component {
     color: Colors.grey10
   };
 
-  state = {
-    currentPage: 0
-  };
-
   getWeightSuffix(weight) {
     if (weight === 'Default') {
       return '';
@@ -30,10 +27,9 @@ export default class TypographyScreen extends Component {
     }
   }
 
-  renderPage() {
+  renderPage(index = 0) {
     const {color} = this.props;
-    const {currentPage} = this.state;
-    const weight = WEIGHTS[currentPage];
+    const weight = WEIGHTS[index];
     const weightSuffix = this.getWeightSuffix(weight);
     return (
       <ScrollView>
@@ -62,19 +58,29 @@ export default class TypographyScreen extends Component {
     );
   }
 
-  render() {
-    const {currentPage} = this.state;
+  renderPages() {
     return (
       <View flex>
-        <TabBar selectedIndex={currentPage} onChangeIndex={index => this.setState({currentPage: index})}>
-          {_.map(WEIGHTS, weight => (
-            <TabBar.Item key={weight} label={weight}/>
-          ))}
-        </TabBar>
-        <View flex>
-          {this.renderPage()}
-        </View>
+        {_.map(WEIGHTS, (item, index) => {
+          return (
+            <TabController.TabPage key={`${item.title}_page`} index={index}>
+              {this.renderPage(index)}
+            </TabController.TabPage>
+          );
+        })}
       </View>
     );
   }
+
+  render() {
+    return (
+      <TabController>
+        <TabController.TabBar
+          items={WEIGHTS.map(item => ({label: item, key: item}))}
+          activeBackgroundColor={Colors.blue70}
+        />
+        {this.renderPages()}
+      </TabController>
+    );
+  }
 }

demo/src/screens/foundationScreens/TypographyScreen.js

@@ -692,21 +692,6 @@ ruleTester.run('typography-deprecation', rule, {
     //   options: options,
     //   code: `
     //     import React, {Component} from 'react';
-    //     import {Typography, TabBar} from 'our-source';
-    //     export default class OurList extends Component {
-    //       render() {
-    //         const titleVal = true;
-    //         return (
-    //           <TabBar labelStyle={{title: titleVal}} selectedLabelStyle={{title: titleVal}}/>
-    //         )
-    //       }
-    //     }`,
-    //     errors: [{message: `'Typography.title' is deprecated. Please use 'Typography.heading' instead (fix is available).`}]
-    // },
-    // {
-    //   options: options,
-    //   code: `
-    //     import React, {Component} from 'react';
     //     import {Typography, Label} from 'our-source';
     //     export default class OurList extends Component {
     //       render() {

eslint-rules/tests/lib/rules/typography-deprecation.js

@@ -45,9 +45,6 @@ Implementation had slightly changed, please see [example screen](https://github.
 - `relative` value for `position` prop was removed
 - Blur effect is not part of the component 
 
-#### TabBar
-Implementation had slightly changed, please see [example screen](https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabBarScreen.tsx)
-
 #### ListItem
 Component not supporting animation out of the box (animatable wrapper was removed)
 

markdowns/getting-started/v5.md

@@ -134,7 +134,7 @@ export default {
   get TabController() {
     return require('./tabController').default;
   },
-  get TabBar() {
+  get TabBar() { //TODO: remove on V7
     return require('./tabBar').default;
   },
   get ChipsInput() {