react-native-searchable-dropdown - npm Package Compare versions

Comparing version 1.0.6 to 1.0.8

CHANGELOG.md

@@ -8,3 +8,13 @@ [npm-badge]: https://img.shields.io/npm/v/react-native-searchable-dropdown.svg?colorB=ff6d00
 
+# 1.0.8
+* ListView removed
+* listType prop removed
+* setSort props added by which you can filter data with your own callback
+* listProps by which you can pass all props of FlatList 
+
+# 1.0.7
+* resetValue prop can now be used
+* mispelled keyboardShouldPersist prop in render
+
 # 1.0.6
 * listType prop added default will be FlatList or you can pass ListView

index.js

 import React, { Component } from 'react';
 import {
   Text,
-  ListView,
   FlatList,
@@ -12,4 +11,8 @@ TextInput,
 
-var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
-export default class SearchableDropDown extends Component{
+const defaultItemValue = {
+  name: '',
+  id: 0
+};
+
+export default class SearchableDropDown extends Component {
   constructor(props) {
@@ -20,35 +23,34 @@ super(props);
       listItems: [],
-      focus: false,
+      focus: false
     };
-    this.renderList = this.renderList.bind(this);
-  };
-
-  renderList(){
-    if(this.state.focus){
-     return (
-          <ListView
-            style={{ ...this.props.itemsContainerStyle }}
-            keyboardShouldPersistTaps="always"
-            dataSource={ds.cloneWithRows(this.state.listItems)}
-            renderRow={this.renderItems} />
-        )
-    }
   }
 
-  renderFlatList(){
-    if(this.state.focus){
+  renderFlatList = () => {
+    if (this.state.focus) {
+      const flatListPorps = { ...this.props.listProps };
+      const oldSupport = [
+        { key: 'keyboardShouldPersistTaps', val: 'always' }, 
+        { key: 'nestedScrollEnabled', val : false },
+        { key: 'style', val : { ...this.props.itemsContainerStyle } },
+        { key: 'data', val : this.state.listItems },
+        { key: 'keyExtractor', val : (item, index) => index.toString() },
+        { key: 'renderItem', val : ({ item }) => this.renderItems(item) },
+      ];
+      oldSupport.forEach((kv) => {
+        if(!Object.keys(flatListPorps).includes(kv.key)) {
+          flatListPorps[kv.key] = kv.val;
+        }
+      });
       return (
-          <FlatList
-            style={{ ...this.props.itemsContainerStyle }}
-            keyboardShouldPersistTaps="always"
-            data={this.state.listItems}
-            keyExtractor={(item, index) => index.toString()}
-            renderItem={({  item  }) => this.renderItems(item)} />
-         )
-     }
-  }
+        <FlatList
+          { ...flatListPorps }
+        />
+      );
+    }
+  };
 
-  componentDidMount(){
+  componentDidMount = () => {
     const listItems = this.props.items;
     const defaultIndex = this.props.defaultIndex;
+
     if (defaultIndex && listItems.length > defaultIndex) {
@@ -59,35 +61,46 @@ this.setState({
       });
+    } else {
+      this.setState({ listItems });
     }
-    else {
-      this.setState({listItems});
+  };
+
+  searchedItems = searchedText => {
+    let setSort = this.props.setSort;
+    if (!setSort && typeof setSort !== 'function') {
+        setSort = item => item.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
     }
-  }
+    var ac = this.props.items.filter((item) => {
+      return setSort(item, searchedText);
+    });
+    let item = {
+      id: -1,
+      name: searchedText
+    };
+    this.setState({ listItems: ac, item: item });
+    const onTextChange = this.props.onTextChange;
 
-  searchedItems= (searchedText) => {
-      var ac = this.props.items.filter(function(item) {
-        return item.name.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
-      });
-      let item = {
-        id: -1,
-        name: searchedText
-      }
-      this.setState({listItems: ac, item: item });
-
-      const onTextChange = this.props.onTextChange;
-      if (onTextChange && typeof onTextChange === 'function') {
-        setTimeout(() => {
-          onTextChange(searchedText);
-        }, 0);
-      }
+    if (onTextChange && typeof onTextChange === 'function') {
+      setTimeout(() => {
+        onTextChange(searchedText);
+      }, 0);
+    }
   };
 
-  renderItems = (item) => {
+  renderItems = item => {
     return (
-      <TouchableOpacity style={{ ...this.props.itemStyle }} onPress={() => {
-        this.setState({ item: item, focus: false });
-        Keyboard.dismiss();
-        setTimeout(() => {
-          this.props.onItemSelect(item);
-        }, 0);
-      }}>
+      <TouchableOpacity
+        style={{ ...this.props.itemStyle }}
+        onPress={() => {
+          this.setState({ item: item, focus: false });
+          Keyboard.dismiss();
+          setTimeout(() => {
+            this.props.onItemSelect(item);
+
+            if (this.props.resetValue) {
+              this.setState({ focus: true, item: defaultItemValue });
+              this.input.focus();
+            }
+          }, 0);
+        }}
+      >
         <Text style={{ ...this.props.itemTextStyle }}>{item.name}</Text>
@@ -98,36 +111,39 @@ </TouchableOpacity>
 
-  renderListType(){
-    return this.props.listType == 'ListView' ? this.renderList() : this.renderFlatList();
-  }
+  renderListType = () => {
+    return this.renderFlatList();
+  };
 
- render() {
+  render = () => {
     return (
-      <View keyboardShouldpersist='always' style={{...this.props.containerStyle}}>
+      <View
+        keyboardShouldPersist="always"
+        style={{ ...this.props.containerStyle }}
+      >
         <TextInput
-            underlineColorAndroid={this.props.underlineColorAndroid}
-            onFocus={() => {
-              this.setState({
-                focus: true,
-                item: {
-                  name: '',
-                  id: 0
-                },
-                listItems: this.props.items
-              });
-            }}
-            onBlur={() => {
-              this.setState({ focus: false })
-            }}
-            ref={(e) => this.input = e}
-            onChangeText={(text) => {
-              this.searchedItems(text)}
-            }
-            value={this.state.item.name}
-            style={{ ...this.props.textInputStyle }}
-            placeholderTextColor={this.props.placeholderTextColor}
-            placeholder={this.props.placeholder} />
-        { this.renderListType() }
+          ref={e => (this.input = e)}
+          underlineColorAndroid={this.props.underlineColorAndroid}
+          onFocus={() => {
+            this.props.onFocus && this.props.onFocus()
+            this.setState({
+              focus: true,
+              item: defaultItemValue,
+              listItems: this.props.items
+            });
+          }}
+          onBlur={() => {
+            this.props.onBlur && this.props.onBlur()
+            this.setState({ focus: false })
+          }}
+          onChangeText={text => {
+            this.searchedItems(text);
+          }}
+          value={this.state.item.name}
+          style={{ ...this.props.textInputStyle }}
+          placeholderTextColor={this.props.placeholderTextColor}
+          placeholder={this.props.placeholder}
+        />
+        {this.renderListType()}
       </View>
     );
   };
-}
+}

package.json

 {
   "name": "react-native-searchable-dropdown",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Searchable Dropdown",
@@ -5,0 +5,0 @@ "main": "index.js",

readme.md

@@ -78,5 +78,19 @@ [example-url]: https://i.imgur.com/mHGaOX5.gif
     <tr>
-	   <td>listType</td>
-	   <td>default will be FlatList or you can pass ListView</td>
+	   <td>listProps</td>
+	  <td>
+      all supported (flatlist) props example: listProps={ nestedScrollEnabled: true }
+    </td>
    </tr>
+    <tr>
+	   <td>setSort</td>
+	   <td>filter data on text changing example: setSort={(item, searchedText)=> item.name.toLowerCase().startsWith(searchedText.toLowerCase())}</td>
+   </tr>
+   <tr>
+	   <td>onFocus</td>
+	   <td>same as regular onFocus of TextInput</td>
+   </tr>
+   <tr>
+	   <td>onBlur</td>
+	   <td>same as regular onBlur of TextInput</td>
+   </tr>
 </table>
@@ -83,0 +97,0 @@

No alert changes

Improved metrics

Total package byte prevSize

8956

increased by8.39%

Lines of code

133

increased by10.83%

Number of lines in readme file

169

increased by9.03%

No dependency changes