react-tree-component

Description

React Tree Component for showing simple hiearchy structures on the UI. Component is based on rc-tree (https://github.com/react-component/tree) component.

Installation

npm install @opuscapita/react-tree-component

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

• With webpack use resolve.mainFields to configure the module type.
• Add SASS loader to support importing of SASS styles.

API

| Prop name | Type | Default | Description | | ------------------------ | ---------------- | ---------------------------------------- | ---------------------------------------- | | treeId | string | defaultTree | Tree identifier | | className | string | '' | Tree container custom class for styling | | iconClass | string | 'carets' | FontAwesome content based indicators: | | | | chevron | nodes as chevrons | | | | carets | nodes as carets | | | | arrow | nodes as arrows | | defaultExpandedKeys | Array | [] | Array of item ids to expand by default | | defaultSelectedKeys | Array | [] | Array of item ids selected by default | | defaultCheckedKeys | Array | [] | Array of item ids checked by default | | onExpand | Function | () => {} | Handling the node expand. Takes 'expandedKeys' as parameter jsx onExpand(expKeys) { console.log(expKeys, arguments); } | | onSelect | Function | () => {} | Handling the item select. Takes 'selectedKeys' and 'info' (event object to get node)as parameter jsx onSelect(selKeys, info) { console.log(selKeys, info); } | | onCheck | Function | () => {} | Handling the item checked | | onDragDrop | Function | () => {} | Fires when item is dragged and dropped | | isDragDropLegal | Function | undefined | This callback is executed before completing drag n' drop action. Function should return a bool |

| | | | Takes 'checkedKeys' and info' (event object to get node) as parameter jsx onCheck (chkKeys, info) { console.log(chkKeys, info); } | | showLine | Boolean | false | Whether show or hide node guide lines | | showIcon | Boolean | false | Whether show or hide node guide lines | | checkable | Boolean | false | Whether show or hide checkboxes from tree| | selectable | Boolean | false | Whether item can be selected. | | disabled | Boolean | false | Disables all node items checkboxes. | | draggable | Boolean | false | Whether item can be dragged around. | | defaultExpandAll | Boolean | false | Expand all nodes by default. | | | | | Note! For better performance do not | | | | | enable this for large dataSets. | | treeData | Array | [] | Array of node objects. | | dataLookUpKey | String | 'key' | Unique identifier of data item. | | dataLookUpValue | String | 'parent' | Representative value of data item. | | dataLookUpChildren | String | 'children' | Data item property to identifiy subitems | | selectedKeys | Array | [] | Array of selected item (ids) |

Code example

import React from 'react';
import { OCTreeView } from '@opuscapita/react-tree-component';   

export default class TreeView extends React.Component {
  const familyData = [
    {
      personId: '100',
      name: 'John Doe',
      siblings: [
        { personId: '100100', name: 'Martha Doe', siblings: [] },
        { personId: '100200', name: 'Jonathan Doe', siblings: [ { personId: '100200100', name: 'Mike Doe', siblings: [] }] },
      ], 
    },
    {
      personId: '200',
      name: 'Haley Miley',
      siblings: [
        { personId: '200100', name: 'Cyrus Miley', siblings: [] },
      ],
    },
  ]; 
  const treeConfig = {
    treeData: exampleData,
    treeId: 'FamilyTree',
    checkable: true,
    selectable: false,
    defaultExpandAll: false,
    showLine: true,
    showIcon: false,
    dataLookUpKey: 'personId',
    dataLookUpValue: 'name',
    dataLookUpChildren: 'siblings',
    disableCheckbox: true,
  };
  render() {
    return (
      <OCTreeView {...treeConfig} />
    );
  }
}