Adding TabBar disabled feature (#2760)

GeekyAnts · Jul 10, 2019 · 75341ac · 75341ac
1 parent 0014bd0
commit 75341ac
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/src/basic/Tabs/DefaultTabBar.js b/src/basic/Tabs/DefaultTabBar.js
@@ -22,6 +22,7 @@ const DefaultTabBar = createReactClass({
     backgroundColor: PropTypes.string,
     activeTextColor: PropTypes.string,
     inactiveTextColor: PropTypes.string,
+    disabledTextColor: PropTypes.string,
     tabStyle: ViewPropTypes.style,
     renderTab: PropTypes.func,
     underlineStyle: ViewPropTypes.style,
@@ -35,6 +36,7 @@ const DefaultTabBar = createReactClass({
     return {
       activeTextColor: variable.topTabBarActiveTextColor,
       inactiveTextColor: variable.topTabBarTextColor,
+      disabledTextColor: variable.tabBarDisabledTextColor,
       backgroundColor: null,
       tabFontSize: variable.tabFontSize
     };
@@ -52,18 +54,26 @@ const DefaultTabBar = createReactClass({
     textStyle,
     activeTextStyle,
     tabHeaderStyle,
-    tabFontSize
+    tabFontSize,
+    disabled,
+    disabledTextColor
   ) {
     const headerContent =
       typeof name !== 'string' ? name.props.children : undefined;
     const { activeTextColor, inactiveTextColor } = this.props;
-    const textColor = isTabActive ? activeTextColor : inactiveTextColor;
+    const textColor = disabled
+      ? disabledTextColor
+      : isTabActive
+      ? activeTextColor
+      : inactiveTextColor;
     const fontWeight = isTabActive ? 'bold' : 'normal';
-    // const fontSize = tabFontSize;
+    const isDisabled = disabled == undefined ? false : true;
+
     if (typeof name === 'string') {
       return (
         <Button
           style={{ flex: 1 }}
+          disabled={isDisabled}
           key={name}
           onPress={() => onPressHandler(page)}
         >
@@ -74,18 +84,20 @@ const DefaultTabBar = createReactClass({
             <Text
               style={[
                 { fontSize: tabFontSize },
-                isTabActive ? activeTextStyle : textStyle
+                isTabActive ? activeTextStyle : textStyle,
+                { color: textColor }
               ]}
             >
               {name}
             </Text>
           </TabHeading>
         </Button>
       );
-    } 
+    }
     return (
       <Button
         style={{ flex: 1 }}
+        disabled={isDisabled}
         key={_.random(1.2, 5.2)}
         onPress={() => onPressHandler(page)}
       >
@@ -94,7 +106,6 @@ const DefaultTabBar = createReactClass({
         </TabHeading>
       </Button>
     );
-
   },
 
   render() {
@@ -136,7 +147,9 @@ const DefaultTabBar = createReactClass({
             this.props.textStyle[page],
             this.props.activeTextStyle[page],
             this.props.tabHeaderStyle[page],
-            variables.tabFontSize
+            variables.tabFontSize,
+            this.props.disabled[page],
+            this.props.disabledTextColor
           );
         })}
         <Animated.View

diff --git a/src/basic/Tabs/ScrollableTabBar.js b/src/basic/Tabs/ScrollableTabBar.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import _ from 'lodash';
+import { isEqual } from 'lodash';
 import { connectStyle, StyleProvider } from 'native-base-shoutem-theme';
 import mapPropsToStyleNames from '../../utils/mapPropsToStyleNames';
 import variable from './../../theme/variables/platform';
@@ -168,7 +168,6 @@ const ScrollableTabBar = createReactClass({
     const { activeTextColor, inactiveTextColor } = this.props;
     const textColor = isTabActive ? activeTextColor : inactiveTextColor;
     const fontWeight = isTabActive ? 'bold' : 'normal';
-    // const fontSize = tabFontSize;
 
     if (typeof name === 'string') {
       return (
@@ -193,10 +192,10 @@ const ScrollableTabBar = createReactClass({
           </TabHeading>
         </Button>
       );
-    } 
+    }
     return (
       <Button
-        key={_.random(1.2, 5.2)}
+        key={`${name}_${page}`}
         onPress={() => onPressHandler(page)}
         onLayout={onLayoutHandler}
       >
@@ -294,7 +293,7 @@ const ScrollableTabBar = createReactClass({
   componentWillReceiveProps(nextProps) {
     // If the tabs change, force the width of the tabs container to be recalculated
     if (
-      !_.isEqual(this.props.tabs, nextProps.tabs) &&
+      !isEqual(this.props.tabs, nextProps.tabs) &&
       this.state._containerWidth
     ) {
       this.setState({ _containerWidth: null });

diff --git a/src/basic/Tabs/index.js b/src/basic/Tabs/index.js
@@ -112,9 +112,8 @@ const ScrollableTabView = createReactClass({
       return null;
     } else if (this.props.renderTabBar) {
       return React.cloneElement(this.props.renderTabBar(props), props);
-    } 
+    }
     return <DefaultTabBar {...props} />;
-
   },
 
   updateSceneKeys({
@@ -161,7 +160,7 @@ const ScrollableTabView = createReactClass({
   },
 
   _makeSceneKey(child, idx) {
-    return `${child.props.heading  }_${  idx}`;
+    return `${child.props.heading}_${idx}`;
   },
 
   renderScrollableContent() {
@@ -290,6 +289,7 @@ const ScrollableTabView = createReactClass({
       tabHeaderStyle: this._children().map(child =>
         _.get(child.props.heading.props, 'style', undefined)
       ),
+      disabled: this._children().map(child => child.props.disabled),
       activeTab: this.state.currentPage,
       scrollValue: this.state.scrollValue,
       containerWidth: this.state.containerWidth

diff --git a/src/theme/variables/platform.js b/src/theme/variables/platform.js
@@ -245,6 +245,7 @@ export default {
   inverseSpinnerColor: '#1A191B',
 
   // Tab
+  tabBarDisabledTextColor: '#BDBDBD',
   tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
   topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
   topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',