Is lazy loading possible?

[kulshekhar]

There are two somewhat related parts to this question:

• Is it possible to lazily load child nodes when the parent (or some ancestor) is expanded?
• Is it possible to use a remote service to fetch search results instead of using only the locally available data?

Nice work on this component btw. It seems very useful. 👍

[mrchief]

Its not something the component supports natively but its doable with an HOC (Higer Order Component).

It'd be something like:

class HOC extends Component {
  ...
  onNodeToggle = ({id, expanded}) => {  // assumes that initial data has an unique id property for each node
    if(!expanded) {  // you can do more like check if data is already fetched then skip this
      // fetch remote data
      this.setState({ data: merge(data, remoteChildNodeData) }) 
    }
  }

  render() {
    const { data } = this.state
    return (
      <DropdownTreeSelect data={data} onNodeToggle={onNodeToggle} />
    )
  }
}

I understand this may not be perfect but its a start. If you want the component to support this natively, then we need a bigger discussion.

[kulshekhar]

@mrchief thanks. This seems like a viable option :)

[bimix]

Its not something the component supports natively but its doable with an HOC (Higer Order Component).

It'd be something like:

class HOC extends Component {
  ...
  onNodeToggle = ({id, expanded}) => {  // assumes that initial data has an unique id property for each node
    if(!expanded) {  // you can do more like check if data is already fetched then skip this
      // fetch remote data
      this.setState({ data: merge(data, remoteChildNodeData) }) 
    }
  }

  render() {
    const { data } = this.state
    return (
      <DropdownTreeSelect data={data} onNodeToggle={onNodeToggle} />
    )
  }
}

I understand this may not be perfect but its a start. If you want the component to support this natively, then we need a bigger discussion.

once the state is updated the dropdown will be refreshed and all nodes will collapse.