Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f7ca38e

Browse files
v1.0
1 parent 96feaf4 commit f7ca38e

File tree

12 files changed

+190
-49
lines changed

12 files changed

+190
-49
lines changed

‎README.md

Lines changed: 121 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,123 @@
11
# react-widget-tree-basic
22

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+
[![Edit react-widget-tree-basic](https://codesandbox.io/static/img/play-codesandbox.svg)](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+
```

‎docs/asset-manifest.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"index.css": "static/css/index.a0a710ab.chunk.css",
3-
"index.js": "static/js/index.a0a710ab.chunk.js",
2+
"index.css": "static/css/index.387855a9.chunk.css",
3+
"index.js": "static/js/index.387855a9.chunk.js",
44
"runtime-index.js": "static/js/runtime-index.92eae014.js",
55
"static/js/2.e9b6bfc8.chunk.js": "static/js/2.e9b6bfc8.chunk.js",
66
"index.html": "index.html"

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html style="width:100%;height:100%;overflow:hidden"><head><meta charset="utf-8"/><title>Tree Basic</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:800px;height:450px;margin:100px auto;background:#fff;font-size:12px;overflow:auto}</style><link href="static/css/index.a0a710ab.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.e9b6bfc8.chunk.js"></script><script src="static/js/index.a0a710ab.chunk.js"></script></body></html>
1+
<!doctype html><html style="width:100%;height:100%;overflow:hidden"><head><meta charset="utf-8"/><title>Tree Basic</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:800px;height:450px;margin:100px auto;background:#fff;font-size:12px;overflow:auto}</style><link href="static/css/index.387855a9.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.e9b6bfc8.chunk.js"></script><script src="static/js/index.387855a9.chunk.js"></script></body></html>
File renamed without changes.

‎docs/static/js/index.387855a9.chunk.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/index.a0a710ab.chunk.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-widget-tree-basic",
3-
"version": "0.1.0",
3+
"version": "1.0.0",
44
"description": "tree-basic",
55
"main": "cjs/index.js",
66
"module": "esm/index.js",

‎src/Node.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@ interface NodeState {
1111
expandedMap?: Record<string, boolean>;
1212
}
1313

14-
export default class Node {
14+
export default class Node<T=Record<string,any>> {
1515
id: string | number;
1616
pid: string | number;
1717
leaf: boolean;
18-
data: Record<string,any>;
18+
data: T;
1919
loading: boolean;
2020
root: boolean;
2121
expanded: boolean;
2222
depth: number;
2323

2424
constructor(
25-
data: Record<string,any>,
25+
data: T,
2626
parentNode: Node | null,
2727
options: NodeOptions = {},
2828
state: NodeState = {}

‎src/TreeContext.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import Tree from "./index";
3-
export interface ContextValue {
4-
tree: Tree;
3+
export interface ContextValue<T={}> {
4+
tree: Tree<T>;
55
}
66

77
export default React.createContext<ContextValue>({ tree: {} as Tree });

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /