From d1525dd5ac6535a7eff7f270d9fbed2e72581587 Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Thu, 28 Jun 2018 18:10:50 -0400 Subject: [PATCH 1/3] ci(travis): Fix node version --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index e96ab50..50b793e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,7 +1,7 @@ language: node_js cache: yarn node_js: - - 'stable' + - 9.11.1 install: - yarn From 087b9386f7a21c89f27a64b0e42f989a98f36a9e Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Fri, 29 Jun 2018 00:20:44 -0400 Subject: [PATCH 2/3] Add activeTextStyle prop (#30) * ci(travis): Fix node version * Add activeTabStyle prop * Update snapshots * Add test * Add activeTextStlye prop * Rename active props to selected * Change back selected to active * Remove activeTabStyle --- README.md | 3 +- src/__tests__/__snapshots__/main.test.js.snap | 194 +++++++++++++++++- src/__tests__/main.test.js | 24 +++ src/components/MaterialTabs.js | 8 + src/components/Tab/Tab.js | 5 +- src/components/Tab/styles.js | 1 + src/index.d.ts | 7 +- 7 files changed, 235 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index eb8b568..49fccbb 100644 --- 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 | diff --git a/src/__tests__/__snapshots__/main.test.js.snap b/src/__tests__/__snapshots__/main.test.js.snap index e5dcba5..c114fe8 100644 --- 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`] = ` + + + + + + + + TAB1 + + + + + + + TAB2 + + + + + + + + +`; + exports[`Main should apply custom fontFamily to tab 1`] = ` @@ -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 index 1ee43c6..590f23f 100644 --- 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 = ( + + ); + + 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 = ( void, @@ -41,6 +42,7 @@ export default class MaterialTabs extends React.Component { 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 { scrollable: false, textStyle: null, uppercase: true, + activeTextStyle: {}, }; state = { @@ -176,6 +179,11 @@ export default class MaterialTabs extends React.Component { 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 diff --git a/src/components/Tab/Tab.js b/src/components/Tab/Tab.js index 806d92e..8259975 100644 --- a/src/components/Tab/Tab.js +++ b/src/components/Tab/Tab.js @@ -1,6 +1,7 @@ // @flow import React from 'react'; +import { StyleSheet } from 'react-native'; import { TabText, TabBody, TabButton } from './styles'; import type { StyleObj } from '../../lib/definitions'; @@ -15,6 +16,7 @@ type TabProps = { active?: boolean, textStyle: StyleObj, uppercase: boolean, + activeTextStyle?: StyleObj, onPress?: () => void, }; @@ -30,6 +32,7 @@ const Tab = ({ stretch, textStyle, uppercase, + activeTextStyle, }: TabProps) => { const color = active ? activeTextColor : inActiveTextColor; @@ -38,7 +41,7 @@ const Tab = ({ {uppercase ? text.toUpperCase() : text} diff --git a/src/components/Tab/styles.js b/src/components/Tab/styles.js index 1004e4a..cd65b74 100644 --- a/src/components/Tab/styles.js +++ b/src/components/Tab/styles.js @@ -3,6 +3,7 @@ import styled from 'styled-components/native'; import { Platform } from 'react-native'; import Button from '../Touchable'; +import type { StyleObj } from '../../lib/definitions'; type TabBodyProps = { tabHeight: number, diff --git a/src/index.d.ts b/src/index.d.ts index ac258ee..04a8eb7 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -70,11 +70,16 @@ interface TabsProps { /** * Make the titles uppercased - * + * * Default is true */ uppercase?: boolean; + /** + * Optional text style fot selected tab + */ + activeTextStyle?: StyleProp; + /** * Handler that's emitted every time the user presses a tab. * You can use this to change the selected index From 4700b702d0e515dace06709862db8f709e9b8c7e Mon Sep 17 00:00:00 2001 From: Kyle Roach Date: Fri, 29 Jun 2018 00:30:42 -0400 Subject: [PATCH 3/3] Update Readme example to remove bind --- README.md | 23 +++++++---------------- 1 file changed, 7 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 49fccbb..bd0b096 100644 --- a/README.md +++ b/README.md @@ -72,24 +72,18 @@ 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 ( @@ -97,11 +91,10 @@ export default class Example extends Component { ); @@ -113,6 +106,4 @@ const styles = StyleSheet.create({ flex: 1, }, }); - -AppRegistry.registerComponent('Example', () => Example); ```