mini-tree-react
Simple tree view realization for ReactJS
Table of contents
Getting started
Install
For start using mini-tree-react
you need to install mini-tree-react
package. Enter the command: npm i mini-tree-react --save-dev
.
Base example
;;; const children = content: 'Item-1' children: content: 'Subitem-1-1' content: 'Subitem-1-2' content: 'Item-2' children: content: 'Subitem-2-1' content: 'Subitem-2-2' ;const conf = ; const root = document;ReactDOM;
Tree configuration
Expand and Collapse
You can expand and collapse child tree items by double-clicking.
ExpandModels
contains several commonly used models:
ExpandModels.none
- without expand and collapse;
ExpandModels.single
- only one child can be expand;
ExpandModels.multi
- all children can be expand at the same time;
Also you can define your own model of expand:
const myExpandModel = { expand};const conf = expand: myExpandModel;
Selection and Unselection
You can select and unselect child tree items by mouse click.
SelectModels
contains several commonly used models:
SelectModels.none
- without selection and unselection;
SelectModels.single
- only one child can be select;
SelectModels.multi
- all children can be select at the same time;
Also you can define your own selection model:
const mySelectModel = { select};const conf = select: mySelectModel;
Resolve children
To get tree's children you must use resolve model.
ResolveModels
contains several commonly used models:
ResolveModels.field
- Resolve children by field in tree's configuration;
const conf = resolve: ResolveModels children: /* some children */ child: children: 'children' // You can specify a field name for `ResolveModels.field` ;
ResolveModels.param
- Resolve children by parameter. This model uses by default in defConf
function;
const conf = resolve: ResolveModels;
Also you can define your own model of resolve:
const myResolveModel = { const children = /* some children */; resolve;};const conf = resolve: myResolveModel;
State filter
You can filter the state data before component will render. This can be useful when you want tree elements to be expanded or selected at the initialization stage and etc. Below you can see base example.
const conf = ; conf { return state; }; const root = document; ReactDOM;
type
parameter is a reason of update state, it's define in UpdateStateType
.
Below you can see all options for the type value.
UpdateStateType.TREE_INIT
- Tree component initialization;
UpdateStateType.ITEM_INIT
- Tree item component initialization;
UpdateStateType.TREE_RESOLVED
- Children of the tree resolved;
UpdateStateType.ITEM_RESOLVED
- Children of the tree item resolved;
UpdateStateType.ITEM_EXPANDED
- Tree item expanded;
UpdateStateType.ITEM_SELECTED
- Tree item selected;
data
parameter is data for component rendering.
For tree component data
is the configuration data, for item component data
is the item value.
state
parameter is state after some action, but before filtering. For tree component state
has structure:
children: array
For tree item component state
has structure:
{
selected: true | false,
expanded: true | false,
children: array
}
mini-tree-react
has some of the most commonly used state filters in StateFilters
.
Below you can see these filters.
toggleSelected(state: object, selected: boolean)
- state filter for selection value changing;
const conf = ; conf { if type === UpdateStateTypeITEM_INIT return StateFilters; // all items are selected }; const root = document; ReactDOM;
toggleExpanded(state: object, expanded: boolean)
- state filter for expand value changing;
const conf = ; conf { if type === UpdateStateTypeITEM_INIT return StateFilters; // all items are expanded }; const root = document; ReactDOM;
Global methods
mini-tree-react
has global methods:
defConf(id: string, children: array): object
- default configuration creating;
Standard configuration looks like this:
const manualConf = id: 'my-tree' expand: ExpandModelsmulti select: SelectModelsmulti resolve: state child: id: 'id' content: 'content' ;
If you uses defConf
function then, the above code can be replaced by this code:
const conf = ;
findTree(id: string): object
- tree searching by identifier;
After the tree is found, you can use the tree methods. See methods in the section Tree methods
const tree = ;
Tree methods
Tree has methods:
findChild(selector: string): object
- for child searching by id or treeIndex
.
treeIndex
is specified by the rule: the parent treeIndex
plus the index of the item in the array.
Below you can to see treeIndex
example:
item - 0
item - 00
item - 1
item - 10
item - 100
Although treeIndex
seems like a good option, it's better to use identifiers to search.
After the tree's child is found, you can use the children methods.
See methods in the section Children methods
const tree = ;// Searching by idlet child = tree;// Searching by treeIndexchild = tree;
hasChildren(): boolean
- for children existence checking;
const tree = ;if tree /* some processing */
getChildren(): array
- for to get children;
const tree = ; const selectedChildren = tree ;
Child configuration
Tree's child configuration must contains id
and content
fields.
id
field contains child's identifier, it's can be use for child searching.
content
field contains data for rendering. These fields can be string
or function
type.
Via string
type you can to describe field name into data of child.
Via function
type you can to return any data.
By default uses string
type, where id
value is id and content
value is content.
Example with string
type:
;;; const children = id: 'my-item' content: 'My item' ;const conf = ;confchild = id: 'id' content: 'content'; const root = document;ReactDOM;
Example with function
type:
;;; const children = id: 'my-item' content: 'My item' ;const conf = ;confchild = dataitemid <span> dataitemcontent </span>; const root = document;ReactDOM;
Listeners
The children of the tree have events that you can to listen:
onClick
- for listen to the click event;
onDoubleClick
- for listen to the double click event;
onSelect
- for listen to the selection event;
onUnselect
- for listen to the unselection event;
onExpand
- for listen to expansion event;
onCollapse
- for listen to the collapse event;
These fields can be string
or function
type.
Via string
type you can to describe the function name into data of the child.
Via function
type you can describe the function being called.
Example with string
type:
;;; const children = id: 'my-item' content: 'My item' { /* Some processing */ } { /* Some processing */ } { /* Some processing */ } { /* Some processing */ } { /* Some processing */ } { /* Some processing */ } ;const conf = ;confchild = id: 'id' content: 'content' onClick: 'click' onDoubleClick: 'doubleClick' onSelect: 'select' onUnselect: 'unselect' onExpand: 'expand' onCollapse: 'collapse'; const root = document;ReactDOM;
Example with function
type:
;;; const children = id: 'my-item' content: 'My item' ;const conf = ;confchild = id: 'id' content: 'content' { /* Some processing */ } { /* Some processing */ } { /* Some processing */ } { /* Some processing */ } { /* Some processing */ } { /* Some processing */ }; const root = document;ReactDOM;
Children methods
Children has methods:
toggleSelected(): void
- for select/unselect children;
const tree = ;tree;
toggleExpanded(): void
- for expand/collapse children;
const tree = ;tree;
hasChildren(): boolean
- for children existence checking;
const child = ;if child /* some processing */
getChildren(): array
- for to get children;
const child = ;// All children selectingchild ;
isSelected(): boolean
- for current selection value checking;
const child = ; // To get all selected children const selectedChildren = child ;
isExpanded(): boolean
- for current expansion value checking;
const child = ; // To get all expanded children const selectedChildren = child ;
getData(): object
- for to get child's data;
const child = ; // To get data of child const data = child;
getParent(): object
- for to get parent;
// Expand all let child = ; do child; child = child; while child;
Styling
Below you can see base description of mini-tree-react
styles.
Use this description to simplify styling.
Also you can find this description in file: mini-tree-react.css
,
it is can be load via css-loader
and style-loader
,
more information on css-loader.