Skip to content

Commit fa1acec

Browse files
iRoachieiRoachie
authored
v3.8.0 #41 
2 parents b029381 + 9711d2b commit fa1acec

15 files changed

+2293
-44
lines changed

‎.flowconfig

+1-5
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,6 @@ node_modules/react-native/flow/
3434
[options]
3535
module.system=haste
3636

37-
experimental.strict_type_args=true
38-
3937
munge_underscores=true
4038

4139
module.name_mapper='^react-native$' -> 'emptyObject'
@@ -51,7 +49,5 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-6]\\|[1
5149
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-6]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
5250
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
5351

54-
unsafe.enable_getters_and_setters=true
55-
5652
[version]
57-
^0.56.0
53+
^0.79.1

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ node_modules
33
.vscode
44
.idea/
55
build
6+
coverage

‎.travis.yml

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
language: node_js
22
cache: yarn
33
node_js:
4-
- 9.11.1
5-
4+
- 8.12.0
5+
66
install:
7-
- yarn
7+
- yarn
88

99
script:
10-
- yarn run flow && yarn run lint && yarn run test
10+
- yarn run ci

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ import MaterialTabs from 'react-native-material-tabs';
5858
| indicatorColor | #fff | string | Color of the indicator |
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 |
61-
| items | none | array(string) | The headers for the individual tabs |
61+
| items | none | array(string|element) | The headers for the individual tabs |
6262
| 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 |

‎package.json

+21-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-material-tabs",
3-
"version": "3.7.0",
3+
"version": "3.8.0",
44
"description": "Material Design implementation of Tabs",
55
"keywords": [
66
"react",
@@ -20,9 +20,10 @@
2020
"license": "MIT",
2121
"scripts": {
2222
"flow": "flow check",
23-
"lint": "eslint **/*.js",
24-
"format": "eslint --fix **/*.js",
25-
"test": "jest --runInBand"
23+
"lint": "eslint src",
24+
"format": "eslint server --fix",
25+
"test": "jest --runInBand",
26+
"ci": "yarn run flow && yarn run lint && yarn run test"
2627
},
2728
"dependencies": {
2829
"prop-types": "^15.5.10",
@@ -42,8 +43,10 @@
4243
"eslint-plugin-prettier": "^2.1.2",
4344
"eslint-plugin-react": "^7.1.0",
4445
"eslint-plugin-react-native": "^2.3.2",
45-
"flow-bin": "^0.56.0",
46+
"flow-bin": "^0.79.1",
47+
"husky": "^1.1.2",
4648
"jest": "21.2.1",
49+
"lint-staged": "^7.3.0",
4750
"prettier": "^1.9.1",
4851
"react": "16.0.0",
4952
"react-dom": "^16.2.0",
@@ -64,8 +67,21 @@
6467
},
6568
"jest": {
6669
"preset": "react-native",
70+
"collectCoverage": true,
6771
"moduleNameMapper": {
6872
"styled-components": "<rootDir>/node_modules/styled-components/dist/styled-components.native.cjs.js"
6973
}
74+
},
75+
"husky": {
76+
"hooks": {
77+
"pre-commit": "lint-staged"
78+
}
79+
},
80+
"lint-staged": {
81+
"*.js": [
82+
"eslint --fix",
83+
"flow check",
84+
"git add"
85+
]
7086
}
7187
}

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

+173
Original file line numberDiff line numberDiff line change
@@ -745,3 +745,176 @@ exports[`Main should render without errors 1`] = `
745745
</RCTScrollView>
746746
</View>
747747
`;
748+
749+
exports[`Main when items is an array of react elements should render tabs 1`] = `
750+
<View
751+
barColor="#13897b"
752+
barHeight={48}
753+
onLayout={[Function]}
754+
style={
755+
Array [
756+
Object {
757+
"backgroundColor": "#13897b",
758+
"height": 48,
759+
},
760+
undefined,
761+
]
762+
}
763+
>
764+
<RCTScrollView
765+
horizontal={true}
766+
keyboardShouldPersistTaps="never"
767+
scrollEnabled={false}
768+
showsHorizontalScrollIndicator={false}
769+
>
770+
<View>
771+
<View
772+
barHeight={48}
773+
style={
774+
Array [
775+
Object {
776+
"flexDirection": "row",
777+
"height": 46,
778+
},
779+
undefined,
780+
]
781+
}
782+
>
783+
<View
784+
accessibilityComponentType={undefined}
785+
accessibilityLabel={undefined}
786+
accessibilityTraits={undefined}
787+
accessible={true}
788+
collapsable={undefined}
789+
hasTVPreferredFocus={undefined}
790+
hitSlop={undefined}
791+
isTVSelectable={true}
792+
nativeID={undefined}
793+
onLayout={undefined}
794+
onResponderGrant={[Function]}
795+
onResponderMove={[Function]}
796+
onResponderRelease={[Function]}
797+
onResponderTerminate={[Function]}
798+
onResponderTerminationRequest={[Function]}
799+
onStartShouldSetResponder={[Function]}
800+
style={
801+
Object {
802+
"opacity": 1,
803+
"width": 0,
804+
}
805+
}
806+
testID={undefined}
807+
tvParallaxProperties={undefined}
808+
>
809+
<View
810+
style={
811+
Array [
812+
Object {
813+
"alignItems": "center",
814+
"height": 48,
815+
"justifyContent": "center",
816+
"paddingHorizontal": 12,
817+
},
818+
undefined,
819+
]
820+
}
821+
tabHeight={48}
822+
>
823+
<Text
824+
accessible={true}
825+
allowFontScaling={true}
826+
ellipsizeMode="tail"
827+
style={
828+
Array [
829+
undefined,
830+
Object {
831+
"color": "#fff",
832+
},
833+
]
834+
}
835+
>
836+
Tab1
837+
</Text>
838+
</View>
839+
</View>
840+
<View
841+
accessibilityComponentType={undefined}
842+
accessibilityLabel={undefined}
843+
accessibilityTraits={undefined}
844+
accessible={true}
845+
collapsable={undefined}
846+
hasTVPreferredFocus={undefined}
847+
hitSlop={undefined}
848+
isTVSelectable={true}
849+
nativeID={undefined}
850+
onLayout={undefined}
851+
onResponderGrant={[Function]}
852+
onResponderMove={[Function]}
853+
onResponderRelease={[Function]}
854+
onResponderTerminate={[Function]}
855+
onResponderTerminationRequest={[Function]}
856+
onStartShouldSetResponder={[Function]}
857+
style={
858+
Object {
859+
"opacity": 1,
860+
"width": 0,
861+
}
862+
}
863+
testID={undefined}
864+
tvParallaxProperties={undefined}
865+
>
866+
<View
867+
style={
868+
Array [
869+
Object {
870+
"alignItems": "center",
871+
"height": 48,
872+
"justifyContent": "center",
873+
"paddingHorizontal": 12,
874+
},
875+
undefined,
876+
]
877+
}
878+
tabHeight={48}
879+
>
880+
<Text
881+
accessible={true}
882+
allowFontScaling={true}
883+
ellipsizeMode="tail"
884+
style={
885+
Array [
886+
undefined,
887+
Object {
888+
"color": "rgba(255, 255, 255, 0.7)",
889+
},
890+
]
891+
}
892+
>
893+
Tab2
894+
</Text>
895+
</View>
896+
</View>
897+
</View>
898+
<View
899+
collapsable={undefined}
900+
color="#fff"
901+
style={
902+
Object {
903+
"backgroundColor": "#fff",
904+
"bottom": 0,
905+
"height": 2,
906+
"position": "absolute",
907+
"transform": Array [
908+
Object {
909+
"translateX": 0,
910+
},
911+
],
912+
"width": 0,
913+
}
914+
}
915+
tabWidth={0}
916+
/>
917+
</View>
918+
</RCTScrollView>
919+
</View>
920+
`;

‎src/__tests__/main.test.js

+15
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { Text } from 'react-native';
23
import Adapter from 'enzyme-adapter-react-16';
34
import { create } from 'react-test-renderer';
45
import { shallow, configure } from 'enzyme';
@@ -129,4 +130,18 @@ describe('Main', () => {
129130
const tree = create(tabs).toJSON();
130131
expect(tree).toMatchSnapshot();
131132
});
133+
134+
describe('when items is an array of react elements', function() {
135+
it('should render tabs', function() {
136+
const tabs = (
137+
<MaterialTabs
138+
selectedIndex={0}
139+
items={[<Text key="1">Tab1</Text>, <Text key="2">Tab2</Text>]}
140+
onChange={onChange}
141+
/>
142+
);
143+
const tree = create(tabs).toJSON();
144+
expect(tree).toMatchSnapshot();
145+
});
146+
});
132147
});

‎src/components/MaterialTabs.js

+10-4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Bar, TabTrack } from '../lib/styles';
88
import values from '../lib/values';
99
import Tab from './Tab';
1010
import Indicator from './Indicator';
11+
import type { ContentType } from './Tab/Tab';
1112

1213
type Props = {
1314
allowFontScaling: boolean,
@@ -20,7 +21,7 @@ type Props = {
2021
scrollable: boolean,
2122
textStyle: StyleObj,
2223
activeTextStyle: StyleObj,
23-
items: string[],
24+
items: ContentType[],
2425
uppercase: boolean,
2526
onChange: (index: number) => void,
2627
keyboardShouldPersistTaps: string,
@@ -32,6 +33,9 @@ type State = {
3233
indicatorPosition: Animated.Value,
3334
};
3435

36+
const getKeyForTab = (item: ContentType) =>
37+
typeof item == 'string' ? item : item.key;
38+
3539
export default class MaterialTabs extends React.Component<Props, State> {
3640
static propTypes = {
3741
allowFontScaling: PropTypes.bool,
@@ -44,7 +48,9 @@ export default class MaterialTabs extends React.Component<Props, State> {
4448
scrollable: PropTypes.bool,
4549
textStyle: Text.propTypes.style,
4650
activeTextStyle: Text.propTypes.style,
47-
items: PropTypes.arrayOf(PropTypes.string).isRequired,
51+
items: PropTypes.arrayOf(
52+
PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
53+
).isRequired,
4854
uppercase: PropTypes.bool,
4955
onChange: PropTypes.func.isRequired,
5056
keyboardShouldPersistTaps: PropTypes.string,
@@ -176,8 +182,8 @@ export default class MaterialTabs extends React.Component<Props, State> {
176182
{this.props.items.map((item, idx) => (
177183
<Tab
178184
allowFontScaling={this.props.allowFontScaling}
179-
text={item}
180-
key={item}
185+
content={item}
186+
key={getKeyForTab(item)}
181187
stretch={!this.props.scrollable}
182188
onPress={() => this.props.onChange(idx)}
183189
active={idx === this.props.selectedIndex}

0 commit comments

Comments
 (0)