Comments (3)
Hi @huiming1313, this is not really in the scope of the library itself but you can do quite a bit by accessing the methods of the library through its ref.
To make this work nicely I've added a searchAdornment
prop (available on the master branch) which takes a function returning the searchTerm
(displayed on the right side of the text input).
You can make that conditionally display your add button.
Here is a basic usage example (this assumes only adding parent items):
handleAddSearchTerm = () => {
// returns the search input text
const searchTerm = this.SectionedMultiSelect._getSearchTerm();
// This will add a parent item
const id = items[items.length - 1].id + 1;
// check that the item doesn't exist
if ( searchTerm.length && !items.some( item => item.title.includes(searchTerm) ) ) {
const newItem = {id: id, title: searchTerm}; // user your uniqueKey / displayKey
this.setState(prevState => {items: [...prevState.items, newItem]});
// this will select the item and add it to the currently selected items
this.onSelectedItemsChange([...this.state.selectedItems, id])
// (optionally) close the modal
this.SectionedMultiSelect._submitSelection()
}
}
searchAdornment = (searchTerm) => {
return(
// only show if text has been input
searchTerm.length ?
<TouchableOpacity
style={{ alignItems: 'center', justifyContent: 'center'}}
onPress={this.handleAddSearchTerm}
>
<View>
<Icon
size={18}
style={{ marginHorizontal: 15 }}
name="add"
/>
</View>
</TouchableOpacity>
:
null
)
}
...
<SectionedMultiSelect
items={this.state.items}
ref={SectionedMultiSelect => this.SectionedMultiSelect = SectionedMultiSelect}
uniqueKey="id"
subKey="children"
displayKey="title"
searchAdornment={(searchTerm) => this.searchAdornment(searchTerm)}
onSelectedItemsChange={this.onSelectedItemsChange}
...
/>
Let me know if this fulfils your needs.
from react-native-sectioned-multi-select.
Hi @renrizzolo
Thanks for the reply, yes indeed this is what i wanted. :)
from react-native-sectioned-multi-select.
@huiming1313 cool, publishing on npm now.
from react-native-sectioned-multi-select.
Related Issues (20)
- can i use this with expo? HOT 3
- Disable the entire control? HOT 2
- Separate parentSelectedItems and subSelectedItems HOT 4
- Styling the Overall Modal?
- onSelectedItemsChange the Model is getting closed HOT 2
- display more level subItem HOT 2
- Disable backdrop HOT 1
- Disabled items getting removed HOT 2
- Expand dropdown function? HOT 4
- How to hide keyboard during search? HOT 3
- Hide the list of options until user enters a search item HOT 2
- How can you limit items selected while still allowing items to be deselected after the maxItems has been reached? HOT 2
- Checkmark is not visible when an item is selected HOT 8
- How is selectedItems supposed to work? HOT 3
- README.md IconRenderer Typo HOT 4
- Request: Styles Image Labeling ? HOT 3
- Add multiple display keys HOT 5
- Cancel Button does NOT Apprear Correctly on iOS HOT 4
- Adding Accessibility Labels HOT 5
- Display the component in a row along with other components HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-sectioned-multi-select.