material-ui-tree v2

A react tree component with material-ui.
See demo page: Material-ui-tree Demo (v2 version)

Using material-ui on 'bit.dev' ?

• If you use material-ui components on bit.dev, you can alse use this material-ui-tree component on the bit. See also @bit/shallinta.material-ui-tree.

npm install @bit/shallinta.material-ui-tree.material-ui-tree --save
npm install @bit/shallinta.material-ui-tree.util --save

• What is bit? Go and see bit.dev.

What's new with v2 version?

• Take full use of material-ui ^4.0.0 version. (Including @material-ui/core^4.0.0, @material-ui/styles^4.0.0 and @material-ui/icons^4.0.0.)
• Take full use of react hooks, which needs react version ^16.8.0.
• Change some props name to make more sense.
• Add some props to adapt to more usage scenarios.
• Use rollup to pack and compress this component.

Migration from material-ui-tree v1.*

• You should first learn about material-ui@4.* which is the strong dependence. See material-ui
• If you use material-ui v3 now, see this to migrate to v4. Material UI v4 migration from v3
• To support the v2 version, you should upgrade your react and react-dom version to at least v16.8.0.
• Changed properties:
  • title: change type "string" to "string | React Node".
  • labelKey: instead of old labelName
  • valueKey: instead of old valueName
  • childrenKey: instead of old childrenName
  • unfoldFirst: instead of old expandFirst
  • unfoldAll: instead of old expandAll
  • pageSize: instead of old childrenCountPerPage
  • loadMoreIcon: new property
  • renderLoadMoreText: new callback function
• Changed callback argument names:
  • path: instead of old chdIndex
  • unfoldStatus: instead of old expand
  • toggleFoldStatus: instead of old doExpand
• Util provided:
  • You can import getNodeDataByPath, { withChildrenKey } from "material-ui-tree/lib/util" which is used to get tree node data with whole tree data and node path and children key.
  • Function signature:
    1. getNodeDataByPath:: (object, array, string) -> object.
    2. withChildrenKey:: string -> (object, array) -> object.

Installation

Available as npm package.

npm install --save material-ui-tree@latest

Ensure to install these packages in your program because material-ui-tree depends on them.

npm install --save
 react
 react-dom
 prop-types
 classnames
 @material-ui/core
 @material-ui/icons
 @material-ui/styles

Usage

See demo page code: (v2)

Options

All options are not required.

Normal properties:

|option name | type | default value | remark | |---|---|---|---| |className|string|''|The className will passed to container Paper component of material-ui.| |labelKey|string|'label'|Label key to show in tree leaf data. If renderLabel option is set, labelKey will be ignored.| |valueKey|string|'value'|Value key in tree leaf data. Used for react children key.| |childrenKey|string|'children'|Children key to render child branch in tree leaf data.| |data|object|{}|Initial tree data.| |title|string or React Node|''|Tree title. If not set, title module will not show.| |unfoldFirst|bool|false|Whether unfold the first branch of the tree in the beginning.| |unfoldAll|bool|false|Whether unfold all branches of the tree in the beginning.| |pageSize|number|20|Children nodes' count in each branch page. When tree node children data is too big, render them by page.| |actionsAlignRight|bool|false|Whether the tree node action buttons aligns to right side. Action buttons will follow behind node label if it's false, or else will be aligned to right side.| |foldIcon|React OptionalElement|<AddCircleOutlineIcon />(@material-ui/icons/AddCircleOutline)|Icon of tree node in fold status. You should pass an react element of icon such as <ArrowDownIcon />(@material-ui/icons/KeyboardArrowDown) when you want to modify the icon.| |unfoldIcon|React OptionalElement|<RemoveCircleOutlineIcon />(@material-ui/icons/RemoveCircleOutline)|Icon of tree node in unfold status. You should pass an react element of icon such as <ArrowUpIcon />(@material-ui/icons/KeyboardArrowUp) when you want to modify the icon.| |loadMoreIcon|React OptionalElement|<MoreVertIcon />(@material-ui/icons/MoreVert).|Icon of "load-more" tree node. You should pass an react element of icon such as <MoreHorizIcon />(@material-ui/icons/MoreHoriz) when you want to modify the icon.|

Callback properties:

• getActionsData: (func) The method to get data to render action buttons, with arguments:

|argument name|type|remark| |---|---|---| |data|object|current node data|
|path|array|node indices from tree root| |unfoldStatus|bool|node unfold status| |toggleFoldStatus|func|callback to unfold current node's child tree|

Should return an array of buttons data including keys: icon, label, hint, onClick, style={}. At least one of label key and icon key are required. If only return one button's data, it's also ok to just return the button data object instead of its array.

• renderLabel: (func) The method to render tree node label, with arguments:

|argument name|type|remark| |---|---|---| |data|object|current node data| |unfoldStatus|bool|current node unfold status|

If this is set, labelKey option will be ignored.

• renderLoadMoreText: (func) The method to render the "load-more" tree node when there are more than one page of children, with arguments:

|argument name|type|remark| |---|---|---| |page|number|current loaded page index.| |pageSize|number|children count of each page.| |total|number|total count of children.|

Should return text or react elements. The following templete will be returned by default:

`Loaded pages: ${(page + 1)} / Page size: ${pageSize} / Total: ${total}. Click here to load more...`

• requestChildrenData: (func) The method to request children data of tree node dynamically, with arguments:

|argument name|type|remark| |---|---|---| |data|object|current node data.| |path|array|node indices from tree root.| |toggleFoldStatus|func|callback to unfold current node's child tree.|

This function will not be called until the current node has no children data.

Recently updated?

Changelog available here

LICENSE

The project is licensed under the terms of MIT license