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

Comparing version 1.0.8 to 1.0.9

CHANGELOG.md

@@ -8,2 +8,6 @@ [npm-badge]: https://img.shields.io/npm/v/react-native-searchable-dropdown.svg?colorB=ff6d00
 
+# 1.0.9
+* multi selection added  
+* textInputProps by which you can pass all props of TextInput 
+
 # 1.0.8
@@ -10,0 +14,0 @@ * ListView removed

index.js

@@ -35,3 +35,3 @@ import React, { Component } from 'react';
         { key: 'keyExtractor', val : (item, index) => index.toString() },
-        { key: 'renderItem', val : ({ item }) => this.renderItems(item) },
+        { key: 'renderItem', val : ({ item, index }) => this.renderItems(item, index) },
       ];
@@ -87,22 +87,57 @@ oldSupport.forEach((kv) => {
 
-  renderItems = item => {
-    return (
-      <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>
-      </TouchableOpacity>
-    );
+  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) 
+          ? 
+          <TouchableOpacity style={{ ...this.props.itemStyle, flex: 1, flexDirection: 'row' }}>
+            <View style={{ flex: 0.9, flexDirection: 'row', alignItems: 'flex-start' }}>
+              <Text>{ item.name }</Text>
+            </View>
+            <View style={{ flex: 0.1, flexDirection: 'row', alignItems: 'flex-end' }}>
+              <TouchableOpacity onPress={() => setTimeout(() => { this.props.onRemoveItem(item, index) }, 0) } style={{ backgroundColor: '#f16d6b', alignItems: 'center', justifyContent: 'center', width: 25, height: 25, borderRadius: 100, marginLeft: 10}}>
+                <Text>X</Text>
+              </TouchableOpacity>
+            </View>
+          </TouchableOpacity>
+         :
+          <TouchableOpacity
+          onPress={() => {
+            this.setState({ item: item });
+            setTimeout(() => {
+              this.props.onItemSelect(item);
+            }, 0);
+          }}
+          style={{ ...this.props.itemStyle, flex: 1, flexDirection: 'row' }}>
+            <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-start' }}>
+              <Text>{ item.name }</Text>
+            </View>
+          </TouchableOpacity>
+      )
+    } else {
+      return (
+        <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);
+          }}
+        >
+          { 
+            this.props.selectedItems && this.props.selectedItems.length > 0 && this.props.selectedItems.find(x => x.id === item.id) 
+            ?
+              <Text style={{ ...this.props.itemTextStyle }}>{item.name}</Text>
+            :
+              <Text style={{ ...this.props.itemTextStyle }}>{item.name}</Text>
+          }
+        </TouchableOpacity>
+      );
+    }
   };
@@ -114,2 +149,55 @@
 
+  renderTextInput = () => {
+    const textInputPorps = { ...this.props.textInputProps };
+    const oldSupport = [
+      { key: 'ref', val: e => (this.input = e) }, 
+      { key: 'onTextChange', val: (text) => { this.searchedItems(text) } }, 
+      { key: 'underlineColorAndroid', val: this.props.underlineColorAndroid }, 
+      { 
+        key: 'onFocus', 
+        val: () => {
+          this.props.onFocus && this.props.onFocus()
+          this.setState({
+            focus: true,
+            item: defaultItemValue,
+            listItems: this.props.items
+          });
+        } 
+      }, 
+      {
+        key: 'onBlur',
+        val: () => {
+          this.props.onBlur && this.props.onBlur()
+          this.setState({ focus: false })
+        }
+      },
+      {
+        key: 'value',
+        val: this.state.item.name
+      },
+      {
+        key: 'style',
+        val: { ...this.props.textInputStyle }
+      },
+      {
+        key: 'placeholderTextColor',
+        val: this.props.placeholderTextColor
+      },
+      {
+        key: 'placeholder',
+        val: this.props.placeholder
+      }
+    ];
+    oldSupport.forEach((kv) => {
+      if(!Object.keys(textInputPorps).includes(kv.key)) {
+        textInputPorps[kv.key] = kv.val;
+      }
+    });
+    return (
+      <TextInput
+       { ...textInputPorps }
+      />
+    )
+  }
+
   render = () => {
@@ -121,25 +209,4 @@ return (
       >
-        <TextInput
-          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.renderSelectedItems() }
+        { this.renderTextInput() }
         {this.renderListType()}
@@ -149,2 +216,30 @@ </View>
   };
+  renderSelectedItems(){
+    let items = this.props.selectedItems;
+    if(items !== undefined && items.length > 0 && this.props.chip && this.props.multi){
+     return  <View style={{flexDirection: 'row',  flexWrap: 'wrap', paddingBottom: 10, marginTop: 5 }}>
+                 { items.map((item, index) => {
+                     return (
+                         <View key={index} style={{
+                                 width: (item.name.length * 8) + 60,
+                                 justifyContent: 'center',
+                                 flex: 0,
+                                 backgroundColor: '#eee',
+                                 flexDirection: 'row',
+                                 alignItems: 'center',
+                                 margin: 5,
+                                 padding: 8,
+                                 borderRadius: 15,
+                             }}>
+                             <Text style={{ color: '#555' }}>{item.name}</Text>
+                             <TouchableOpacity onPress={() => setTimeout(() => { this.props.onRemoveItem(item, index) }, 0) } style={{ backgroundColor: '#f16d6b', alignItems: 'center', justifyContent: 'center', width: 25, height: 25, borderRadius: 100, marginLeft: 10}}>
+                                 <Text>X</Text>
+                             </TouchableOpacity>
+                         </View>
+                 )
+             }) 
+         }
+         </View>
+    }
+ }
 }

package.json

 {
   "name": "react-native-searchable-dropdown",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Searchable Dropdown",
@@ -19,2 +19,5 @@ "main": "index.js",
     "select",
+    "multi selection",
+    "multi list",
+    "multi searchable dropdown",
     "searchable-dropdown",
@@ -21,0 +24,0 @@ "react-native-searchable-dropdown",

readme.md

 [example-url]: https://i.imgur.com/mHGaOX5.gif
+[screenshot-1]: https://i.imgur.com/OrsBmik.png
+[screenshot-2]: https://i.imgur.com/yghQDw0.png
 [npm-badge]: https://img.shields.io/npm/v/react-native-searchable-dropdown.svg?colorB=ff6d00
@@ -10,5 +12,6 @@ [npm-url]: https://npmjs.com/package/react-native-searchable-dropdown
 # React Native Searchable Dropdown
-Searchable Dropdown to help you search with in the list (using `ListView` and `FlatList`), and you can pick single item.
+Searchable Dropdown to help you search with in the list (`FlatList`), and you can pick single item and multiple items.
 
 ![example][example-url]
+![example][screenshot-2]
 
@@ -80,6 +83,14 @@ ## Installation
 	   <td>listProps</td>
+     <td>
+        all supported (FlatList) props example: textInputProps={ underlineColorAndroid: 'transparent' }
+     </td>
 	  <td>
-      all supported (flatlist) props example: listProps={ nestedScrollEnabled: true }
     </td>
+    <tr>
+      <td>textInputProps</td>
+      <td>
+	        all supported (flatlist) props example: listProps={ nestedScrollEnabled: true }
+      </td>
    </tr>
+   </tr>
     <tr>
@@ -90,9 +101,17 @@ <td>setSort</td>
    <tr>
-	   <td>onFocus</td>
-	   <td>same as regular onFocus of TextInput</td>
+	   <td>multi</td>
+	   <td>boolean toggle multi selection</td>
    </tr>
    <tr>
-	   <td>onBlur</td>
-	   <td>same as regular onBlur of TextInput</td>
+	   <td>selectedItems</td>
+	   <td>selectedItems of multi selection note: work when if multi prop is true</td>
    </tr>
+   <tr>
+    <td>chip</td>
+    <td>boolean toggle chip display mode note: work when if multi prop is true</td>
+   </tr>
+   <tr>
+    <td>onRemoveItem</td>
+    <td>{ (item, index) => { } } note: work when if multi prop is true</td>
+   </tr>
 </table>
@@ -102,3 +121,3 @@
 ```jsx
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import SearchableDropdown from 'react-native-searchable-dropdown';
@@ -140,34 +159,116 @@
 ];
-class Example extends Component {
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedItems: [
+        {
+          id: 7,
+          name: 'Go',
+        },
+        {
+          id: 8,
+          name: 'Swift',
+        }
+      ]
+    }
+  }
   render() {
-    return (
-      <SearchableDropdown
-        onTextChange={text => alert(text)}
-        onItemSelect={item => alert(JSON.stringify(item))}
-        containerStyle={{ padding: 5 }}
-        textInputStyle={{
-          padding: 12,
-          borderWidth: 1,
-          borderColor: '#ccc',
-          borderRadius: 5,
-        }}
-        itemStyle={{
-          padding: 10,
-          marginTop: 2,
-          backgroundColor: '#ddd',
-          borderColor: '#bbb',
-          borderWidth: 1,
-          borderRadius: 5,
-        }}
-        itemTextStyle={{ color: '#222' }}
-        itemsContainerStyle={{ maxHeight: 140 }}
-        items={items}
-        defaultIndex={2}
-        placeholder="placeholder"
-        resetValue={false}
-        underlineColorAndroid="transparent"
-      />
-    );
+  return (
+        <Fragment>
+          {/* Multi */}
+          <SearchableDropdown
+            multi={true}
+            selectedItems={this.state.selectedItems}
+            onItemSelect={(item) => {
+              const items = this.state.selectedItems;
+              items.push(item)
+              this.setState({ selectedItems: items });
+            }}
+            containerStyle={{ padding: 5 }}
+            onRemoveItem={(item, index) => {
+              const items = this.state.selectedItems.filter((sitem) => sitem.id !== item.id);
+              this.setState({ selectedItems: items });
+            }}
+            itemStyle={{
+              padding: 10,
+              marginTop: 2,
+              backgroundColor: '#ddd',
+              borderColor: '#bbb',
+              borderWidth: 1,
+              borderRadius: 5,
+            }}
+            itemTextStyle={{ color: '#222' }}
+            itemsContainerStyle={{ maxHeight: 140 }}
+            items={items}
+            defaultIndex={2}
+            chip={true}
+            resetValue={false}
+            textInputProps={
+              {
+                placeholder: "placeholder",
+                underlineColorAndroid: "transparent",
+                style: {
+                    padding: 12,
+                    borderWidth: 1,
+                    borderColor: '#ccc',
+                    borderRadius: 5,
+                },
+                onTextChange: text => alert(text)
+              }
+            }
+            listProps={
+              {
+                nestedScrollEnabled: true,
+              }
+            }
+          />
+          {/* Single */}
+          <SearchableDropdown
+            onItemSelect={(item) => {
+              const items = this.state.selectedItems;
+              items.push(item)
+              this.setState({ selectedItems: items });
+            }}
+            containerStyle={{ padding: 5 }}
+            onRemoveItem={(item, index) => {
+              const items = this.state.selectedItems.filter((sitem) => sitem.id !== item.id);
+              this.setState({ selectedItems: items });
+            }}
+            itemStyle={{
+              padding: 10,
+              marginTop: 2,
+              backgroundColor: '#ddd',
+              borderColor: '#bbb',
+              borderWidth: 1,
+              borderRadius: 5,
+            }}
+            itemTextStyle={{ color: '#222' }}
+            itemsContainerStyle={{ maxHeight: 140 }}
+            items={items}
+            defaultIndex={2}
+            resetValue={false}
+            textInputProps={
+              {
+                placeholder: "placeholder",
+                underlineColorAndroid: "transparent",
+                style: {
+                    padding: 12,
+                    borderWidth: 1,
+                    borderColor: '#ccc',
+                    borderRadius: 5,
+                },
+                onTextChange: text => alert(text)
+              }
+            }
+            listProps={
+              {
+                nestedScrollEnabled: true,
+              }
+            }
+        />
+      </Fragment>
+  );
   }
 }
 ```

No alert changes

Improved metrics

Total package byte prevSize

16250

increased by81.44%

Lines of code

228

increased by71.43%

Number of lines in readme file

270

increased by59.76%

No dependency changes