Skip to content

Commit f7ca38e

Browse files
bplok20010bplok20010
committed
v1.0
1 parent 96feaf4 commit f7ca38e

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>

‎docs/static/css/index.a0a710ab.chunk.css renamed to ‎docs/static/css/index.387855a9.chunk.css

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 });

‎src/TreeNode.tsx

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,14 @@ import isPromise from "is-promise";
44
import TreeContext, { ContextValue } from "./TreeContext";
55
import Node from "./Node";
66

7-
export interface NodeItemRenderProps {
8-
node: Node;
9-
}
10-
11-
export type renderProps = Omit<TreeNodeProps, "render" | "childrenRender">;
7+
export type DataType = Record<string, any>;
8+
export type renderProps<T> = Omit<TreeNodeProps<T>, "render" | "childrenRender">;
129

13-
export interface TreeNodeProps {
14-
node: Node;
10+
export interface TreeNodeProps<T = DataType> {
11+
node: Node<T>;
1512
isRoot: boolean;
1613
render?: (
17-
props: renderProps,
14+
props: renderProps<T>,
1815
nodeItem: React.ReactNode,
1916
children: React.ReactNode
2017
) => React.ReactNode;
@@ -24,16 +21,16 @@ export interface TreeNodeState {
2421
isLoading: boolean;
2522
}
2623

27-
class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
24+
class TreeNode<T> extends React.Component<TreeNodeProps<T>, TreeNodeState> {
2825
static defaultProps = {
2926
node: {},
3027
isRoot: false,
3128
};
3229

3330
static contextType = TreeContext;
34-
context: ContextValue;
31+
context: ContextValue<T>;
3532

36-
constructor(props: TreeNodeProps, context: React.ContextType<typeof TreeContext>) {
33+
constructor(props: TreeNodeProps<T>, context: React.ContextType<typeof TreeContext>) {
3734
super(props, context);
3835

3936
this.state = {
@@ -49,7 +46,7 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
4946
return tree.props;
5047
}
5148

52-
getNodeList(list: Record<string, any>[]) {
49+
getNodeList(list: T[]) {
5350
const tree = this.getTree();
5451
const { node: pNode } = this.props;
5552
const options = this.getTreeProps();
@@ -119,7 +116,7 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
119116
const expanded = !leaf && node.isExpanded();
120117

121118
if (expanded && node.getDepth() >= maxDepth) {
122-
warning(false, `maximum depth: ${maxDepth}`);
119+
warning(false, `react-widget-tree-basic: maximum depth: ${maxDepth}`);
123120
return null;
124121
}
125122

0 commit comments

Comments
 (0)