material-ui-tree

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