Node Permanently Moved

    material-ui-tree
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.4 • Public • Published

    material-ui-tree v2

    npm package npm download github license github issues open github issues closed github language top github stars

    NPM

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

    Using material-ui on 'bit.dev' ?

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

    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)

    Edit material-ui-tree v2 demo

    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

    Install

    npm i material-ui-tree

    DownloadsWeekly Downloads

    126

    Version

    2.2.4

    License

    MIT

    Unpacked Size

    30 kB

    Total Files

    9

    Last publish

    Collaborators

    • johnch