Skip to content

Add ability to style selected tags for multiple select #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pavel-mihailovskiy wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Add ability to style selected tags for multiple select #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cd2ebfc
Add ability to style selected tags for multiple select
pavel-mihailovskiy Mar 11, 2020
1b0c650
Merge pull request #1 from pavel-mihailovskiy/add_ability_to_style_se…
pavel-mihailovskiy Mar 11, 2020
38c65aa
Add ability to set icon color
pavel-mihailovskiy Mar 12, 2020
f2731e6
Added the ability to change the style of the listed item and its cont…
Nov 25, 2020
ae91ced
Merge pull request #2 from pavel-mihailovskiy/add_styles
OlegChernetskiy Nov 25, 2020
928811c
Added options
Nov 27, 2020
354638b
Merge pull request #3 from pavel-mihailovskiy/add_styles
OlegChernetskiy Nov 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,17 @@ class CreateNewAppointment extends Component {
onRemoveItem={data => {
this.setState({ data })
}}
tagStyle={{
selectedTagArea: {
backgroundColor: 'black'
},
selectedTagText: {
color: 'white'
},
icon: {
color: 'red'
}
}}
/>
</View>
)
Expand Down Expand Up @@ -87,5 +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 |

**MIT Licensed**
60 changes: 43 additions & 17 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,13 @@ class Select2 extends Component {
colorTheme: '#16a45f',
buttonTextStyle: {},
buttonStyle: {},
showSearchBox: true
showSearchBox: true,
tagStyle: {},
showLine: true,
popupTitleStyle: {},
inputStyle: {},
listBlockStyle: {},
showCheckbox: true
}
state = {
show: false,
Expand All @@ -29,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();
Expand Down Expand Up @@ -81,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;
Expand All @@ -95,22 +102,29 @@ 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 (
<TouchableOpacity
key={idx}
onPress={() => this.onItemSelected(item, isSelectSingle)}
activeOpacity={0.7}
style={styles.itemWrapper}>
<Text style={[styles.itemText, this.defaultFont]}>
style={[styles.itemWrapper, item.containerStyle]}>
<Text style={[styles.itemText, this.defaultFont, item.textStyle]}>
{item.name}
</Text>
<Icon style={styles.itemIcon}
{ showCheckbox &&
<Icon style={styles.itemIcon}
name={item.checked ? 'check-circle-outline' : 'radiobox-blank'}
color={item.checked ? colorTheme : '#777777'} size={20} />
}
</TouchableOpacity>
);
}
Expand All @@ -129,7 +143,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, showLine, popupTitleStyle, inputStyle, listBlockStyle, showCheckbox
} = this.props;
let { show, selectedItem, preSelectedItem } = this.state;
return (
Expand All @@ -150,44 +164,47 @@ class Select2 extends Component {
isVisible={show}>
<Animated.View style={[styles.modalContainer, modalStyle, { height: this.animatedHeight }]}>
<View>
<Text style={[styles.title, this.defaultFont, { color: colorTheme }]}>
<Text style={[styles.title, this.defaultFont, popupTitleStyle, { color: colorTheme }]}>
{popupTitle || title}
</Text>
</View>
<View style={styles.line} />
{ showLine && <View style={styles.line} /> }
{
showSearchBox
? <TextInput
underlineColorAndroid='transparent'
returnKeyType='done'
style={[styles.inputKeyword, this.defaultFont]}
style={[styles.inputKeyword, this.defaultFont, inputStyle]}
placeholder={searchPlaceHolderText}
selectionColor={colorTheme}
onChangeText={keyword => 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
}
<FlatList
style={styles.listOption}
style={[styles.listOption, listBlockStyle]}
data={this.dataRender || []}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
ListEmptyComponent={this.renderEmpty}
/>

<View style={styles.buttonWrapper}>
{ showCheckbox &&
<View style={styles.buttonWrapper}>
<Button
defaultFont={this.defaultFont}
onPress={() => {
Expand All @@ -213,7 +230,8 @@ class Select2 extends Component {
backgroundColor={colorTheme}
textStyle={buttonTextStyle}
style={[styles.button, buttonStyle, { marginLeft: 5, marginRight: 10 }]} />
</View>
</View>
}
</Animated.View>
</Modal>
{
Expand Down Expand Up @@ -244,7 +262,8 @@ class Select2 extends Component {
this.setState({ data, preSelectedItem });
onRemoveItem && onRemoveItem(selectedIds, selectedObjectItems);
}}
tagName={tag.name} />
tagName={tag.name}
style={tagStyle}/>
);
})
}
Expand Down Expand Up @@ -323,7 +342,14 @@ Select2.propTypes = {
isSelectSingle: PropTypes.bool,
showSearchBox: PropTypes.bool,
cancelButtonText: PropTypes.string,
selectButtonText: PropTypes.string
selectButtonText: PropTypes.string,
tagStyle: PropTypes.object,
windowHeight: PropTypes.number,
showLine: PropTypes.bool,
popupTitleStyle: PropTypes.object,
inputStyle: PropTypes.object,
listBlockStyle: PropTypes.object,
showCheckbox: PropTypes.bool,
}

//make this component available to the app
Expand Down
58 changes: 39 additions & 19 deletions lib/TagItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,43 @@
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 (
<TouchableOpacity
onPress={onRemoveTag}
style={{
paddingVertical: 4, paddingHorizontal: 8, flexDirection: 'row', alignItems: 'center',
backgroundColor: '#f5f6f5', borderWidth: 1, borderColor: '#e9e9e9', margin: 4,
borderRadius: 3
}}>
<Icon size={14} color='#333' name='close' />
<Text style={{
fontSize: 14, color: '#333', paddingLeft: 4
}}>
{tagName}
</Text>
</TouchableOpacity>
);
const TagItem = ({ tagName, onRemoveTag, style={} }) => {
iconColor = () => {
return (style.icon && style.icon.color) ||
(style.selectedTagText && style.selectedTagText.color) ||
defaultStyles.selectedTagText.color
}

return (
<TouchableOpacity
onPress={onRemoveTag}
style={[defaultStyles.selectedTagArea, style.selectedTagArea]}>
<Icon size={14} color={this.iconColor()} name='close' />
<Text style={[defaultStyles.selectedTagText, style.selectedTagText]}>
{tagName}
</Text>
</TouchableOpacity>
);
}
export default TagItem;

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;