Tree widget

[xiaohulu]

Similar to

https://ant.design/components/tree/
https://github.com/react-component/tree/

[jellison]

@xiaohulu We should decide on some requirements. Any one thing in particular that would be a deal-breaker if it were missing?

Features

Required

• expand/collapse
• checkable/selectable
• dynamic loading (with resources)
• disable-able
• customizable icon

Nice to have

• partial selection (requires tri-state checkbox widget)
  

Examples

• Ant Design
• Angular Material
• React Material

Themes

Material

Dojo

API

export interface TreeNode {
    title: string | RenderResult;
    icon?: IconType;
    children?: TreeNode[] | boolean;    // child nodes or `true` to indicate children should be loaded dynamically; `[]`, `undefined`, and `false` indicates leaf node 
    expanded?: boolean;    // node is initially expanded
    disabled?: boolean;    // disables this node when tree allows selection
}

export interface TreeProperties {
    nodes: TreeNode[];
    allowSelection?: 'single' | 'multiple';
    onLoad?(node: TreeNode): TreeNode[];    // dynamically load node children
    onExpand?(node: TreeNode): void;
    onCollapse?(node: TreeNode): void;
    onSelect?(node: TreeNode): void;
}

Simple example usage

<Tree nodes={nodes} onLoad={loadChildren} />

Upcoming Widget Variations

• Tree Input widget Tree input widget #1455
• Tree Select widget Tree select widget #1213

[xiaohulu]

I'm not very sure. edit node (with resources?) maybe not part of tree feature, because of data driven.

• add a node
• remove a node and it's children
• move node
• update a node info

[jellison]

That's all good stuff. I may recommend we move all the editing to a separate widget?

[xiaohulu]

Maybe not.

[tomdye]

As discussed on a call / screenshare:

I think that for this POC we need to work on getting the tree to have an api similar the list and to accept a flat array of data (from a resource) to display the tree contents.

It would be beneficial if the tree could re-use the listItem / menuItem from the List widget as this would provide consistent styling / functionality .

We should support keyboard navigation.

Any content customisation should be provided via a child renderer, not via a property.

Data display concerns such as expanded / disabled should be moved outside of the data passed as they will not be a concern of the resource that provides the data. Should consider callbacks / expanded: string[] property containing id's or similar.

onExpand / collapse etc callbacks should probably return an id, not the entire item object.

[tomdye]

In addition to the above notes, we should ensure

• the tree widget works correctly with a remote resource.
• the tree handles pagination as a resource may contain many results

An working example of a tree using a remote resource and fetching children via a query can be seen here: https://codesandbox.io/s/elegant-cartwright-sd0o0

[tomdye]

From screenshare with @samends

• Should a click / select also check a checkable tree list item
• Should we add a property to disable parentSelection ?
• How do we differentiate between expand and select?