Skip to content

Commit

Permalink
add iconRenderer, conditionally require vector icons package
Browse files Browse the repository at this point in the history
  • Loading branch information
@renrizzolo
renrizzolo committed May 31, 2019
1 parent b77d6c4 commit f44dad9
Showing 1 changed file with 151 additions and 140 deletions.
291 changes: 151 additions & 140 deletions lib/sectioned-multi-select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@ import {
ActivityIndicator,
} from 'react-native'
import { isEqual } from 'lodash'
import Icon from 'react-native-vector-icons/MaterialIcons'
// import Icon from 'react-native-vector-icons/MaterialIcons'
import { RowItem } from './components'
import { callIfFunction } from './helpers'

let Icon

const Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity

const defaultStyles = {
Expand Down Expand Up @@ -176,6 +178,7 @@ class SectionedMultiSelect extends PureComponent {
disabled: PropTypes.bool,
selectedIconOnLeft: PropTypes.bool,
parentChipsRemoveChildren: PropTypes.bool,
iconRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
}

static defaultProps = {
Expand Down Expand Up @@ -238,7 +241,16 @@ class SectionedMultiSelect extends PureComponent {

constructor(props) {
super(props)
this.iconLoaded = false
if (props.iconRenderer) {
Icon = props.iconRenderer
this.iconLoaded = true
} else {
Icon = require('react-native-vector-icons/MaterialIcons').default
this.iconLoaded = true

}

this.state = {
selector: false,
searchTerm: '',
Expand Down Expand Up @@ -292,7 +304,6 @@ class SectionedMultiSelect extends PureComponent {
return toSplice
}


_getSelectLabel = () => {
const {
selectText,
Expand Down Expand Up @@ -422,7 +433,7 @@ class SectionedMultiSelect extends PureComponent {
subKey,
onSelectedItemsChange,
onSelectedItemObjectsChange,
readOnlyHeadings
readOnlyHeadings,
} = this.props

let newItems = []
Expand Down Expand Up @@ -867,6 +878,7 @@ class SectionedMultiSelect extends PureComponent {
return (
<View>
<RowItem
iconRenderer={Icon}
item={item}
mergedStyles={styles}
mergedColors={colors}
Expand Down Expand Up @@ -951,154 +963,153 @@ class SectionedMultiSelect extends PureComponent {
onRequestClose={this._closeSelector}
>
<this.BackdropView
style={[{
flex: 1,
width: '100%',
height: '100%',
position: 'absolute',
backgroundColor: 'rgba(0,0,0,0.5)',
zIndex: 0
}, styles.backdrop]}
style={[
{
flex: 1,
width: '100%',
height: '100%',
position: 'absolute',
backgroundColor: 'rgba(0,0,0,0.5)',
zIndex: 0,
},
styles.backdrop,
]}
/>
<View
style={[
{
overflow: 'hidden',
marginHorizontal: 18,
marginVertical: 26,
borderRadius: 6,
alignSelf: 'stretch',
flex: 1,
backgroundColor: 'white',
},
styles.container,
]}
<View
style={[
{
overflow: 'hidden',
marginHorizontal: 18,
marginVertical: 26,
borderRadius: 6,
alignSelf: 'stretch',
flex: 1,
backgroundColor: 'white',
},
styles.container,
]}
>
{headerComponent && callIfFunction(headerComponent)}
{!hideSearch && (
<View style={[{ flexDirection: 'row', paddingVertical: 5 }, styles.searchBar]}>
<View style={styles.center}>
{callIfFunction(searchIconComponent) || (
<Icon name="search" size={18} style={{ marginHorizontal: 15 }} />
)}
</View>
<TextInput
value={this.state.searchTerm}
selectionColor={colors.searchSelectionColor}
onChangeText={searchTerm => this.setState({ searchTerm })}
placeholder={searchPlaceholderText}
autoFocus={autoFocus}
selectTextOnFocus
placeholderTextColor={colors.searchPlaceholderTextColor}
underlineColorAndroid="transparent"
style={[
{
flex: 1,
fontSize: 17,
paddingVertical: 8,
},
searchTextFont,
styles.searchTextInput,
]}
/>
{searchAdornment && searchAdornment(searchTerm)}
</View>
)}

<ScrollView
keyboardShouldPersistTaps="always"
style={[{ paddingHorizontal: 12, flex: 1 }, styles.scrollView]}
>
{headerComponent && callIfFunction(headerComponent)}
{!hideSearch && (
<View style={[{ flexDirection: 'row', paddingVertical: 5 }, styles.searchBar]}>
<View style={styles.center}>
{callIfFunction(searchIconComponent) || (
<Icon name="search" size={18} style={{ marginHorizontal: 15 }} />
)}
<View>
{loading ? (
callIfFunction(loadingComponent)
) : (
<View>
{!renderItems || (!renderItems.length && !searchTerm)
? callIfFunction(noItemsComponent)
: null}
{items && renderItems && renderItems.length ? (
<View>
<FlatList
keyboardShouldPersistTaps="always"
removeClippedSubviews
initialNumToRender={15}
data={renderItems}
extraData={selectedItems}
keyExtractor={item => `${item[uniqueKey]}`}
ItemSeparatorComponent={this._renderSeparator}
ListFooterComponent={this._renderFooter}
renderItem={this._renderItemFlatList}
/>
</View>
) : searchTerm ? (
callIfFunction(noResultsComponent)
) : null}
</View>
<TextInput
value={this.state.searchTerm}
selectionColor={colors.searchSelectionColor}
onChangeText={searchTerm => this.setState({ searchTerm })}
placeholder={searchPlaceholderText}
autoFocus={autoFocus}
selectTextOnFocus
placeholderTextColor={colors.searchPlaceholderTextColor}
underlineColorAndroid="transparent"
)}
</View>
</ScrollView>
<View style={{ flexDirection: 'row' }}>
{showCancelButton && (
<Touchable accessibilityComponentType="button" onPress={this._cancelSelection}>
<View
style={[
{
flex: 1,
fontSize: 17,
width: 54,
flex: Platform.OS === 'android' ? 0 : 1,
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 8,
paddingHorizontal: 16,
borderRadius: 0,
flexDirection: 'row',
backgroundColor: colors.cancel,
},
searchTextFont,
styles.searchTextInput,
styles.cancelButton,
]}
/>
{searchAdornment && searchAdornment(searchTerm)}
</View>
>
{callIfFunction(cancelIconComponent) || (
<Icon size={24} name="cancel" style={{ color: 'white' }} />
)}
</View>
</Touchable>
)}

<ScrollView
keyboardShouldPersistTaps="always"
style={[{ paddingHorizontal: 12, flex: 1 }, styles.scrollView]}
>
<View>
{loading ? (
callIfFunction(loadingComponent)
) : (
<View>
{!renderItems || (!renderItems.length && !searchTerm)
? callIfFunction(noItemsComponent)
: null}
{items && renderItems && renderItems.length ? (
<View>
<FlatList
keyboardShouldPersistTaps="always"
removeClippedSubviews
initialNumToRender={15}
data={renderItems}
extraData={selectedItems}
keyExtractor={item => `${item[uniqueKey]}`}
ItemSeparatorComponent={this._renderSeparator}
ListFooterComponent={this._renderFooter}
renderItem={this._renderItemFlatList}
/>
</View>
) : searchTerm ? (
callIfFunction(noResultsComponent)
) : null}
</View>
)}
</View>
</ScrollView>
<View style={{ flexDirection: 'row' }}>
{showCancelButton && (
<Touchable accessibilityComponentType="button" onPress={this._cancelSelection}>
<View
style={[
{
width: 54,
flex: Platform.OS === 'android' ? 0 : 1,
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 8,
paddingHorizontal: 16,
borderRadius: 0,
flexDirection: 'row',
backgroundColor: colors.cancel,
},
styles.cancelButton,
]}
>
{callIfFunction(cancelIconComponent) || (
<Icon size={24} name="cancel" style={{ color: 'white' }} />
)}
</View>
</Touchable>
)}
{!hideConfirm && (
<Touchable
accessibilityComponentType="button"
onPress={this._submitSelection}
style={{ flex: 1 }}
{!hideConfirm && (
<Touchable
accessibilityComponentType="button"
onPress={this._submitSelection}
style={{ flex: 1 }}
>
<View
style={[
{
flex: Platform.OS === 'android' ? 1 : 0,
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 8,
paddingHorizontal: 16,
borderRadius: 0,
flexDirection: 'row',
backgroundColor: colors.primary,
},
styles.button,
]}
>
<View
style={[
{
flex: Platform.OS === 'android' ? 1 : 0,
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 8,
paddingHorizontal: 16,
borderRadius: 0,
flexDirection: 'row',
backgroundColor: colors.primary,
},
styles.button,
]}
<Text
style={[{ fontSize: 18, color: '#ffffff' }, confirmFont, styles.confirmText]}
>
<Text
style={[
{ fontSize: 18, color: '#ffffff' },
confirmFont,
styles.confirmText,
]}
>
{confirmText}
</Text>
</View>
</Touchable>
)}
</View>
{stickyFooterComponent && callIfFunction(stickyFooterComponent)}
{confirmText}
</Text>
</View>
</Touchable>
)}
</View>
{stickyFooterComponent && callIfFunction(stickyFooterComponent)}
</View>
</Modal>
{chipsPosition === 'top' && this._renderChips()}
{chipsPosition === 'top' && this._customChipsRenderer()}
Expand All @@ -1117,7 +1128,7 @@ class SectionedMultiSelect extends PureComponent {
styles.selectToggle,
]}
>
{this._getSelectLabel()}
{this._getSelectLabel()}
{callIfFunction(selectToggleIconComponent) || (
<Icon
size={24}
Expand Down

0 comments on commit f44dad9

Please sign in to comment.