Skip to content

Commit a10f17a

Browse files
phphephphe
committed
docs: examples
1 parent 8d789ed commit a10f17a

10 files changed

+365
-1
lines changed

‎docs/v1/api.md

+3
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@ The main function of this library. React hook. The arguments are as follows:
6161
|onDragEnd<a id="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.|
6262
|onExternalDrop<a id="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.|
6363

64+
### Return of `useHeTree`
65+
6466
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:
6567
| Name | Type | Description |
6668
| ------------------------- | ------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------|
@@ -76,6 +78,7 @@ The return of `useHeTree` is an object, including some states and methods. **Not
7678
|visibleIds<a id="visibleids"/>|Array|All visible nodes' id.|
7779
|attrsList<a id="attrslist"/>|Array|All visible nodes' attrs.|
7880
|virtualListRef<a id="virtuallistref"/>|`ref`| `ref` of virtual list component, Check [virtual list](https://github.com/phphe/react-base-virtual-list).|
81+
|scrollToNode<a id="scrolltonode"/>|`(idOrNodeOrStat)=>boolean`|Scroll to node. The argument can be id, node or stat. If node not found or invisible, it return `false`. [Example](examples#scroll_to_node2)|
7982

8083
## walkTreeDataGenerator
8184

‎docs/v1/examples.md

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# Examples
2+
3+
## Custom Style
4+
5+
<DemoIframe url="/custom_style" />
6+
**Source**
7+
8+
<<< @/../src/pages/custom_style.tsx
9+
10+
## Flat Data
11+
12+
<DemoIframe url="/base_flat_data" />
13+
**Source**
14+
15+
<<< @/../src/pages/base_flat_data.tsx
16+
17+
## Tree-shaped Data
18+
19+
<DemoIframe url="/base_tree_data" />
20+
**Source**
21+
22+
<<< @/../src/pages/base_tree_data.tsx
23+
24+
## Trigger Element
25+
26+
<DemoIframe url="/custom_drag_trigger_flat_data" />
27+
**Source**
28+
29+
<<< @/../src/pages/custom_drag_trigger_flat_data.tsx{14}
30+
31+
## Placeholder
32+
33+
<DemoIframe url="/customize_placeholder_and_node_box" />
34+
**Source**
35+
36+
<<< @/../src/pages/customize_placeholder_and_node_box.tsx{13-19,23-39}
37+
38+
## Open
39+
40+
<DemoIframe url="/open_ids" />
41+
**Source**
42+
43+
<<< @/../src/pages/open_ids.tsx{1,9-16,22-24,29-32}
44+
45+
## Checked
46+
47+
<DemoIframe url="/checked_ids" />
48+
**Source**
49+
50+
<<< @/../src/pages/checked_ids.tsx{1,9-15,21-23,28-29}
51+
52+
## Draggable & Droppable
53+
54+
<DemoIframe url="/draggable_droppable" />
55+
**Source**
56+
57+
<<< @/../src/pages/draggable_droppable.tsx{16-18}
58+
59+
## Open when drag onto
60+
61+
<DemoIframe url="/dragopen" />
62+
**Source**
63+
64+
<<< @/../src/pages/dragopen.tsx
65+
66+
## Update Flat Data
67+
68+
<DemoIframe url="/update_data" />
69+
**Source**
70+
71+
<<< @/../src/pages/update_data.tsx{3,12-22,33-34}
72+
73+
## Update Flat Data with immer
74+
75+
<DemoIframe url="/update_flat_data_with_immer" />
76+
**Source**
77+
78+
<<< @/../src/pages/update_flat_data_with_immer.tsx{3,7,12,13-31,42-44}
79+
80+
## Update Tree Data with immer
81+
82+
<DemoIframe url="/update_tree_data_with_immer" />
83+
**Source**
84+
85+
<<< @/../src/pages/update_tree_data_with_immer.tsx{1,4,10-30,41-43}
86+
87+
## Drag from External
88+
89+
<DemoIframe url="/external_drag" />
90+
**Source**
91+
92+
<<< @/../src/pages/external_drag.tsx{16-22,25}
93+
94+
## Big Data
95+
96+
<DemoIframe url="/virtual_list" />
97+
**Source**
98+
99+
<<< @/../src/pages/virtual_list.tsx{23,30}
100+
101+
## Scroll to Node<a id="scroll_to_node2"/>
102+
103+
<DemoIframe url="/scroll_to_node" />
104+
**Source**
105+
106+
<<< @/../src/pages/scroll_to_node.tsx{17,30}

‎docs/v1/guide.md

+1
Original file line numberDiff line numberDiff line change
@@ -264,3 +264,4 @@ In mobile, user need touch and hold to trigger drag.
264264
- Option [`customDragImage`](api#customdragimage): custom drag image.
265265
- Option [`rootId`](api#rootid): the parent id of root nodes in flat data.
266266
- Option [`keepPlaceholder`](api#keepplaceholder): whether to retain the drag placeholder node when dragging outside the tree. Default is `false`.
267+
- Function [`scrollToNode`](api#scrolltonode): Scroll to a node.

‎docs/zh/v1/api.md

+3
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@ const {/* return */} = useHeTree({/* options */}) // prettier-ignore
6161
|onDragEnd<a id="ondragend"/>|`(event, stat, isOutside)=>void`|当此树发起的拖拽结束时调用. stat 是此次拖拽的节点的 stat.isOutside 表示是否在树外部结束.|
6262
|onExternalDrop<a id="onexternaldrop"/>|`(event, parentStat, index)=>void`|当外部拖拽在此树结束时调用. parentStat 是目标父节点的 stat, 为空时代表树的根级. index 是目标位置, 即节点在兄弟节点中的索引.|
6363

64+
### `useHeTree`的返回
65+
6466
`useHeTree`的返回是对象, 包含了一些 states 和方法. **注意**, 这个对象每次更新都会改变, 不要依赖这个对象, 可以依赖这个对象的属性. 属性如下:
6567
| 名称 | 类型 | 描述 |
6668
| ------------------------- | ------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------|
@@ -76,6 +78,7 @@ const {/* return */} = useHeTree({/* options */}) // prettier-ignore
7678
|visibleIds<a id="visibleids"/>|数组|显示的所有节点的 id.|
7779
|attrsList<a id="attrslist"/>|数组|显示的所有节点的 attrs.|
7880
|virtualListRef<a id="virtuallistref"/>|`ref`|虚拟列表组件的 ref, 参考[虚拟列表](https://github.com/phphe/react-base-virtual-list).|
81+
|scrollToNode<a id="scrolltonode"/>|`(idOrNodeOrStat)=>boolean`|滚动到节点. 参数可以是 id, 节点数据或 stat. 如果节点未找到或未显示, 返回`false`. [例子](examples#scroll_to_node2)|
7982

8083
## walkTreeDataGenerator
8184

‎docs/zh/v1/examples.md

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# 示例
2+
3+
## 自定义样式
4+
5+
<DemoIframe url="/custom_style" />
6+
**源代码**
7+
8+
<<< @/../src/pages/custom_style.tsx
9+
10+
## 扁平数据
11+
12+
<DemoIframe url="/base_flat_data" />
13+
**源代码**
14+
15+
<<< @/../src/pages/base_flat_data.tsx
16+
17+
## 树形数据
18+
19+
<DemoIframe url="/base_tree_data" />
20+
**源代码**
21+
22+
<<< @/../src/pages/base_tree_data.tsx
23+
24+
## 触发元素
25+
26+
<DemoIframe url="/custom_drag_trigger_flat_data" />
27+
**源代码**
28+
29+
<<< @/../src/pages/custom_drag_trigger_flat_data.tsx{14}
30+
31+
## 占位元素
32+
33+
<DemoIframe url="/customize_placeholder_and_node_box" />
34+
**源代码**
35+
36+
<<< @/../src/pages/customize_placeholder_and_node_box.tsx{13-19,23-39}
37+
38+
## 展开
39+
40+
<DemoIframe url="/open_ids" />
41+
**源代码**
42+
43+
<<< @/../src/pages/open_ids.tsx{1,9-16,22-24,29-32}
44+
45+
## 勾选
46+
47+
<DemoIframe url="/checked_ids" />
48+
**源代码**
49+
50+
<<< @/../src/pages/checked_ids.tsx{1,9-15,21-23,28-29}
51+
52+
## 拖拽控制
53+
54+
<DemoIframe url="/draggable_droppable" />
55+
**源代码**
56+
57+
<<< @/../src/pages/draggable_droppable.tsx{16-18}
58+
59+
## 拖拽时打开
60+
61+
<DemoIframe url="/dragopen" />
62+
**源代码**
63+
64+
<<< @/../src/pages/dragopen.tsx
65+
66+
## 更新扁平数据
67+
68+
<DemoIframe url="/update_data" />
69+
**源代码**
70+
71+
<<< @/../src/pages/update_data.tsx{3,12-22,33-34}
72+
73+
## 更新扁平数据使用 immer
74+
75+
<DemoIframe url="/update_flat_data_with_immer" />
76+
**源代码**
77+
78+
<<< @/../src/pages/update_flat_data_with_immer.tsx{3,7,12,13-31,42-44}
79+
80+
## 更新树形数据使用 immer
81+
82+
<DemoIframe url="/update_tree_data_with_immer" />
83+
**源代码**
84+
85+
<<< @/../src/pages/update_tree_data_with_immer.tsx{1,4,10-30,41-43}
86+
87+
## 外部拖拽交互
88+
89+
<DemoIframe url="/external_drag" />
90+
**源代码**
91+
92+
<<< @/../src/pages/external_drag.tsx{16-22,25}
93+
94+
## 大数据, 虚拟列表
95+
96+
<DemoIframe url="/virtual_list" />
97+
**源代码**
98+
99+
<<< @/../src/pages/virtual_list.tsx{23,30}
100+
101+
## 滚动到节点<a id="scroll_to_node2"/>
102+
103+
<DemoIframe url="/scroll_to_node" />
104+
**源代码**
105+
106+
<<< @/../src/pages/scroll_to_node.tsx{17,30}

‎docs/zh/v1/guide.md

+1
Original file line numberDiff line numberDiff line change
@@ -266,3 +266,4 @@ yarn add immer use-immer
266266
- 选项 [`customDragImage`](api#customdragimage): 自定义 drag image.
267267
- 选项 [`rootId`](api#rootid): 使用扁平数据时, 顶级节点的父 id.
268268
- 选项 [`keepPlaceholder`](api#keepplaceholder): 拖拽到树外时, 是否要保留拖拽占位节点. 默认`false`.
269+
- 辅助方法 [`scrollToNode`](api#scrolltonode): 滚动到指定节点.

‎src/PageLayout.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@ export default function PageLayout(props: {}) {
6969
title: 'Scroll to Node',
7070
path: '/scroll_to_node',
7171
},
72+
{
73+
title: 'Custom Style',
74+
path: '/custom_style',
75+
},
7276
{
7377
title: 'Home',
7478
path: '/',

‎src/main.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const Pages = {
2424
external_drag: lazy(() => import("./pages/external_drag.tsx")),
2525
virtual_list: lazy(() => import("./pages/virtual_list.tsx")),
2626
scroll_to_node: lazy(() => import("./pages/scroll_to_node.tsx")),
27+
custom_style: lazy(() => import("./pages/custom_style.tsx")),
2728
}
2829
const router = createHashRouter([
2930
{
@@ -90,6 +91,10 @@ const router = createHashRouter([
9091
path: '/scroll_to_node',
9192
element: <Pages.scroll_to_node />
9293
},
94+
{
95+
path: '/custom_style',
96+
element: <Pages.custom_style />
97+
}
9398
]
9499
},
95100
]);

0 commit comments

Comments
 (0)