v3.6.0 #31 from iRoachie/next

iRoachie · Jun 29, 2018 · aa0cfea · aa0cfea
2 parents 3c9404e + 4700b70
commit aa0cfea
Show file tree

Hide file tree

Showing 9 changed files with 244 additions and 25 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,7 +1,7 @@
 language: node_js
 cache: yarn
 node_js:
-  - 'stable'
+  - 9.11.1
 
 install:
  - yarn

diff --git a/README.md b/README.md
@@ -59,9 +59,10 @@ import MaterialTabs from 'react-native-material-tabs';
 | activeTextColor   | #fff                     | string        | Color of the text for the selected tab                                                                  |
 | inactiveTextColor | rgba(255, 255, 255, 0.7) | string        | Color of the text for inactive tabs                                                                     |
 | items             | none                     | array(string) | The headers for the individual tabs                                                                     |
-| selectedIndex     | 0                        | number        | The index of currrent tab selected. Indexes are mapped to the items prop                                |
+| selectedIndex     | 0                        | number        | The index of current tab selected. Indexes are mapped to the items prop                                 |
 | scrollable        | false                    | boolean       | Option between having fixed tabs or scrollable tabs                                                     |
 | textStyle         | null                     | object(style) | Text style for tab titles                                                                               |
+| activeTextStyle   | {}                       | object(style) | Optional text style for the selected tab                                                                |
 | onChange          | none                     | Function      | Handler that's emitted every time the user presses a tab. You can use this to change the selected index |
 | allowFontScaling  | true                     | boolean       | Specifies whether fonts should scale to respect Text Size accessibility settings                        |
 | uppercase         | true                     | boolean       | Specifies whether to uppercase the tab labels                                                           |
@@ -71,36 +72,29 @@ import MaterialTabs from 'react-native-material-tabs';
 ![Alt Text](http://i.imgur.com/GYuMgMB.gif)
 
 ```jsx
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
-import React, { Component } from 'react';
-import { AppRegistry, StyleSheet, Text, SafeAreaView } from 'react-native';
+import React from 'react';
+import { StyleSheet, Text, SafeAreaView } from 'react-native';
 import MaterialTabs from 'react-native-material-tabs';
 
-export default class Example extends Component {
+export default class Example extends React.Component {
   state = {
     selectedTab: 0,
   };
 
-  setTab(tab) {
-    this.setState({ selectedTab: tab });
-  }
+  setTab = selectedTab => {
+    this.setState({ selectedTab });
+  };
 
   render() {
     return (
       <SafeAreaView style={styles.container}>
         <MaterialTabs
           items={['One', 'Two', 'Three', 'Four', 'Five']}
           selectedIndex={this.state.selectedTab}
-          onChange={this.setTab.bind(this)}
+          onChange={this.setTab}
           barColor="#1fbcd2"
           indicatorColor="#fffe94"
           activeTextColor="white"
-          textStyle={{ fontFamily: 'Papyrus' }}
         />
       </SafeAreaView>
     );
@@ -112,6 +106,4 @@ const styles = StyleSheet.create({
     flex: 1,
   },
 });
-
-AppRegistry.registerComponent('Example', () => Example);
 ```
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-material-tabs",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Material Design implementation of Tabs",
   "keywords": ["react", "react-native", "material-design", "tabs"],
   "main": "./src/index.js",

diff --git a/src/__tests__/__snapshots__/main.test.js.snap b/src/__tests__/__snapshots__/main.test.js.snap
@@ -1,5 +1,191 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Main should apply custom activeTextStyle to active tab 1`] = `
+<View
+  barColor="#13897b"
+  barHeight={48}
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#13897b",
+        "height": 48,
+      },
+      undefined,
+    ]
+  }
+>
+  <RCTScrollView
+    horizontal={true}
+    scrollEnabled={false}
+    showsHorizontalScrollIndicator={false}
+  >
+    <View>
+      <View
+        barHeight={48}
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+              "height": 46,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          collapsable={undefined}
+          hasTVPreferredFocus={undefined}
+          hitSlop={undefined}
+          isTVSelectable={true}
+          nativeID={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "opacity": 1,
+              "width": 0,
+            }
+          }
+          testID={undefined}
+          tvParallaxProperties={undefined}
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": 48,
+                  "justifyContent": "center",
+                  "paddingHorizontal": 12,
+                },
+                undefined,
+              ]
+            }
+            tabHeight={48}
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              color="#fff"
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "#fff",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "minWidth": "100%",
+                    "textAlign": "center",
+                  },
+                  Object {
+                    "color": "pink",
+                  },
+                ]
+              }
+            >
+              TAB1
+            </Text>
+          </View>
+        </View>
+        <View
+          accessibilityComponentType={undefined}
+          accessibilityLabel={undefined}
+          accessibilityTraits={undefined}
+          accessible={true}
+          collapsable={undefined}
+          hasTVPreferredFocus={undefined}
+          hitSlop={undefined}
+          isTVSelectable={true}
+          nativeID={undefined}
+          onLayout={undefined}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "opacity": 1,
+              "width": 0,
+            }
+          }
+          testID={undefined}
+          tvParallaxProperties={undefined}
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": 48,
+                  "justifyContent": "center",
+                  "paddingHorizontal": 12,
+                },
+                undefined,
+              ]
+            }
+            tabHeight={48}
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              color="rgba(255, 255, 255, 0.7)"
+              ellipsizeMode="tail"
+              style={
+                Array [
+                  Object {
+                    "color": "rgba(255, 255, 255, 0.7)",
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "500",
+                    "minWidth": "100%",
+                    "textAlign": "center",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              TAB2
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        collapsable={undefined}
+        color="#fff"
+        style={
+          Object {
+            "backgroundColor": "#fff",
+            "bottom": 0,
+            "height": 2,
+            "position": "absolute",
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+            ],
+            "width": 0,
+          }
+        }
+        tabWidth={0}
+      />
+    </View>
+  </RCTScrollView>
+</View>
+`;
+
 exports[`Main should apply custom fontFamily to tab 1`] = `
 <View
   barColor="#13897b"
@@ -276,7 +462,7 @@ exports[`Main should display tab labels not uppercased 1`] = `
                     "minWidth": "100%",
                     "textAlign": "center",
                   },
-                  null,
+                  Object {},
                 ]
               }
             >
@@ -339,7 +525,7 @@ exports[`Main should display tab labels not uppercased 1`] = `
                     "minWidth": "100%",
                     "textAlign": "center",
                   },
-                  null,
+                  Object {},
                 ]
               }
             >
@@ -460,7 +646,7 @@ exports[`Main should render without errors 1`] = `
                     "minWidth": "100%",
                     "textAlign": "center",
                   },
-                  null,
+                  Object {},
                 ]
               }
             >
@@ -523,7 +709,7 @@ exports[`Main should render without errors 1`] = `
                     "minWidth": "100%",
                     "textAlign": "center",
                   },
-                  null,
+                  Object {},
                 ]
               }
             >

diff --git a/src/__tests__/main.test.js b/src/__tests__/main.test.js
@@ -92,6 +92,30 @@ describe('Main', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should apply custom activeTextStyle to active tab', () => {
+    const textComponent = (
+      <MaterialTabs
+        selectedIndex={0}
+        items={['Tab1', 'Tab2']}
+        onChange={onChange}
+        activeTextStyle={{ color: 'pink' }}
+      />
+    );
+
+    const wrapper = shallow(textComponent);
+    const tree = create(textComponent).toJSON();
+
+    const tab = wrapper
+      .find('Tab')
+      .at(0) // Tab
+      .dive() // TabButton
+      .children() // TabBody
+      .children(); // TabText
+
+    expect(tab.props().style).toEqual({ color: 'pink' });
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should display tab labels not uppercased', () => {
     const tabs = (
       <MaterialTabs

diff --git a/src/components/MaterialTabs.js b/src/components/MaterialTabs.js
@@ -19,6 +19,7 @@ type Props = {
   inactiveTextColor: string,
   scrollable: boolean,
   textStyle: StyleObj,
+  activeTextStyle: StyleObj,
   items: string[],
   uppercase: boolean,
   onChange: (index: number) => void,
@@ -41,6 +42,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
     inactiveTextColor: PropTypes.string,
     scrollable: PropTypes.bool,
     textStyle: Text.propTypes.style,
+    activeTextStyle: Text.propTypes.style,
     items: PropTypes.arrayOf(PropTypes.string).isRequired,
     uppercase: PropTypes.bool,
     onChange: PropTypes.func.isRequired,
@@ -57,6 +59,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
     scrollable: false,
     textStyle: null,
     uppercase: true,
+    activeTextStyle: {},
   };
 
   state = {
@@ -176,6 +179,11 @@ export default class MaterialTabs extends React.Component<Props, State> {
                 active={idx === this.props.selectedIndex}
                 activeTextColor={this.props.activeTextColor}
                 textStyle={this.props.textStyle}
+                activeTextStyle={
+                  this.props.selectedIndex === idx
+                    ? this.props.activeTextStyle
+                    : {}
+                }
                 tabHeight={this.props.barHeight}
                 tabWidth={
                   !this.props.scrollable