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

Commit 0c15113

Browse files
peterppeterp
authored
Merge pull request #26 from peterp/pp-add-placeholder-text-prop
Allow user to use forward any props to text input.
2 parents 846185a + 878cd0e commit 0c15113

File tree

4 files changed

+243
-18
lines changed

4 files changed

+243
-18
lines changed

‎README.md‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ import Tags from "react-native-tags";
2828
const UselessComponent = () => (
2929
<Tags
3030
initialText="monkey"
31+
textInputProps={{
32+
placeholder: "Any type of animal"
33+
}}
3134
initialTags={["dog", "cat", "chicken"]}
3235
onChangeTags={tags => console.log(tags)}
3336
onTagPress={(index, tagLabel, event, deleted) =>
@@ -41,19 +44,20 @@ const UselessComponent = () => (
4144

4245
## Props
4346

44-
| PropName | Description | Default |
45-
| ------------------- | ------------------------------------------ | --------------- |
46-
| initialText | The input element's text | |
47-
| initialTags | ['the', 'initial', 'tags'] | |
48-
| createTagOnString | Triggers new tag creation | [",", ".", " "] |
49-
| onChangeTags | Fires when tags are added or removed | |
50-
| maxNumberOfTags | The max number of tags that can be entered | infinity |
51-
| onTagPress | Fires when tags are pressed | |
52-
| readonly | Tags cannot be modified | false |
53-
| deleteTagOnPress | Remove the tag when pressed | true |
54-
| containerStyle | Style | |
55-
| style | Style (`containerStyle` alias) | |
56-
| inputContainerStyle | Style | |
57-
| inputStyle | Style | |
58-
| tagContainerStyle | Style | |
59-
| tagTextStyle | Style | |
47+
| PropName | Description | Default |
48+
| ------------------- | ---------------------------------------------------------------------------------------- | --------------- |
49+
| initialText | The input element's text | |
50+
| textInputProps | [customize the textInput])(https://facebook.github.io/react-native/docs/textinput#props) | |
51+
| initialTags | ['the', 'initial', 'tags'] | |
52+
| createTagOnString | Triggers new tag creation | [",", ".", " "] |
53+
| onChangeTags | Fires when tags are added or removed | |
54+
| maxNumberOfTags | The max number of tags that can be entered | infinity |
55+
| onTagPress | Fires when tags are pressed | |
56+
| readonly | Tags cannot be modified | false |
57+
| deleteTagOnPress | Remove the tag when pressed | true |
58+
| containerStyle | Style | |
59+
| style | Style (`containerStyle` alias) | |
60+
| inputContainerStyle | Style | |
61+
| inputStyle | Style | |
62+
| tagContainerStyle | Style | |
63+
| tagTextStyle | Style | |

‎Tags/__tests__/Tags-tests.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,18 @@ describe("Tags", () => {
1717
.toJSON();
1818
expect(tree).toMatchSnapshot();
1919
});
20+
21+
describe("textInputProps", () => {
22+
const tree = renderer
23+
.create(
24+
<Tags
25+
initialText="monkey gland sauce"
26+
textInputProps={{ placeholder: "testy text" }}
27+
initialTags={["tomato sauce", "mustard", "mayo"]}
28+
onChangeTags={noop}
29+
/>
30+
)
31+
.toJSON();
32+
expect(tree).toMatchSnapshot();
33+
});
2034
});

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

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,208 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[` 1`] = `
4+
<View
5+
style={
6+
Array [
7+
Object {
8+
"alignItems": "center",
9+
"flexDirection": "row",
10+
"flexWrap": "wrap",
11+
},
12+
undefined,
13+
undefined,
14+
]
15+
}
16+
>
17+
<View
18+
accessibilityComponentType={undefined}
19+
accessibilityLabel={undefined}
20+
accessibilityTraits={undefined}
21+
accessible={true}
22+
collapsable={undefined}
23+
hasTVPreferredFocus={undefined}
24+
hitSlop={undefined}
25+
isTVSelectable={true}
26+
nativeID={undefined}
27+
onLayout={undefined}
28+
onResponderGrant={[Function]}
29+
onResponderMove={[Function]}
30+
onResponderRelease={[Function]}
31+
onResponderTerminate={[Function]}
32+
onResponderTerminationRequest={[Function]}
33+
onStartShouldSetResponder={[Function]}
34+
style={
35+
Object {
36+
"backgroundColor": "#e0e0e0",
37+
"borderRadius": 16,
38+
"height": 32,
39+
"justifyContent": "center",
40+
"margin": 4,
41+
"opacity": 1,
42+
"paddingLeft": 12,
43+
"paddingRight": 12,
44+
}
45+
}
46+
testID={undefined}
47+
tvParallaxProperties={undefined}
48+
>
49+
<Text
50+
accessible={true}
51+
allowFontScaling={true}
52+
ellipsizeMode="tail"
53+
style={
54+
Array [
55+
Object {
56+
"color": "rgba(0, 0, 0, 0.87)",
57+
"fontSize": 13,
58+
},
59+
undefined,
60+
]
61+
}
62+
>
63+
tomato sauce
64+
</Text>
65+
</View>
66+
<View
67+
accessibilityComponentType={undefined}
68+
accessibilityLabel={undefined}
69+
accessibilityTraits={undefined}
70+
accessible={true}
71+
collapsable={undefined}
72+
hasTVPreferredFocus={undefined}
73+
hitSlop={undefined}
74+
isTVSelectable={true}
75+
nativeID={undefined}
76+
onLayout={undefined}
77+
onResponderGrant={[Function]}
78+
onResponderMove={[Function]}
79+
onResponderRelease={[Function]}
80+
onResponderTerminate={[Function]}
81+
onResponderTerminationRequest={[Function]}
82+
onStartShouldSetResponder={[Function]}
83+
style={
84+
Object {
85+
"backgroundColor": "#e0e0e0",
86+
"borderRadius": 16,
87+
"height": 32,
88+
"justifyContent": "center",
89+
"margin": 4,
90+
"opacity": 1,
91+
"paddingLeft": 12,
92+
"paddingRight": 12,
93+
}
94+
}
95+
testID={undefined}
96+
tvParallaxProperties={undefined}
97+
>
98+
<Text
99+
accessible={true}
100+
allowFontScaling={true}
101+
ellipsizeMode="tail"
102+
style={
103+
Array [
104+
Object {
105+
"color": "rgba(0, 0, 0, 0.87)",
106+
"fontSize": 13,
107+
},
108+
undefined,
109+
]
110+
}
111+
>
112+
mustard
113+
</Text>
114+
</View>
115+
<View
116+
accessibilityComponentType={undefined}
117+
accessibilityLabel={undefined}
118+
accessibilityTraits={undefined}
119+
accessible={true}
120+
collapsable={undefined}
121+
hasTVPreferredFocus={undefined}
122+
hitSlop={undefined}
123+
isTVSelectable={true}
124+
nativeID={undefined}
125+
onLayout={undefined}
126+
onResponderGrant={[Function]}
127+
onResponderMove={[Function]}
128+
onResponderRelease={[Function]}
129+
onResponderTerminate={[Function]}
130+
onResponderTerminationRequest={[Function]}
131+
onStartShouldSetResponder={[Function]}
132+
style={
133+
Object {
134+
"backgroundColor": "#e0e0e0",
135+
"borderRadius": 16,
136+
"height": 32,
137+
"justifyContent": "center",
138+
"margin": 4,
139+
"opacity": 1,
140+
"paddingLeft": 12,
141+
"paddingRight": 12,
142+
}
143+
}
144+
testID={undefined}
145+
tvParallaxProperties={undefined}
146+
>
147+
<Text
148+
accessible={true}
149+
allowFontScaling={true}
150+
ellipsizeMode="tail"
151+
style={
152+
Array [
153+
Object {
154+
"color": "rgba(0, 0, 0, 0.87)",
155+
"fontSize": 13,
156+
},
157+
undefined,
158+
]
159+
}
160+
>
161+
mayo
162+
</Text>
163+
</View>
164+
<View
165+
style={
166+
Array [
167+
Object {
168+
"backgroundColor": "#ccc",
169+
"borderRadius": 16,
170+
"flex": 1,
171+
"height": 32,
172+
"margin": 4,
173+
"minWidth": 100,
174+
},
175+
undefined,
176+
]
177+
}
178+
>
179+
<TextInput
180+
allowFontScaling={true}
181+
onChangeText={[Function]}
182+
onSubmitEditing={[Function]}
183+
placeholder="testy text"
184+
style={
185+
Array [
186+
Object {
187+
"color": "rgba(0, 0, 0, 0.87)",
188+
"flex": 1,
189+
"fontSize": 13,
190+
"height": 32,
191+
"margin": 0,
192+
"padding": 0,
193+
"paddingLeft": 12,
194+
"paddingRight": 12,
195+
},
196+
undefined,
197+
]
198+
}
199+
underlineColorAndroid="transparent"
200+
value="monkey gland sauce"
201+
/>
202+
</View>
203+
</View>
204+
`;
205+
3206
exports[`Tags should render props correctly 1`] = `
4207
<View
5208
style={

‎Tags/index.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@ class Tags extends React.Component {
7777
readonly,
7878
maxNumberOfTags,
7979
inputStyle,
80-
inputContainerStyle
80+
inputContainerStyle,
81+
textInputProps
8182
} = this.props;
8283

8384
return (
@@ -115,6 +116,7 @@ class Tags extends React.Component {
115116
maxNumberOfTags > this.state.tags.length && (
116117
<View style={[styles.textInputContainer, inputContainerStyle]}>
117118
<TextInput
119+
{...textInputProps}
118120
value={this.state.text}
119121
style={[styles.textInput, inputStyle]}
120122
onChangeText={this.onChangeText}
@@ -152,7 +154,9 @@ Tags.propTypes = {
152154
inputContainerStyle: PropTypes.any,
153155
inputStyle: PropTypes.any,
154156
tagContainerStyle: PropTypes.any,
155-
tagTextStyle: PropTypes.any
157+
tagTextStyle: PropTypes.any,
158+
/* these props are spread over the textInput */
159+
textInputProps: PropTypes.object
156160
};
157161

158162
export { Tag };

0 commit comments

Comments
 (0)