From cd2ebfc20ddb6587a115ed7c0160becd448d548d Mon Sep 17 00:00:00 2001 From: Pavel Mihailovskiy Date: Wed, 11 Mar 2020 13:05:50 +0200 Subject: [PATCH 1/4] Add ability to style selected tags for multiple select --- README.md | 9 +++++++++ index.js | 11 +++++++---- lib/TagItem.js | 52 ++++++++++++++++++++++++++++++++------------------ 3 files changed, 49 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index c906fa8..b1e69f9 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,14 @@ class CreateNewAppointment extends Component { onRemoveItem={data => { this.setState({ data }) }} + tagStyle={{ + selectedTagArea: { + backgroundColor: 'black' + }, + selectedTagText: { + color: 'white' + } + }} /> ) @@ -87,5 +95,6 @@ class CreateNewAppointment extends Component { | **selectedTitleStyle** | _Object_ | none | Set custom style for display selected title text | | **buttonTextStyle** | _Object_ | none | Set custom button text style | | **buttonStyle** | _Object_ | none | Set custom button style | +| **tagStyle** | _Object_ | none | Set custom styles for tags style | **MIT Licensed** diff --git a/index.js b/index.js index 5c94a58..954abc0 100644 --- a/index.js +++ b/index.js @@ -20,7 +20,8 @@ class Select2 extends Component { colorTheme: '#16a45f', buttonTextStyle: {}, buttonStyle: {}, - showSearchBox: true + showSearchBox: true, + tagStyle: {} } state = { show: false, @@ -129,7 +130,7 @@ class Select2 extends Component { let { style, modalStyle, title, onSelect, onRemoveItem, popupTitle, colorTheme, isSelectSingle, cancelButtonText, selectButtonText, searchPlaceHolderText, - selectedTitleStyle, buttonTextStyle, buttonStyle, showSearchBox + selectedTitleStyle, buttonTextStyle, buttonStyle, showSearchBox, tagStyle } = this.props; let { show, selectedItem, preSelectedItem } = this.state; return ( @@ -244,7 +245,8 @@ class Select2 extends Component { this.setState({ data, preSelectedItem }); onRemoveItem && onRemoveItem(selectedIds, selectedObjectItems); }} - tagName={tag.name} /> + tagName={tag.name} + style={tagStyle}/> ); }) } @@ -323,7 +325,8 @@ Select2.propTypes = { isSelectSingle: PropTypes.bool, showSearchBox: PropTypes.bool, cancelButtonText: PropTypes.string, - selectButtonText: PropTypes.string + selectButtonText: PropTypes.string, + tagStyle: PropTypes.object, } //make this component available to the app diff --git a/lib/TagItem.js b/lib/TagItem.js index c24a409..73448fc 100644 --- a/lib/TagItem.js +++ b/lib/TagItem.js @@ -1,23 +1,37 @@ import React from 'react'; -import {TouchableOpacity, Text } from 'react-native'; +import { StyleSheet, TouchableOpacity, Text } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -const TagItem = ({ tagName, onRemoveTag }) => { - return ( - - - - {tagName} - - - ); +const TagItem = ({ tagName, onRemoveTag, style={} }) => { + return ( + + + + {tagName} + + + ); } -export default TagItem; \ No newline at end of file + +const defaultStyles = StyleSheet.create({ + selectedTagArea: { + alignItems: 'center', + backgroundColor: '#f5f6f5', + borderColor: '#e9e9e9', + borderRadius: 3, + borderWidth: 1, + flexDirection: 'row', + margin: 4, + paddingVertical: 4, + paddingHorizontal: 8, + }, + selectedTagText: { + color: '#333', + fontSize: 14, + paddingLeft: 4 + }, +}); + +export default TagItem; From 38c65aa78f066c9592022b81c145ed534fb06f07 Mon Sep 17 00:00:00 2001 From: Pavel Mihailovskiy Date: Thu, 12 Mar 2020 13:52:41 +0200 Subject: [PATCH 2/4] Add ability to set icon color --- README.md | 5 ++++- lib/TagItem.js | 8 +++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b1e69f9..193843a 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,9 @@ class CreateNewAppointment extends Component { }, selectedTagText: { color: 'white' + }, + icon: { + color: 'red' } }} /> @@ -95,6 +98,6 @@ class CreateNewAppointment extends Component { | **selectedTitleStyle** | _Object_ | none | Set custom style for display selected title text | | **buttonTextStyle** | _Object_ | none | Set custom button text style | | **buttonStyle** | _Object_ | none | Set custom button style | -| **tagStyle** | _Object_ | none | Set custom styles for tags style | +| **tagStyle** | _Object_ | none | Set custom styles for tags | **MIT Licensed** diff --git a/lib/TagItem.js b/lib/TagItem.js index 73448fc..adc3a1c 100644 --- a/lib/TagItem.js +++ b/lib/TagItem.js @@ -3,11 +3,17 @@ import { StyleSheet, TouchableOpacity, Text } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; const TagItem = ({ tagName, onRemoveTag, style={} }) => { + iconColor = () => { + return (style.icon && style.icon.color) || + (style.selectedTagText && style.selectedTagText.color) || + defaultStyles.selectedTagText.color + } + return ( - + {tagName} From f2731e609a87cf0a0bee954572757450f0feba39 Mon Sep 17 00:00:00 2001 From: OlegChernetskiy Date: Wed, 25 Nov 2020 14:21:33 +0200 Subject: [PATCH 3/4] Added the ability to change the style of the listed item and its container --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 954abc0..1d98b11 100644 --- a/index.js +++ b/index.js @@ -105,8 +105,8 @@ class Select2 extends Component { key={idx} onPress={() => this.onItemSelected(item, isSelectSingle)} activeOpacity={0.7} - style={styles.itemWrapper}> - + style={[styles.itemWrapper, item.containerStyle]}> + {item.name} Date: Fri, 27 Nov 2020 12:30:54 +0200 Subject: [PATCH 4/4] Added options --- index.js | 49 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 36 insertions(+), 13 deletions(-) diff --git a/index.js b/index.js index 1d98b11..d53c6b0 100644 --- a/index.js +++ b/index.js @@ -21,7 +21,12 @@ class Select2 extends Component { buttonTextStyle: {}, buttonStyle: {}, showSearchBox: true, - tagStyle: {} + tagStyle: {}, + showLine: true, + popupTitleStyle: {}, + inputStyle: {}, + listBlockStyle: {}, + showCheckbox: true } state = { show: false, @@ -30,7 +35,7 @@ class Select2 extends Component { data: [], keyword: '' } - animatedHeight = new Animated.Value(INIT_HEIGHT); + animatedHeight = new Animated.Value(this.props.windowHeight || INIT_HEIGHT); componentDidMount() { this.init(); @@ -82,6 +87,7 @@ class Select2 extends Component { } onItemSelected = (item, isSelectSingle) => { + let { showCheckbox, onSelect } = this.props let selectedItem = []; let { data } = this.state; item.checked = !item.checked; @@ -96,10 +102,15 @@ class Select2 extends Component { if (item.checked) selectedItem.push(item); }) this.setState({ data, selectedItem }); + + if (!showCheckbox) { + onSelect && onSelect([item.id], [item]); + this.setState({ show: false, keyword: '', preSelectedItem: this.state.selectedItem }); + } } keyExtractor = (item, idx) => idx.toString(); renderItem = ({ item, idx }) => { - let { colorTheme, isSelectSingle } = this.props; + let { colorTheme, isSelectSingle, showCheckbox } = this.props; return ( {item.name} - + } ); } @@ -130,7 +143,7 @@ class Select2 extends Component { let { style, modalStyle, title, onSelect, onRemoveItem, popupTitle, colorTheme, isSelectSingle, cancelButtonText, selectButtonText, searchPlaceHolderText, - selectedTitleStyle, buttonTextStyle, buttonStyle, showSearchBox, tagStyle + selectedTitleStyle, buttonTextStyle, buttonStyle, showSearchBox, tagStyle, showLine, popupTitleStyle, inputStyle, listBlockStyle, showCheckbox } = this.props; let { show, selectedItem, preSelectedItem } = this.state; return ( @@ -151,44 +164,47 @@ class Select2 extends Component { isVisible={show}> - + {popupTitle || title} - + { showLine && } { showSearchBox ? this.setState({ keyword })} onFocus={() => { Animated.spring(this.animatedHeight, { toValue: INIT_HEIGHT + (Platform.OS === 'ios' ? height * 0.2 : 0), - friction: 7 + friction: 7, + useNativeDriver: false }).start(); }} onBlur={() => { Animated.spring(this.animatedHeight, { toValue: INIT_HEIGHT, - friction: 7 + friction: 7, + useNativeDriver: false }).start(); }} /> : null } - + { showCheckbox && +