Provide a way to select an item from a nested list, each level being dynamically loaded.
Props
items
: a list of current items to make the selection from. Each item must have the following properties:- title: string to display for the item
- id: a unique identifier for the item
- leaf: true to signify that the item is a terminal selection - when it is selected the selection panel will close
selection
: an array of currently selected items (the different selected level). For example if Parent and Child have been selected, this will have an array of[parent, child]
and theitems
property will be set to the list of grandchildrenselectItem
: a function that will be invoked when the user selects an item. If the item selection is valid, this should append it to the selection array and load the child items (if the item is not a leaf)unselectItem
: remove the last selected item from the selection and reload the list of items for the parentsetSelectionLength
: reset selection length to an arbitrary length (this is used when clicking on the breadcrumbs in the header)loadingItems
: a boolean to signify that theitems
list is currently loadingloadingComponent
: a React component to be rendered in the panel when the items are loadingonSearchChanged
: if specified, will be called when the search text is edited
Development
- In the main directory, run:
npm install
npm link
npm start
- this will run rollup with watch flag, so it rebuilds automatically
- Go in the example directory, run:
npm install
npm link nested-dropdown
npm start
- this will run CRA, so it updates with changes
The component structure is based on react-modern-library-boilerplate
Example
See also the example app to view an example of how the component could be used in your own app. This can be run after you clone the repository by running npm start
const sampleItems = sampleData()
const Spinner = () => <span>Please wait...</span>
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
selection: [],
items: [],
loadingItems: false
}
this.selectItem = this.selectItem.bind(this)
}
selectItem(item) {
this.setState({
selection: this.state.selection.concat([item])
})
if(!item.leaf)
this.loadItems()
//else
// something to send the selection to the parent component?
}
unselectItem() {
this.setState({
selection: this.state.selection.slice(0, this.state.selection.length - 1)
})
this.loadItems()
}
componentDidMount() {
this.loadItems()
}
loadItems() {
// ... something to load the items
}
render() {
return <NestedDropdown items={this.state.items}
loadingItems={this.state.loadingItems}
loadingComponent={Spinner}
selectItem={this.selectItem}
unselectItem={this.unselectItem}
selection={this.state.selection} />
}
}