Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-searchable-dropdown
Advanced tools
react-native-searchable-dropdown - npm Package Compare versions
Comparing version 1.0.8 to 1.0.9
@@ -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 |
183
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> | ||
| } | ||
| } | ||
| } |
| { | ||
| "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", |
173
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> | ||
| ); | ||
| } | ||
| } | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by81.44%
16250
- Lines of code
- increased by71.43%
228
- Number of lines in readme file
- increased by59.76%
270
No dependency changes