Skip to content

Commit f44dad9

Browse files
renrizzolorenrizzolo
committed
add iconRenderer, conditionally require vector icons package
1 parent b77d6c4 commit f44dad9

File tree

1 file changed

+151
-140
lines changed

1 file changed

+151
-140
lines changed

‎lib/sectioned-multi-select.js‎

Lines changed: 151 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@ import {
1616
ActivityIndicator,
1717
} from 'react-native'
1818
import { isEqual } from 'lodash'
19-
import Icon from 'react-native-vector-icons/MaterialIcons'
19+
// import Icon from 'react-native-vector-icons/MaterialIcons'
2020
import { RowItem } from './components'
2121
import { callIfFunction } from './helpers'
2222

23+
let Icon
24+
2325
const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity
2426

2527
const defaultStyles = {
@@ -176,6 +178,7 @@ class SectionedMultiSelect extends PureComponent {
176178
disabled: PropTypes.bool,
177179
selectedIconOnLeft: PropTypes.bool,
178180
parentChipsRemoveChildren: PropTypes.bool,
181+
iconRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
179182
}
180183

181184
static defaultProps = {
@@ -238,7 +241,16 @@ class SectionedMultiSelect extends PureComponent {
238241

239242
constructor(props) {
240243
super(props)
244+
this.iconLoaded = false
245+
if (props.iconRenderer) {
246+
Icon = props.iconRenderer
247+
this.iconLoaded = true
248+
} else {
249+
Icon = require('react-native-vector-icons/MaterialIcons').default
250+
this.iconLoaded = true
241251

252+
}
253+
242254
this.state = {
243255
selector: false,
244256
searchTerm: '',
@@ -292,7 +304,6 @@ class SectionedMultiSelect extends PureComponent {
292304
return toSplice
293305
}
294306

295-
296307
_getSelectLabel = () => {
297308
const {
298309
selectText,
@@ -422,7 +433,7 @@ class SectionedMultiSelect extends PureComponent {
422433
subKey,
423434
onSelectedItemsChange,
424435
onSelectedItemObjectsChange,
425-
readOnlyHeadings
436+
readOnlyHeadings,
426437
} = this.props
427438

428439
let newItems = []
@@ -867,6 +878,7 @@ class SectionedMultiSelect extends PureComponent {
867878
return (
868879
<View>
869880
<RowItem
881+
iconRenderer={Icon}
870882
item={item}
871883
mergedStyles={styles}
872884
mergedColors={colors}
@@ -951,154 +963,153 @@ class SectionedMultiSelect extends PureComponent {
951963
onRequestClose={this._closeSelector}
952964
>
953965
<this.BackdropView
954-
style={[{
955-
flex: 1,
956-
width: '100%',
957-
height: '100%',
958-
position: 'absolute',
959-
backgroundColor: 'rgba(0,0,0,0.5)',
960-
zIndex: 0
961-
}, styles.backdrop]}
966+
style={[
967+
{
968+
flex: 1,
969+
width: '100%',
970+
height: '100%',
971+
position: 'absolute',
972+
backgroundColor: 'rgba(0,0,0,0.5)',
973+
zIndex: 0,
974+
},
975+
styles.backdrop,
976+
]}
962977
/>
963-
<View
964-
style={[
965-
{
966-
overflow: 'hidden',
967-
marginHorizontal: 18,
968-
marginVertical: 26,
969-
borderRadius: 6,
970-
alignSelf: 'stretch',
971-
flex: 1,
972-
backgroundColor: 'white',
973-
},
974-
styles.container,
975-
]}
978+
<View
979+
style={[
980+
{
981+
overflow: 'hidden',
982+
marginHorizontal: 18,
983+
marginVertical: 26,
984+
borderRadius: 6,
985+
alignSelf: 'stretch',
986+
flex: 1,
987+
backgroundColor: 'white',
988+
},
989+
styles.container,
990+
]}
991+
>
992+
{headerComponent && callIfFunction(headerComponent)}
993+
{!hideSearch && (
994+
<View style={[{ flexDirection: 'row', paddingVertical: 5 }, styles.searchBar]}>
995+
<View style={styles.center}>
996+
{callIfFunction(searchIconComponent) || (
997+
<Icon name="search" size={18} style={{ marginHorizontal: 15 }} />
998+
)}
999+
</View>
1000+
<TextInput
1001+
value={this.state.searchTerm}
1002+
selectionColor={colors.searchSelectionColor}
1003+
onChangeText={searchTerm => this.setState({ searchTerm })}
1004+
placeholder={searchPlaceholderText}
1005+
autoFocus={autoFocus}
1006+
selectTextOnFocus
1007+
placeholderTextColor={colors.searchPlaceholderTextColor}
1008+
underlineColorAndroid="transparent"
1009+
style={[
1010+
{
1011+
flex: 1,
1012+
fontSize: 17,
1013+
paddingVertical: 8,
1014+
},
1015+
searchTextFont,
1016+
styles.searchTextInput,
1017+
]}
1018+
/>
1019+
{searchAdornment && searchAdornment(searchTerm)}
1020+
</View>
1021+
)}
1022+
1023+
<ScrollView
1024+
keyboardShouldPersistTaps="always"
1025+
style={[{ paddingHorizontal: 12, flex: 1 }, styles.scrollView]}
9761026
>
977-
{headerComponent && callIfFunction(headerComponent)}
978-
{!hideSearch && (
979-
<View style={[{ flexDirection: 'row', paddingVertical: 5 }, styles.searchBar]}>
980-
<View style={styles.center}>
981-
{callIfFunction(searchIconComponent) || (
982-
<Icon name="search" size={18} style={{ marginHorizontal: 15 }} />
983-
)}
1027+
<View>
1028+
{loading ? (
1029+
callIfFunction(loadingComponent)
1030+
) : (
1031+
<View>
1032+
{!renderItems || (!renderItems.length && !searchTerm)
1033+
? callIfFunction(noItemsComponent)
1034+
: null}
1035+
{items && renderItems && renderItems.length ? (
1036+
<View>
1037+
<FlatList
1038+
keyboardShouldPersistTaps="always"
1039+
removeClippedSubviews
1040+
initialNumToRender={15}
1041+
data={renderItems}
1042+
extraData={selectedItems}
1043+
keyExtractor={item => `${item[uniqueKey]}`}
1044+
ItemSeparatorComponent={this._renderSeparator}
1045+
ListFooterComponent={this._renderFooter}
1046+
renderItem={this._renderItemFlatList}
1047+
/>
1048+
</View>
1049+
) : searchTerm ? (
1050+
callIfFunction(noResultsComponent)
1051+
) : null}
9841052
</View>
985-
<TextInput
986-
value={this.state.searchTerm}
987-
selectionColor={colors.searchSelectionColor}
988-
onChangeText={searchTerm => this.setState({ searchTerm })}
989-
placeholder={searchPlaceholderText}
990-
autoFocus={autoFocus}
991-
selectTextOnFocus
992-
placeholderTextColor={colors.searchPlaceholderTextColor}
993-
underlineColorAndroid="transparent"
1053+
)}
1054+
</View>
1055+
</ScrollView>
1056+
<View style={{ flexDirection: 'row' }}>
1057+
{showCancelButton && (
1058+
<Touchable accessibilityComponentType="button" onPress={this._cancelSelection}>
1059+
<View
9941060
style={[
9951061
{
996-
flex: 1,
997-
fontSize: 17,
1062+
width: 54,
1063+
flex: Platform.OS === 'android' ? 0 : 1,
1064+
alignItems: 'center',
1065+
justifyContent: 'center',
9981066
paddingVertical: 8,
1067+
paddingHorizontal: 16,
1068+
borderRadius: 0,
1069+
flexDirection: 'row',
1070+
backgroundColor: colors.cancel,
9991071
},
1000-
searchTextFont,
1001-
styles.searchTextInput,
1072+
styles.cancelButton,
10021073
]}
1003-
/>
1004-
{searchAdornment && searchAdornment(searchTerm)}
1005-
</View>
1074+
>
1075+
{callIfFunction(cancelIconComponent) || (
1076+
<Icon size={24} name="cancel" style={{ color: 'white' }} />
1077+
)}
1078+
</View>
1079+
</Touchable>
10061080
)}
1007-
1008-
<ScrollView
1009-
keyboardShouldPersistTaps="always"
1010-
style={[{ paddingHorizontal: 12, flex: 1 }, styles.scrollView]}
1011-
>
1012-
<View>
1013-
{loading ? (
1014-
callIfFunction(loadingComponent)
1015-
) : (
1016-
<View>
1017-
{!renderItems || (!renderItems.length && !searchTerm)
1018-
? callIfFunction(noItemsComponent)
1019-
: null}
1020-
{items && renderItems && renderItems.length ? (
1021-
<View>
1022-
<FlatList
1023-
keyboardShouldPersistTaps="always"
1024-
removeClippedSubviews
1025-
initialNumToRender={15}
1026-
data={renderItems}
1027-
extraData={selectedItems}
1028-
keyExtractor={item => `${item[uniqueKey]}`}
1029-
ItemSeparatorComponent={this._renderSeparator}
1030-
ListFooterComponent={this._renderFooter}
1031-
renderItem={this._renderItemFlatList}
1032-
/>
1033-
</View>
1034-
) : searchTerm ? (
1035-
callIfFunction(noResultsComponent)
1036-
) : null}
1037-
</View>
1038-
)}
1039-
</View>
1040-
</ScrollView>
1041-
<View style={{ flexDirection: 'row' }}>
1042-
{showCancelButton && (
1043-
<Touchable accessibilityComponentType="button" onPress={this._cancelSelection}>
1044-
<View
1045-
style={[
1046-
{
1047-
width: 54,
1048-
flex: Platform.OS === 'android' ? 0 : 1,
1049-
alignItems: 'center',
1050-
justifyContent: 'center',
1051-
paddingVertical: 8,
1052-
paddingHorizontal: 16,
1053-
borderRadius: 0,
1054-
flexDirection: 'row',
1055-
backgroundColor: colors.cancel,
1056-
},
1057-
styles.cancelButton,
1058-
]}
1059-
>
1060-
{callIfFunction(cancelIconComponent) || (
1061-
<Icon size={24} name="cancel" style={{ color: 'white' }} />
1062-
)}
1063-
</View>
1064-
</Touchable>
1065-
)}
1066-
{!hideConfirm && (
1067-
<Touchable
1068-
accessibilityComponentType="button"
1069-
onPress={this._submitSelection}
1070-
style={{ flex: 1 }}
1081+
{!hideConfirm && (
1082+
<Touchable
1083+
accessibilityComponentType="button"
1084+
onPress={this._submitSelection}
1085+
style={{ flex: 1 }}
1086+
>
1087+
<View
1088+
style={[
1089+
{
1090+
flex: Platform.OS === 'android' ? 1 : 0,
1091+
alignItems: 'center',
1092+
justifyContent: 'center',
1093+
paddingVertical: 8,
1094+
paddingHorizontal: 16,
1095+
borderRadius: 0,
1096+
flexDirection: 'row',
1097+
backgroundColor: colors.primary,
1098+
},
1099+
styles.button,
1100+
]}
10711101
>
1072-
<View
1073-
style={[
1074-
{
1075-
flex: Platform.OS === 'android' ? 1 : 0,
1076-
alignItems: 'center',
1077-
justifyContent: 'center',
1078-
paddingVertical: 8,
1079-
paddingHorizontal: 16,
1080-
borderRadius: 0,
1081-
flexDirection: 'row',
1082-
backgroundColor: colors.primary,
1083-
},
1084-
styles.button,
1085-
]}
1102+
<Text
1103+
style={[{ fontSize: 18, color: '#ffffff' }, confirmFont, styles.confirmText]}
10861104
>
1087-
<Text
1088-
style={[
1089-
{ fontSize: 18, color: '#ffffff' },
1090-
confirmFont,
1091-
styles.confirmText,
1092-
]}
1093-
>
1094-
{confirmText}
1095-
</Text>
1096-
</View>
1097-
</Touchable>
1098-
)}
1099-
</View>
1100-
{stickyFooterComponent && callIfFunction(stickyFooterComponent)}
1105+
{confirmText}
1106+
</Text>
1107+
</View>
1108+
</Touchable>
1109+
)}
11011110
</View>
1111+
{stickyFooterComponent && callIfFunction(stickyFooterComponent)}
1112+
</View>
11021113
</Modal>
11031114
{chipsPosition === 'top' && this._renderChips()}
11041115
{chipsPosition === 'top' && this._customChipsRenderer()}
@@ -1117,7 +1128,7 @@ class SectionedMultiSelect extends PureComponent {
11171128
styles.selectToggle,
11181129
]}
11191130
>
1120-
{this._getSelectLabel()}
1131+
{this._getSelectLabel()}
11211132
{callIfFunction(selectToggleIconComponent) || (
11221133
<Icon
11231134
size={24}

0 commit comments

Comments
 (0)