From 9c5f71852aef7a7ac03e7761d5dd810cd2ccef5d Mon Sep 17 00:00:00 2001 From: Ren Rizzolo Date: Fri, 31 May 2019 13:13:48 +1000 Subject: [PATCH] test custom iconRenderer function component that returns images --- exampleapp/App.js | 504 ++++++++++++++++++++++++++++------------------ 1 file changed, 306 insertions(+), 198 deletions(-) diff --git a/exampleapp/App.js b/exampleapp/App.js index daad2a6..5f5fcc5 100644 --- a/exampleapp/App.js +++ b/exampleapp/App.js @@ -11,10 +11,12 @@ import { ActivityIndicator, Dimensions, LayoutAnimation, + Image, } from 'react-native' import SectionedMultiSelect from 'react-native-sectioned-multi-select' -import Icon from 'react-native-vector-icons/MaterialIcons' -const img = require('./z.jpg'); +// import Icon from 'react-native-vector-icons/MaterialIcons' + +const img = require('./z.jpg') // Sorry for the mess @@ -22,12 +24,15 @@ const items = [ { title: 'Fruits from various places around the world, if you like', id: 0, - icon: { uri: 'https://banner2.kisspng.com/20180514/wqq/kisspng-leaf-plant-green-clip-art-5af9b5b7402440.7747356215263144232627.jpg'}, - + icon: { + uri: + 'https://banner2.kisspng.com/20180514/wqq/kisspng-leaf-plant-green-clip-art-5af9b5b7402440.7747356215263144232627.jpg', + }, + children: [ { title: 'Apple', - id: 10, + id: 10, }, { title: 'Strawberry and Banana and Pineapple and Pawpaw and Peach', @@ -81,13 +86,12 @@ const items = [ title: 'Apricot', id: 25, }, - ], }, { title: 'Gèms', id: 1, - icon: "cake", + icon: 'cake', children: [ { title: 'Quartz', @@ -129,7 +133,6 @@ const items = [ title: 'Palm', id: 33, }, - ], }, { @@ -137,7 +140,7 @@ const items = [ id: 34, }, ] -console.log(items); +console.log(items) // const items2 = // [{ @@ -170,20 +173,21 @@ for (let i = 0; i < 100; i++) { title: `item ${i}`, children: [ { - id: `10${i}`, title: `child 10${i}`, + id: `10${i}`, + title: `child 10${i}`, }, { - id: `11${i}`, title: `child 11${i}`, + id: `11${i}`, + title: `child 11${i}`, }, { - id: `12${i}`, title: `child 12${i}`, + id: `12${i}`, + title: `child 12${i}`, }, - ], }) } - const styles = StyleSheet.create({ center: { flex: 1, @@ -223,59 +227,59 @@ const styles = StyleSheet.create({ }, }) const accentMap = { - 'â': 'a', - 'Â': 'A', - 'à': 'a', - 'À': 'A', - 'á': 'a', - 'Á': 'A', - 'ã': 'a', - 'Ã': 'A', - 'ê': 'e', - 'Ê': 'E', - 'è': 'e', - 'È': 'E', - 'é': 'e', - 'É': 'E', - 'î': 'i', - 'Î': 'I', - 'ì': 'i', - 'Ì': 'I', - 'í': 'i', - 'Í': 'I', - 'õ': 'o', - 'Õ': 'O', - 'ô': 'o', - 'Ô': 'O', - 'ò': 'o', - 'Ò': 'O', - 'ó': 'o', - 'Ó': 'O', - 'ü': 'u', - 'Ü': 'U', - 'û': 'u', - 'Û': 'U', - 'ú': 'u', - 'Ú': 'U', - 'ù': 'u', - 'Ù': 'U', - 'ç': 'c', - 'Ç': 'C' -}; + â: 'a', + Â: 'A', + à: 'a', + À: 'A', + á: 'a', + Á: 'A', + ã: 'a', + Ã: 'A', + ê: 'e', + Ê: 'E', + è: 'e', + È: 'E', + é: 'e', + É: 'E', + î: 'i', + Î: 'I', + ì: 'i', + Ì: 'I', + í: 'i', + Í: 'I', + õ: 'o', + Õ: 'O', + ô: 'o', + Ô: 'O', + ò: 'o', + Ò: 'O', + ó: 'o', + Ó: 'O', + ü: 'u', + Ü: 'U', + û: 'u', + Û: 'U', + ú: 'u', + Ú: 'U', + ù: 'u', + Ù: 'U', + ç: 'c', + Ç: 'C', +} const tintColor = '#174A87' -const Loading = props => ( - props.hasErrored ? +const Loading = props => + (props.hasErrored ? ( oops... something went wrong. Tap to reload - : + ) : ( -) + )) const Toggle = props => ( props.onPress(!props.val)} disabled={props.disabled}> @@ -303,19 +307,95 @@ export default class App extends Component { selectChildren: false, hasErrored: false, } - this.termId = 100; + this.termId = 100 } - componentWillMount() { - // this.fetchCategories() - this.pretendToLoad() + // this.fetchCategories() + this.pretendToLoad() } componentDidMount() { // programatically opening the select // this.SectionedMultiSelect._toggleSelector(); } + // custom icon renderer passed to iconRenderer prop + // see the switch for possible icon name + // values + icon = ({ name, size = 18, style }) => { + // flatten the styles + const flat = StyleSheet.flatten(style) + // remove out the keys that aren't accepted on View + const { color, fontSize, ...styles } = flat + + let iconComponent + // the colour in the url on this site has to be a hex w/o hash + const iconColor = color && color.substr(0, 1) === '#' ? `${color.substr(1)}/` : '' + + const Search = ( + + ) + const Down = ( + + ) + const Up = ( + + ) + const Close = ( + + ) + + const Check = ( + + ) + const Cancel = ( + + ) + + switch (name) { + case 'search': + iconComponent = Search + break + case 'keyboard-arrow-up': + iconComponent = Up + break + case 'keyboard-arrow-down': + iconComponent = Down + break + case 'close': + iconComponent = Close + break + case 'check': + iconComponent = Check + break + case 'cancel': + iconComponent = Cancel + break + default: + iconComponent = null + break + } + return {iconComponent} + } + getProp = (object, key) => object && this.removerAcentos(object[key]) rejectProp = (items, fn) => items.filter(fn) @@ -328,11 +408,7 @@ export default class App extends Component { } // testing a custom filtering function that ignores accents - removerAcentos = (s) => { - return s.replace(/[\W\[\] ]/g, function (a) { - return accentMap[a] || a - }) - }; + removerAcentos = s => s.replace(/[\W\[\] ]/g, a => accentMap[a] || a) filterItems = (searchTerm, items, { subKey, displayKey, uniqueKey }) => { let filteredItems = [] @@ -349,8 +425,10 @@ export default class App extends Component { item[subKey].forEach((sub) => { if (regex.test(this.getProp(sub, displayKey))) { newItem[subKey] = [...newItem[subKey], sub] - newFilteredItems = this.rejectProp(filteredItems, singleItem => - item[uniqueKey] !== singleItem[uniqueKey]) + newFilteredItems = this.rejectProp( + filteredItems, + singleItem => item[uniqueKey] !== singleItem[uniqueKey], + ) newFilteredItems.push(newItem) filteredItems = newFilteredItems } @@ -379,7 +457,7 @@ export default class App extends Component { this.setState({ selectedItems: this.state.currentItems, }) - console.log(this.state.selectedItems); + console.log(this.state.selectedItems) } onSelectedItemObjectsChange = (selectedItemObjects) => { this.setState({ selectedItemObjects }) @@ -406,7 +484,9 @@ export default class App extends Component { } fetchCategories = () => { this.setState({ hasErrored: false }) - fetch('http://www.mocky.io/v2/5a5573a22f00005c04beea49?mocky-delay=500ms', { headers: 'no-cache' }) + fetch('http://www.mocky.io/v2/5a5573a22f00005c04beea49?mocky-delay=500ms', { + headers: 'no-cache', + }) .then(response => response.json()) .then((responseJson) => { this.setState({ cats: responseJson }) @@ -416,120 +496,134 @@ export default class App extends Component { throw error.message }) } - filterDuplicates = items => items.sort().reduce((accumulator, current) => { - const length = accumulator.length - if (length === 0 || accumulator[length - 1] !== current) { - accumulator.push(current) - } - return accumulator - }, []); - + filterDuplicates = items => + items.sort().reduce((accumulator, current) => { + const length = accumulator.length + if (length === 0 || accumulator[length - 1] !== current) { + accumulator.push(current) + } + return accumulator + }, []) - noResults = + noResults = ( Sorry! No results... - ; + + ) handleAddSearchTerm = () => { - const searchTerm = this.SectionedMultiSelect._getSearchTerm(); - const id = this.termId += 1; - if ( searchTerm.length && !(this.state.items || []).some( item => item.title.includes(searchTerm) ) ) { - const newItem = { id: id, title: searchTerm }; - this.setState(prevState => ({items: [...prevState.items || [], newItem]})); + const searchTerm = this.SectionedMultiSelect._getSearchTerm() + const id = (this.termId += 1) + if ( + searchTerm.length && + !(this.state.items || []).some(item => item.title.includes(searchTerm)) + ) { + const newItem = { id, title: searchTerm } + this.setState(prevState => ({ items: [...(prevState.items || []), newItem] })) this.onSelectedItemsChange([...this.state.selectedItems, id]) this.SectionedMultiSelect._submitSelection() } } renderSelectText = () => { - const { selectedItemObjects } = this.state; - - return selectedItemObjects.length ? - `I like ${selectedItemObjects.map((item, i) => { - let label = `${item.title}, ` - if (i === selectedItemObjects.length - 2) label = `${item.title} and ` - if (i === selectedItemObjects.length - 1) label = `${item.title}.` - return label - }).join('')}` - : - 'Select a fruit' + const { selectedItemObjects } = this.state + + return selectedItemObjects.length + ? `I like ${selectedItemObjects + .map((item, i) => { + let label = `${item.title}, ` + if (i === selectedItemObjects.length - 2) label = `${item.title} and ` + if (i === selectedItemObjects.length - 1) label = `${item.title}.` + return label + }) + .join('')}` + : 'Select a fruit' } -searchAdornment = (searchTerm) => { - return( - searchTerm.length ? - + (searchTerm.length ? ( + - - + + + {/* */} - : - null - ) -} - SelectOrRemoveAll = () => ( - this.SectionedMultiSelect && - - - {this.state.selectedItems.length ? 'Remove' : 'Select'} all - - - ) + ) : null) + SelectOrRemoveAll = () => + this.SectionedMultiSelect && ( + + + {this.state.selectedItems.length ? 'Remove' : 'Select'} all + + + ) onToggleSelector = (toggled) => { - console.log('selector is ', toggled ? 'open' : 'closed'); + console.log('selector is ', toggled ? 'open' : 'closed') } customChipsRenderer = (props) => { - console.log('props', props); + console.log('props', props) return ( - - Selected: + + Selected: {props.selectedItems.map((singleSelectedItem) => { const item = this.SectionedMultiSelect._findItem(singleSelectedItem) if (!item || !item[props.displayKey]) return null return ( - - { this.SectionedMultiSelect._removeItem(item) }}> - {item[props.displayKey]} + + { + this.SectionedMultiSelect._removeItem(item) + }} + > + {item[props.displayKey]} - ) - })} + ) + })} ) } render() { return ( - - - React native sectioned multi select example. - - + + React native sectioned multi select example. this.SectionedMultiSelect = SectionedMultiSelect} + ref={SectionedMultiSelect => (this.SectionedMultiSelect = SectionedMultiSelect)} uniqueKey="id" subKey="children" displayKey="title" @@ -537,33 +631,25 @@ searchAdornment = (searchTerm) => { autoFocus modalWithTouchable // showCancelButton - headerComponent={ - this.SelectOrRemoveAll - } + headerComponent={this.SelectOrRemoveAll} stickyFooterComponent={ - - Hi + + Hi } // hideConfirm loading={this.state.loading} // filterItems={this.filterItems} // alwaysShowSelectText - customChipsRenderer={this.customChipsRenderer} + // customChipsRenderer={this.customChipsRenderer} chipsPosition="top" - searchAdornment={(searchTerm) => this.searchAdornment(searchTerm)} + searchAdornment={searchTerm => this.searchAdornment(searchTerm)} renderSelectText={this.renderSelectText} // noResultsComponent={this.noResults} loadingComponent={ - + } - chipRemoveIconComponent={cancel} + iconRenderer={this.icon} // cancelIconComponent={Cancel} showDropDowns={this.state.showDropDowns} expandDropDowns={this.state.expandDropDowns} @@ -580,7 +666,7 @@ searchAdornment = (searchTerm) => { onCancel={this.onCancel} onConfirm={this.onConfirm} selectedItems={this.state.selectedItems} - colors={{ primary: this.state.selectedItems.length ? 'forestgreen' : 'crimson',}} + colors={{ primary: this.state.selectedItems.length ? 'forestgreen' : 'crimson' }} itemNumberOfLines={3} selectLabelNumberOfLines={3} styles={{ @@ -597,35 +683,35 @@ searchAdornment = (searchTerm) => { // color: this.state.selectedItems.length ? 'black' : 'lightgrey' // }, selectedSubItemText: { - color: 'blue', + color: 'blue', }, }} - cancelIconComponent={ - - } + // cancelIconComponent={} /> - + {/* this.SectionedMultiSelect2 = SectionedMultiSelect2} + ref={SectionedMultiSelect2 => (this.SectionedMultiSelect2 = SectionedMultiSelect2)} uniqueKey="id" subKey="children" displayKey="title" - // showCancelButton + // showCancelButton // hideSelect={true} selectText={this.state.selectedItems2.length ? 'Select categories' : 'All categories'} noResultsComponent={this.noResults} loadingComponent={ - + } - // cancelIconComponent={Cancel} + // selectToggleIconComponent={ + // + // } + cancelIconComponent={Cancel} showDropDowns={this.state.showDropDowns} expandDropDowns={this.state.expandDropDowns} customLayoutAnimation={LayoutAnimation.Presets.spring} @@ -634,6 +720,7 @@ searchAdornment = (searchTerm) => { showRemoveAll selectChildren={this.state.selectChildren} highlightChildren={this.state.highlightChildren} + // iconRenderer={Icon} // hideSearch // itemFontFamily={fonts.boldCondensed} onSelectedItemsChange={this.onSelectedItemsChange2} @@ -644,35 +731,57 @@ searchAdornment = (searchTerm) => { selectedItems={this.state.selectedItems2} styles={{ chipText: { - maxWidth: Dimensions.get('screen').width - 90, + maxWidth: Dimensions.get('screen').width - 90, }, itemText: { - color: this.state.selectedItems2.length ? 'black' : 'lightgrey' + color: this.state.selectedItems2.length ? 'black' : 'lightgrey', }, subItemText: { - color: this.state.selectedItems2.length ? 'black' : 'lightgrey' + color: this.state.selectedItems2.length ? 'black' : 'lightgrey', }, - // cancelButton: { - // // flex: 6, - // }, - // subItem: { - // paddingVertical: 15, - // }, - - }} + // cancelButton: { + // // flex: 6, + // }, + // subItem: { + // paddingVertical: 15, + // }, + }} // numberOfLines={1} - /> + /> */} Settings - - - - - + + + + + this.SectionedMultiSelect._removeAllItems()}> @@ -684,4 +793,3 @@ searchAdornment = (searchTerm) => { ) } } -