Skip to content
This repository was archived by the owner on Jun 13, 2023. It is now read-only.

Commit 9dfe392

Browse files
peterppeterp
committed
Add ability to use render props.
1 parent ff45916 commit 9dfe392

File tree

6 files changed

+4273
-2932
lines changed

6 files changed

+4273
-2932
lines changed

‎.babelrc‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎Tags/Tag.js‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,20 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3-
import { View, Text, TextInput, TouchableOpacity } from "react-native";
3+
import { Text, TouchableOpacity } from "react-native";
44

55
import styles from "./styles";
66

7-
const Tag = ({ label, onPress, tagContainerStyle, tagTextStyle, readonly }) => {
8-
const tagText = <Text style={[styles.tagLabel, tagTextStyle]}>{label}</Text>;
9-
10-
if (readonly) {
11-
return (
12-
<View style={[styles.tag, tagContainerStyle]}>
13-
{tagText}
14-
</View>
15-
)
16-
} else {
17-
return (
18-
<TouchableOpacity style={[styles.tag, tagContainerStyle]} onPress={onPress}>
19-
{tagText}
20-
</TouchableOpacity>
21-
)
22-
}
23-
}
7+
const Tag = ({ label, onPress, tagContainerStyle, tagTextStyle }) => {
8+
return (
9+
<TouchableOpacity style={[styles.tag, tagContainerStyle]} onPress={onPress}>
10+
<Text style={[styles.tagLabel, tagTextStyle]}>{label}</Text>
11+
</TouchableOpacity>
12+
);
13+
};
2414

2515
Tag.propTypes = {
2616
label: PropTypes.string.isRequired,
27-
onPress: PropTypes.func,
28-
readonly: PropTypes.bool
17+
onPress: PropTypes.func.isRequired
2918
};
3019

3120
export default Tag;

‎Tags/__tests__/__snapshots__/Tags-tests.js.snap‎

Lines changed: 2 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,8 @@ exports[` 1`] = `
1515
}
1616
>
1717
<View
18-
accessibilityComponentType={undefined}
19-
accessibilityLabel={undefined}
20-
accessibilityTraits={undefined}
2118
accessible={true}
22-
collapsable={undefined}
23-
hasTVPreferredFocus={undefined}
24-
hitSlop={undefined}
2519
isTVSelectable={true}
26-
nativeID={undefined}
27-
onLayout={undefined}
2820
onResponderGrant={[Function]}
2921
onResponderMove={[Function]}
3022
onResponderRelease={[Function]}
@@ -43,13 +35,8 @@ exports[` 1`] = `
4335
"paddingRight": 12,
4436
}
4537
}
46-
testID={undefined}
47-
tvParallaxProperties={undefined}
4838
>
4939
<Text
50-
accessible={true}
51-
allowFontScaling={true}
52-
ellipsizeMode="tail"
5340
style={
5441
Array [
5542
Object {
@@ -64,16 +51,8 @@ exports[` 1`] = `
6451
</Text>
6552
</View>
6653
<View
67-
accessibilityComponentType={undefined}
68-
accessibilityLabel={undefined}
69-
accessibilityTraits={undefined}
7054
accessible={true}
71-
collapsable={undefined}
72-
hasTVPreferredFocus={undefined}
73-
hitSlop={undefined}
7455
isTVSelectable={true}
75-
nativeID={undefined}
76-
onLayout={undefined}
7756
onResponderGrant={[Function]}
7857
onResponderMove={[Function]}
7958
onResponderRelease={[Function]}
@@ -92,13 +71,8 @@ exports[` 1`] = `
9271
"paddingRight": 12,
9372
}
9473
}
95-
testID={undefined}
96-
tvParallaxProperties={undefined}
9774
>
9875
<Text
99-
accessible={true}
100-
allowFontScaling={true}
101-
ellipsizeMode="tail"
10276
style={
10377
Array [
10478
Object {
@@ -113,16 +87,8 @@ exports[` 1`] = `
11387
</Text>
11488
</View>
11589
<View
116-
accessibilityComponentType={undefined}
117-
accessibilityLabel={undefined}
118-
accessibilityTraits={undefined}
11990
accessible={true}
120-
collapsable={undefined}
121-
hasTVPreferredFocus={undefined}
122-
hitSlop={undefined}
12391
isTVSelectable={true}
124-
nativeID={undefined}
125-
onLayout={undefined}
12692
onResponderGrant={[Function]}
12793
onResponderMove={[Function]}
12894
onResponderRelease={[Function]}
@@ -141,13 +107,8 @@ exports[` 1`] = `
141107
"paddingRight": 12,
142108
}
143109
}
144-
testID={undefined}
145-
tvParallaxProperties={undefined}
146110
>
147111
<Text
148-
accessible={true}
149-
allowFontScaling={true}
150-
ellipsizeMode="tail"
151112
style={
152113
Array [
153114
Object {
@@ -181,6 +142,7 @@ exports[` 1`] = `
181142
onChangeText={[Function]}
182143
onSubmitEditing={[Function]}
183144
placeholder="testy text"
145+
rejectResponderTermination={true}
184146
style={
185147
Array [
186148
Object {
@@ -218,16 +180,8 @@ exports[`Tags should render props correctly 1`] = `
218180
}
219181
>
220182
<View
221-
accessibilityComponentType={undefined}
222-
accessibilityLabel={undefined}
223-
accessibilityTraits={undefined}
224183
accessible={true}
225-
collapsable={undefined}
226-
hasTVPreferredFocus={undefined}
227-
hitSlop={undefined}
228184
isTVSelectable={true}
229-
nativeID={undefined}
230-
onLayout={undefined}
231185
onResponderGrant={[Function]}
232186
onResponderMove={[Function]}
233187
onResponderRelease={[Function]}
@@ -246,13 +200,8 @@ exports[`Tags should render props correctly 1`] = `
246200
"paddingRight": 12,
247201
}
248202
}
249-
testID={undefined}
250-
tvParallaxProperties={undefined}
251203
>
252204
<Text
253-
accessible={true}
254-
allowFontScaling={true}
255-
ellipsizeMode="tail"
256205
style={
257206
Array [
258207
Object {
@@ -267,16 +216,8 @@ exports[`Tags should render props correctly 1`] = `
267216
</Text>
268217
</View>
269218
<View
270-
accessibilityComponentType={undefined}
271-
accessibilityLabel={undefined}
272-
accessibilityTraits={undefined}
273219
accessible={true}
274-
collapsable={undefined}
275-
hasTVPreferredFocus={undefined}
276-
hitSlop={undefined}
277220
isTVSelectable={true}
278-
nativeID={undefined}
279-
onLayout={undefined}
280221
onResponderGrant={[Function]}
281222
onResponderMove={[Function]}
282223
onResponderRelease={[Function]}
@@ -295,13 +236,8 @@ exports[`Tags should render props correctly 1`] = `
295236
"paddingRight": 12,
296237
}
297238
}
298-
testID={undefined}
299-
tvParallaxProperties={undefined}
300239
>
301240
<Text
302-
accessible={true}
303-
allowFontScaling={true}
304-
ellipsizeMode="tail"
305241
style={
306242
Array [
307243
Object {
@@ -316,16 +252,8 @@ exports[`Tags should render props correctly 1`] = `
316252
</Text>
317253
</View>
318254
<View
319-
accessibilityComponentType={undefined}
320-
accessibilityLabel={undefined}
321-
accessibilityTraits={undefined}
322255
accessible={true}
323-
collapsable={undefined}
324-
hasTVPreferredFocus={undefined}
325-
hitSlop={undefined}
326256
isTVSelectable={true}
327-
nativeID={undefined}
328-
onLayout={undefined}
329257
onResponderGrant={[Function]}
330258
onResponderMove={[Function]}
331259
onResponderRelease={[Function]}
@@ -344,13 +272,8 @@ exports[`Tags should render props correctly 1`] = `
344272
"paddingRight": 12,
345273
}
346274
}
347-
testID={undefined}
348-
tvParallaxProperties={undefined}
349275
>
350276
<Text
351-
accessible={true}
352-
allowFontScaling={true}
353-
ellipsizeMode="tail"
354277
style={
355278
Array [
356279
Object {
@@ -383,6 +306,7 @@ exports[`Tags should render props correctly 1`] = `
383306
allowFontScaling={true}
384307
onChangeText={[Function]}
385308
onSubmitEditing={[Function]}
309+
rejectResponderTermination={true}
386310
style={
387311
Array [
388312
Object {

‎Tags/index.js‎

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -78,39 +78,42 @@ class Tags extends React.Component {
7878
maxNumberOfTags,
7979
inputStyle,
8080
inputContainerStyle,
81-
textInputProps
81+
textInputProps,
82+
renderTag
8283
} = this.props;
8384

8485
return (
8586
<View style={[styles.container, containerStyle, style]}>
86-
{this.state.tags.map((tag, i) => (
87-
<Tag
88-
key={i}
89-
label={tag}
90-
onPress={e => {
91-
if (deleteTagOnPress) {
87+
{this.state.tags.map((tag, index) => {
88+
const tagProps = {
89+
tag,
90+
index,
91+
deleteTagOnPress,
92+
onPress: e => {
93+
if (deleteTagOnPress && !readonly) {
9294
this.setState(
9395
{
9496
tags: [
95-
...this.state.tags.slice(0, i),
96-
...this.state.tags.slice(i + 1)
97+
...this.state.tags.slice(0, index),
98+
...this.state.tags.slice(index + 1)
9799
]
98100
},
99101
() => {
100102
this.props.onChangeTags &&
101103
this.props.onChangeTags(this.state.tags);
102-
onTagPress && onTagPress(i, tag, e, true);
104+
onTagPress && onTagPress(index, tag, e, true);
103105
}
104106
);
105107
} else {
106-
onTagPress && onTagPress(i, tag, e, false);
108+
onTagPress && onTagPress(index, tag, e, false);
107109
}
108-
}}
109-
readonly={readonly}
110-
tagContainerStyle={tagContainerStyle}
111-
tagTextStyle={tagTextStyle}
112-
/>
113-
))}
110+
},
111+
tagContainerStyle,
112+
tagTextStyle
113+
};
114+
115+
return renderTag(tagProps);
116+
})}
114117

115118
{!readonly && maxNumberOfTags > this.state.tags.length && (
116119
<View style={[styles.textInputContainer, inputContainerStyle]}>
@@ -136,7 +139,10 @@ Tags.defaultProps = {
136139
createTagOnReturn: false,
137140
readonly: false,
138141
deleteTagOnPress: true,
139-
maxNumberOfTags: Number.POSITIVE_INFINITY
142+
maxNumberOfTags: Number.POSITIVE_INFINITY,
143+
renderTag: ({ tag, index, ...rest }) => (
144+
<Tag key={`${tag}-${index}`} label={tag} {...rest} />
145+
)
140146
};
141147

142148
Tags.propTypes = {
@@ -148,13 +154,14 @@ Tags.propTypes = {
148154
readonly: PropTypes.bool,
149155
maxNumberOfTags: PropTypes.number,
150156
deleteTagOnPress: PropTypes.bool,
157+
renderTag: PropTypes.func,
158+
/* style props */
151159
containerStyle: PropTypes.any,
152160
style: PropTypes.any,
153161
inputContainerStyle: PropTypes.any,
154162
inputStyle: PropTypes.any,
155163
tagContainerStyle: PropTypes.any,
156164
tagTextStyle: PropTypes.any,
157-
/* these props are spread over the textInput */
158165
textInputProps: PropTypes.object
159166
};
160167

‎package.json‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,21 @@
2323
"react-native": ">= 0.44"
2424
},
2525
"devDependencies": {
26-
"babel-jest": "^22.4.3",
27-
"babel-preset-react-native": "^4.0.0",
28-
"enzyme": "^3.4.1",
29-
"enzyme-adapter-react-16": "^1.2.0",
30-
"jest": "^22.4.3",
31-
"prop-types": "^15.6.1",
32-
"react": "16.3.1",
33-
"react-dom": "^16.3.1",
34-
"react-native": "^0.55.2",
35-
"react-test-renderer": "^16.3.1"
26+
"@babel/core": "^7.4.3",
27+
"babel-preset-react-native": "^4.0.1",
28+
"enzyme": "^3.9.0",
29+
"enzyme-adapter-react-16": "^1.12.1",
30+
"jest": "^24.7.1",
31+
"prop-types": "^15.7.2",
32+
"react": "16.8.3",
33+
"react-dom": "16.8.3",
34+
"react-native": "^0.59.5",
35+
"react-test-renderer": "^16.8.3"
3636
},
3737
"jest": {
38-
"preset": "react-native"
38+
"preset": "react-native",
39+
"transform": {
40+
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
41+
}
3942
}
4043
}

0 commit comments

Comments
 (0)