Draggable
When drag, show a placeholder to help user.
He Tree React
React draggable sortable tree component
404
But if you don't change your direction, and if you keep looking, you may end up where you are heading.
The exported variables, methods, and Typescript types.
useHeTree: Main React hook. This library does not export components, you need to use the renderTree render tree returned by this function.walkTreeData, walkTreeDataGenerator, findTreeData, filterTreeData, openParentsInTreeData, updateCheckedInTreeData: Methods for processing and traversing tree data.sortFlatData, walkFlatData, walkFlatDataGenerator, convertIndexToTreeIndexInFlatData, addToFlatData, removeByIdInFlatData, openParentsInFlatData, updateCheckedInFlatData: Methods for processing and traversing flat data.walkParentsGenerator: To iterate over another special kind of data. This data is like HTMLElement, which contains a key pointing to the parent node like parentElement.defaultProps: The default value of useHeTree options.Typescript types:
Id: node id, parent id. Type: string | number.Stat: Node information.HeTreeProps: Options for useHeTree.import { useHeTree } from "he-tree-react";
+const {/* return */} = useHeTree({/* options */}) // prettier-ignoreThe main function of this library. React hook. The arguments are as follows:
options: Options, type is object. The following are some properties in options:
| Name | Type | Default | Description |
|---|---|---|---|
| data | Array | Data. Check Data Types. | |
| dataType | 'flat', 'tree' | 'flat' | Data Types |
| idKey | string | 'id' | key of id 名. |
| parentIdKey | string | 'parent_id' | key of the parent id. For flat data only. |
| childrenKey | string | 'children' | key of children nodes. For tree data only. |
| indent | number | 20 | Node indentation, unit is px. |
| dragOpen | boolean | false | Whether to enable the function "Open node when dragging over node". |
| dragOpenDelay | number | 600 | The waiting time to open the node when dragging over the node. The unit is milliseconds. |
| onDragOpen | function(stat): void | The callback of "Open node when dragging over node". | |
| direction | 'lrt', 'rtl' | 'ltr' | Display direction, ltr is displayed from left to right, rtl is the opposite. |
| rootId | string, null | null | The parent id of a node that has not parent in flat data. |
| virtual | boolean | false | Whether to enable virtualization. Used to improve performance when there is a lot of data. |
| keepPlaceholder | boolean | false | Whether to retain placeholder when dragging out of the tree. It is recommended to enable this only on one tree page. |
| openIds | Array | All open nodes' id. | |
| checkedIds | Array | All checked nodes' id. | |
| isFunctionReactive | boolean | false | Whether to listen for change of the callback functions. Reference |
The remaining callback functions in options:
| Name | Type | Description |
|---|---|---|
| renderNode | (stat)=> ReactNode | Node render. |
| renderNodeBox | ({stat, attrs, isPlaceholder})=> ReactNode | nodeBox's render. Reference. |
| onChange | (newData)=>void | Callback on data change |
| canDrag | (stat)=>boolean, null, undefined, void | Whether a node draggable. Returning null, undefined, void means inheriting the parent node. |
| canDrop | (stat, index)=>boolean, null, undefined, void | Whether a node droppable. Returning null, undefined, void means inheriting the parent node. The parameter index may be empty. If it is not empty, it indicates the position. |
| customDragImage | (event, stat)=> void | Called event.dataTransfer.setDragImage to custom drag image. Reference. |
| onDragStart | (event, stat)=> void | |
| onExternalDragOver | (event)=>boolean | Called when drag from external. Must return a Boolean value to indicate whether to handle this drag. |
| onDragOver | (event, stat, isExternal)=> void | isExternal indicates whether the drag is from outside. |
| onDragEnd | (event, stat, isOutside)=>void | Called on dragend and this drag is started in this tree. stat is the stat of the dragged node. isOutside indicates whether it ended outside the tree. |
| onExternalDrop | (event, parentStat, index)=>void | Called when the external drag ends on this tree. parentStat is the stat of the target parent node, and when it is empty, it represents the root of the tree. Index is the target position, the index of the node among siblings. |
useHeTree The return of useHeTree is an object, including some states and methods. Note, this object will change every time. Do not rely on this object, but you can rely on the properties of this object. The properties are as follows:
| Name | Type | Description |
|---|---|---|
| renderTree | (options?: { className?: string, style?: React.CSSProperties }): ReactNode | Tree render. Options can be passed in className and style to control the style of the root element. |
| getStat | (idOrNodeOrStat)=>stat | Get stat by id, or node data, or stat object. |
| allIds | Array | The ids of all nodes. |
| rootIds | Array | The ids of all root nodes |
| rootNodes | Array | All root nodes. In tree data, it is same with options.data. |
| rootStats | Array | All root nodes' stat. |
| placeholder | {parentStat, index, level} | Drag placeholder info. Null if it does not exist. |
| draggingStat | stat | When a drag is initiated from this tree, the stat of the dragged node. Null if it does not exist. |
| dragOverStat | stat | Dragging over node's stat. May be null. |
| visibleIds | Array | All visible nodes' id. |
| attrsList | Array | All visible nodes' attrs. |
| virtualListRef | ref | ref of virtual list component, Check virtual list. |
| scrollToNode | (idOrNodeOrStat)=>boolean | Scroll to node. The argument can be id, node or stat. If node not found or invisible, it return false. Example |
The method of traversing tree data through for of. Executing skipChildren() in the loop will skip all child nodes of the node, and executing exitWalk will end the traversal.
for (const [
+ node,
+ { parent, parents, siblings, index, skipChildren, exitWalk },
+] of walkTreeDataGenerator(data, "children")) {
+ // ...
+}The method to traverse tree data through the callback method. Executing skipChildren() in the callback method will skip all child nodes of the node, and executing exitWalk will end the traversal.
walkTreeDataGenerator(
+ data,
+ (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
+ // ...
+ },
+ "children"
+);Like Array.prototype.find. Returns the first node found. Executing skipChildren() in the callback method will skip all child nodes of the node, and executing exitWalk will end the traversal.
let foundNode = findTreeData(
+ data,
+ (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
+ // return node.id === 1;
+ },
+ "children"
+);Like Array.prototype.filter. Returns all nodes found. Executing skipChildren() in the callback method will skip all child nodes of the node, and executing exitWalk will end the traversal.
let nodes = filterTreeData(
+ data,
+ (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
+ // return node.id > 1;
+ },
+ "children"
+);Open all parent nodes of a single or multiple nodes to make the node visible. Reference.
(
+ treeData,
+ openIds: Id[],
+ idOrIds: Id | Id[],
+ options?: {idKey: string, childrenKey: string}
+): newOpenIdsUpdate the checked status of a single node or multiple nodes. This will update both their children and parents. Reference.
(
+ treeData,
+ checkedIds: Id[],
+ idOrIds: Id | Id[],
+ checked: boolean,
+ options?: {idKey: string, childrenKey: string}
+): [newCheckedIds, newSemiCheckedIds]Sort the flat data according to the order of the nodes in the tree. Return the new sorted array. Your data should use it to ensure order after initialized.
(
+ flatData,
+ options?: {idKey: string, parentIdKey: string}
+): sortedDataThe method of traversing flat data through for of. Executing skipChildren() in the loop will skip all the child nodes of the node, and executing exitWalk will end the traversal. Make sure the order of your data is correct before using it.
Compared to walkTreeDataGenerator, it lacks siblings, but has treeIndex, id, pid. treeIndex is the index of the node in the tree.
for (const [
+ node,
+ { parent, parents, index, treeIndex, id, pid, skipChildren, exitWalk },
+] of walkFlatDataGenerator(flatData, {
+ idKey: "id",
+ parentIdKey: "parent_id",
+})) {
+ // ...
+}The method of traversing flat data through the callback method. Executing skipChildren() in the callback method will skip all child nodes of the node, and executing exitWalk will end the traversal. Before using, make sure that the order of your data is correct.
walkFlatData(
+ flatData,
+ (
+ node,
+ { parent, parents, index, treeIndex, id, pid, skipChildren, exitWalk }
+ ) => {
+ // ...
+ },
+ {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+);Open all parent nodes of a single or multiple nodes to make the node visible. Make sure your data is in the correct order before using it. Reference.
(
+ flatData,
+ openIds: Id[],
+ idOrIds: Id | Id[],
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): newOpenIdsUpdate the checked status of a single node or multiple nodes. This will update both their children and parents. Make sure your data is in the correct order before using it. Reference.
(
+ flatData,
+ checkedIds: Id[],
+ idOrIds: Id | Id[],
+ checked: boolean,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): [newCheckedIds, newSemiCheckedIds]Calculate the index of a node in the tree through its parent node id and its index in the sibling nodes.
(
+ flatData,
+ parentId: Id | null,
+ indexInSiblings: Id | null,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): treeIndexAdd a node to the flat data. It will change the original data array. Therefore, it is recommended to pass in a copy of the original data, or use it together with useImmer. Reference
(
+ flatData,
+ newNode,
+ index: Id | null,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+):voidRemove node by id from the flat data. It will change the original data array. Therefore, it is recommended to pass in a copy of the original data, or use it together with useImmer. Reference
(
+ flatData,
+ removeId: Id | null,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): removedDataA method to iterate over another special kind of data. This data is like HTMLElement, which contains keys pointing to the parent node like parentElement.
(
+ node,
+ parentKeyOrGetter: string | ((node) => parent | undefined),
+ options?: {
+ withSelf: boolean;
+ }
+): GeneratorparentKeyOrGetter can be a string or a method that returns the parent. options.withSelf indicates whether to include the node self. Returns Generator. Here is an example of traversing HTMLElement:
let el = document.querySelector("div");
+for (const parent of walkParentsGenerator(el, "parentElement", {
+ withSelf: true,
+})) {
+ // ...
+}stat contains information related to the node. Read-only. The properties are as follows:
| Name | Type | Description |
|---|---|---|
| _isStat | boolean | Indicates whether it is a stat object |
| node | object | node data |
| id | Id | id |
| pid | Id, null | parent id |
| parent | object, null | parent data |
| parentStat | stat, null | parent stat |
| childIds | Id[] | |
| children | object[] | |
| childStats | stat[] | stats of children |
| siblingIds | Id[] | |
| siblings | object[] | sibling nodes |
| siblingStats | stat[] | stats of siblings |
| index | number | node's index in siblings |
| level | number | node's depth in tree. Start from 1 |
| open | boolean | |
| checked | boolean | |
| draggable | boolean |
Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ const [data, setdata] = useState(() => sortFlatData([
+ {
+ id: 1,
+ parent_id: null,
+ name: "Root Category",
+ },
+ {
+ id: 2,
+ parent_id: 1,
+ name: "Technology",
+ },
+ {
+ id: 5,
+ parent_id: 2,
+ name: "Hardware",
+ },
+ {
+ id: 10,
+ parent_id: 5,
+ name: "Computer Components",
+ },
+ {
+ id: 4,
+ parent_id: 2,
+ name: "Programming",
+ },
+ {
+ id: 8,
+ parent_id: 4,
+ name: "Python",
+ },
+ {
+ id: 3,
+ parent_id: 1,
+ name: "Science",
+ },
+ {
+ id: 7,
+ parent_id: 3,
+ name: "Biology",
+ },
+ {
+ id: 6,
+ parent_id: 3,
+ name: "Physics",
+ },
+ ], keys));
+ const { renderTree, placeholder } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key} className="my-node-box">
+ {isPlaceholder ? <div className="my-placeholder">DROP HERE</div>
+ : <div className="my-node">
+ <span className="drag-handler" draggable={stat.draggable}>{dragIcon()}</span>
+ {stat.node.name}
+ </div>
+ }
+ </div>
+ ),
+ })
+ return <>
+ <h3 style={{ margin: '0 0 0 110px', padding: '20px 0 0px' }}>Draggable Tree</h3>
+ <div>
+ {renderTree({ className: \`my-tree \${placeholder ? 'dragging' : 'no-dragging'}\` })}
+ </div>
+ <style>{\`
+ .my-tree{
+ width: 300px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ margin: 20px;
+ padding: 20px;
+ }
+ .my-placeholder{
+ height:40px;
+ border: 1px dashed blue;
+ border-radius: 3px;
+ background-color: #f3ffff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: small;
+ }
+ /*.no-dragging .my-node-box:hover{
+ background-color: #eee;
+ }*/
+ .my-node-box:not(:last-child){
+ margin-bottom: 10px;
+ }
+ .my-node{
+ padding: 5px 10px;
+ padding-left: 30px;
+ border: 1px solid #e2e2e2;
+ border-radius: 3px;
+ background-color: #f0f0f0;
+ display: flex;
+ align-items: center;
+ position: relative;
+ box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 19%);
+ }
+ .no-dragging .my-node:hover{
+ background-color: #ebfeff;
+ }
+ .drag-handler{
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 30px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: grab;
+ }
+ .drag-handler:hover{
+ background-color: #f0f0f0;
+ }
+ .my-node svg{
+ width:16px;
+ }
+ \`}</style>
+ </>
+}
+
+function dragIcon() {
+ return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>drag-horizontal-variant</title><path d="M21 11H3V9H21V11M21 13H3V15H21V13Z" /></svg>
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ const [data, setdata] = useState(() => sortFlatData([
+ {
+ id: 1,
+ parent_id: null,
+ name: "Root Category",
+ },
+ {
+ id: 2,
+ parent_id: 1,
+ name: "Technology",
+ },
+ {
+ id: 5,
+ parent_id: 2,
+ name: "Hardware",
+ },
+ {
+ id: 10,
+ parent_id: 5,
+ name: "Computer Components",
+ },
+ {
+ id: 4,
+ parent_id: 2,
+ name: "Programming",
+ },
+ {
+ id: 8,
+ parent_id: 4,
+ name: "Python",
+ },
+ {
+ id: 3,
+ parent_id: 1,
+ name: "Science",
+ },
+ {
+ id: 7,
+ parent_id: 3,
+ name: "Biology",
+ },
+ {
+ id: 6,
+ parent_id: 3,
+ name: "Physics",
+ },
+ ], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const [data, setdata] = useState(() => [
+ {
+ id: 1,
+ name: "Root Category",
+ children: [
+ {
+ id: 2,
+ name: "Technology",
+ children: [
+ {
+ id: 5,
+ name: "Hardware",
+ children: [
+ {
+ id: 10,
+ name: "Computer Components",
+ children: [],
+ },
+ ],
+ },
+ {
+ id: 4,
+ name: "Programming",
+ children: [
+ {
+ id: 8,
+ name: "Python",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ id: 3,
+ name: "Science",
+ children: [
+ {
+ id: 7,
+ name: "Biology",
+ children: [],
+ },
+ {
+ id: 6,
+ name: "Physics",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ ]);
+ const { renderTree } = useHeTree({
+ data,
+ dataType: 'tree',
+ childrenKey: 'children',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button draggable={draggable}>Drag</button>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key}>
+ {isPlaceholder ? <div className="my-drag-placeholder">drop here</div>
+ : <div className="mynode">{stat.node.name}</div>
+ }
+ </div>
+ ),
+ })
+ return <div>
+ {renderTree({ className: 'mytree', style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ <style>{\`
+ .mytree [data-node-box]{
+ padding: 5px 0;
+ }
+ .mytree [data-node-box]:hover{
+ background-color: #eee;
+ }
+ .mytree .he-tree-drag-placeholder{
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ border: 1px dashed red;
+ }
+ .mynode{
+ padding-left:5px;
+ }
+ \`}</style>
+ </div>
+}Source
import { useHeTree, sortFlatData, openParentsInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setopenIds(allIds)}>Open All</button>
+ <button onClick={() => setopenIds([])}>Close All</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, openIds || allIds, 8, keys))}>Open 'Python'</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, [], 8, keys))}>Only Open 'Python'</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData, updateCheckedInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [checkedIds, setcheckedIds] = useState<Id[]>([]);
+ const [semiCheckedIds, setsemiCheckedIds] = useState<Id[]>([]);
+ const handleChecked = (id: Id, checked: boolean) => {
+ const r = updateCheckedInFlatData(data, checkedIds, id, checked, keys);
+ setcheckedIds(r[0]);
+ setsemiCheckedIds(r[1]);
+ }
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ checkedIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <input type="checkbox" checked={checked || false} onChange={() => handleChecked(id, !checked)} />
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ Checked: {JSON.stringify(checkedIds)} <br />
+ Semi-Checked: {JSON.stringify(semiCheckedIds)}
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ canDrag: ({ id }) => id === 2 ? true : (id === 3 ? false : undefined),
+ canDrop: ({ id }) => id === 3 ? true : (id === 2 ? false : undefined),
+ canDropToRoot: (index) => false,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([1, 3]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ dragOpen: true,
+ onDragOpen(stat) {
+ handleOpen(stat.id, true)
+ },
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef, useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ let newData = [...data];
+ addToFlatData(newData, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ setdata(newData);
+ }
+ const remove = (id: Id) => {
+ let newData = [...data];
+ removeByIdInFlatData(newData, id as number, keys)
+ setdata(newData);
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ addToFlatData(draft, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ });
+ }
+ const remove = (id: Id) => {
+ setdata(draft => {
+ removeByIdInFlatData(draft, id as number, keys)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ draft.find(node => node.id === id)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, findTreeData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const CHILDREN = 'children'
+ const keys = { idKey: 'id', childrenKey: CHILDREN };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => [{ id: 1, name: "Root Category", children: [{ id: 2, name: "Technology", children: [{ id: 5, name: "Hardware", children: [{ id: 10, name: "Computer Components", children: [], },], }, { id: 4, name: "Programming", children: [{ id: 8, name: "Python", children: [], },], },], }, { id: 3, name: "Science", children: [{ id: 7, name: "Biology", children: [], }, { id: 6, name: "Physics", children: [], },], },], },]);
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ findTreeData(draft, (node) => node.id === pid, CHILDREN)![CHILDREN].unshift({ id, name: "New", [CHILDREN]: [], })
+ })
+ }
+ const remove = (id: Id, pid: Id | null) => {
+ setdata(draft => {
+ const children = findTreeData(draft, (node,) => node.id === pid, CHILDREN)![CHILDREN]
+ children.splice(children.findIndex(t => t.id === id), 1)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ findTreeData(draft, (node) => node.id === id, CHILDREN)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'tree',
+ onChange: setdata,
+ renderNode: ({ id, pid, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id, pid)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData, addToFlatData } from "he-tree-react";
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ onExternalDragOver: (e) => true,
+ onExternalDrop: (e, parentStat, index) => {
+ setdata(draft => {
+ const newNode = { id: 100 + data.length, parent_id: parentStat?.id ?? null, name: "New Node" }
+ addToFlatData(draft, newNode, index, keys)
+ })
+ },
+ })
+ return <div>
+ <button draggable={true}>Drag me in to the tree</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'pid' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ virtual: true,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {id}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}
+
+// generate 10000 nodes
+function createData() {
+ const genId = () => result.length
+ const result: { id: number, pid: number | null }[] = [];
+ for (let i = 0; i < 1000; i++) {
+ let id1 = genId()
+ result.push({ id: id1, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id1 })
+ }
+ let id2 = genId()
+ result.push({ id: id2, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id2 })
+ }
+ }
+ return result;
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'pid' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds, scrollToNode } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ virtual: true,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {id}
+ </div>,
+ })
+ return <div>
+ <button onClick={() => scrollToNode(910)}>Scroll to 910</button>
+ {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}
+
+// generate 10000 nodes
+function createData() {
+ const genId = () => result.length
+ const result: { id: number, pid: number | null }[] = [];
+ for (let i = 0; i < 1000; i++) {
+ let id1 = genId()
+ result.push({ id: id1, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id1 })
+ }
+ let id2 = genId()
+ result.push({ id: id2, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id2 })
+ }
+ }
+ return result;
+}npm install he-tree-reactpnpm add he-tree-reactyarn add he-tree-reactThis library supports two types of data structures:
null means there is no parent. The order of flat data must be the same as the tree, you can use the sortFlatData method to sort the data when initializing the data.[
+ { id: 1, pid: null },
+ { id: 2, pid: 1 },
+ { id: 3, pid: 2 },
+];dataType: 'tree'.[
+ {
+ id: 1,
+ children: [
+ {
+ id: 2,
+ children: [{ id: 3 }],
+ },
+ ],
+ },
+];The id, pid, children in the data are not fixed. In the options, use idKey, parentIdKey, childrenKey to indicate the corresponding key names in your data.
This library does not export components, but exports a hook useHeTree. Use the returned renderTree to render the tree. The advantage of this is that in addition to renderTree, useHeTree will also return some internal states and methods, which can be easily obtained.
import { useHeTree } from "he-tree-react";
+
+export default function App() {
+ const { renderTree } = useHeTree({...})
+ return <div>
+ {renderTree()}
+ </div>
+}useHeTree is the primary function used, its first parameter is an options object. The required options are data, and at least one of renderNode, renderNodeBox must be present. Other important options include:
dataType, indicating data type. Available values: flat, default. Flat data.tree, tree-shaped data.idKey, parentIdKey, the default values are id and parent_id. Needed when using flat data. Although there are default values, it is better to explicitly state them.childrenKey, the default is children. Needed when using tree-shaped data. Although there are default values, it is better to explicitly state them.onChange, a function called when data changes, the parameter is new data. If your tree will not change then this is not required.isFunctionReactive, boolean. Default false. useHeTree options include many callback functions, such as onChange, canDrop. isFunctionReactive can be used to control whether to listen for changes to these callback functions. If your callback functions and data change synchronously, you do not need to enable this. Otherwise, you need to enable this and use React's useCallback or useMemo to cache all your callback functions to avoid performance issues.See the useHeTree API documentation for more information.
stat, information related to a single node. Most of the parameters in callback functions have stat. Refer to Stat API.node, the data of the node. You can get node data through stat.node.getStat, through this function you can get stat, the only parameter can be id, node, stat. This function is in the return object of useHeTree: const {getStat} = useHeTree({...}).tsx format, if you need the js format, you can use any ts js online converter.import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ const [data, setdata] = useState(() => sortFlatData([
+ {
+ id: 1,
+ parent_id: null,
+ name: "Root Category",
+ },
+ {
+ id: 2,
+ parent_id: 1,
+ name: "Technology",
+ },
+ {
+ id: 5,
+ parent_id: 2,
+ name: "Hardware",
+ },
+ {
+ id: 10,
+ parent_id: 5,
+ name: "Computer Components",
+ },
+ {
+ id: 4,
+ parent_id: 2,
+ name: "Programming",
+ },
+ {
+ id: 8,
+ parent_id: 4,
+ name: "Python",
+ },
+ {
+ id: 3,
+ parent_id: 1,
+ name: "Science",
+ },
+ {
+ id: 7,
+ parent_id: 3,
+ name: "Biology",
+ },
+ {
+ id: 6,
+ parent_id: 3,
+ name: "Physics",
+ },
+ ], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}import { useHeTree } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const [data, setdata] = useState(() => [
+ {
+ id: 1,
+ name: "Root Category",
+ children: [
+ {
+ id: 2,
+ name: "Technology",
+ children: [
+ {
+ id: 5,
+ name: "Hardware",
+ children: [
+ {
+ id: 10,
+ name: "Computer Components",
+ children: [],
+ },
+ ],
+ },
+ {
+ id: 4,
+ name: "Programming",
+ children: [
+ {
+ id: 8,
+ name: "Python",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ id: 3,
+ name: "Science",
+ children: [
+ {
+ id: 7,
+ name: "Biology",
+ children: [],
+ },
+ {
+ id: 6,
+ name: "Physics",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ ]);
+ const { renderTree } = useHeTree({
+ data,
+ dataType: 'tree',
+ childrenKey: 'children',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}You can add the draggable attribute to any child element of the node.
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button draggable={draggable}>Drag</button>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Node HTML:
<div
+ draggable="true"
+ data-key="1"
+ data-level="1"
+ data-node-box="true"
+ style="padding-left: 0px;"
+>
+ <div>Node</div>
+</div>There are two div above. Use the renderNode option to control the rendering of the inner div. For example: renderNode: ({node}) => <div>{node.name}</div>.
The outer div is called nodeBox, don't modify its padding-left, padding-right. Use the indent option to control the indentation of the node. If you want to control the rendering of nodeBox or the drag placeholder, you can use the renderNodeBox option, which will override renderNode. The standard renderNodeBox is as follows:
renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key}>
+ {isPlaceholder ? (
+ <div
+ className="he-tree-drag-placeholder"
+ style={{ minHeight: "20px", border: "1px dashed blue" }}
+ />
+ ) : (
+ <div>{/* node area */}</div>
+ )}
+ </div>
+);Lines 4 to 7 are drag-and-drop placeholder. Line 9 is node.
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key}>
+ {isPlaceholder ? <div className="my-drag-placeholder">drop here</div>
+ : <div className="mynode">{stat.node.name}</div>
+ }
+ </div>
+ ),
+ })
+ return <div>
+ {renderTree({ className: 'mytree', style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ <style>{\`
+ .mytree [data-node-box]{
+ padding: 5px 0;
+ }
+ .mytree [data-node-box]:hover{
+ background-color: #eee;
+ }
+ .mytree .he-tree-drag-placeholder{
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ border: 1px dashed red;
+ }
+ .mynode{
+ padding-left:5px;
+ }
+ \`}</style>
+ </div>
+}openIds option to indicate the open nodes.open status of the node can be obtained through stat.open.allIds returned by useHeTree contains the ids of all nodes.openParentsInFlatData. For tree data: openParentsInTreeData.import { useHeTree, sortFlatData, openParentsInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setopenIds(allIds)}>Open All</button>
+ <button onClick={() => setopenIds([])}>Close All</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, openIds || allIds, 8, keys))}>Open 'Python'</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, [], 8, keys))}>Only Open 'Python'</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}checkedIds to indicate the checked nodes.checked status of this node can be obtained through stat.checked.checkedIds for one or more nodes after the checked status changes. Flat data: updateCheckedInFlatData. Tree data: \`updateCheckedInTreeData. checked is cascading. If you don't want to cascade updates, replace it with your own logic.import { useHeTree, sortFlatData, updateCheckedInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [checkedIds, setcheckedIds] = useState<Id[]>([]);
+ const [semiCheckedIds, setsemiCheckedIds] = useState<Id[]>([]);
+ const handleChecked = (id: Id, checked: boolean) => {
+ const r = updateCheckedInFlatData(data, checkedIds, id, checked, keys);
+ setcheckedIds(r[0]);
+ setsemiCheckedIds(r[1]);
+ }
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ checkedIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <input type="checkbox" checked={checked || false} onChange={() => handleChecked(id, !checked)} />
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ Checked: {JSON.stringify(checkedIds)} <br />
+ Semi-Checked: {JSON.stringify(semiCheckedIds)}
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Use the following options to control:
canDrag, whether the node can be dragged.canDrop, whether the node can be dropped.canDropToRoot, whether the tree root can be dropped.import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ canDrag: ({ id }) => id === 2 ? true : (id === 3 ? false : undefined),
+ canDrop: ({ id }) => id === 3 ? true : (id === 2 ? false : undefined),
+ canDropToRoot: (index) => false,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Technology and its sub-nodes can be dragged. Science and its sub-nodes cannot be dragged.Science and its sub-nodes can be dropped. Technology and its sub-nodes cannot be dropped.Use the following options to control:
dragOpen, whether to enable, default false.dragOpenDelay, delay, default 600 milliseconds.onDragOpen, the function called when the node is opened.import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([1, 3]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ dragOpen: true,
+ onDragOpen(stat) {
+ handleOpen(stat.id, true)
+ },
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Due to the immutable nature of React, it is difficult to update flat data and tree data. For flat data, this library provides two methods to add nodes or delete nodes. If you want to perform more complex operations, or update tree data, it is recommended that you use immer.
npm install immer use-immerpnpm add immer use-immeryarn add immer use-immeraddToFlatData. removeByIdInFlatData. These 2 methods will modify original data, so pass copy to it, or use immer.
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef, useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ let newData = [...data];
+ addToFlatData(newData, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ setdata(newData);
+ }
+ const remove = (id: Id) => {
+ let newData = [...data];
+ removeByIdInFlatData(newData, id as number, keys)
+ setdata(newData);
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Note, here we use useImmer instead of React's useState.
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ addToFlatData(draft, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ });
+ }
+ const remove = (id: Id) => {
+ setdata(draft => {
+ removeByIdInFlatData(draft, id as number, keys)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ draft.find(node => node.id === id)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Note, here we use useImmer instead of React's useState. findTreeData is like Array.prototype.find.
import { useHeTree, findTreeData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const CHILDREN = 'children'
+ const keys = { idKey: 'id', childrenKey: CHILDREN };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => [{ id: 1, name: "Root Category", children: [{ id: 2, name: "Technology", children: [{ id: 5, name: "Hardware", children: [{ id: 10, name: "Computer Components", children: [], },], }, { id: 4, name: "Programming", children: [{ id: 8, name: "Python", children: [], },], },], }, { id: 3, name: "Science", children: [{ id: 7, name: "Biology", children: [], }, { id: 6, name: "Physics", children: [], },], },], },]);
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ findTreeData(draft, (node) => node.id === pid, CHILDREN)![CHILDREN].unshift({ id, name: "New", [CHILDREN]: [], })
+ })
+ }
+ const remove = (id: Id, pid: Id | null) => {
+ setdata(draft => {
+ const children = findTreeData(draft, (node,) => node.id === pid, CHILDREN)![CHILDREN]
+ children.splice(children.findIndex(t => t.id === id), 1)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ findTreeData(draft, (node) => node.id === id, CHILDREN)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'tree',
+ onChange: setdata,
+ renderNode: ({ id, pid, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id, pid)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Related options:
onExternalDragOver: Indicate whether to handle external drag.onExternalDrop: Callback when drop from external.import { useHeTree, sortFlatData, addToFlatData } from "he-tree-react";
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ onExternalDragOver: (e) => true,
+ onExternalDrop: (e, parentStat, index) => {
+ setdata(draft => {
+ const newNode = { id: 100 + data.length, parent_id: parentStat?.id ?? null, name: "New Node" }
+ addToFlatData(draft, newNode, index, keys)
+ })
+ },
+ })
+ return <div>
+ <button draggable={true}>Drag me in to the tree</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Use option virtual to enable virtual list. Remember to set height for tree.
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'pid' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ virtual: true,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {id}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}
+
+// generate 10000 nodes
+function createData() {
+ const genId = () => result.length
+ const result: { id: number, pid: number | null }[] = [];
+ for (let i = 0; i < 1000; i++) {
+ let id1 = genId()
+ result.push({ id: id1, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id1 })
+ }
+ let id2 = genId()
+ result.push({ id: id2, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id2 })
+ }
+ }
+ return result;
+}It is based on HTML5 Drag and Drop API. So it works in any device that supports Drag and Drop API. For others, you can try Drag and Drop API polyfill.
Notice
In mobile, user need touch and hold to trigger drag.
direction: from right to left.customDragImage: custom drag image.rootId: the parent id of root nodes in flat data.keepPlaceholder: whether to retain the drag placeholder node when dragging outside the tree. Default is false.scrollToNode: Scroll to a node.此库导出的变量, 方法, Typescript 类型.
useHeTree: 主要的 React hook. 本库没有导出组件, 你需要使用此函数返回的renderTree渲染树.walkTreeData, walkTreeDataGenerator, findTreeData, filterTreeData, openParentsInTreeData, updateCheckedInTreeData: 用来处理和遍历树形数据的方法.sortFlatData, walkFlatData, walkFlatDataGenerator, convertIndexToTreeIndexInFlatData, addToFlatData, removeByIdInFlatData, openParentsInFlatData, updateCheckedInFlatData: 用来处理和遍历扁平数据的方法.walkParentsGenerator: 遍历另一种特殊数据的方法. 这种数据类似HTMLElement, 其中包含类似于parentElement的指向父节点的键.defaultProps: useHeTree的选项的默认值.以下为 Typescript 的类型:
Id: 节点 id, 父级 id. 类型: string | number.Stat: 节点的相关信息.HeTreeProps: useHeTree的选项.import { useHeTree } from "he-tree-react";
+const {/* return */} = useHeTree({/* options */}) // prettier-ignore本库的主要功能. React hook. 参数如下:
options: 选项, 类型是对象. 以下是 options 中的部分属性:
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| data | Array | 数据. 参考数据类型. | |
| dataType | 'flat', 'tree' | 'flat' | 数据类型 |
| idKey | string | 'id' | 你的数据中 id 的键名. |
| parentIdKey | string | 'parent_id' | 你的数据中父级 id 的键名. 仅用于扁平数据. |
| childrenKey | string | 'children' | 你的数据中子级的键名. 仅用于树形数据. |
| indent | number | 20 | 节点缩进, 单位是 px. |
| dragOpen | boolean | false | 是否启用功能"拖拽到节点上时打开节点". |
| dragOpenDelay | number | 600 | 拖拽到节点上时打开节点的等待时间. 单位是毫秒. |
| onDragOpen | function(stat): void | 拖拽到节点上时打开节点的回调. | |
| direction | 'lrt', 'rtl' | 'ltr' | 显示方向, ltr 是从左往右显示, rtl 与之相反. |
| rootId | string, null | null | 使用扁平数据时, 没有父级的节点的父级 id. |
| virtual | boolean | false | 是否启用虚拟化. 当数据非常多时用来提高性能. |
| keepPlaceholder | boolean | false | 当拖拽离开树的范围, 是否要保留占位元素. 建议只在一个树的页面开启此项. |
| openIds | Array | 所有打开节点的 id. | |
| checkedIds | Array | 所有勾选的节点的 id. | |
| isFunctionReactive | boolean | false | 是否监听回调函数的改变. 参考 |
以下是 options 中的剩余回调方法:
| 名称 | 类型 | 描述 |
|---|---|---|
| renderNode | (stat)=> ReactNode | 节点的渲染函数. |
| renderNodeBox | ({stat, attrs, isPlaceholder})=> ReactNode | nodeBox 的渲染函数. 参考. |
| onChange | (newData)=>void | 数据发生改变时调用. |
| canDrag | (stat)=>boolean, null, undefined, void | 节点是否可拖拽. 返回null, undefined, void表示继承父节点. |
| canDrop | (stat, index)=>boolean, null, undefined, void | 节点是否可放入. 返回null, undefined, void表示继承父节点. 参数index可能为空, 不为空时表示将要放入节点的子级的位置. |
| customDragImage | (event, stat)=> void | 调用event.dataTransfer.setDragImage自定义 drag image. 参考. |
| onDragStart | (event, stat)=> void | 当拖拽开始时 |
| onExternalDragOver | (event)=>boolean | 当拖拽来自外部时调用. 你必选返回布尔值表示是否处理此拖拽. |
| onDragOver | (event, stat, isExternal)=> void | 当拖拽到树上方时, isExternal表示此次拖拽是否来自外部. |
| onDragEnd | (event, stat, isOutside)=>void | 当此树发起的拖拽结束时调用. stat 是此次拖拽的节点的 stat.isOutside 表示是否在树外部结束. |
| onExternalDrop | (event, parentStat, index)=>void | 当外部拖拽在此树结束时调用. parentStat 是目标父节点的 stat, 为空时代表树的根级. index 是目标位置, 即节点在兄弟节点中的索引. |
useHeTree的返回 useHeTree的返回是对象, 包含了一些 states 和方法. 注意, 这个对象每次更新都会改变, 不要依赖这个对象, 可以依赖这个对象的属性. 属性如下:
| 名称 | 类型 | 描述 |
|---|---|---|
| renderTree | (options?: { className?: string, style?: React.CSSProperties }): ReactNode | 渲染树. 参数可以传入className和style控制根元素的样式. |
| getStat | (idOrNodeOrStat)=>stat | 根据 id, 节点数据或 stat, 获得对应的 stat. |
| allIds | 数组 | 所有节点的 id. |
| rootIds | 数组 | 树根级的所有节点的 id. |
| rootNodes | 数组 | 树根级的所有节点的数据. 如果是树形数据, 它就是选项中的data. |
| rootStats | 数组 | 树根级的所有节点的 stat. |
| placeholder | {parentStat, index, level} | 拖拽时占位节点的信息. 占位节点不存在时为空. |
| draggingStat | stat | 由此树发起拖拽时, 被拖拽的节点的 stat. 不存在时为空. |
| dragOverStat | stat | 拖拽到其上面的节点. 可能为空. |
| visibleIds | 数组 | 显示的所有节点的 id. |
| attrsList | 数组 | 显示的所有节点的 attrs. |
| virtualListRef | ref | 虚拟列表组件的 ref, 参考虚拟列表. |
| scrollToNode | (idOrNodeOrStat)=>boolean | 滚动到节点. 参数可以是 id, 节点数据或 stat. 如果节点未找到或未显示, 返回false. 例子 |
通过for of遍历树形数据的方法. 循环中执行skipChildren()将跳过该节点的所有子节点, 执行exitWalk将结束遍历.
for (const [
+ node,
+ { parent, parents, siblings, index, skipChildren, exitWalk },
+] of walkTreeDataGenerator(data, "children")) {
+ // ...
+}通过回调方法遍历树形数据的方法. 回调方法中执行skipChildren()将跳过该节点的所有子节点, 执行exitWalk将结束遍历.
walkTreeDataGenerator(
+ data,
+ (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
+ // ...
+ },
+ "children"
+);类似 Array.prototype.find. 返回找到的第一个节点. 回调方法中执行skipChildren()将跳过该节点的所有子节点, 执行exitWalk将结束遍历.
let foundNode = findTreeData(
+ data,
+ (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
+ // return node.id === 1;
+ },
+ "children"
+);类似 Array.prototype.filter. 返回找到的所有节点. 回调方法中执行skipChildren()将跳过该节点的所有子节点, 执行exitWalk将结束遍历.
let nodes = filterTreeData(
+ data,
+ (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
+ // return node.id > 1;
+ },
+ "children"
+);打开单个或多个节点的所有父节点, 这样才能确保该节点可见. 参考.
(
+ treeData,
+ openIds: Id[],
+ idOrIds: Id | Id[],
+ options?: {idKey: string, childrenKey: string}
+): newOpenIds更新单个节点或多个节点的checked状态. 这将同时更新它们的子节点和父节点. 参考.
(
+ treeData,
+ checkedIds: Id[],
+ idOrIds: Id | Id[],
+ checked: boolean,
+ options?: {idKey: string, childrenKey: string}
+): [newCheckedIds, newSemiCheckedIds]把扁平数据按照节点在树里的顺序排序. 返回排序后的新数组. 你的数据在初始化时应该使用它以保证顺序.
(
+ flatData,
+ options?: {idKey: string, parentIdKey: string}
+): sortedData通过for of遍历扁平数据的方法. 循环中执行skipChildren()将跳过该节点的所有子节点, 执行exitWalk将结束遍历. 使用前需确保你的数据的顺序是正确的.
相比于walkTreeDataGenerator, 少了siblings, 多了 treeIndex, id, pid. treeIndex是节点在整个树中的索引.
for (const [
+ node,
+ { parent, parents, index, treeIndex, id, pid, skipChildren, exitWalk },
+] of walkFlatDataGenerator(flatData, {
+ idKey: "id",
+ parentIdKey: "parent_id",
+})) {
+ // ...
+}通过回调方法遍历扁平数据的方法. 回调方法中执行skipChildren()将跳过该节点的所有子节点, 执行exitWalk将结束遍历. 使用前需确保你的数据的顺序是正确的.
walkFlatData(
+ flatData,
+ (
+ node,
+ { parent, parents, index, treeIndex, id, pid, skipChildren, exitWalk }
+ ) => {
+ // ...
+ },
+ {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+);打开单个或多个节点的所有父节点, 这样才能确保该节点可见. 用前需确保你的数据的顺序是正确的. 参考.
(
+ flatData,
+ openIds: Id[],
+ idOrIds: Id | Id[],
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): newOpenIds更新单个节点或多个节点的checked状态. 这将同时更新它们的子节点和父节点. 用前需确保你的数据的顺序是正确的. 参考.
(
+ flatData,
+ checkedIds: Id[],
+ idOrIds: Id | Id[],
+ checked: boolean,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): [newCheckedIds, newSemiCheckedIds]通过某节点的父节点 id 和它在兄弟节点中的索引, 计算出它在整棵树中的索引.
(
+ flatData,
+ parentId: Id | null,
+ indexInSiblings: Id | null,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): treeIndex向扁平数据添加一个节点. 它会改变原数据数组. 所以推荐传入原始数据的拷贝, 或者与useImmer一起使用. 参考
(
+ flatData,
+ newNode,
+ index: Id | null,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+):void从扁平数据删除一个节点. 返回被删除的数据. 它会改变原数据数组. 所以推荐传入原始数据的拷贝, 或者与useImmer一起使用. 参考
(
+ flatData,
+ removeId: Id | null,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): removedData遍历另一种特殊数据的方法. 这种数据类似HTMLElement, 其中包含类似于parentElement的指向父节点的键.
(
+ node,
+ parentKeyOrGetter: string | ((node) => parent | undefined),
+ options?: {
+ withSelf: boolean;
+ }
+): GeneratorparentKeyOrGetter可以是字符串或者返回父级的方法. options.withSelf表示是否包括传入的节点. 返回 Generator. 下面是遍历 HTMLElement 的例子:
let el = document.querySelector("div");
+for (const parent of walkParentsGenerator(el, "parentElement", {
+ withSelf: true,
+})) {
+ // ...
+}stat包括和节点有关的信息. 只读. 属性如下:
| 名称 | 类型 | 描述 |
|---|---|---|
| _isStat | boolean | 表明是否是 stat 对象 |
| node | object | 节点的数据 |
| id | Id | id |
| pid | Id, null | 节点的父级 id |
| parent | object, null | 父节点的数据 |
| parentStat | stat, null | 父节点的 stat |
| childIds | Id[] | 子节点的 id 数组 |
| children | object[] | 子节点数组 |
| childStats | stat[] | 子节点的 stat 数组 |
| siblingIds | Id[] | 兄弟节点的 id 数组 |
| siblings | object[] | 兄弟节点数组 |
| siblingStats | stat[] | 兄弟节点的 stat 数组 |
| index | number | 节点在兄弟节点中的索引 |
| level | number | 节点在树中的深度. 从 1 开始 |
| open | boolean | 是否展开 |
| checked | boolean | 是否勾选 |
| draggable | boolean | 是否可拖动 |
源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ const [data, setdata] = useState(() => sortFlatData([
+ {
+ id: 1,
+ parent_id: null,
+ name: "Root Category",
+ },
+ {
+ id: 2,
+ parent_id: 1,
+ name: "Technology",
+ },
+ {
+ id: 5,
+ parent_id: 2,
+ name: "Hardware",
+ },
+ {
+ id: 10,
+ parent_id: 5,
+ name: "Computer Components",
+ },
+ {
+ id: 4,
+ parent_id: 2,
+ name: "Programming",
+ },
+ {
+ id: 8,
+ parent_id: 4,
+ name: "Python",
+ },
+ {
+ id: 3,
+ parent_id: 1,
+ name: "Science",
+ },
+ {
+ id: 7,
+ parent_id: 3,
+ name: "Biology",
+ },
+ {
+ id: 6,
+ parent_id: 3,
+ name: "Physics",
+ },
+ ], keys));
+ const { renderTree, placeholder } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key} className="my-node-box">
+ {isPlaceholder ? <div className="my-placeholder">DROP HERE</div>
+ : <div className="my-node">
+ <span className="drag-handler" draggable={stat.draggable}>{dragIcon()}</span>
+ {stat.node.name}
+ </div>
+ }
+ </div>
+ ),
+ })
+ return <>
+ <h3 style={{ margin: '0 0 0 110px', padding: '20px 0 0px' }}>Draggable Tree</h3>
+ <div>
+ {renderTree({ className: \`my-tree \${placeholder ? 'dragging' : 'no-dragging'}\` })}
+ </div>
+ <style>{\`
+ .my-tree{
+ width: 300px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ margin: 20px;
+ padding: 20px;
+ }
+ .my-placeholder{
+ height:40px;
+ border: 1px dashed blue;
+ border-radius: 3px;
+ background-color: #f3ffff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: small;
+ }
+ /*.no-dragging .my-node-box:hover{
+ background-color: #eee;
+ }*/
+ .my-node-box:not(:last-child){
+ margin-bottom: 10px;
+ }
+ .my-node{
+ padding: 5px 10px;
+ padding-left: 30px;
+ border: 1px solid #e2e2e2;
+ border-radius: 3px;
+ background-color: #f0f0f0;
+ display: flex;
+ align-items: center;
+ position: relative;
+ box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 19%);
+ }
+ .no-dragging .my-node:hover{
+ background-color: #ebfeff;
+ }
+ .drag-handler{
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 30px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: grab;
+ }
+ .drag-handler:hover{
+ background-color: #f0f0f0;
+ }
+ .my-node svg{
+ width:16px;
+ }
+ \`}</style>
+ </>
+}
+
+function dragIcon() {
+ return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>drag-horizontal-variant</title><path d="M21 11H3V9H21V11M21 13H3V15H21V13Z" /></svg>
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ const [data, setdata] = useState(() => sortFlatData([
+ {
+ id: 1,
+ parent_id: null,
+ name: "Root Category",
+ },
+ {
+ id: 2,
+ parent_id: 1,
+ name: "Technology",
+ },
+ {
+ id: 5,
+ parent_id: 2,
+ name: "Hardware",
+ },
+ {
+ id: 10,
+ parent_id: 5,
+ name: "Computer Components",
+ },
+ {
+ id: 4,
+ parent_id: 2,
+ name: "Programming",
+ },
+ {
+ id: 8,
+ parent_id: 4,
+ name: "Python",
+ },
+ {
+ id: 3,
+ parent_id: 1,
+ name: "Science",
+ },
+ {
+ id: 7,
+ parent_id: 3,
+ name: "Biology",
+ },
+ {
+ id: 6,
+ parent_id: 3,
+ name: "Physics",
+ },
+ ], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const [data, setdata] = useState(() => [
+ {
+ id: 1,
+ name: "Root Category",
+ children: [
+ {
+ id: 2,
+ name: "Technology",
+ children: [
+ {
+ id: 5,
+ name: "Hardware",
+ children: [
+ {
+ id: 10,
+ name: "Computer Components",
+ children: [],
+ },
+ ],
+ },
+ {
+ id: 4,
+ name: "Programming",
+ children: [
+ {
+ id: 8,
+ name: "Python",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ id: 3,
+ name: "Science",
+ children: [
+ {
+ id: 7,
+ name: "Biology",
+ children: [],
+ },
+ {
+ id: 6,
+ name: "Physics",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ ]);
+ const { renderTree } = useHeTree({
+ data,
+ dataType: 'tree',
+ childrenKey: 'children',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button draggable={draggable}>Drag</button>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key}>
+ {isPlaceholder ? <div className="my-drag-placeholder">drop here</div>
+ : <div className="mynode">{stat.node.name}</div>
+ }
+ </div>
+ ),
+ })
+ return <div>
+ {renderTree({ className: 'mytree', style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ <style>{\`
+ .mytree [data-node-box]{
+ padding: 5px 0;
+ }
+ .mytree [data-node-box]:hover{
+ background-color: #eee;
+ }
+ .mytree .he-tree-drag-placeholder{
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ border: 1px dashed red;
+ }
+ .mynode{
+ padding-left:5px;
+ }
+ \`}</style>
+ </div>
+}源代码
import { useHeTree, sortFlatData, openParentsInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setopenIds(allIds)}>Open All</button>
+ <button onClick={() => setopenIds([])}>Close All</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, openIds || allIds, 8, keys))}>Open 'Python'</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, [], 8, keys))}>Only Open 'Python'</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData, updateCheckedInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [checkedIds, setcheckedIds] = useState<Id[]>([]);
+ const [semiCheckedIds, setsemiCheckedIds] = useState<Id[]>([]);
+ const handleChecked = (id: Id, checked: boolean) => {
+ const r = updateCheckedInFlatData(data, checkedIds, id, checked, keys);
+ setcheckedIds(r[0]);
+ setsemiCheckedIds(r[1]);
+ }
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ checkedIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <input type="checkbox" checked={checked || false} onChange={() => handleChecked(id, !checked)} />
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ Checked: {JSON.stringify(checkedIds)} <br />
+ Semi-Checked: {JSON.stringify(semiCheckedIds)}
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ canDrag: ({ id }) => id === 2 ? true : (id === 3 ? false : undefined),
+ canDrop: ({ id }) => id === 3 ? true : (id === 2 ? false : undefined),
+ canDropToRoot: (index) => false,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([1, 3]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ dragOpen: true,
+ onDragOpen(stat) {
+ handleOpen(stat.id, true)
+ },
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef, useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ let newData = [...data];
+ addToFlatData(newData, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ setdata(newData);
+ }
+ const remove = (id: Id) => {
+ let newData = [...data];
+ removeByIdInFlatData(newData, id as number, keys)
+ setdata(newData);
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ addToFlatData(draft, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ });
+ }
+ const remove = (id: Id) => {
+ setdata(draft => {
+ removeByIdInFlatData(draft, id as number, keys)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ draft.find(node => node.id === id)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, findTreeData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const CHILDREN = 'children'
+ const keys = { idKey: 'id', childrenKey: CHILDREN };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => [{ id: 1, name: "Root Category", children: [{ id: 2, name: "Technology", children: [{ id: 5, name: "Hardware", children: [{ id: 10, name: "Computer Components", children: [], },], }, { id: 4, name: "Programming", children: [{ id: 8, name: "Python", children: [], },], },], }, { id: 3, name: "Science", children: [{ id: 7, name: "Biology", children: [], }, { id: 6, name: "Physics", children: [], },], },], },]);
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ findTreeData(draft, (node) => node.id === pid, CHILDREN)![CHILDREN].unshift({ id, name: "New", [CHILDREN]: [], })
+ })
+ }
+ const remove = (id: Id, pid: Id | null) => {
+ setdata(draft => {
+ const children = findTreeData(draft, (node,) => node.id === pid, CHILDREN)![CHILDREN]
+ children.splice(children.findIndex(t => t.id === id), 1)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ findTreeData(draft, (node) => node.id === id, CHILDREN)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'tree',
+ onChange: setdata,
+ renderNode: ({ id, pid, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id, pid)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData, addToFlatData } from "he-tree-react";
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ onExternalDragOver: (e) => true,
+ onExternalDrop: (e, parentStat, index) => {
+ setdata(draft => {
+ const newNode = { id: 100 + data.length, parent_id: parentStat?.id ?? null, name: "New Node" }
+ addToFlatData(draft, newNode, index, keys)
+ })
+ },
+ })
+ return <div>
+ <button draggable={true}>Drag me in to the tree</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'pid' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ virtual: true,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {id}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}
+
+// generate 10000 nodes
+function createData() {
+ const genId = () => result.length
+ const result: { id: number, pid: number | null }[] = [];
+ for (let i = 0; i < 1000; i++) {
+ let id1 = genId()
+ result.push({ id: id1, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id1 })
+ }
+ let id2 = genId()
+ result.push({ id: id2, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id2 })
+ }
+ }
+ return result;
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'pid' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds, scrollToNode } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ virtual: true,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {id}
+ </div>,
+ })
+ return <div>
+ <button onClick={() => scrollToNode(910)}>Scroll to 910</button>
+ {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}
+
+// generate 10000 nodes
+function createData() {
+ const genId = () => result.length
+ const result: { id: number, pid: number | null }[] = [];
+ for (let i = 0; i < 1000; i++) {
+ let id1 = genId()
+ result.push({ id: id1, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id1 })
+ }
+ let id2 = genId()
+ result.push({ id: id2, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id2 })
+ }
+ }
+ return result;
+}npm install he-tree-reactpnpm add he-tree-reactyarn add he-tree-react此库支持两种结构的数据:
id, 父级 id, null代表没有父级. 扁平数据的顺序必须跟树一样, 你可以在初始化数据时使用sortFlatData方法给数据排序.[
+ { id: 1, pid: null },
+ { id: 2, pid: 1 },
+ { id: 3, pid: 2 },
+];children数组包含子节点. 如果未指定id, 此库将使用节点在树中的索引作为id. 使用树形数据时需设置dataType: 'tree'.[
+ {
+ id: 1,
+ children: [
+ {
+ id: 2,
+ children: [{ id: 3 }],
+ },
+ ],
+ },
+];数据中的id, pid, children不是固定的. 在设置中, 使用idKey, parentIdKey, childrenKey表明你的数据中的对应键名.
此库没有导出组件,而是导出一个 hook useHeTree. 使用它返回的renderTree渲染树. 这样做的好处是除了renderTree, useHeTree还会返回一些内部状态和方法, 可以轻松的被获取.
import { useHeTree } from "he-tree-react";
+
+export default function App() {
+ const { renderTree } = useHeTree({...})
+ return <div>
+ {renderTree()}
+ </div>
+}useHeTree是主要使用的函数, 它的第一个参数是选项对象. 必须的选项有data, 必须两者中有一个的是renderNode, renderNodeBox. 其他重要选项是:
dataType, 表明数据类型. 可用值: flat, 默认. 扁平数据.tree, 树形数据.idKey, parentIdKey, 默认值是id和parent_id. 使用扁平数据时需要. 虽然有默认值, 但还是建议写明更好.childrenKey, 默认是children. 使用树形数据时需要. 虽然有默认值, 但还是建议写明更好.onChange, 数据改变时调用的函数, 参数是新数据. 如果你的树不会改变则不需要.isFunctionReactive, 布尔. 默认false. useHeTree选项中包含许多回调函数, 如onChange, canDrop. isFunctionReactive可用来控制是否监听这些回调函数的改变. 如果你的回调函数和data是同步改变的, 则不用启用此项. 否则你需要启用此项, 并且用 React 的useCallback或useMemo缓存你的所有回调函数以避免性能问题.stat, 单个节点的相关信息. 大部分回调函数的参数里有stat. 参考Stat API.node, 节点的数据. 通过stat.node可以获取节点数据.getStat, 通过此函数可以获取stat, 唯一参数可以是id, node, stat. 此函数在useHeTree的返回对象中: const {getStat} = useHeTree({...}).tsx格式, 如果你需要js格式, 可以使用任意 ts js 在线转换器.import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ const [data, setdata] = useState(() => sortFlatData([
+ {
+ id: 1,
+ parent_id: null,
+ name: "Root Category",
+ },
+ {
+ id: 2,
+ parent_id: 1,
+ name: "Technology",
+ },
+ {
+ id: 5,
+ parent_id: 2,
+ name: "Hardware",
+ },
+ {
+ id: 10,
+ parent_id: 5,
+ name: "Computer Components",
+ },
+ {
+ id: 4,
+ parent_id: 2,
+ name: "Programming",
+ },
+ {
+ id: 8,
+ parent_id: 4,
+ name: "Python",
+ },
+ {
+ id: 3,
+ parent_id: 1,
+ name: "Science",
+ },
+ {
+ id: 7,
+ parent_id: 3,
+ name: "Biology",
+ },
+ {
+ id: 6,
+ parent_id: 3,
+ name: "Physics",
+ },
+ ], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}import { useHeTree } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const [data, setdata] = useState(() => [
+ {
+ id: 1,
+ name: "Root Category",
+ children: [
+ {
+ id: 2,
+ name: "Technology",
+ children: [
+ {
+ id: 5,
+ name: "Hardware",
+ children: [
+ {
+ id: 10,
+ name: "Computer Components",
+ children: [],
+ },
+ ],
+ },
+ {
+ id: 4,
+ name: "Programming",
+ children: [
+ {
+ id: 8,
+ name: "Python",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ id: 3,
+ name: "Science",
+ children: [
+ {
+ id: 7,
+ name: "Biology",
+ children: [],
+ },
+ {
+ id: 6,
+ name: "Physics",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ ]);
+ const { renderTree } = useHeTree({
+ data,
+ dataType: 'tree',
+ childrenKey: 'children',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}给节点任意子元素添加draggable属性即可.
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button draggable={draggable}>Drag</button>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}节点 HTML 如下:
<div
+ draggable="true"
+ data-key="1"
+ data-level="1"
+ data-node-box="true"
+ style="padding-left: 0px;"
+>
+ <div>Node</div>
+</div>上面有两个 div. 使用renderNode选项控制内层 div 的渲染. 如: renderNode: ({node}) => <div>{node.name}</div>.
外层节点被称为nodeBox, 不要修改它的padding-left, padding-right. 使用选项indent控制节点的缩进. 如果你想控制nodeBox或拖拽占位节点的渲染, 可以使用renderNodeBox选项, 这将覆盖renderNode. 标准的renderNodeBox如下:
renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key}>
+ {isPlaceholder ? (
+ <div
+ className="he-tree-drag-placeholder"
+ style={{ minHeight: "20px", border: "1px dashed blue" }}
+ />
+ ) : (
+ <div>{/* node area */}</div>
+ )}
+ </div>
+);第 4 到第 7 行是拖拽占位节点. 第 9 行是节点元素.
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key}>
+ {isPlaceholder ? <div className="my-drag-placeholder">drop here</div>
+ : <div className="mynode">{stat.node.name}</div>
+ }
+ </div>
+ ),
+ })
+ return <div>
+ {renderTree({ className: 'mytree', style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ <style>{\`
+ .mytree [data-node-box]{
+ padding: 5px 0;
+ }
+ .mytree [data-node-box]:hover{
+ background-color: #eee;
+ }
+ .mytree .he-tree-drag-placeholder{
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ border: 1px dashed red;
+ }
+ .mynode{
+ padding-left:5px;
+ }
+ \`}</style>
+ </div>
+}openIds表明展开的节点.stat.open获取该节点的open状态.useHeTree返回的allIds包含所有节点的 id.openParentsInFlatData. 树形数据: openParentsInTreeData.import { useHeTree, sortFlatData, openParentsInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setopenIds(allIds)}>Open All</button>
+ <button onClick={() => setopenIds([])}>Close All</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, openIds || allIds, 8, keys))}>Open 'Python'</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, [], 8, keys))}>Only Open 'Python'</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}此例子顶部 4 个按钮分别是: 展开全部, 折叠全部, 展开'Python'节点的所有父节点, 仅展开'Python'节点的所有父节点.
checkedIds表明勾选的节点.stat.checked获取该节点的checked状态.checked变动后的checkedIds. 扁平数据: updateCheckedInFlatData. 树形数据: \`updateCheckedInTreeData. checked的更新是级联的. 如果你不想级联更新, 使用你自己的逻辑替代.import { useHeTree, sortFlatData, updateCheckedInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [checkedIds, setcheckedIds] = useState<Id[]>([]);
+ const [semiCheckedIds, setsemiCheckedIds] = useState<Id[]>([]);
+ const handleChecked = (id: Id, checked: boolean) => {
+ const r = updateCheckedInFlatData(data, checkedIds, id, checked, keys);
+ setcheckedIds(r[0]);
+ setsemiCheckedIds(r[1]);
+ }
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ checkedIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <input type="checkbox" checked={checked || false} onChange={() => handleChecked(id, !checked)} />
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ Checked: {JSON.stringify(checkedIds)} <br />
+ Semi-Checked: {JSON.stringify(semiCheckedIds)}
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}使用以下选项控制:
canDrag, 节点是否可拖拽.canDrop, 节点是否可放入.canDropToRoot, 树根是否可放入.import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ canDrag: ({ id }) => id === 2 ? true : (id === 3 ? false : undefined),
+ canDrop: ({ id }) => id === 3 ? true : (id === 2 ? false : undefined),
+ canDropToRoot: (index) => false,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Technology及子节点可以拖拽. Science及子节点不可以拖拽.Science及子节点可以放入. Technology及子节点不可以放入.使用以下选项控制:
dragOpen, 是否启用, 默认false.dragOpenDelay, 延时, 默认 600 毫秒.onDragOpen, 打开节点时调用的函数.import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([1, 3]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ dragOpen: true,
+ onDragOpen(stat) {
+ handleOpen(stat.id, true)
+ },
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}由于 React 的不可变特性, 扁平数据和树形数据更新都很困难. 针对扁平数据, 此库提供了两个方法, 用以增加节点或删除节点. 如果你要进行更复杂的操作, 或者更新树形数据, 推荐你使用immer.
npm install immer use-immerpnpm add immer use-immeryarn add immer use-immeraddToFlatData: 增加节点. removeByIdInFlatData: 删除节点. 这两个方法都会改变原数据, 所以把原数据的复制传给它, 或者与immer一起使用.
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef, useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ let newData = [...data];
+ addToFlatData(newData, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ setdata(newData);
+ }
+ const remove = (id: Id) => {
+ let newData = [...data];
+ removeByIdInFlatData(newData, id as number, keys)
+ setdata(newData);
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}注意, 这里使用了useImmer替代 React 的useState.
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ addToFlatData(draft, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ });
+ }
+ const remove = (id: Id) => {
+ setdata(draft => {
+ removeByIdInFlatData(draft, id as number, keys)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ draft.find(node => node.id === id)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}注意, 这里使用了useImmer替代 React 的useState. findTreeData方法类似数组的find方法.
import { useHeTree, findTreeData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const CHILDREN = 'children'
+ const keys = { idKey: 'id', childrenKey: CHILDREN };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => [{ id: 1, name: "Root Category", children: [{ id: 2, name: "Technology", children: [{ id: 5, name: "Hardware", children: [{ id: 10, name: "Computer Components", children: [], },], }, { id: 4, name: "Programming", children: [{ id: 8, name: "Python", children: [], },], },], }, { id: 3, name: "Science", children: [{ id: 7, name: "Biology", children: [], }, { id: 6, name: "Physics", children: [], },], },], },]);
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ findTreeData(draft, (node) => node.id === pid, CHILDREN)![CHILDREN].unshift({ id, name: "New", [CHILDREN]: [], })
+ })
+ }
+ const remove = (id: Id, pid: Id | null) => {
+ setdata(draft => {
+ const children = findTreeData(draft, (node,) => node.id === pid, CHILDREN)![CHILDREN]
+ children.splice(children.findIndex(t => t.id === id), 1)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ findTreeData(draft, (node) => node.id === id, CHILDREN)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'tree',
+ onChange: setdata,
+ renderNode: ({ id, pid, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id, pid)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}相关选项:
onExternalDragOver: 表明是否处理外部拖拽.onExternalDrop: 当外部拖拽放入树中时调用的回调函数.import { useHeTree, sortFlatData, addToFlatData } from "he-tree-react";
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ onExternalDragOver: (e) => true,
+ onExternalDrop: (e, parentStat, index) => {
+ setdata(draft => {
+ const newNode = { id: 100 + data.length, parent_id: parentStat?.id ?? null, name: "New Node" }
+ addToFlatData(draft, newNode, index, keys)
+ })
+ },
+ })
+ return <div>
+ <button draggable={true}>Drag me in to the tree</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}使用选项virtual启用虚拟列表功能. 记得给树设置可见区域高度.
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'pid' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ virtual: true,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {id}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}
+
+// generate 10000 nodes
+function createData() {
+ const genId = () => result.length
+ const result: { id: number, pid: number | null }[] = [];
+ for (let i = 0; i < 1000; i++) {
+ let id1 = genId()
+ result.push({ id: id1, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id1 })
+ }
+ let id2 = genId()
+ result.push({ id: id2, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id2 })
+ }
+ }
+ return result;
+}此库基于 HTML5 Drag and Drop API, 所以在支持 Drag and Drop API 的移动设备上能工作. 如果不支持, 可以尝试添加兼容 Drag and Drop API 的库.
注意
触摸时, 用户需要触摸并等一会儿才能触发拖拽。
direction: 从右往左显示.customDragImage: 自定义 drag image.rootId: 使用扁平数据时, 顶级节点的父 id.keepPlaceholder: 拖拽到树外时, 是否要保留拖拽占位节点. 默认false.scrollToNode: 滚动到指定节点.The exported variables, methods, and Typescript types.
useHeTree: Main React hook. This library does not export components, you need to use the renderTree render tree returned by this function.walkTreeData, walkTreeDataGenerator, findTreeData, filterTreeData, openParentsInTreeData, updateCheckedInTreeData: Methods for processing and traversing tree data.sortFlatData, walkFlatData, walkFlatDataGenerator, convertIndexToTreeIndexInFlatData, addToFlatData, removeByIdInFlatData, openParentsInFlatData, updateCheckedInFlatData: Methods for processing and traversing flat data.walkParentsGenerator: To iterate over another special kind of data. This data is like HTMLElement, which contains a key pointing to the parent node like parentElement.defaultProps: The default value of useHeTree options.Typescript types:
Id: node id, parent id. Type: string | number.Stat: Node information.HeTreeProps: Options for useHeTree.import { useHeTree } from "he-tree-react";
+const {/* return */} = useHeTree({/* options */}) // prettier-ignoreThe main function of this library. React hook. The arguments are as follows:
options: Options, type is object. The following are some properties in options:
| Name | Type | Default | Description |
|---|---|---|---|
| data | Array | Data. Check Data Types. | |
| dataType | 'flat', 'tree' | 'flat' | Data Types |
| idKey | string | 'id' | key of id 名. |
| parentIdKey | string | 'parent_id' | key of the parent id. For flat data only. |
| childrenKey | string | 'children' | key of children nodes. For tree data only. |
| indent | number | 20 | Node indentation, unit is px. |
| dragOpen | boolean | false | Whether to enable the function "Open node when dragging over node". |
| dragOpenDelay | number | 600 | The waiting time to open the node when dragging over the node. The unit is milliseconds. |
| onDragOpen | function(stat): void | The callback of "Open node when dragging over node". | |
| direction | 'lrt', 'rtl' | 'ltr' | Display direction, ltr is displayed from left to right, rtl is the opposite. |
| rootId | string, null | null | The parent id of a node that has not parent in flat data. |
| virtual | boolean | false | Whether to enable virtualization. Used to improve performance when there is a lot of data. |
| keepPlaceholder | boolean | false | Whether to retain placeholder when dragging out of the tree. It is recommended to enable this only on one tree page. |
| openIds | Array | All open nodes' id. | |
| checkedIds | Array | All checked nodes' id. | |
| isFunctionReactive | boolean | false | Whether to listen for change of the callback functions. Reference |
The remaining callback functions in options:
| Name | Type | Description |
|---|---|---|
| renderNode | (stat)=> ReactNode | Node render. |
| renderNodeBox | ({stat, attrs, isPlaceholder})=> ReactNode | nodeBox's render. Reference. |
| onChange | (newData)=>void | Callback on data change |
| canDrag | (stat)=>boolean, null, undefined, void | Whether a node draggable. Returning null, undefined, void means inheriting the parent node. |
| canDrop | (stat, index)=>boolean, null, undefined, void | Whether a node droppable. Returning null, undefined, void means inheriting the parent node. The parameter index may be empty. If it is not empty, it indicates the position. |
| customDragImage | (event, stat)=> void | Called event.dataTransfer.setDragImage to custom drag image. Reference. |
| onDragStart | (event, stat)=> void | |
| onExternalDragOver | (event)=>boolean | Called when drag from external. Must return a Boolean value to indicate whether to handle this drag. |
| onDragOver | (event, stat, isExternal)=> void | isExternal indicates whether the drag is from outside. |
| onDragEnd | (event, stat, isOutside)=>void | Called on dragend and this drag is started in this tree. stat is the stat of the dragged node. isOutside indicates whether it ended outside the tree. |
| onExternalDrop | (event, parentStat, index)=>void | Called when the external drag ends on this tree. parentStat is the stat of the target parent node, and when it is empty, it represents the root of the tree. Index is the target position, the index of the node among siblings. |
useHeTree The return of useHeTree is an object, including some states and methods. Note, this object will change every time. Do not rely on this object, but you can rely on the properties of this object. The properties are as follows:
| Name | Type | Description |
|---|---|---|
| renderTree | (options?: { className?: string, style?: React.CSSProperties }): ReactNode | Tree render. Options can be passed in className and style to control the style of the root element. |
| getStat | (idOrNodeOrStat)=>stat | Get stat by id, or node data, or stat object. |
| allIds | Array | The ids of all nodes. |
| rootIds | Array | The ids of all root nodes |
| rootNodes | Array | All root nodes. In tree data, it is same with options.data. |
| rootStats | Array | All root nodes' stat. |
| placeholder | {parentStat, index, level} | Drag placeholder info. Null if it does not exist. |
| draggingStat | stat | When a drag is initiated from this tree, the stat of the dragged node. Null if it does not exist. |
| dragOverStat | stat | Dragging over node's stat. May be null. |
| visibleIds | Array | All visible nodes' id. |
| attrsList | Array | All visible nodes' attrs. |
| virtualListRef | ref | ref of virtual list component, Check virtual list. |
| scrollToNode | (idOrNodeOrStat)=>boolean | Scroll to node. The argument can be id, node or stat. If node not found or invisible, it return false. Example |
The method of traversing tree data through for of. Executing skipChildren() in the loop will skip all child nodes of the node, and executing exitWalk will end the traversal.
for (const [
+ node,
+ { parent, parents, siblings, index, skipChildren, exitWalk },
+] of walkTreeDataGenerator(data, "children")) {
+ // ...
+}The method to traverse tree data through the callback method. Executing skipChildren() in the callback method will skip all child nodes of the node, and executing exitWalk will end the traversal.
walkTreeDataGenerator(
+ data,
+ (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
+ // ...
+ },
+ "children"
+);Like Array.prototype.find. Returns the first node found. Executing skipChildren() in the callback method will skip all child nodes of the node, and executing exitWalk will end the traversal.
let foundNode = findTreeData(
+ data,
+ (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
+ // return node.id === 1;
+ },
+ "children"
+);Like Array.prototype.filter. Returns all nodes found. Executing skipChildren() in the callback method will skip all child nodes of the node, and executing exitWalk will end the traversal.
let nodes = filterTreeData(
+ data,
+ (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
+ // return node.id > 1;
+ },
+ "children"
+);Open all parent nodes of a single or multiple nodes to make the node visible. Reference.
(
+ treeData,
+ openIds: Id[],
+ idOrIds: Id | Id[],
+ options?: {idKey: string, childrenKey: string}
+): newOpenIdsUpdate the checked status of a single node or multiple nodes. This will update both their children and parents. Reference.
(
+ treeData,
+ checkedIds: Id[],
+ idOrIds: Id | Id[],
+ checked: boolean,
+ options?: {idKey: string, childrenKey: string}
+): [newCheckedIds, newSemiCheckedIds]Sort the flat data according to the order of the nodes in the tree. Return the new sorted array. Your data should use it to ensure order after initialized.
(
+ flatData,
+ options?: {idKey: string, parentIdKey: string}
+): sortedDataThe method of traversing flat data through for of. Executing skipChildren() in the loop will skip all the child nodes of the node, and executing exitWalk will end the traversal. Make sure the order of your data is correct before using it.
Compared to walkTreeDataGenerator, it lacks siblings, but has treeIndex, id, pid. treeIndex is the index of the node in the tree.
for (const [
+ node,
+ { parent, parents, index, treeIndex, id, pid, skipChildren, exitWalk },
+] of walkFlatDataGenerator(flatData, {
+ idKey: "id",
+ parentIdKey: "parent_id",
+})) {
+ // ...
+}The method of traversing flat data through the callback method. Executing skipChildren() in the callback method will skip all child nodes of the node, and executing exitWalk will end the traversal. Before using, make sure that the order of your data is correct.
walkFlatData(
+ flatData,
+ (
+ node,
+ { parent, parents, index, treeIndex, id, pid, skipChildren, exitWalk }
+ ) => {
+ // ...
+ },
+ {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+);Open all parent nodes of a single or multiple nodes to make the node visible. Make sure your data is in the correct order before using it. Reference.
(
+ flatData,
+ openIds: Id[],
+ idOrIds: Id | Id[],
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): newOpenIdsUpdate the checked status of a single node or multiple nodes. This will update both their children and parents. Make sure your data is in the correct order before using it. Reference.
(
+ flatData,
+ checkedIds: Id[],
+ idOrIds: Id | Id[],
+ checked: boolean,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): [newCheckedIds, newSemiCheckedIds]Calculate the index of a node in the tree through its parent node id and its index in the sibling nodes.
(
+ flatData,
+ parentId: Id | null,
+ indexInSiblings: Id | null,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): treeIndexAdd a node to the flat data. It will change the original data array. Therefore, it is recommended to pass in a copy of the original data, or use it together with useImmer. Reference
(
+ flatData,
+ newNode,
+ index: Id | null,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+):voidRemove node by id from the flat data. It will change the original data array. Therefore, it is recommended to pass in a copy of the original data, or use it together with useImmer. Reference
(
+ flatData,
+ removeId: Id | null,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): removedDataA method to iterate over another special kind of data. This data is like HTMLElement, which contains keys pointing to the parent node like parentElement.
(
+ node,
+ parentKeyOrGetter: string | ((node) => parent | undefined),
+ options?: {
+ withSelf: boolean;
+ }
+): GeneratorparentKeyOrGetter can be a string or a method that returns the parent. options.withSelf indicates whether to include the node self. Returns Generator. Here is an example of traversing HTMLElement:
let el = document.querySelector("div");
+for (const parent of walkParentsGenerator(el, "parentElement", {
+ withSelf: true,
+})) {
+ // ...
+}stat contains information related to the node. Read-only. The properties are as follows:
| Name | Type | Description |
|---|---|---|
| _isStat | boolean | Indicates whether it is a stat object |
| node | object | node data |
| id | Id | id |
| pid | Id, null | parent id |
| parent | object, null | parent data |
| parentStat | stat, null | parent stat |
| childIds | Id[] | |
| children | object[] | |
| childStats | stat[] | stats of children |
| siblingIds | Id[] | |
| siblings | object[] | sibling nodes |
| siblingStats | stat[] | stats of siblings |
| index | number | node's index in siblings |
| level | number | node's depth in tree. Start from 1 |
| open | boolean | |
| checked | boolean | |
| draggable | boolean |
Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ const [data, setdata] = useState(() => sortFlatData([
+ {
+ id: 1,
+ parent_id: null,
+ name: "Root Category",
+ },
+ {
+ id: 2,
+ parent_id: 1,
+ name: "Technology",
+ },
+ {
+ id: 5,
+ parent_id: 2,
+ name: "Hardware",
+ },
+ {
+ id: 10,
+ parent_id: 5,
+ name: "Computer Components",
+ },
+ {
+ id: 4,
+ parent_id: 2,
+ name: "Programming",
+ },
+ {
+ id: 8,
+ parent_id: 4,
+ name: "Python",
+ },
+ {
+ id: 3,
+ parent_id: 1,
+ name: "Science",
+ },
+ {
+ id: 7,
+ parent_id: 3,
+ name: "Biology",
+ },
+ {
+ id: 6,
+ parent_id: 3,
+ name: "Physics",
+ },
+ ], keys));
+ const { renderTree, placeholder } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key} className="my-node-box">
+ {isPlaceholder ? <div className="my-placeholder">DROP HERE</div>
+ : <div className="my-node">
+ <span className="drag-handler" draggable={stat.draggable}>{dragIcon()}</span>
+ {stat.node.name}
+ </div>
+ }
+ </div>
+ ),
+ })
+ return <>
+ <h3 style={{ margin: '0 0 0 110px', padding: '20px 0 0px' }}>Draggable Tree</h3>
+ <div>
+ {renderTree({ className: `my-tree ${placeholder ? 'dragging' : 'no-dragging'}` })}
+ </div>
+ <style>{`
+ .my-tree{
+ width: 300px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ margin: 20px;
+ padding: 20px;
+ }
+ .my-placeholder{
+ height:40px;
+ border: 1px dashed blue;
+ border-radius: 3px;
+ background-color: #f3ffff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: small;
+ }
+ /*.no-dragging .my-node-box:hover{
+ background-color: #eee;
+ }*/
+ .my-node-box:not(:last-child){
+ margin-bottom: 10px;
+ }
+ .my-node{
+ padding: 5px 10px;
+ padding-left: 30px;
+ border: 1px solid #e2e2e2;
+ border-radius: 3px;
+ background-color: #f0f0f0;
+ display: flex;
+ align-items: center;
+ position: relative;
+ box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 19%);
+ }
+ .no-dragging .my-node:hover{
+ background-color: #ebfeff;
+ }
+ .drag-handler{
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 30px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: grab;
+ }
+ .drag-handler:hover{
+ background-color: #f0f0f0;
+ }
+ .my-node svg{
+ width:16px;
+ }
+ `}</style>
+ </>
+}
+
+function dragIcon() {
+ return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>drag-horizontal-variant</title><path d="M21 11H3V9H21V11M21 13H3V15H21V13Z" /></svg>
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ const [data, setdata] = useState(() => sortFlatData([
+ {
+ id: 1,
+ parent_id: null,
+ name: "Root Category",
+ },
+ {
+ id: 2,
+ parent_id: 1,
+ name: "Technology",
+ },
+ {
+ id: 5,
+ parent_id: 2,
+ name: "Hardware",
+ },
+ {
+ id: 10,
+ parent_id: 5,
+ name: "Computer Components",
+ },
+ {
+ id: 4,
+ parent_id: 2,
+ name: "Programming",
+ },
+ {
+ id: 8,
+ parent_id: 4,
+ name: "Python",
+ },
+ {
+ id: 3,
+ parent_id: 1,
+ name: "Science",
+ },
+ {
+ id: 7,
+ parent_id: 3,
+ name: "Biology",
+ },
+ {
+ id: 6,
+ parent_id: 3,
+ name: "Physics",
+ },
+ ], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const [data, setdata] = useState(() => [
+ {
+ id: 1,
+ name: "Root Category",
+ children: [
+ {
+ id: 2,
+ name: "Technology",
+ children: [
+ {
+ id: 5,
+ name: "Hardware",
+ children: [
+ {
+ id: 10,
+ name: "Computer Components",
+ children: [],
+ },
+ ],
+ },
+ {
+ id: 4,
+ name: "Programming",
+ children: [
+ {
+ id: 8,
+ name: "Python",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ id: 3,
+ name: "Science",
+ children: [
+ {
+ id: 7,
+ name: "Biology",
+ children: [],
+ },
+ {
+ id: 6,
+ name: "Physics",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ ]);
+ const { renderTree } = useHeTree({
+ data,
+ dataType: 'tree',
+ childrenKey: 'children',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button draggable={draggable}>Drag</button>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key}>
+ {isPlaceholder ? <div className="my-drag-placeholder">drop here</div>
+ : <div className="mynode">{stat.node.name}</div>
+ }
+ </div>
+ ),
+ })
+ return <div>
+ {renderTree({ className: 'mytree', style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ <style>{`
+ .mytree [data-node-box]{
+ padding: 5px 0;
+ }
+ .mytree [data-node-box]:hover{
+ background-color: #eee;
+ }
+ .mytree .he-tree-drag-placeholder{
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ border: 1px dashed red;
+ }
+ .mynode{
+ padding-left:5px;
+ }
+ `}</style>
+ </div>
+}Source
import { useHeTree, sortFlatData, openParentsInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setopenIds(allIds)}>Open All</button>
+ <button onClick={() => setopenIds([])}>Close All</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, openIds || allIds, 8, keys))}>Open 'Python'</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, [], 8, keys))}>Only Open 'Python'</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData, updateCheckedInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [checkedIds, setcheckedIds] = useState<Id[]>([]);
+ const [semiCheckedIds, setsemiCheckedIds] = useState<Id[]>([]);
+ const handleChecked = (id: Id, checked: boolean) => {
+ const r = updateCheckedInFlatData(data, checkedIds, id, checked, keys);
+ setcheckedIds(r[0]);
+ setsemiCheckedIds(r[1]);
+ }
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ checkedIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <input type="checkbox" checked={checked || false} onChange={() => handleChecked(id, !checked)} />
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ Checked: {JSON.stringify(checkedIds)} <br />
+ Semi-Checked: {JSON.stringify(semiCheckedIds)}
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ canDrag: ({ id }) => id === 2 ? true : (id === 3 ? false : undefined),
+ canDrop: ({ id }) => id === 3 ? true : (id === 2 ? false : undefined),
+ canDropToRoot: (index) => false,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([1, 3]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ dragOpen: true,
+ onDragOpen(stat) {
+ handleOpen(stat.id, true)
+ },
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef, useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ let newData = [...data];
+ addToFlatData(newData, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ setdata(newData);
+ }
+ const remove = (id: Id) => {
+ let newData = [...data];
+ removeByIdInFlatData(newData, id as number, keys)
+ setdata(newData);
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ addToFlatData(draft, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ });
+ }
+ const remove = (id: Id) => {
+ setdata(draft => {
+ removeByIdInFlatData(draft, id as number, keys)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ draft.find(node => node.id === id)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, findTreeData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const CHILDREN = 'children'
+ const keys = { idKey: 'id', childrenKey: CHILDREN };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => [{ id: 1, name: "Root Category", children: [{ id: 2, name: "Technology", children: [{ id: 5, name: "Hardware", children: [{ id: 10, name: "Computer Components", children: [], },], }, { id: 4, name: "Programming", children: [{ id: 8, name: "Python", children: [], },], },], }, { id: 3, name: "Science", children: [{ id: 7, name: "Biology", children: [], }, { id: 6, name: "Physics", children: [], },], },], },]);
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ findTreeData(draft, (node) => node.id === pid, CHILDREN)![CHILDREN].unshift({ id, name: "New", [CHILDREN]: [], })
+ })
+ }
+ const remove = (id: Id, pid: Id | null) => {
+ setdata(draft => {
+ const children = findTreeData(draft, (node,) => node.id === pid, CHILDREN)![CHILDREN]
+ children.splice(children.findIndex(t => t.id === id), 1)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ findTreeData(draft, (node) => node.id === id, CHILDREN)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'tree',
+ onChange: setdata,
+ renderNode: ({ id, pid, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id, pid)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData, addToFlatData } from "he-tree-react";
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ onExternalDragOver: (e) => true,
+ onExternalDrop: (e, parentStat, index) => {
+ setdata(draft => {
+ const newNode = { id: 100 + data.length, parent_id: parentStat?.id ?? null, name: "New Node" }
+ addToFlatData(draft, newNode, index, keys)
+ })
+ },
+ })
+ return <div>
+ <button draggable={true}>Drag me in to the tree</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'pid' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ virtual: true,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {id}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}
+
+// generate 10000 nodes
+function createData() {
+ const genId = () => result.length
+ const result: { id: number, pid: number | null }[] = [];
+ for (let i = 0; i < 1000; i++) {
+ let id1 = genId()
+ result.push({ id: id1, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id1 })
+ }
+ let id2 = genId()
+ result.push({ id: id2, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id2 })
+ }
+ }
+ return result;
+}Source
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'pid' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds, scrollToNode } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ virtual: true,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {id}
+ </div>,
+ })
+ return <div>
+ <button onClick={() => scrollToNode(910)}>Scroll to 910</button>
+ {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}
+
+// generate 10000 nodes
+function createData() {
+ const genId = () => result.length
+ const result: { id: number, pid: number | null }[] = [];
+ for (let i = 0; i < 1000; i++) {
+ let id1 = genId()
+ result.push({ id: id1, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id1 })
+ }
+ let id2 = genId()
+ result.push({ id: id2, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id2 })
+ }
+ }
+ return result;
+}npm install he-tree-reactpnpm add he-tree-reactyarn add he-tree-reactThis library supports two types of data structures:
null means there is no parent. The order of flat data must be the same as the tree, you can use the sortFlatData method to sort the data when initializing the data.[
+ { id: 1, pid: null },
+ { id: 2, pid: 1 },
+ { id: 3, pid: 2 },
+];dataType: 'tree'.[
+ {
+ id: 1,
+ children: [
+ {
+ id: 2,
+ children: [{ id: 3 }],
+ },
+ ],
+ },
+];The id, pid, children in the data are not fixed. In the options, use idKey, parentIdKey, childrenKey to indicate the corresponding key names in your data.
This library does not export components, but exports a hook useHeTree. Use the returned renderTree to render the tree. The advantage of this is that in addition to renderTree, useHeTree will also return some internal states and methods, which can be easily obtained.
import { useHeTree } from "he-tree-react";
+
+export default function App() {
+ const { renderTree } = useHeTree({...})
+ return <div>
+ {renderTree()}
+ </div>
+}useHeTree is the primary function used, its first parameter is an options object. The required options are data, and at least one of renderNode, renderNodeBox must be present. Other important options include:
dataType, indicating data type. Available values: flat, default. Flat data.tree, tree-shaped data.idKey, parentIdKey, the default values are id and parent_id. Needed when using flat data. Although there are default values, it is better to explicitly state them.childrenKey, the default is children. Needed when using tree-shaped data. Although there are default values, it is better to explicitly state them.onChange, a function called when data changes, the parameter is new data. If your tree will not change then this is not required.isFunctionReactive, boolean. Default false. useHeTree options include many callback functions, such as onChange, canDrop. isFunctionReactive can be used to control whether to listen for changes to these callback functions. If your callback functions and data change synchronously, you do not need to enable this. Otherwise, you need to enable this and use React's useCallback or useMemo to cache all your callback functions to avoid performance issues.See the useHeTree API documentation for more information.
stat, information related to a single node. Most of the parameters in callback functions have stat. Refer to Stat API.node, the data of the node. You can get node data through stat.node.getStat, through this function you can get stat, the only parameter can be id, node, stat. This function is in the return object of useHeTree: const {getStat} = useHeTree({...}).tsx format, if you need the js format, you can use any ts js online converter.import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ const [data, setdata] = useState(() => sortFlatData([
+ {
+ id: 1,
+ parent_id: null,
+ name: "Root Category",
+ },
+ {
+ id: 2,
+ parent_id: 1,
+ name: "Technology",
+ },
+ {
+ id: 5,
+ parent_id: 2,
+ name: "Hardware",
+ },
+ {
+ id: 10,
+ parent_id: 5,
+ name: "Computer Components",
+ },
+ {
+ id: 4,
+ parent_id: 2,
+ name: "Programming",
+ },
+ {
+ id: 8,
+ parent_id: 4,
+ name: "Python",
+ },
+ {
+ id: 3,
+ parent_id: 1,
+ name: "Science",
+ },
+ {
+ id: 7,
+ parent_id: 3,
+ name: "Biology",
+ },
+ {
+ id: 6,
+ parent_id: 3,
+ name: "Physics",
+ },
+ ], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}import { useHeTree } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const [data, setdata] = useState(() => [
+ {
+ id: 1,
+ name: "Root Category",
+ children: [
+ {
+ id: 2,
+ name: "Technology",
+ children: [
+ {
+ id: 5,
+ name: "Hardware",
+ children: [
+ {
+ id: 10,
+ name: "Computer Components",
+ children: [],
+ },
+ ],
+ },
+ {
+ id: 4,
+ name: "Programming",
+ children: [
+ {
+ id: 8,
+ name: "Python",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ id: 3,
+ name: "Science",
+ children: [
+ {
+ id: 7,
+ name: "Biology",
+ children: [],
+ },
+ {
+ id: 6,
+ name: "Physics",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ ]);
+ const { renderTree } = useHeTree({
+ data,
+ dataType: 'tree',
+ childrenKey: 'children',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}You can add the draggable attribute to any child element of the node.
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button draggable={draggable}>Drag</button>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Node HTML:
<div
+ draggable="true"
+ data-key="1"
+ data-level="1"
+ data-node-box="true"
+ style="padding-left: 0px;"
+>
+ <div>Node</div>
+</div>There are two div above. Use the renderNode option to control the rendering of the inner div. For example: renderNode: ({node}) => <div>{node.name}</div>.
The outer div is called nodeBox, don't modify its padding-left, padding-right. Use the indent option to control the indentation of the node. If you want to control the rendering of nodeBox or the drag placeholder, you can use the renderNodeBox option, which will override renderNode. The standard renderNodeBox is as follows:
renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key}>
+ {isPlaceholder ? (
+ <div
+ className="he-tree-drag-placeholder"
+ style={{ minHeight: "20px", border: "1px dashed blue" }}
+ />
+ ) : (
+ <div>{/* node area */}</div>
+ )}
+ </div>
+);Lines 4 to 7 are drag-and-drop placeholder. Line 9 is node.
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key}>
+ {isPlaceholder ? <div className="my-drag-placeholder">drop here</div>
+ : <div className="mynode">{stat.node.name}</div>
+ }
+ </div>
+ ),
+ })
+ return <div>
+ {renderTree({ className: 'mytree', style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ <style>{`
+ .mytree [data-node-box]{
+ padding: 5px 0;
+ }
+ .mytree [data-node-box]:hover{
+ background-color: #eee;
+ }
+ .mytree .he-tree-drag-placeholder{
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ border: 1px dashed red;
+ }
+ .mynode{
+ padding-left:5px;
+ }
+ `}</style>
+ </div>
+}openIds option to indicate the open nodes.open status of the node can be obtained through stat.open.allIds returned by useHeTree contains the ids of all nodes.openParentsInFlatData. For tree data: openParentsInTreeData.import { useHeTree, sortFlatData, openParentsInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setopenIds(allIds)}>Open All</button>
+ <button onClick={() => setopenIds([])}>Close All</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, openIds || allIds, 8, keys))}>Open 'Python'</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, [], 8, keys))}>Only Open 'Python'</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}checkedIds to indicate the checked nodes.checked status of this node can be obtained through stat.checked.checkedIds for one or more nodes after the checked status changes. Flat data: updateCheckedInFlatData. Tree data: `updateCheckedInTreeData. checked is cascading. If you don't want to cascade updates, replace it with your own logic.import { useHeTree, sortFlatData, updateCheckedInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [checkedIds, setcheckedIds] = useState<Id[]>([]);
+ const [semiCheckedIds, setsemiCheckedIds] = useState<Id[]>([]);
+ const handleChecked = (id: Id, checked: boolean) => {
+ const r = updateCheckedInFlatData(data, checkedIds, id, checked, keys);
+ setcheckedIds(r[0]);
+ setsemiCheckedIds(r[1]);
+ }
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ checkedIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <input type="checkbox" checked={checked || false} onChange={() => handleChecked(id, !checked)} />
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ Checked: {JSON.stringify(checkedIds)} <br />
+ Semi-Checked: {JSON.stringify(semiCheckedIds)}
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Use the following options to control:
canDrag, whether the node can be dragged.canDrop, whether the node can be dropped.canDropToRoot, whether the tree root can be dropped.import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ canDrag: ({ id }) => id === 2 ? true : (id === 3 ? false : undefined),
+ canDrop: ({ id }) => id === 3 ? true : (id === 2 ? false : undefined),
+ canDropToRoot: (index) => false,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Technology and its sub-nodes can be dragged. Science and its sub-nodes cannot be dragged.Science and its sub-nodes can be dropped. Technology and its sub-nodes cannot be dropped.Use the following options to control:
dragOpen, whether to enable, default false.dragOpenDelay, delay, default 600 milliseconds.onDragOpen, the function called when the node is opened.import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([1, 3]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ dragOpen: true,
+ onDragOpen(stat) {
+ handleOpen(stat.id, true)
+ },
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Due to the immutable nature of React, it is difficult to update flat data and tree data. For flat data, this library provides two methods to add nodes or delete nodes. If you want to perform more complex operations, or update tree data, it is recommended that you use immer.
npm install immer use-immerpnpm add immer use-immeryarn add immer use-immeraddToFlatData. removeByIdInFlatData. These 2 methods will modify original data, so pass copy to it, or use immer.
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef, useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ let newData = [...data];
+ addToFlatData(newData, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ setdata(newData);
+ }
+ const remove = (id: Id) => {
+ let newData = [...data];
+ removeByIdInFlatData(newData, id as number, keys)
+ setdata(newData);
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Note, here we use useImmer instead of React's useState.
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ addToFlatData(draft, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ });
+ }
+ const remove = (id: Id) => {
+ setdata(draft => {
+ removeByIdInFlatData(draft, id as number, keys)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ draft.find(node => node.id === id)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Note, here we use useImmer instead of React's useState. findTreeData is like Array.prototype.find.
import { useHeTree, findTreeData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const CHILDREN = 'children'
+ const keys = { idKey: 'id', childrenKey: CHILDREN };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => [{ id: 1, name: "Root Category", children: [{ id: 2, name: "Technology", children: [{ id: 5, name: "Hardware", children: [{ id: 10, name: "Computer Components", children: [], },], }, { id: 4, name: "Programming", children: [{ id: 8, name: "Python", children: [], },], },], }, { id: 3, name: "Science", children: [{ id: 7, name: "Biology", children: [], }, { id: 6, name: "Physics", children: [], },], },], },]);
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ findTreeData(draft, (node) => node.id === pid, CHILDREN)![CHILDREN].unshift({ id, name: "New", [CHILDREN]: [], })
+ })
+ }
+ const remove = (id: Id, pid: Id | null) => {
+ setdata(draft => {
+ const children = findTreeData(draft, (node,) => node.id === pid, CHILDREN)![CHILDREN]
+ children.splice(children.findIndex(t => t.id === id), 1)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ findTreeData(draft, (node) => node.id === id, CHILDREN)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'tree',
+ onChange: setdata,
+ renderNode: ({ id, pid, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id, pid)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Related options:
onExternalDragOver: Indicate whether to handle external drag.onExternalDrop: Callback when drop from external.import { useHeTree, sortFlatData, addToFlatData } from "he-tree-react";
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ onExternalDragOver: (e) => true,
+ onExternalDrop: (e, parentStat, index) => {
+ setdata(draft => {
+ const newNode = { id: 100 + data.length, parent_id: parentStat?.id ?? null, name: "New Node" }
+ addToFlatData(draft, newNode, index, keys)
+ })
+ },
+ })
+ return <div>
+ <button draggable={true}>Drag me in to the tree</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Use option virtual to enable virtual list. Remember to set height for tree.
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'pid' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ virtual: true,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {id}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}
+
+// generate 10000 nodes
+function createData() {
+ const genId = () => result.length
+ const result: { id: number, pid: number | null }[] = [];
+ for (let i = 0; i < 1000; i++) {
+ let id1 = genId()
+ result.push({ id: id1, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id1 })
+ }
+ let id2 = genId()
+ result.push({ id: id2, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id2 })
+ }
+ }
+ return result;
+}It is based on HTML5 Drag and Drop API. So it works in any device that supports Drag and Drop API. For others, you can try Drag and Drop API polyfill.
Notice
In mobile, user need touch and hold to trigger drag.
direction: from right to left.customDragImage: custom drag image.rootId: the parent id of root nodes in flat data.keepPlaceholder: whether to retain the drag placeholder node when dragging outside the tree. Default is false.scrollToNode: Scroll to a node.此库导出的变量, 方法, Typescript 类型.
useHeTree: 主要的 React hook. 本库没有导出组件, 你需要使用此函数返回的renderTree渲染树.walkTreeData, walkTreeDataGenerator, findTreeData, filterTreeData, openParentsInTreeData, updateCheckedInTreeData: 用来处理和遍历树形数据的方法.sortFlatData, walkFlatData, walkFlatDataGenerator, convertIndexToTreeIndexInFlatData, addToFlatData, removeByIdInFlatData, openParentsInFlatData, updateCheckedInFlatData: 用来处理和遍历扁平数据的方法.walkParentsGenerator: 遍历另一种特殊数据的方法. 这种数据类似HTMLElement, 其中包含类似于parentElement的指向父节点的键.defaultProps: useHeTree的选项的默认值.以下为 Typescript 的类型:
Id: 节点 id, 父级 id. 类型: string | number.Stat: 节点的相关信息.HeTreeProps: useHeTree的选项.import { useHeTree } from "he-tree-react";
+const {/* return */} = useHeTree({/* options */}) // prettier-ignore本库的主要功能. React hook. 参数如下:
options: 选项, 类型是对象. 以下是 options 中的部分属性:
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| data | Array | 数据. 参考数据类型. | |
| dataType | 'flat', 'tree' | 'flat' | 数据类型 |
| idKey | string | 'id' | 你的数据中 id 的键名. |
| parentIdKey | string | 'parent_id' | 你的数据中父级 id 的键名. 仅用于扁平数据. |
| childrenKey | string | 'children' | 你的数据中子级的键名. 仅用于树形数据. |
| indent | number | 20 | 节点缩进, 单位是 px. |
| dragOpen | boolean | false | 是否启用功能"拖拽到节点上时打开节点". |
| dragOpenDelay | number | 600 | 拖拽到节点上时打开节点的等待时间. 单位是毫秒. |
| onDragOpen | function(stat): void | 拖拽到节点上时打开节点的回调. | |
| direction | 'lrt', 'rtl' | 'ltr' | 显示方向, ltr 是从左往右显示, rtl 与之相反. |
| rootId | string, null | null | 使用扁平数据时, 没有父级的节点的父级 id. |
| virtual | boolean | false | 是否启用虚拟化. 当数据非常多时用来提高性能. |
| keepPlaceholder | boolean | false | 当拖拽离开树的范围, 是否要保留占位元素. 建议只在一个树的页面开启此项. |
| openIds | Array | 所有打开节点的 id. | |
| checkedIds | Array | 所有勾选的节点的 id. | |
| isFunctionReactive | boolean | false | 是否监听回调函数的改变. 参考 |
以下是 options 中的剩余回调方法:
| 名称 | 类型 | 描述 |
|---|---|---|
| renderNode | (stat)=> ReactNode | 节点的渲染函数. |
| renderNodeBox | ({stat, attrs, isPlaceholder})=> ReactNode | nodeBox 的渲染函数. 参考. |
| onChange | (newData)=>void | 数据发生改变时调用. |
| canDrag | (stat)=>boolean, null, undefined, void | 节点是否可拖拽. 返回null, undefined, void表示继承父节点. |
| canDrop | (stat, index)=>boolean, null, undefined, void | 节点是否可放入. 返回null, undefined, void表示继承父节点. 参数index可能为空, 不为空时表示将要放入节点的子级的位置. |
| customDragImage | (event, stat)=> void | 调用event.dataTransfer.setDragImage自定义 drag image. 参考. |
| onDragStart | (event, stat)=> void | 当拖拽开始时 |
| onExternalDragOver | (event)=>boolean | 当拖拽来自外部时调用. 你必选返回布尔值表示是否处理此拖拽. |
| onDragOver | (event, stat, isExternal)=> void | 当拖拽到树上方时, isExternal表示此次拖拽是否来自外部. |
| onDragEnd | (event, stat, isOutside)=>void | 当此树发起的拖拽结束时调用. stat 是此次拖拽的节点的 stat.isOutside 表示是否在树外部结束. |
| onExternalDrop | (event, parentStat, index)=>void | 当外部拖拽在此树结束时调用. parentStat 是目标父节点的 stat, 为空时代表树的根级. index 是目标位置, 即节点在兄弟节点中的索引. |
useHeTree的返回 useHeTree的返回是对象, 包含了一些 states 和方法. 注意, 这个对象每次更新都会改变, 不要依赖这个对象, 可以依赖这个对象的属性. 属性如下:
| 名称 | 类型 | 描述 |
|---|---|---|
| renderTree | (options?: { className?: string, style?: React.CSSProperties }): ReactNode | 渲染树. 参数可以传入className和style控制根元素的样式. |
| getStat | (idOrNodeOrStat)=>stat | 根据 id, 节点数据或 stat, 获得对应的 stat. |
| allIds | 数组 | 所有节点的 id. |
| rootIds | 数组 | 树根级的所有节点的 id. |
| rootNodes | 数组 | 树根级的所有节点的数据. 如果是树形数据, 它就是选项中的data. |
| rootStats | 数组 | 树根级的所有节点的 stat. |
| placeholder | {parentStat, index, level} | 拖拽时占位节点的信息. 占位节点不存在时为空. |
| draggingStat | stat | 由此树发起拖拽时, 被拖拽的节点的 stat. 不存在时为空. |
| dragOverStat | stat | 拖拽到其上面的节点. 可能为空. |
| visibleIds | 数组 | 显示的所有节点的 id. |
| attrsList | 数组 | 显示的所有节点的 attrs. |
| virtualListRef | ref | 虚拟列表组件的 ref, 参考虚拟列表. |
| scrollToNode | (idOrNodeOrStat)=>boolean | 滚动到节点. 参数可以是 id, 节点数据或 stat. 如果节点未找到或未显示, 返回false. 例子 |
通过for of遍历树形数据的方法. 循环中执行skipChildren()将跳过该节点的所有子节点, 执行exitWalk将结束遍历.
for (const [
+ node,
+ { parent, parents, siblings, index, skipChildren, exitWalk },
+] of walkTreeDataGenerator(data, "children")) {
+ // ...
+}通过回调方法遍历树形数据的方法. 回调方法中执行skipChildren()将跳过该节点的所有子节点, 执行exitWalk将结束遍历.
walkTreeDataGenerator(
+ data,
+ (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
+ // ...
+ },
+ "children"
+);类似 Array.prototype.find. 返回找到的第一个节点. 回调方法中执行skipChildren()将跳过该节点的所有子节点, 执行exitWalk将结束遍历.
let foundNode = findTreeData(
+ data,
+ (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
+ // return node.id === 1;
+ },
+ "children"
+);类似 Array.prototype.filter. 返回找到的所有节点. 回调方法中执行skipChildren()将跳过该节点的所有子节点, 执行exitWalk将结束遍历.
let nodes = filterTreeData(
+ data,
+ (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
+ // return node.id > 1;
+ },
+ "children"
+);打开单个或多个节点的所有父节点, 这样才能确保该节点可见. 参考.
(
+ treeData,
+ openIds: Id[],
+ idOrIds: Id | Id[],
+ options?: {idKey: string, childrenKey: string}
+): newOpenIds更新单个节点或多个节点的checked状态. 这将同时更新它们的子节点和父节点. 参考.
(
+ treeData,
+ checkedIds: Id[],
+ idOrIds: Id | Id[],
+ checked: boolean,
+ options?: {idKey: string, childrenKey: string}
+): [newCheckedIds, newSemiCheckedIds]把扁平数据按照节点在树里的顺序排序. 返回排序后的新数组. 你的数据在初始化时应该使用它以保证顺序.
(
+ flatData,
+ options?: {idKey: string, parentIdKey: string}
+): sortedData通过for of遍历扁平数据的方法. 循环中执行skipChildren()将跳过该节点的所有子节点, 执行exitWalk将结束遍历. 使用前需确保你的数据的顺序是正确的.
相比于walkTreeDataGenerator, 少了siblings, 多了 treeIndex, id, pid. treeIndex是节点在整个树中的索引.
for (const [
+ node,
+ { parent, parents, index, treeIndex, id, pid, skipChildren, exitWalk },
+] of walkFlatDataGenerator(flatData, {
+ idKey: "id",
+ parentIdKey: "parent_id",
+})) {
+ // ...
+}通过回调方法遍历扁平数据的方法. 回调方法中执行skipChildren()将跳过该节点的所有子节点, 执行exitWalk将结束遍历. 使用前需确保你的数据的顺序是正确的.
walkFlatData(
+ flatData,
+ (
+ node,
+ { parent, parents, index, treeIndex, id, pid, skipChildren, exitWalk }
+ ) => {
+ // ...
+ },
+ {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+);打开单个或多个节点的所有父节点, 这样才能确保该节点可见. 用前需确保你的数据的顺序是正确的. 参考.
(
+ flatData,
+ openIds: Id[],
+ idOrIds: Id | Id[],
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): newOpenIds更新单个节点或多个节点的checked状态. 这将同时更新它们的子节点和父节点. 用前需确保你的数据的顺序是正确的. 参考.
(
+ flatData,
+ checkedIds: Id[],
+ idOrIds: Id | Id[],
+ checked: boolean,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): [newCheckedIds, newSemiCheckedIds]通过某节点的父节点 id 和它在兄弟节点中的索引, 计算出它在整棵树中的索引.
(
+ flatData,
+ parentId: Id | null,
+ indexInSiblings: Id | null,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): treeIndex向扁平数据添加一个节点. 它会改变原数据数组. 所以推荐传入原始数据的拷贝, 或者与useImmer一起使用. 参考
(
+ flatData,
+ newNode,
+ index: Id | null,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+):void从扁平数据删除一个节点. 返回被删除的数据. 它会改变原数据数组. 所以推荐传入原始数据的拷贝, 或者与useImmer一起使用. 参考
(
+ flatData,
+ removeId: Id | null,
+ options?: {
+ idKey: "id",
+ parentIdKey: "parent_id",
+ }
+): removedData遍历另一种特殊数据的方法. 这种数据类似HTMLElement, 其中包含类似于parentElement的指向父节点的键.
(
+ node,
+ parentKeyOrGetter: string | ((node) => parent | undefined),
+ options?: {
+ withSelf: boolean;
+ }
+): GeneratorparentKeyOrGetter可以是字符串或者返回父级的方法. options.withSelf表示是否包括传入的节点. 返回 Generator. 下面是遍历 HTMLElement 的例子:
let el = document.querySelector("div");
+for (const parent of walkParentsGenerator(el, "parentElement", {
+ withSelf: true,
+})) {
+ // ...
+}stat包括和节点有关的信息. 只读. 属性如下:
| 名称 | 类型 | 描述 |
|---|---|---|
| _isStat | boolean | 表明是否是 stat 对象 |
| node | object | 节点的数据 |
| id | Id | id |
| pid | Id, null | 节点的父级 id |
| parent | object, null | 父节点的数据 |
| parentStat | stat, null | 父节点的 stat |
| childIds | Id[] | 子节点的 id 数组 |
| children | object[] | 子节点数组 |
| childStats | stat[] | 子节点的 stat 数组 |
| siblingIds | Id[] | 兄弟节点的 id 数组 |
| siblings | object[] | 兄弟节点数组 |
| siblingStats | stat[] | 兄弟节点的 stat 数组 |
| index | number | 节点在兄弟节点中的索引 |
| level | number | 节点在树中的深度. 从 1 开始 |
| open | boolean | 是否展开 |
| checked | boolean | 是否勾选 |
| draggable | boolean | 是否可拖动 |
源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ const [data, setdata] = useState(() => sortFlatData([
+ {
+ id: 1,
+ parent_id: null,
+ name: "Root Category",
+ },
+ {
+ id: 2,
+ parent_id: 1,
+ name: "Technology",
+ },
+ {
+ id: 5,
+ parent_id: 2,
+ name: "Hardware",
+ },
+ {
+ id: 10,
+ parent_id: 5,
+ name: "Computer Components",
+ },
+ {
+ id: 4,
+ parent_id: 2,
+ name: "Programming",
+ },
+ {
+ id: 8,
+ parent_id: 4,
+ name: "Python",
+ },
+ {
+ id: 3,
+ parent_id: 1,
+ name: "Science",
+ },
+ {
+ id: 7,
+ parent_id: 3,
+ name: "Biology",
+ },
+ {
+ id: 6,
+ parent_id: 3,
+ name: "Physics",
+ },
+ ], keys));
+ const { renderTree, placeholder } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key} className="my-node-box">
+ {isPlaceholder ? <div className="my-placeholder">DROP HERE</div>
+ : <div className="my-node">
+ <span className="drag-handler" draggable={stat.draggable}>{dragIcon()}</span>
+ {stat.node.name}
+ </div>
+ }
+ </div>
+ ),
+ })
+ return <>
+ <h3 style={{ margin: '0 0 0 110px', padding: '20px 0 0px' }}>Draggable Tree</h3>
+ <div>
+ {renderTree({ className: `my-tree ${placeholder ? 'dragging' : 'no-dragging'}` })}
+ </div>
+ <style>{`
+ .my-tree{
+ width: 300px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ margin: 20px;
+ padding: 20px;
+ }
+ .my-placeholder{
+ height:40px;
+ border: 1px dashed blue;
+ border-radius: 3px;
+ background-color: #f3ffff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: small;
+ }
+ /*.no-dragging .my-node-box:hover{
+ background-color: #eee;
+ }*/
+ .my-node-box:not(:last-child){
+ margin-bottom: 10px;
+ }
+ .my-node{
+ padding: 5px 10px;
+ padding-left: 30px;
+ border: 1px solid #e2e2e2;
+ border-radius: 3px;
+ background-color: #f0f0f0;
+ display: flex;
+ align-items: center;
+ position: relative;
+ box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 19%);
+ }
+ .no-dragging .my-node:hover{
+ background-color: #ebfeff;
+ }
+ .drag-handler{
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 30px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: grab;
+ }
+ .drag-handler:hover{
+ background-color: #f0f0f0;
+ }
+ .my-node svg{
+ width:16px;
+ }
+ `}</style>
+ </>
+}
+
+function dragIcon() {
+ return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>drag-horizontal-variant</title><path d="M21 11H3V9H21V11M21 13H3V15H21V13Z" /></svg>
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ const [data, setdata] = useState(() => sortFlatData([
+ {
+ id: 1,
+ parent_id: null,
+ name: "Root Category",
+ },
+ {
+ id: 2,
+ parent_id: 1,
+ name: "Technology",
+ },
+ {
+ id: 5,
+ parent_id: 2,
+ name: "Hardware",
+ },
+ {
+ id: 10,
+ parent_id: 5,
+ name: "Computer Components",
+ },
+ {
+ id: 4,
+ parent_id: 2,
+ name: "Programming",
+ },
+ {
+ id: 8,
+ parent_id: 4,
+ name: "Python",
+ },
+ {
+ id: 3,
+ parent_id: 1,
+ name: "Science",
+ },
+ {
+ id: 7,
+ parent_id: 3,
+ name: "Biology",
+ },
+ {
+ id: 6,
+ parent_id: 3,
+ name: "Physics",
+ },
+ ], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const [data, setdata] = useState(() => [
+ {
+ id: 1,
+ name: "Root Category",
+ children: [
+ {
+ id: 2,
+ name: "Technology",
+ children: [
+ {
+ id: 5,
+ name: "Hardware",
+ children: [
+ {
+ id: 10,
+ name: "Computer Components",
+ children: [],
+ },
+ ],
+ },
+ {
+ id: 4,
+ name: "Programming",
+ children: [
+ {
+ id: 8,
+ name: "Python",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ id: 3,
+ name: "Science",
+ children: [
+ {
+ id: 7,
+ name: "Biology",
+ children: [],
+ },
+ {
+ id: 6,
+ name: "Physics",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ ]);
+ const { renderTree } = useHeTree({
+ data,
+ dataType: 'tree',
+ childrenKey: 'children',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button draggable={draggable}>Drag</button>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key}>
+ {isPlaceholder ? <div className="my-drag-placeholder">drop here</div>
+ : <div className="mynode">{stat.node.name}</div>
+ }
+ </div>
+ ),
+ })
+ return <div>
+ {renderTree({ className: 'mytree', style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ <style>{`
+ .mytree [data-node-box]{
+ padding: 5px 0;
+ }
+ .mytree [data-node-box]:hover{
+ background-color: #eee;
+ }
+ .mytree .he-tree-drag-placeholder{
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ border: 1px dashed red;
+ }
+ .mynode{
+ padding-left:5px;
+ }
+ `}</style>
+ </div>
+}源代码
import { useHeTree, sortFlatData, openParentsInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setopenIds(allIds)}>Open All</button>
+ <button onClick={() => setopenIds([])}>Close All</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, openIds || allIds, 8, keys))}>Open 'Python'</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, [], 8, keys))}>Only Open 'Python'</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData, updateCheckedInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [checkedIds, setcheckedIds] = useState<Id[]>([]);
+ const [semiCheckedIds, setsemiCheckedIds] = useState<Id[]>([]);
+ const handleChecked = (id: Id, checked: boolean) => {
+ const r = updateCheckedInFlatData(data, checkedIds, id, checked, keys);
+ setcheckedIds(r[0]);
+ setsemiCheckedIds(r[1]);
+ }
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ checkedIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <input type="checkbox" checked={checked || false} onChange={() => handleChecked(id, !checked)} />
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ Checked: {JSON.stringify(checkedIds)} <br />
+ Semi-Checked: {JSON.stringify(semiCheckedIds)}
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ canDrag: ({ id }) => id === 2 ? true : (id === 3 ? false : undefined),
+ canDrop: ({ id }) => id === 3 ? true : (id === 2 ? false : undefined),
+ canDropToRoot: (index) => false,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([1, 3]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ dragOpen: true,
+ onDragOpen(stat) {
+ handleOpen(stat.id, true)
+ },
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef, useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ let newData = [...data];
+ addToFlatData(newData, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ setdata(newData);
+ }
+ const remove = (id: Id) => {
+ let newData = [...data];
+ removeByIdInFlatData(newData, id as number, keys)
+ setdata(newData);
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ addToFlatData(draft, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ });
+ }
+ const remove = (id: Id) => {
+ setdata(draft => {
+ removeByIdInFlatData(draft, id as number, keys)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ draft.find(node => node.id === id)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, findTreeData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const CHILDREN = 'children'
+ const keys = { idKey: 'id', childrenKey: CHILDREN };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => [{ id: 1, name: "Root Category", children: [{ id: 2, name: "Technology", children: [{ id: 5, name: "Hardware", children: [{ id: 10, name: "Computer Components", children: [], },], }, { id: 4, name: "Programming", children: [{ id: 8, name: "Python", children: [], },], },], }, { id: 3, name: "Science", children: [{ id: 7, name: "Biology", children: [], }, { id: 6, name: "Physics", children: [], },], },], },]);
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ findTreeData(draft, (node) => node.id === pid, CHILDREN)![CHILDREN].unshift({ id, name: "New", [CHILDREN]: [], })
+ })
+ }
+ const remove = (id: Id, pid: Id | null) => {
+ setdata(draft => {
+ const children = findTreeData(draft, (node,) => node.id === pid, CHILDREN)![CHILDREN]
+ children.splice(children.findIndex(t => t.id === id), 1)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ findTreeData(draft, (node) => node.id === id, CHILDREN)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'tree',
+ onChange: setdata,
+ renderNode: ({ id, pid, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id, pid)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData, addToFlatData } from "he-tree-react";
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ onExternalDragOver: (e) => true,
+ onExternalDrop: (e, parentStat, index) => {
+ setdata(draft => {
+ const newNode = { id: 100 + data.length, parent_id: parentStat?.id ?? null, name: "New Node" }
+ addToFlatData(draft, newNode, index, keys)
+ })
+ },
+ })
+ return <div>
+ <button draggable={true}>Drag me in to the tree</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'pid' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ virtual: true,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {id}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}
+
+// generate 10000 nodes
+function createData() {
+ const genId = () => result.length
+ const result: { id: number, pid: number | null }[] = [];
+ for (let i = 0; i < 1000; i++) {
+ let id1 = genId()
+ result.push({ id: id1, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id1 })
+ }
+ let id2 = genId()
+ result.push({ id: id2, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id2 })
+ }
+ }
+ return result;
+}源代码
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'pid' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds, scrollToNode } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ virtual: true,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {id}
+ </div>,
+ })
+ return <div>
+ <button onClick={() => scrollToNode(910)}>Scroll to 910</button>
+ {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}
+
+// generate 10000 nodes
+function createData() {
+ const genId = () => result.length
+ const result: { id: number, pid: number | null }[] = [];
+ for (let i = 0; i < 1000; i++) {
+ let id1 = genId()
+ result.push({ id: id1, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id1 })
+ }
+ let id2 = genId()
+ result.push({ id: id2, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id2 })
+ }
+ }
+ return result;
+}npm install he-tree-reactpnpm add he-tree-reactyarn add he-tree-react此库支持两种结构的数据:
id, 父级 id, null代表没有父级. 扁平数据的顺序必须跟树一样, 你可以在初始化数据时使用sortFlatData方法给数据排序.[
+ { id: 1, pid: null },
+ { id: 2, pid: 1 },
+ { id: 3, pid: 2 },
+];children数组包含子节点. 如果未指定id, 此库将使用节点在树中的索引作为id. 使用树形数据时需设置dataType: 'tree'.[
+ {
+ id: 1,
+ children: [
+ {
+ id: 2,
+ children: [{ id: 3 }],
+ },
+ ],
+ },
+];数据中的id, pid, children不是固定的. 在设置中, 使用idKey, parentIdKey, childrenKey表明你的数据中的对应键名.
此库没有导出组件,而是导出一个 hook useHeTree. 使用它返回的renderTree渲染树. 这样做的好处是除了renderTree, useHeTree还会返回一些内部状态和方法, 可以轻松的被获取.
import { useHeTree } from "he-tree-react";
+
+export default function App() {
+ const { renderTree } = useHeTree({...})
+ return <div>
+ {renderTree()}
+ </div>
+}useHeTree是主要使用的函数, 它的第一个参数是选项对象. 必须的选项有data, 必须两者中有一个的是renderNode, renderNodeBox. 其他重要选项是:
dataType, 表明数据类型. 可用值: flat, 默认. 扁平数据.tree, 树形数据.idKey, parentIdKey, 默认值是id和parent_id. 使用扁平数据时需要. 虽然有默认值, 但还是建议写明更好.childrenKey, 默认是children. 使用树形数据时需要. 虽然有默认值, 但还是建议写明更好.onChange, 数据改变时调用的函数, 参数是新数据. 如果你的树不会改变则不需要.isFunctionReactive, 布尔. 默认false. useHeTree选项中包含许多回调函数, 如onChange, canDrop. isFunctionReactive可用来控制是否监听这些回调函数的改变. 如果你的回调函数和data是同步改变的, 则不用启用此项. 否则你需要启用此项, 并且用 React 的useCallback或useMemo缓存你的所有回调函数以避免性能问题.stat, 单个节点的相关信息. 大部分回调函数的参数里有stat. 参考Stat API.node, 节点的数据. 通过stat.node可以获取节点数据.getStat, 通过此函数可以获取stat, 唯一参数可以是id, node, stat. 此函数在useHeTree的返回对象中: const {getStat} = useHeTree({...}).tsx格式, 如果你需要js格式, 可以使用任意 ts js 在线转换器.import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ const [data, setdata] = useState(() => sortFlatData([
+ {
+ id: 1,
+ parent_id: null,
+ name: "Root Category",
+ },
+ {
+ id: 2,
+ parent_id: 1,
+ name: "Technology",
+ },
+ {
+ id: 5,
+ parent_id: 2,
+ name: "Hardware",
+ },
+ {
+ id: 10,
+ parent_id: 5,
+ name: "Computer Components",
+ },
+ {
+ id: 4,
+ parent_id: 2,
+ name: "Programming",
+ },
+ {
+ id: 8,
+ parent_id: 4,
+ name: "Python",
+ },
+ {
+ id: 3,
+ parent_id: 1,
+ name: "Science",
+ },
+ {
+ id: 7,
+ parent_id: 3,
+ name: "Biology",
+ },
+ {
+ id: 6,
+ parent_id: 3,
+ name: "Physics",
+ },
+ ], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}import { useHeTree } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const [data, setdata] = useState(() => [
+ {
+ id: 1,
+ name: "Root Category",
+ children: [
+ {
+ id: 2,
+ name: "Technology",
+ children: [
+ {
+ id: 5,
+ name: "Hardware",
+ children: [
+ {
+ id: 10,
+ name: "Computer Components",
+ children: [],
+ },
+ ],
+ },
+ {
+ id: 4,
+ name: "Programming",
+ children: [
+ {
+ id: 8,
+ name: "Python",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ id: 3,
+ name: "Science",
+ children: [
+ {
+ id: 7,
+ name: "Biology",
+ children: [],
+ },
+ {
+ id: 6,
+ name: "Physics",
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ ]);
+ const { renderTree } = useHeTree({
+ data,
+ dataType: 'tree',
+ childrenKey: 'children',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked }) => <div>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}给节点任意子元素添加draggable属性即可.
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button draggable={draggable}>Drag</button>
+ {node.name}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}节点 HTML 如下:
<div
+ draggable="true"
+ data-key="1"
+ data-level="1"
+ data-node-box="true"
+ style="padding-left: 0px;"
+>
+ <div>Node</div>
+</div>上面有两个 div. 使用renderNode选项控制内层 div 的渲染. 如: renderNode: ({node}) => <div>{node.name}</div>.
外层节点被称为nodeBox, 不要修改它的padding-left, padding-right. 使用选项indent控制节点的缩进. 如果你想控制nodeBox或拖拽占位节点的渲染, 可以使用renderNodeBox选项, 这将覆盖renderNode. 标准的renderNodeBox如下:
renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key}>
+ {isPlaceholder ? (
+ <div
+ className="he-tree-drag-placeholder"
+ style={{ minHeight: "20px", border: "1px dashed blue" }}
+ />
+ ) : (
+ <div>{/* node area */}</div>
+ )}
+ </div>
+);第 4 到第 7 行是拖拽占位节点. 第 9 行是节点元素.
import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
+ <div {...attrs} key={attrs.key}>
+ {isPlaceholder ? <div className="my-drag-placeholder">drop here</div>
+ : <div className="mynode">{stat.node.name}</div>
+ }
+ </div>
+ ),
+ })
+ return <div>
+ {renderTree({ className: 'mytree', style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ <style>{`
+ .mytree [data-node-box]{
+ padding: 5px 0;
+ }
+ .mytree [data-node-box]:hover{
+ background-color: #eee;
+ }
+ .mytree .he-tree-drag-placeholder{
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ border: 1px dashed red;
+ }
+ .mynode{
+ padding-left:5px;
+ }
+ `}</style>
+ </div>
+}openIds表明展开的节点.stat.open获取该节点的open状态.useHeTree返回的allIds包含所有节点的 id.openParentsInFlatData. 树形数据: openParentsInTreeData.import { useHeTree, sortFlatData, openParentsInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setopenIds(allIds)}>Open All</button>
+ <button onClick={() => setopenIds([])}>Close All</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, openIds || allIds, 8, keys))}>Open 'Python'</button>
+ <button onClick={() => setopenIds(openParentsInFlatData(data, [], 8, keys))}>Only Open 'Python'</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}此例子顶部 4 个按钮分别是: 展开全部, 折叠全部, 展开'Python'节点的所有父节点, 仅展开'Python'节点的所有父节点.
checkedIds表明勾选的节点.stat.checked获取该节点的checked状态.checked变动后的checkedIds. 扁平数据: updateCheckedInFlatData. 树形数据: `updateCheckedInTreeData. checked的更新是级联的. 如果你不想级联更新, 使用你自己的逻辑替代.import { useHeTree, sortFlatData, updateCheckedInFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [checkedIds, setcheckedIds] = useState<Id[]>([]);
+ const [semiCheckedIds, setsemiCheckedIds] = useState<Id[]>([]);
+ const handleChecked = (id: Id, checked: boolean) => {
+ const r = updateCheckedInFlatData(data, checkedIds, id, checked, keys);
+ setcheckedIds(r[0]);
+ setsemiCheckedIds(r[1]);
+ }
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ checkedIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <input type="checkbox" checked={checked || false} onChange={() => handleChecked(id, !checked)} />
+ {node.name} - {id}
+ </div>,
+ })
+ return <div>
+ Checked: {JSON.stringify(checkedIds)} <br />
+ Semi-Checked: {JSON.stringify(semiCheckedIds)}
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}使用以下选项控制:
canDrag, 节点是否可拖拽.canDrop, 节点是否可放入.canDropToRoot, 树根是否可放入.import { useHeTree, sortFlatData } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ canDrag: ({ id }) => id === 2 ? true : (id === 3 ? false : undefined),
+ canDrop: ({ id }) => id === 3 ? true : (id === 2 ? false : undefined),
+ canDropToRoot: (index) => false,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}Technology及子节点可以拖拽. Science及子节点不可以拖拽.Science及子节点可以放入. Technology及子节点不可以放入.使用以下选项控制:
dragOpen, 是否启用, 默认false.dragOpenDelay, 延时, 默认 600 毫秒.onDragOpen, 打开节点时调用的函数.import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([1, 3]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {node.name} - {id}
+ </div>,
+ dragOpen: true,
+ onDragOpen(stat) {
+ handleOpen(stat.id, true)
+ },
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}由于 React 的不可变特性, 扁平数据和树形数据更新都很困难. 针对扁平数据, 此库提供了两个方法, 用以增加节点或删除节点. 如果你要进行更复杂的操作, 或者更新树形数据, 推荐你使用immer.
npm install immer use-immerpnpm add immer use-immeryarn add immer use-immeraddToFlatData: 增加节点. removeByIdInFlatData: 删除节点. 这两个方法都会改变原数据, 所以把原数据的复制传给它, 或者与immer一起使用.
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef, useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ let newData = [...data];
+ addToFlatData(newData, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ setdata(newData);
+ }
+ const remove = (id: Id) => {
+ let newData = [...data];
+ removeByIdInFlatData(newData, id as number, keys)
+ setdata(newData);
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}注意, 这里使用了useImmer替代 React 的useState.
import {
+ useHeTree, sortFlatData,
+ addToFlatData, removeByIdInFlatData
+} from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ addToFlatData(draft, { id, parent_id: pid as number, name: "New" }, 0, keys)
+ });
+ }
+ const remove = (id: Id) => {
+ setdata(draft => {
+ removeByIdInFlatData(draft, id as number, keys)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ draft.find(node => node.id === id)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}注意, 这里使用了useImmer替代 React 的useState. findTreeData方法类似数组的find方法.
import { useHeTree, findTreeData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useRef } from 'react';
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const CHILDREN = 'children'
+ const keys = { idKey: 'id', childrenKey: CHILDREN };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => [{ id: 1, name: "Root Category", children: [{ id: 2, name: "Technology", children: [{ id: 5, name: "Hardware", children: [{ id: 10, name: "Computer Components", children: [], },], }, { id: 4, name: "Programming", children: [{ id: 8, name: "Python", children: [], },], },], }, { id: 3, name: "Science", children: [{ id: 7, name: "Biology", children: [], }, { id: 6, name: "Physics", children: [], },], },], },]);
+ const add = (pid: Id) => {
+ let id = parseInt(Math.random().toString().substring(2, 5));
+ setdata(draft => {
+ findTreeData(draft, (node) => node.id === pid, CHILDREN)![CHILDREN].unshift({ id, name: "New", [CHILDREN]: [], })
+ })
+ }
+ const remove = (id: Id, pid: Id | null) => {
+ setdata(draft => {
+ const children = findTreeData(draft, (node,) => node.id === pid, CHILDREN)![CHILDREN]
+ children.splice(children.findIndex(t => t.id === id), 1)
+ })
+ }
+ const edit = (id: Id) => {
+ let newName = prompt("Enter new name")
+ setdata(draft => {
+ if (newName) {
+ findTreeData(draft, (node) => node.id === id, CHILDREN)!.name = newName
+ }
+ })
+ }
+ const initialData = useRef<typeof data>();
+ initialData.current = initialData.current || data;
+ const { renderTree } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'tree',
+ onChange: setdata,
+ renderNode: ({ id, pid, node, draggable }) => <div>
+ <button draggable={draggable}>👉</button>
+ {node.name} - {id} -
+ <button onClick={() => add(id)}>+</button>
+ <button onClick={() => remove(id, pid)}>-</button>
+ <button onClick={() => edit(id)}>Edit</button>
+ </div>,
+ })
+ return <div>
+ <button onClick={() => setdata(initialData.current!)}>Restore</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}相关选项:
onExternalDragOver: 表明是否处理外部拖拽.onExternalDrop: 当外部拖拽放入树中时调用的回调函数.import { useHeTree, sortFlatData, addToFlatData } from "he-tree-react";
+import { useImmer } from "use-immer";
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'parent_id' };
+ // prettier-ignore
+ const [data, setdata] = useImmer(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ {node.name} - {id}
+ </div>,
+ onExternalDragOver: (e) => true,
+ onExternalDrop: (e, parentStat, index) => {
+ setdata(draft => {
+ const newNode = { id: 100 + data.length, parent_id: parentStat?.id ?? null, name: "New Node" }
+ addToFlatData(draft, newNode, index, keys)
+ })
+ },
+ })
+ return <div>
+ <button draggable={true}>Drag me in to the tree</button>
+ {renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}使用选项virtual启用虚拟列表功能. 记得给树设置可见区域高度.
import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+ const keys = { idKey: 'id', parentIdKey: 'pid' };
+ // prettier-ignore
+ const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+ const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+ const handleOpen = (id: Id, open: boolean) => {
+ if (open) {
+ setopenIds([...(openIds || allIds), id]);
+ } else {
+ setopenIds((openIds || allIds).filter((i) => i !== id));
+ }
+ }
+ const { renderTree, allIds } = useHeTree({
+ ...keys,
+ data,
+ dataType: 'flat',
+ onChange: setdata,
+ openIds,
+ virtual: true,
+ renderNode: ({ id, node, open, checked, draggable }) => <div>
+ <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+ {id}
+ </div>,
+ })
+ return <div>
+ {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+ </div>
+}
+
+// generate 10000 nodes
+function createData() {
+ const genId = () => result.length
+ const result: { id: number, pid: number | null }[] = [];
+ for (let i = 0; i < 1000; i++) {
+ let id1 = genId()
+ result.push({ id: id1, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id1 })
+ }
+ let id2 = genId()
+ result.push({ id: id2, pid: null })
+ for (let j = 0; j < 4; j++) {
+ result.push({ id: genId(), pid: id2 })
+ }
+ }
+ return result;
+}此库基于 HTML5 Drag and Drop API, 所以在支持 Drag and Drop API 的移动设备上能工作. 如果不支持, 可以尝试添加兼容 Drag and Drop API 的库.
注意
触摸时, 用户需要触摸并等一会儿才能触发拖拽。
direction: 从右往左显示.customDragImage: 自定义 drag image.rootId: 使用扁平数据时, 顶级节点的父 id.keepPlaceholder: 拖拽到树外时, 是否要保留拖拽占位节点. 默认false.scrollToNode: 滚动到指定节点.