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 the items property will be set to the list of grandchildren
• selectItem: 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 parent
• setSelectionLength: reset selection length to an arbitrary length (this is used when clicking on the breadcrumbs in the header)
• loadingItems: a boolean to signify that the items list is currently loading
• loadingComponent: a React component to be rendered in the panel when the items are loading
• onSearchChanged: 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} />
  }
}