diff --git a/index.js b/index.js index cbd32c5..b876d30 100644 --- a/index.js +++ b/index.js @@ -8,10 +8,6 @@ import { Keyboard } from 'react-native'; -const defaultItemValue = { - name: '', id: 0 -}; - export default class SearchableDropDown extends Component { constructor(props) { super(props); @@ -66,13 +62,17 @@ export default class SearchableDropDown extends Component { } else { this.setState({ listItems }); } + this.setState({ + idValue: this.props.idValue || 'id', + nameValue: this.props.nameValue || 'name' + }); }; searchedItems = searchedText => { let setSort = this.props.setSort; if (!setSort && typeof setSort !== 'function') { setSort = (item, searchedText) => { - return item.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1 + return item[this.state.nameValue].toLowerCase().indexOf(searchedText.toLowerCase()) > -1 }; } var ac = this.props.items.filter((item) => { @@ -94,11 +94,11 @@ export default class SearchableDropDown extends Component { renderItems = (item, index) => { if(this.props.multi && this.props.selectedItems && this.props.selectedItems.length > 0) { return ( - this.props.selectedItems.find(sitem => sitem.id === item.id) + this.props.selectedItems.find(sitem => sitem[this.state.idValue] === item[this.state.idValue]) ? - { item.name } + { item[this.state.nameValue] } setTimeout(() => { this.props.onRemoveItem(item, index) }, 0) } style={{ backgroundColor: '#f16d6b', alignItems: 'center', justifyContent: 'center', width: 25, height: 25, borderRadius: 100, marginLeft: 10}}> @@ -116,7 +116,7 @@ export default class SearchableDropDown extends Component { }} style={{ ...this.props.itemStyle, flex: 1, flexDirection: 'row' }}> - { item.name } + { item[this.state.nameValue] } ) @@ -130,18 +130,18 @@ export default class SearchableDropDown extends Component { setTimeout(() => { this.props.onItemSelect(item); if (this.props.resetValue) { - this.setState({ focus: true, item: defaultItemValue }); + this.setState({ focus: true, item: {[this.state.nameValue]: '', [this.state.idValue]: 0} }); this.input.focus(); } }, 0); }} > { - this.props.selectedItems && this.props.selectedItems.length > 0 && this.props.selectedItems.find(x => x.id === item.id) + this.props.selectedItems && this.props.selectedItems.length > 0 && this.props.selectedItems.find(x => x[this.state.idValue] === item[this.state.idValue]) ? - {item.name} + {item[this.state.nameValue]} : - {item.name} + {item[this.state.nameValue]} } ); @@ -164,7 +164,7 @@ export default class SearchableDropDown extends Component { this.props.onFocus && this.props.onFocus() this.setState({ focus: true, - item: defaultItemValue, + item: {[this.state.nameValue]: '', [this.state.idValue]: 0}, listItems: this.props.items }); } @@ -178,7 +178,7 @@ export default class SearchableDropDown extends Component { }, { key: 'value', - val: this.state.item.name + val: this.state.item[this.state.nameValue] }, { key: 'style', @@ -232,7 +232,7 @@ export default class SearchableDropDown extends Component { { items.map((item, index) => { return ( - {item.name} + {item[this.state.nameValue]} setTimeout(() => { this.props.onRemoveItem(item, index) }, 0) } style={{ backgroundColor: '#f16d6b', alignItems: 'center', justifyContent: 'center', width: 25, height: 25, borderRadius: 100, marginLeft: 10}}> X diff --git a/readme.md b/readme.md index dcd999a..7ffeec2 100644 --- a/readme.md +++ b/readme.md @@ -111,6 +111,15 @@ npm install --save react-native-searchable-dropdown onRemoveItem { (item, index) => { } } note: work when if multi prop is true + + idValue + prop name of the dataset id value, default 'id' + + + nameValue + prop name of the dataset name value, default 'name' + + # Example