Skip to content

Commit aa0cfea

Browse files
iRoachieiRoachie
committed
v3.6.0 #31 from iRoachie/next
2 parents 3c9404e + 4700b70 commit aa0cfea

File tree

9 files changed

+244
-25
lines changed

9 files changed

+244
-25
lines changed

‎.travis.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
language: node_js
22
cache: yarn
33
node_js:
4-
- 'stable'
4+
- 9.11.1
55

66
install:
77
- yarn

‎README.md

+9-17
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,10 @@ import MaterialTabs from 'react-native-material-tabs';
5959
| activeTextColor | #fff | string | Color of the text for the selected tab |
6060
| inactiveTextColor | rgba(255, 255, 255, 0.7) | string | Color of the text for inactive tabs |
6161
| items | none | array(string) | The headers for the individual tabs |
62-
| selectedIndex | 0 | number | The index of currrent tab selected. Indexes are mapped to the items prop |
62+
| selectedIndex | 0 | number | The index of current tab selected. Indexes are mapped to the items prop |
6363
| scrollable | false | boolean | Option between having fixed tabs or scrollable tabs |
6464
| textStyle | null | object(style) | Text style for tab titles |
65+
| activeTextStyle | {} | object(style) | Optional text style for the selected tab |
6566
| onChange | none | Function | Handler that's emitted every time the user presses a tab. You can use this to change the selected index |
6667
| allowFontScaling | true | boolean | Specifies whether fonts should scale to respect Text Size accessibility settings |
6768
| uppercase | true | boolean | Specifies whether to uppercase the tab labels |
@@ -71,36 +72,29 @@ import MaterialTabs from 'react-native-material-tabs';
7172
![Alt Text](http://i.imgur.com/GYuMgMB.gif)
7273

7374
```jsx
74-
/**
75-
* Sample React Native App
76-
* https://github.com/facebook/react-native
77-
* @flow
78-
*/
79-
80-
import React, { Component } from 'react';
81-
import { AppRegistry, StyleSheet, Text, SafeAreaView } from 'react-native';
75+
import React from 'react';
76+
import { StyleSheet, Text, SafeAreaView } from 'react-native';
8277
import MaterialTabs from 'react-native-material-tabs';
8378

84-
export default class Example extends Component {
79+
export default class Example extends React.Component {
8580
state = {
8681
selectedTab: 0,
8782
};
8883

89-
setTab(tab) {
90-
this.setState({ selectedTab: tab });
91-
}
84+
setTab = selectedTab => {
85+
this.setState({ selectedTab });
86+
};
9287

9388
render() {
9489
return (
9590
<SafeAreaView style={styles.container}>
9691
<MaterialTabs
9792
items={['One', 'Two', 'Three', 'Four', 'Five']}
9893
selectedIndex={this.state.selectedTab}
99-
onChange={this.setTab.bind(this)}
94+
onChange={this.setTab}
10095
barColor="#1fbcd2"
10196
indicatorColor="#fffe94"
10297
activeTextColor="white"
103-
textStyle={{ fontFamily: 'Papyrus' }}
10498
/>
10599
</SafeAreaView>
106100
);
@@ -112,6 +106,4 @@ const styles = StyleSheet.create({
112106
flex: 1,
113107
},
114108
});
115-
116-
AppRegistry.registerComponent('Example', () => Example);
117109
```

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-material-tabs",
3-
"version": "3.5.0",
3+
"version": "3.6.0",
44
"description": "Material Design implementation of Tabs",
55
"keywords": ["react", "react-native", "material-design", "tabs"],
66
"main": "./src/index.js",

‎src/__tests__/__snapshots__/main.test.js.snap

+190-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,191 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Main should apply custom activeTextStyle to active tab 1`] = `
4+
<View
5+
barColor="#13897b"
6+
barHeight={48}
7+
onLayout={[Function]}
8+
style={
9+
Array [
10+
Object {
11+
"backgroundColor": "#13897b",
12+
"height": 48,
13+
},
14+
undefined,
15+
]
16+
}
17+
>
18+
<RCTScrollView
19+
horizontal={true}
20+
scrollEnabled={false}
21+
showsHorizontalScrollIndicator={false}
22+
>
23+
<View>
24+
<View
25+
barHeight={48}
26+
style={
27+
Array [
28+
Object {
29+
"flexDirection": "row",
30+
"height": 46,
31+
},
32+
undefined,
33+
]
34+
}
35+
>
36+
<View
37+
accessibilityComponentType={undefined}
38+
accessibilityLabel={undefined}
39+
accessibilityTraits={undefined}
40+
accessible={true}
41+
collapsable={undefined}
42+
hasTVPreferredFocus={undefined}
43+
hitSlop={undefined}
44+
isTVSelectable={true}
45+
nativeID={undefined}
46+
onLayout={undefined}
47+
onResponderGrant={[Function]}
48+
onResponderMove={[Function]}
49+
onResponderRelease={[Function]}
50+
onResponderTerminate={[Function]}
51+
onResponderTerminationRequest={[Function]}
52+
onStartShouldSetResponder={[Function]}
53+
style={
54+
Object {
55+
"opacity": 1,
56+
"width": 0,
57+
}
58+
}
59+
testID={undefined}
60+
tvParallaxProperties={undefined}
61+
>
62+
<View
63+
style={
64+
Array [
65+
Object {
66+
"alignItems": "center",
67+
"height": 48,
68+
"justifyContent": "center",
69+
"paddingHorizontal": 12,
70+
},
71+
undefined,
72+
]
73+
}
74+
tabHeight={48}
75+
>
76+
<Text
77+
accessible={true}
78+
allowFontScaling={true}
79+
color="#fff"
80+
ellipsizeMode="tail"
81+
style={
82+
Array [
83+
Object {
84+
"color": "#fff",
85+
"fontFamily": "System",
86+
"fontSize": 14,
87+
"fontWeight": "500",
88+
"minWidth": "100%",
89+
"textAlign": "center",
90+
},
91+
Object {
92+
"color": "pink",
93+
},
94+
]
95+
}
96+
>
97+
TAB1
98+
</Text>
99+
</View>
100+
</View>
101+
<View
102+
accessibilityComponentType={undefined}
103+
accessibilityLabel={undefined}
104+
accessibilityTraits={undefined}
105+
accessible={true}
106+
collapsable={undefined}
107+
hasTVPreferredFocus={undefined}
108+
hitSlop={undefined}
109+
isTVSelectable={true}
110+
nativeID={undefined}
111+
onLayout={undefined}
112+
onResponderGrant={[Function]}
113+
onResponderMove={[Function]}
114+
onResponderRelease={[Function]}
115+
onResponderTerminate={[Function]}
116+
onResponderTerminationRequest={[Function]}
117+
onStartShouldSetResponder={[Function]}
118+
style={
119+
Object {
120+
"opacity": 1,
121+
"width": 0,
122+
}
123+
}
124+
testID={undefined}
125+
tvParallaxProperties={undefined}
126+
>
127+
<View
128+
style={
129+
Array [
130+
Object {
131+
"alignItems": "center",
132+
"height": 48,
133+
"justifyContent": "center",
134+
"paddingHorizontal": 12,
135+
},
136+
undefined,
137+
]
138+
}
139+
tabHeight={48}
140+
>
141+
<Text
142+
accessible={true}
143+
allowFontScaling={true}
144+
color="rgba(255, 255, 255, 0.7)"
145+
ellipsizeMode="tail"
146+
style={
147+
Array [
148+
Object {
149+
"color": "rgba(255, 255, 255, 0.7)",
150+
"fontFamily": "System",
151+
"fontSize": 14,
152+
"fontWeight": "500",
153+
"minWidth": "100%",
154+
"textAlign": "center",
155+
},
156+
Object {},
157+
]
158+
}
159+
>
160+
TAB2
161+
</Text>
162+
</View>
163+
</View>
164+
</View>
165+
<View
166+
collapsable={undefined}
167+
color="#fff"
168+
style={
169+
Object {
170+
"backgroundColor": "#fff",
171+
"bottom": 0,
172+
"height": 2,
173+
"position": "absolute",
174+
"transform": Array [
175+
Object {
176+
"translateX": 0,
177+
},
178+
],
179+
"width": 0,
180+
}
181+
}
182+
tabWidth={0}
183+
/>
184+
</View>
185+
</RCTScrollView>
186+
</View>
187+
`;
188+
3189
exports[`Main should apply custom fontFamily to tab 1`] = `
4190
<View
5191
barColor="#13897b"
@@ -276,7 +462,7 @@ exports[`Main should display tab labels not uppercased 1`] = `
276462
"minWidth": "100%",
277463
"textAlign": "center",
278464
},
279-
null,
465+
Object {},
280466
]
281467
}
282468
>
@@ -339,7 +525,7 @@ exports[`Main should display tab labels not uppercased 1`] = `
339525
"minWidth": "100%",
340526
"textAlign": "center",
341527
},
342-
null,
528+
Object {},
343529
]
344530
}
345531
>
@@ -460,7 +646,7 @@ exports[`Main should render without errors 1`] = `
460646
"minWidth": "100%",
461647
"textAlign": "center",
462648
},
463-
null,
649+
Object {},
464650
]
465651
}
466652
>
@@ -523,7 +709,7 @@ exports[`Main should render without errors 1`] = `
523709
"minWidth": "100%",
524710
"textAlign": "center",
525711
},
526-
null,
712+
Object {},
527713
]
528714
}
529715
>

‎src/__tests__/main.test.js

+24
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,30 @@ describe('Main', () => {
9292
expect(tree).toMatchSnapshot();
9393
});
9494

95+
it('should apply custom activeTextStyle to active tab', () => {
96+
const textComponent = (
97+
<MaterialTabs
98+
selectedIndex={0}
99+
items={['Tab1', 'Tab2']}
100+
onChange={onChange}
101+
activeTextStyle={{ color: 'pink' }}
102+
/>
103+
);
104+
105+
const wrapper = shallow(textComponent);
106+
const tree = create(textComponent).toJSON();
107+
108+
const tab = wrapper
109+
.find('Tab')
110+
.at(0) // Tab
111+
.dive() // TabButton
112+
.children() // TabBody
113+
.children(); // TabText
114+
115+
expect(tab.props().style).toEqual({ color: 'pink' });
116+
expect(tree).toMatchSnapshot();
117+
});
118+
95119
it('should display tab labels not uppercased', () => {
96120
const tabs = (
97121
<MaterialTabs

‎src/components/MaterialTabs.js

+8
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ type Props = {
1919
inactiveTextColor: string,
2020
scrollable: boolean,
2121
textStyle: StyleObj,
22+
activeTextStyle: StyleObj,
2223
items: string[],
2324
uppercase: boolean,
2425
onChange: (index: number) => void,
@@ -41,6 +42,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
4142
inactiveTextColor: PropTypes.string,
4243
scrollable: PropTypes.bool,
4344
textStyle: Text.propTypes.style,
45+
activeTextStyle: Text.propTypes.style,
4446
items: PropTypes.arrayOf(PropTypes.string).isRequired,
4547
uppercase: PropTypes.bool,
4648
onChange: PropTypes.func.isRequired,
@@ -57,6 +59,7 @@ export default class MaterialTabs extends React.Component<Props, State> {
5759
scrollable: false,
5860
textStyle: null,
5961
uppercase: true,
62+
activeTextStyle: {},
6063
};
6164

6265
state = {
@@ -176,6 +179,11 @@ export default class MaterialTabs extends React.Component<Props, State> {
176179
active={idx === this.props.selectedIndex}
177180
activeTextColor={this.props.activeTextColor}
178181
textStyle={this.props.textStyle}
182+
activeTextStyle={
183+
this.props.selectedIndex === idx
184+
? this.props.activeTextStyle
185+
: {}
186+
}
179187
tabHeight={this.props.barHeight}
180188
tabWidth={
181189
!this.props.scrollable

0 commit comments

Comments
 (0)