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

Commit

Permalink
Add ability to use render props.
Browse files Browse the repository at this point in the history
  • Loading branch information
@peterp
peterp committed Apr 19, 2019
1 parent ff45916 commit 9dfe392
Show file tree
Hide file tree
Showing 6 changed files with 4,273 additions and 2,932 deletions.
3 changes: 0 additions & 3 deletions .babelrc
View file

This file was deleted.

29 changes: 9 additions & 20 deletions Tags/Tag.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,20 @@
import React from "react";
import PropTypes from "prop-types";
import { View, Text, TextInput, TouchableOpacity } from "react-native";
import { Text, TouchableOpacity } from "react-native";

import styles from "./styles";

const Tag = ({ label, onPress, tagContainerStyle, tagTextStyle, readonly }) => {
const tagText = <Text style={[styles.tagLabel, tagTextStyle]}>{label}</Text>;

if (readonly) {
return (
<View style={[styles.tag, tagContainerStyle]}>
{tagText}
</View>
)
} else {
return (
<TouchableOpacity style={[styles.tag, tagContainerStyle]} onPress={onPress}>
{tagText}
</TouchableOpacity>
)
}
}
const Tag = ({ label, onPress, tagContainerStyle, tagTextStyle }) => {
return (
<TouchableOpacity style={[styles.tag, tagContainerStyle]} onPress={onPress}>
<Text style={[styles.tagLabel, tagTextStyle]}>{label}</Text>
</TouchableOpacity>
);
};

Tag.propTypes = {
label: PropTypes.string.isRequired,
onPress: PropTypes.func,
readonly: PropTypes.bool
onPress: PropTypes.func.isRequired
};

export default Tag;
80 changes: 2 additions & 78 deletions Tags/__tests__/__snapshots__/Tags-tests.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,8 @@ exports[` 1`] = `
}
>
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
Expand All @@ -43,13 +35,8 @@ exports[` 1`] = `
"paddingRight": 12,
}
}
testID={undefined}
tvParallaxProperties={undefined}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Array [
Object {
Expand All @@ -64,16 +51,8 @@ exports[` 1`] = `
</Text>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
Expand All @@ -92,13 +71,8 @@ exports[` 1`] = `
"paddingRight": 12,
}
}
testID={undefined}
tvParallaxProperties={undefined}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Array [
Object {
Expand All @@ -113,16 +87,8 @@ exports[` 1`] = `
</Text>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
Expand All @@ -141,13 +107,8 @@ exports[` 1`] = `
"paddingRight": 12,
}
}
testID={undefined}
tvParallaxProperties={undefined}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Array [
Object {
Expand Down Expand Up @@ -181,6 +142,7 @@ exports[` 1`] = `
onChangeText={[Function]}
onSubmitEditing={[Function]}
placeholder="testy text"
rejectResponderTermination={true}
style={
Array [
Object {
Expand Down Expand Up @@ -218,16 +180,8 @@ exports[`Tags should render props correctly 1`] = `
}
>
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
Expand All @@ -246,13 +200,8 @@ exports[`Tags should render props correctly 1`] = `
"paddingRight": 12,
}
}
testID={undefined}
tvParallaxProperties={undefined}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Array [
Object {
Expand All @@ -267,16 +216,8 @@ exports[`Tags should render props correctly 1`] = `
</Text>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
Expand All @@ -295,13 +236,8 @@ exports[`Tags should render props correctly 1`] = `
"paddingRight": 12,
}
}
testID={undefined}
tvParallaxProperties={undefined}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Array [
Object {
Expand All @@ -316,16 +252,8 @@ exports[`Tags should render props correctly 1`] = `
</Text>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
collapsable={undefined}
hasTVPreferredFocus={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
Expand All @@ -344,13 +272,8 @@ exports[`Tags should render props correctly 1`] = `
"paddingRight": 12,
}
}
testID={undefined}
tvParallaxProperties={undefined}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Array [
Object {
Expand Down Expand Up @@ -383,6 +306,7 @@ exports[`Tags should render props correctly 1`] = `
allowFontScaling={true}
onChangeText={[Function]}
onSubmitEditing={[Function]}
rejectResponderTermination={true}
style={
Array [
Object {
Expand Down
45 changes: 26 additions & 19 deletions Tags/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,39 +78,42 @@ class Tags extends React.Component {
maxNumberOfTags,
inputStyle,
inputContainerStyle,
textInputProps
textInputProps,
renderTag
} = this.props;

return (
<View style={[styles.container, containerStyle, style]}>
{this.state.tags.map((tag, i) => (
<Tag
key={i}
label={tag}
onPress={e => {
if (deleteTagOnPress) {
{this.state.tags.map((tag, index) => {
const tagProps = {
tag,
index,
deleteTagOnPress,
onPress: e => {
if (deleteTagOnPress && !readonly) {
this.setState(
{
tags: [
...this.state.tags.slice(0, i),
...this.state.tags.slice(i + 1)
...this.state.tags.slice(0, index),
...this.state.tags.slice(index + 1)
]
},
() => {
this.props.onChangeTags &&
this.props.onChangeTags(this.state.tags);
onTagPress && onTagPress(i, tag, e, true);
onTagPress && onTagPress(index, tag, e, true);
}
);
} else {
onTagPress && onTagPress(i, tag, e, false);
onTagPress && onTagPress(index, tag, e, false);
}
}}
readonly={readonly}
tagContainerStyle={tagContainerStyle}
tagTextStyle={tagTextStyle}
/>
))}
},
tagContainerStyle,
tagTextStyle
};

return renderTag(tagProps);
})}

{!readonly && maxNumberOfTags > this.state.tags.length && (
<View style={[styles.textInputContainer, inputContainerStyle]}>
Expand All @@ -136,7 +139,10 @@ Tags.defaultProps = {
createTagOnReturn: false,
readonly: false,
deleteTagOnPress: true,
maxNumberOfTags: Number.POSITIVE_INFINITY
maxNumberOfTags: Number.POSITIVE_INFINITY,
renderTag: ({ tag, index, ...rest }) => (
<Tag key={`${tag}-${index}`} label={tag} {...rest} />
)
};

Tags.propTypes = {
Expand All @@ -148,13 +154,14 @@ Tags.propTypes = {
readonly: PropTypes.bool,
maxNumberOfTags: PropTypes.number,
deleteTagOnPress: PropTypes.bool,
renderTag: PropTypes.func,
/* style props */
containerStyle: PropTypes.any,
style: PropTypes.any,
inputContainerStyle: PropTypes.any,
inputStyle: PropTypes.any,
tagContainerStyle: PropTypes.any,
tagTextStyle: PropTypes.any,
/* these props are spread over the textInput */
textInputProps: PropTypes.object
};

Expand Down
25 changes: 14 additions & 11 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,21 @@
"react-native": ">= 0.44"
},
"devDependencies": {
"babel-jest": "^22.4.3",
"babel-preset-react-native": "^4.0.0",
"enzyme": "^3.4.1",
"enzyme-adapter-react-16": "^1.2.0",
"jest": "^22.4.3",
"prop-types": "^15.6.1",
"react": "16.3.1",
"react-dom": "^16.3.1",
"react-native": "^0.55.2",
"react-test-renderer": "^16.3.1"
"@babel/core": "^7.4.3",
"babel-preset-react-native": "^4.0.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"jest": "^24.7.1",
"prop-types": "^15.7.2",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "^0.59.5",
"react-test-renderer": "^16.8.3"
},
"jest": {
"preset": "react-native"
"preset": "react-native",
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
}
}
}
Loading

0 comments on commit 9dfe392

Please sign in to comment.