From 4028f092367adc35e923824e32e22f9df55917bb Mon Sep 17 00:00:00 2001 From: jrammmy Date: Mon, 22 Mar 2021 16:04:10 -0700 Subject: [PATCH 1/6] feat: made the list searchable --- src/components/dropdown/index.js | 30 +++++++++++++++++++++++++++--- src/components/dropdown/styles.js | 7 +++++++ 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/src/components/dropdown/index.js b/src/components/dropdown/index.js index b1e65a1f..bf5e86f6 100644 --- a/src/components/dropdown/index.js +++ b/src/components/dropdown/index.js @@ -11,6 +11,7 @@ import { Platform, ViewPropTypes, I18nManager, + TextInput, } from 'react-native'; import Ripple from 'react-native-material-ripple'; import { TextField } from 'react-native-material-textfield'; @@ -185,6 +186,7 @@ export default class Dropdown extends PureComponent { selected: -1, modal: false, value, + data: this.props.data }; } @@ -340,13 +342,15 @@ export default class Dropdown extends PureComponent { onSelect(index) { let { - data, valueExtractor, onChangeText, animationDuration, rippleDuration, } = this.props; + let data = this.state.data; + + let value = valueExtractor(data[index], index); let delay = Math.max(0, rippleDuration - animationDuration); @@ -354,7 +358,10 @@ export default class Dropdown extends PureComponent { onChangeText(value, index, data); } - setTimeout(() => this.onClose(value), delay); + setTimeout(() => { + this.onClose(value); + this.setState({data: this.props.data}); + }, delay); } onLayout(event) { @@ -562,6 +569,18 @@ export default class Dropdown extends PureComponent { ); } + searchFilterFunction(text) { + let arrayholder = this.props.data + const newData = arrayholder.filter(item => { + const itemData = `${item.value.toUpperCase()}`; + const textData = text.toUpperCase(); + + return itemData.indexOf(textData) > -1; + }); + + this.setState({ data: newData }); + }; + renderItem({ item, index }) { if (null == item) { return null; @@ -748,9 +767,14 @@ export default class Dropdown extends PureComponent { style={[styles.picker, pickerStyle, pickerStyleOverrides]} onStartShouldSetResponder={() => true} > + this.searchFilterFunction(text)} + /> Date: Wed, 31 Mar 2021 14:44:22 -0700 Subject: [PATCH 2/6] fix: solved an issue where the first item in the list was behind the searchbar --- src/components/dropdown/index.js | 3 ++- src/components/dropdown/styles.js | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/dropdown/index.js b/src/components/dropdown/index.js index bf5e86f6..db1c9250 100644 --- a/src/components/dropdown/index.js +++ b/src/components/dropdown/index.js @@ -764,7 +764,7 @@ export default class Dropdown extends PureComponent { onResponderRelease={this.blur} > true} > this.searchFilterFunction(text)} /> + Date: Thu, 1 Apr 2021 11:48:39 -0700 Subject: [PATCH 3/6] fix: made placeholder text darker --- src/components/dropdown/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/dropdown/index.js b/src/components/dropdown/index.js index db1c9250..b25459b5 100644 --- a/src/components/dropdown/index.js +++ b/src/components/dropdown/index.js @@ -770,6 +770,7 @@ export default class Dropdown extends PureComponent { this.searchFilterFunction(text)} /> From 6210deaab364e233190c47103754732047cbfe00 Mon Sep 17 00:00:00 2001 From: jrammmy Date: Thu, 1 Apr 2021 13:03:21 -0700 Subject: [PATCH 4/6] feat: able to add items you search for that are not in the list --- src/components/dropdown/index.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/dropdown/index.js b/src/components/dropdown/index.js index b25459b5..a4b7fbb3 100644 --- a/src/components/dropdown/index.js +++ b/src/components/dropdown/index.js @@ -186,7 +186,8 @@ export default class Dropdown extends PureComponent { selected: -1, modal: false, value, - data: this.props.data + data: this.props.data, + searchText: undefined, }; } @@ -569,16 +570,15 @@ export default class Dropdown extends PureComponent { ); } - searchFilterFunction(text) { + searchFilterFunction(searchText) { let arrayholder = this.props.data const newData = arrayholder.filter(item => { const itemData = `${item.value.toUpperCase()}`; - const textData = text.toUpperCase(); - + const textData = searchText.toUpperCase(); return itemData.indexOf(textData) > -1; }); - - this.setState({ data: newData }); + newData.push({value: searchText}); + this.setState({ data: newData, searchText }); }; renderItem({ item, index }) { @@ -771,6 +771,10 @@ export default class Dropdown extends PureComponent { style={styles.input} placeholder={'Search here'} placeholderTextColor="#808080" + clearButtonMode="always" + onSubmitEditing={() => { + this.setState({value: this.state.searchText, modal: false}) + }} onChangeText={text => this.searchFilterFunction(text)} /> From 8701d7fcd34b7feaad866dce0272badccc47dc63 Mon Sep 17 00:00:00 2001 From: jrammmy Date: Mon, 5 Apr 2021 12:35:19 -0700 Subject: [PATCH 5/6] fix: search text color now shows up --- src/components/dropdown/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dropdown/styles.js b/src/components/dropdown/styles.js index 2d5f75a9..2f268a18 100644 --- a/src/components/dropdown/styles.js +++ b/src/components/dropdown/styles.js @@ -34,7 +34,6 @@ export default StyleSheet.create({ picker: { backgroundColor: 'rgba(255, 255, 255, 1.0)', borderRadius: 2, - position: 'absolute', ...Platform.select({ ios: { @@ -68,6 +67,7 @@ export default StyleSheet.create({ height: 40, margin: 12, borderBottomWidth: 0.5, + color: '#808080', }, }); From 61749062014383867641a4841f6eb20d8cd4ba6a Mon Sep 17 00:00:00 2001 From: jrammmy Date: Mon, 5 Apr 2021 12:35:54 -0700 Subject: [PATCH 6/6] feat: made it so that Unknown shows up perminantly reguarless of the search filter --- src/components/dropdown/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/dropdown/index.js b/src/components/dropdown/index.js index a4b7fbb3..e0b757d1 100644 --- a/src/components/dropdown/index.js +++ b/src/components/dropdown/index.js @@ -571,6 +571,7 @@ export default class Dropdown extends PureComponent { } searchFilterFunction(searchText) { + let arrayholder = this.props.data const newData = arrayholder.filter(item => { const itemData = `${item.value.toUpperCase()}`; @@ -578,7 +579,7 @@ export default class Dropdown extends PureComponent { return itemData.indexOf(textData) > -1; }); newData.push({value: searchText}); - this.setState({ data: newData, searchText }); + this.setState({ data: [...newData, {value: 'Unknown'}], searchText }); }; renderItem({ item, index }) {