@asup/tree-of-notes (英语)
因为我找不到我想要的.
与/需要靴子,反应-靴子,反应-靴子相接. 使用上下文菜单来方便添加/重命名/移动动作.
安装
# with npm
npm install @asup/tree-of-nodes
节点树使用
import { iNodeUpdate, TreeNodeData, TreeOfNodes } from '@asup/tree-of-nodes';
import '@asup/tree-of-nodes/dist/style.css';
... inside REACT component
<TreeOfNodes<T>
id: string;
nodeList: TreeNodeData<T>[];
roots: Key[];
multiSelect?: boolean;
selectedIds?: Key | Key[];
handleSelect?: (ret: Key | Key []) => void;
onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
onRemove?: (childId: Key) => Promise<iNodeUpdate>;
onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;
canRemoveRoot?: boolean;
canRenameRoot?: boolean;
canAddChildren?: boolean;
canRemoveChildren?: boolean;
canRenameChildren?: boolean;
nodeHighlight?: string;
textHighlight?: string;
/>
组件需要类型节点列表 TreeNodeData<T> 具有独特性 React.Key编号.
属性
| Prop | 说明 | 默认 |
|---|---|---|
| 编号 | HTML id 属性 | |
| 节点列表 | 节点数据阵列 | |
| 树根 | 一个或多个要用作树根的节点键 | |
| 多选择 | 允许选择多于 1 id | false |
| 所选索引 | 当前选中列表 | |
| 手柄选择 | 当一个节点被点击( 选中) 时调用函数, 用于更新选中的 Id | () => {return;} |
| 页:1 | 添加新节点时调用函数, 用于更新节点列表 | |
| 移动 | 删除节点时调用函数, 用于更新节点列表 | |
| 重命名时 | 当一个节点被重新命名时调用函数, 这应该用于更新节点列表 | |
| 可以移动旋转 | 允许将根节点去除, 并结合关于 remove 函数的规格 | false |
| 可重命名旋转 | 允许将根节点重新命名, 并与关于 Rename 函数的规格相结合 | false |
| 儿童状况 | 允许增加儿童,同时说明关于Add的职能 | false |
| 迁移儿童 | 允许将非根节点的更名与关于再移动函数的规格相结合 | false |
| 可重命名儿童 | 允许将非根节点与关于再命名函数的规格合并重命名 | false |
| 节点突出 | 选定的节点突出显示颜色 | red |
| 文本突出显示 | 选中文本突出显示颜色 | rgba(255,0,0,0.2 |
| 拼写检查 | 使用/ 禁用浏览器拼写检查 | "对" |
树节点数据
节点列表所要求的格式,包括任何类型数据的持有者,在 TreeOfNodes 规格.
export type TreeNodeData<T> = {
id: Key;
label: string;
parentId?: Key;
data: T;
};
iNode 更新
使用此格式从更新函数返回 .
export interface iNodeUpdate {
success: boolean;
ErrorText?: string;
}
处理点击
在节点上点击上下文菜单将导致显示上下文菜单,同时显示"Add","Rename"和"Delete"选项.
点击扩展器将扩展或关闭节点的滑板
点击名称将选择该项目
点击复选框将选择该项目及其所有后人.
单项选择
为了处理所选择的一个(只有一个)项目,建议使用这些基本选项
<TreeOfNodes<T>
id={'...'}
nodeList={[...]}
roots={[...]}
selected={selected}
handleSelect={async (i) => {
setSelected([i]);
}}
/>
多项选择
为了处理多个选择,建议使用这些基本选项
<TreeOfNodes<T>
id={'...'}
nodeList={[...]}
roots={[...]}
showCheckBox
selected={selected}
handleSelect={async (i) => {
if (Array.isArray(i)) {
setSelected(
selected.includes(i[0])
? selected.filter((s) => !i.includes(s))
: [...selected, ...i.filter((n) => !selected.includes(n))],
);
} else {
setSelected(
selected.includes(i) ? selected.filter((s) => s !== i) : [...selected, i],
);
}
}}
/>