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

Commit 49ae7ff

Browse files
peterppeterp
authored
Merge pull request #55 from abscess/master
Update
2 parents d5616b3 + d973dc0 commit 49ae7ff

File tree

35 files changed

+14871
-5680
lines changed

35 files changed

+14871
-5680
lines changed

‎Tags/Input.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from "react";
2+
import { View, TextInput } from "react-native";
3+
4+
import styles from "./styles";
5+
6+
const Input = (props) => {
7+
8+
const {
9+
value,
10+
onChangeText,
11+
onSubmitEditing,
12+
inputStyle,
13+
inputContainerStyle,
14+
textInputProps
15+
} = props;
16+
17+
return (
18+
<View style={[styles.textInputContainer, inputContainerStyle]}>
19+
<TextInput
20+
{...textInputProps}
21+
style={[styles.textInput, inputStyle]}
22+
value={value}
23+
onChangeText={onChangeText}
24+
onSubmitEditing={onSubmitEditing}
25+
underlineColorAndroid="transparent"
26+
/>
27+
</View>
28+
);
29+
30+
};
31+
32+
export {Input};
33+
export default Input;

‎Tags/__tests__/Tags_enzyme-tests.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ describe("Tags", () => {
1616
wrapper
1717
.find("Tag")
1818
.at(1)
19-
.simulate("press");
19+
.simulate("press", { persist: jest.fn()});
2020

2121
expect(wrapper.find("Tag").length).toEqual(3);
2222
});
@@ -32,18 +32,18 @@ describe("Tags", () => {
3232
wrapper
3333
.find("Tag")
3434
.at(0)
35-
.simulate("press");
35+
.simulate("press", { persist: jest.fn()});
3636

3737
expect(wrapper.find("Tag").length).toEqual(4);
3838
});
3939
});
4040

41-
describe("TextInput", () => {
41+
describe("Input", () => {
4242
describe("onChangeText", () => {
4343
it("should add a new tag when a space, or comma is detected", () => {
4444
const onChangeTags = jest.fn();
4545
const wrapper = shallow(<Tags onChangeTags={onChangeTags} />).find(
46-
"TextInput"
46+
"Input"
4747
);
4848
wrapper.simulate("ChangeText", "dog ");
4949
expect(onChangeTags.mock.calls).toEqual([[["dog"]]]);
@@ -55,7 +55,7 @@ describe("Tags", () => {
5555
const onChangeTags = jest.fn();
5656
const wrapper = shallow(
5757
<Tags createTagOnReturn onChangeTags={onChangeTags} />
58-
).find("TextInput");
58+
).find("Input");
5959
wrapper.simulate("ChangeText", "dog");
6060
wrapper.simulate("SubmitEditing");
6161
expect(onChangeTags.mock.calls).toEqual([[["dog"]]]);
@@ -64,7 +64,7 @@ describe("Tags", () => {
6464
it("should remove a tag when the text is empty", () => {
6565
const onChangeTags = jest.fn();
6666
const wrapper = shallow(<Tags onChangeTags={onChangeTags} />).find(
67-
"TextInput"
67+
"Input"
6868
);
6969
wrapper.simulate("ChangeText", "dog ");
7070
expect(onChangeTags.mock.calls).toEqual([[["dog"]]]);
@@ -73,16 +73,16 @@ describe("Tags", () => {
7373
});
7474

7575
it("text input should not be available if it's readyonly", () => {
76-
const wrapper = shallow(<Tags readonly />).find("TextInput");
76+
const wrapper = shallow(<Tags readonly />).find("Input");
7777
expect(wrapper.length).toEqual(0);
7878
});
7979

80-
it("textinput should dissapear after maxNumberOfTags is reached", () => {
80+
it("input should dissapear after maxNumberOfTags is reached", () => {
8181
const wrapper = shallow(
8282
<Tags initialTags={["love"]} maxNumberOfTags={2} />
8383
);
84-
wrapper.find("TextInput").simulate("ChangeText", "dog ");
85-
expect(wrapper.find("TextInput").length).toEqual(0);
84+
wrapper.find("Input").simulate("ChangeText", "dog ");
85+
expect(wrapper.find("Input").length).toEqual(0);
8686
});
8787
});
8888
});

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ exports[` 1`] = `
1616
>
1717
<View
1818
accessible={true}
19+
focusable={true}
1920
isTVSelectable={true}
21+
onClick={[Function]}
2022
onResponderGrant={[Function]}
2123
onResponderMove={[Function]}
2224
onResponderRelease={[Function]}
@@ -52,7 +54,9 @@ exports[` 1`] = `
5254
</View>
5355
<View
5456
accessible={true}
57+
focusable={true}
5558
isTVSelectable={true}
59+
onClick={[Function]}
5660
onResponderGrant={[Function]}
5761
onResponderMove={[Function]}
5862
onResponderRelease={[Function]}
@@ -88,7 +92,9 @@ exports[` 1`] = `
8892
</View>
8993
<View
9094
accessible={true}
95+
focusable={true}
9196
isTVSelectable={true}
97+
onClick={[Function]}
9298
onResponderGrant={[Function]}
9399
onResponderMove={[Function]}
94100
onResponderRelease={[Function]}
@@ -246,7 +252,9 @@ exports[`Tags should render props correctly 1`] = `
246252
>
247253
<View
248254
accessible={true}
255+
focusable={true}
249256
isTVSelectable={true}
257+
onClick={[Function]}
250258
onResponderGrant={[Function]}
251259
onResponderMove={[Function]}
252260
onResponderRelease={[Function]}
@@ -282,7 +290,9 @@ exports[`Tags should render props correctly 1`] = `
282290
</View>
283291
<View
284292
accessible={true}
293+
focusable={true}
285294
isTVSelectable={true}
295+
onClick={[Function]}
286296
onResponderGrant={[Function]}
287297
onResponderMove={[Function]}
288298
onResponderRelease={[Function]}
@@ -318,7 +328,9 @@ exports[`Tags should render props correctly 1`] = `
318328
</View>
319329
<View
320330
accessible={true}
331+
focusable={true}
321332
isTVSelectable={true}
333+
onClick={[Function]}
322334
onResponderGrant={[Function]}
323335
onResponderMove={[Function]}
324336
onResponderRelease={[Function]}

‎Tags/index.js‎

Lines changed: 46 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,49 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3-
import { View, TextInput } from "react-native";
3+
import { View } from "react-native";
44

55
import Tag from "./Tag";
6+
import Input from "./Input";
67
import styles from "./styles";
78

89
class Tags extends React.Component {
10+
911
constructor(props) {
1012
super(props);
11-
1213
this.state = {
1314
tags: props.initialTags,
1415
text: props.initialText
1516
};
16-
}
17-
18-
componentWillReceiveProps(props) {
19-
const { initialTags = [], initialText = " " } = props;
17+
};
2018

21-
this.setState({
22-
tags: initialTags,
23-
text: initialText
24-
});
25-
}
19+
showLastTag = () => {
20+
this.setState(state =>
21+
({
22+
tags: state.tags.slice(0, -1),
23+
text: state.tags.slice(-1)[0] || " "
24+
}),
25+
() =>
26+
this.props.onChangeTags && this.props.onChangeTags(this.state.tags)
27+
);
28+
};
2629

2730
addTag = text => {
28-
this.setState(
29-
{
30-
tags: [...this.state.tags, text.trim()],
31+
this.setState(state =>
32+
({
33+
tags: [...state.tags, text.trim()],
3134
text: " "
32-
},
35+
}),
3336
() => this.props.onChangeTags && this.props.onChangeTags(this.state.tags)
3437
);
3538
};
3639

3740
onChangeText = text => {
3841
if (text.length === 0) {
39-
// `onKeyPress` isn't currently supported on Android; I've placed an extra
40-
// space character at the start of `TextInput` which is used to determine if the
41-
// user is erasing.
42-
this.setState(
43-
{
44-
tags: this.state.tags.slice(0, -1),
45-
text: this.state.tags.slice(-1)[0] || " "
46-
},
47-
() =>
48-
this.props.onChangeTags && this.props.onChangeTags(this.state.tags)
49-
);
42+
this.showLastTag();
5043
} else if (
5144
text.length > 1 &&
5245
this.props.createTagOnString.includes(text.slice(-1)) &&
46+
!text.match(new RegExp(`^[${this.props.createTagOnString.join("")}]+$`, 'g')) &&
5347
!(this.state.tags.indexOf(text.slice(0, -1).trim()) > -1)
5448
) {
5549
this.addTag(text.slice(0, -1));
@@ -62,50 +56,50 @@ class Tags extends React.Component {
6256
if (!this.props.createTagOnReturn) {
6357
return;
6458
}
65-
6659
this.addTag(this.state.text);
6760
};
6861

6962
render() {
63+
7064
const {
7165
containerStyle,
7266
style,
67+
readonly,
68+
maxNumberOfTags,
7369
tagContainerStyle,
7470
tagTextStyle,
7571
deleteTagOnPress,
7672
onTagPress,
77-
readonly,
78-
maxNumberOfTags,
79-
inputStyle,
80-
inputContainerStyle,
81-
textInputProps,
8273
renderTag
8374
} = this.props;
8475

8576
return (
8677
<View style={[styles.container, containerStyle, style]}>
78+
8779
{this.state.tags.map((tag, index) => {
80+
8881
const tagProps = {
8982
tag,
9083
index,
9184
deleteTagOnPress,
92-
onPress: e => {
85+
onPress: event => {
86+
event.persist();
9387
if (deleteTagOnPress && !readonly) {
94-
this.setState(
95-
{
88+
this.setState(state =>
89+
({
9690
tags: [
97-
...this.state.tags.slice(0, index),
98-
...this.state.tags.slice(index + 1)
91+
...state.tags.slice(0, index),
92+
...state.tags.slice(index + 1)
9993
]
100-
},
94+
}),
10195
() => {
10296
this.props.onChangeTags &&
10397
this.props.onChangeTags(this.state.tags);
104-
onTagPress && onTagPress(index, tag, e, true);
98+
onTagPress && onTagPress(index, tag, event, true);
10599
}
106100
);
107101
} else {
108-
onTagPress && onTagPress(index, tag, e, false);
102+
onTagPress && onTagPress(index, tag, event, false);
109103
}
110104
},
111105
tagContainerStyle,
@@ -115,21 +109,21 @@ class Tags extends React.Component {
115109
return renderTag(tagProps);
116110
})}
117111

118-
{!readonly && maxNumberOfTags > this.state.tags.length && (
119-
<View style={[styles.textInputContainer, inputContainerStyle]}>
120-
<TextInput
121-
{...textInputProps}
112+
{!readonly
113+
&& maxNumberOfTags > this.state.tags.length
114+
&&
115+
<Input
122116
value={this.state.text}
123-
style={[styles.textInput, inputStyle]}
124-
onChangeText={this.onChangeText}
117+
onChangeText={this.onChangeText}
125118
onSubmitEditing={this.onSubmitEditing}
126-
underlineColorAndroid="transparent"
119+
{...this.props}
127120
/>
128-
</View>
129-
)}
121+
}
122+
130123
</View>
131124
);
132-
}
125+
};
126+
133127
}
134128

135129
Tags.defaultProps = {
@@ -165,5 +159,5 @@ Tags.propTypes = {
165159
textInputProps: PropTypes.object
166160
};
167161

168-
export { Tag };
169-
export default Tags;
162+
export { Tags };
163+
export default Tags;

‎examples/ReactNativeTagsDemo/.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
};

0 commit comments

Comments
 (0)