feat: made the list searchable

n4kz · Mar 22, 2021 · 4028f09 · 4028f09
1 parent 4526671
commit 4028f09
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git 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,21 +342,26 @@ 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);
 
     if ('function' === typeof onChangeText) {
       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}
             >
+              <TextInput
+                style={styles.input}
+                placeholder={'Search here'}
+                onChangeText={text => this.searchFilterFunction(text)}
+              />
               <FlatList
                 ref={this.updateScrollRef}
-                data={data}
+                data={this.state.data}
                 style={styles.scroll}
                 renderItem={this.renderItem}
                 keyExtractor={this.keyExtractor}

diff --git a/src/components/dropdown/styles.js b/src/components/dropdown/styles.js
@@ -63,4 +63,11 @@ export default StyleSheet.create({
   scrollContainer: {
     paddingVertical: 8,
   },
+
+  input: {
+    height: 40,
+    margin: 12,
+    borderBottomWidth: 0.5,
+  },
+
 });