|
1 | 1 | # react-widget-tree-basic |
2 | 2 |
|
3 | | -`npm install --save react-widget-tree-basic` |
| 3 | +Tree基础组件 |
| 4 | + |
| 5 | + |
| 6 | +## 安装 |
| 7 | + |
| 8 | +``` |
| 9 | +npm install --save react-widget-tree-basic |
| 10 | +``` |
| 11 | + |
| 12 | +## 使用 |
| 13 | + |
| 14 | +[](https://codesandbox.io/s/react-widget-tree-basic-bsqjd?fontsize=14&hidenavigation=1&theme=dark) |
| 15 | + |
| 16 | +```js |
| 17 | + |
| 18 | +import TreeBasic from 'react-widget-tree-basic'; |
| 19 | + |
| 20 | +export default () => <TreeBasic loadData={...} itemRender={...} /> |
| 21 | + |
| 22 | +``` |
| 23 | + |
| 24 | +### Interfaces |
| 25 | + |
| 26 | +```ts |
| 27 | +export interface TreeProps<T = DataType> { |
| 28 | + /** 样式前缀 */ |
| 29 | + prefixCls: string; |
| 30 | + /** 样式名称 */ |
| 31 | + className?: string; |
| 32 | + /** 样式属性 */ |
| 33 | + style?: React.CSSProperties; |
| 34 | + /** 树根节点ID */ |
| 35 | + rootId: string | number | null; |
| 36 | + /** tree 数据结构 id 属性名称 */ |
| 37 | + idField: string; |
| 38 | + /** tree 数据结构 leaf 属性名称 */ |
| 39 | + leafField: string; |
| 40 | + /** tree 数据结构 parent 属性名称 */ |
| 41 | + pidField: string; |
| 42 | + /** 最大展开层级限制没，默认：99 */ |
| 43 | + maxDepth: number; |
| 44 | + /** 异步检测耗时机制，超过该时长即认定为异步加载，默认：16 ms */ |
| 45 | + asyncTestDelay: number; |
| 46 | + /** 已展开的节点ID */ |
| 47 | + expandedIds: (string | number)[]; |
| 48 | + /** Tree数据加载器，必填 */ |
| 49 | + loadData: (data: T, node: Node<T>) => T[] | Promise<any>; |
| 50 | + /** 自定义TreeNode的render返回 */ |
| 51 | + nodeRender?: (props: nodeRenderProps<T>, item: React.ReactNode, children: React.ReactNode) => React.ReactNode; |
| 52 | + /** 自定义TreeItem的render返回，必填 */ |
| 53 | + itemRender: (props: itemRenderProps<T>) => React.ReactNode; |
| 54 | + /** 自定义TreeNode的子节点渲染，一般动画需要使用。*/ |
| 55 | + childrenRender: (props: childrenRenderProps<T>) => React.ReactNode; |
| 56 | + /** 异步加载时的加载内容返回，默认为：null */ |
| 57 | + loadRender?: (props: LoadRenderProps<T>) => React.ReactNode; |
| 58 | + /** 自定义Tree容器组件*/ |
| 59 | + rootComponent: React.ElementType; |
| 60 | +} |
| 61 | + |
| 62 | +export declare type renderProps<T> = Omit<TreeNodeProps<T>, "render" | "childrenRender">; |
| 63 | +export interface TreeNodeProps<T = DataType> { |
| 64 | + node: Node<T>; |
| 65 | + isRoot: boolean; |
| 66 | + render?: (props: renderProps<T>, nodeItem: React.ReactNode, children: React.ReactNode) => React.ReactNode; |
| 67 | +} |
| 68 | + |
| 69 | +export interface TreeNodeProps { |
| 70 | + node: Node; |
| 71 | + isRoot: boolean; |
| 72 | + render?: ( |
| 73 | + props: renderProps, |
| 74 | + nodeItem: React.ReactNode, |
| 75 | + children: React.ReactNode |
| 76 | + ) => React.ReactNode; |
| 77 | +} |
| 78 | +export interface childrenRenderProps<T = DataType> { |
| 79 | + getChildren: () => React.ReactNode; |
| 80 | + expanded: boolean; |
| 81 | + loading: boolean; |
| 82 | + root: boolean; |
| 83 | + node: Node<T>; |
| 84 | + data: T; |
| 85 | +} |
| 86 | +export interface itemRenderProps<T = DataType> { |
| 87 | + expanded: boolean; |
| 88 | + loading: boolean; |
| 89 | + leaf: boolean; |
| 90 | + node: Node<T>; |
| 91 | + data: T; |
| 92 | +} |
| 93 | +export declare function toMarked(array: any[]): any; |
| 94 | +export declare type DataType = Record<string, any>; |
| 95 | +export declare type IdType = string | number; |
| 96 | +export declare type nodeRenderProps<T> = renderProps<T>; |
| 97 | +export interface LoadRenderProps<T = DataType> { |
| 98 | + root: boolean; |
| 99 | + node: Node; |
| 100 | + data: T; |
| 101 | +} |
| 102 | + |
| 103 | +``` |
| 104 | + |
| 105 | +### defaultProps |
| 106 | + |
| 107 | +```js |
| 108 | +{ |
| 109 | + prefixCls: "rw-tree", |
| 110 | + rootId: null, |
| 111 | + idField: "id", |
| 112 | + leafField: "leaf", |
| 113 | + pidField: "pid", |
| 114 | + maxDepth: 99, |
| 115 | + asyncTestDelay: 16, |
| 116 | + expandedIds: [], |
| 117 | + childrenRender(props) { |
| 118 | + if (!props.expanded) return null; |
| 119 | + return props.getChildren(); |
| 120 | + }, |
| 121 | + rootComponent: "div", |
| 122 | +} |
| 123 | +``` |
0 commit comments