Skip to content

Commit 582d6bd

Browse files
committed
feat(catalogue): change method name and jsdoc
1 parent 3a9a535 commit 582d6bd

File tree

5 files changed

+57
-67
lines changed

5 files changed

+57
-67
lines changed

src/catalogue/demos/async.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from 'react';
22
import { Catalogue } from 'dt-react-component';
33
import { useTreeData } from 'dt-react-component/catalogue/useTreeData';
4-
import { addChildrenIntoNode } from 'dt-react-component/catalogue/utils';
4+
import { insertChildrenToNode } from 'dt-react-component/catalogue/utils';
55

66
interface DataNode {
77
title: string;
@@ -30,7 +30,7 @@ const App: React.FC = () => {
3030
return;
3131
}
3232
setTimeout(() => {
33-
const newData = addChildrenIntoNode(treeData.data, key, [
33+
const newData = insertChildrenToNode(treeData.data, key, [
3434
{ title: 'Child Node', key: `${key}-0` },
3535
{ title: 'Child Node', key: `${key}-1` },
3636
]);

src/catalogue/demos/config.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { cloneDeep } from 'lodash-es';
88
import shortid from 'shortid';
99

1010
import {
11-
addChildrenIntoNode,
1211
findNodeByKey,
1312
findParentNodeByKey,
13+
insertChildrenToNode,
1414
removeEditNode,
1515
removeNodeByKey,
1616
updateTreeNodeEdit,
@@ -83,7 +83,7 @@ export default () => {
8383

8484
const handleAdd = (key: ITreeNode<IData>['key']) => {
8585
const newExpandedKeys = treeData.expandedKeys ? [...treeData.expandedKeys] : [];
86-
const data = addChildrenIntoNode<IData>(treeData.data, key, [
86+
const data = insertChildrenToNode<IData>(treeData.data, key, [
8787
{
8888
key: 'new_',
8989
title: '',

src/catalogue/demos/drag.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { cloneDeep } from 'lodash-es';
88
import shortid from 'shortid';
99

1010
import {
11-
addChildrenIntoNode,
1211
findNodeByKey,
1312
findParentNodeByKey,
13+
insertChildrenToNode,
1414
removeEditNode,
1515
removeNodeByKey,
1616
updateTreeNodeEdit,
@@ -77,7 +77,7 @@ export default () => {
7777

7878
const handleAdd = (key: ITreeNode<IData>['key']) => {
7979
const newExpandedKeys = treeData.expandedKeys ? [...treeData.expandedKeys] : [];
80-
const data = addChildrenIntoNode<IData>(treeData.data, key, [
80+
const data = insertChildrenToNode<IData>(treeData.data, key, [
8181
{ key: 'new_', title: '', edit: true },
8282
]);
8383
if (!newExpandedKeys?.includes(key)) {

src/catalogue/demos/operator.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import { cloneDeep } from 'lodash-es';
77
import shortid from 'shortid';
88

99
import {
10-
addChildrenIntoNode,
1110
findNodeByKey,
1211
findParentNodeByKey,
12+
insertChildrenToNode,
1313
removeEditNode,
1414
removeNodeByKey,
1515
updateTreeNodeEdit,
@@ -130,7 +130,7 @@ export default () => {
130130

131131
const handleAdd = (key: ITreeNode<IData>['key']) => {
132132
const newExpandedKeys = treeData.expandedKeys ? [...treeData.expandedKeys] : [];
133-
const data = addChildrenIntoNode<IData>(treeData.data, key, [
133+
const data = insertChildrenToNode<IData>(treeData.data, key, [
134134
{ key: 'new_', title: '', edit: true },
135135
]);
136136
if (!newExpandedKeys?.includes(key)) {

src/catalogue/utils.tsx

Lines changed: 49 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import { FolderFilled, FolderOpenedFilled } from '@dtinsight/react-icons';
33

4-
import { CatalogueProps } from './components/catalogue';
54
import { ITreeNode } from './useTreeData';
65

76
export const getIcon: ITreeNode['icon'] = ({ selected, expanded }) => {
@@ -15,12 +14,10 @@ export const getIcon: ITreeNode['icon'] = ({ selected, expanded }) => {
1514
};
1615

1716
/**
18-
* @description 轮询 Tree 数据,赋值搜索标识和leafIcon
17+
* @description 轮询 data 数据,赋值搜索标识和leafIcon
1918
*/
20-
export const loopTree = <T extends Record<string, any>>(
21-
data: CatalogueProps<T>['treeData']
22-
): CatalogueProps<T>['treeData'] => {
23-
return data?.map((item) => {
19+
export const loopTree = <T extends Record<string, any>>(data: ITreeNode<T>[]): ITreeNode<T>[] =>
20+
data?.map((item) => {
2421
if (item.children) {
2522
return {
2623
icon: getIcon,
@@ -34,13 +31,12 @@ export const loopTree = <T extends Record<string, any>>(
3431
children: undefined,
3532
};
3633
});
37-
};
3834

3935
/**
40-
* 查找 key 对应的节点
41-
* @param data 遍历的数组
42-
* @param key 当前 key 值
43-
* @returns 找到的对应节点
36+
* @description 查找 key 对应的节点
37+
* @param {ITreeNode<U>[]} data - 遍历的数组
38+
* @param {ITreeNode<U>['key']} key - 当前 key 值
39+
* @returns {ITreeNode<U> | null}找到的对应节点
4440
*/
4541
export const findNodeByKey = <U,>(
4642
data: ITreeNode<U>[],
@@ -59,16 +55,16 @@ export const findNodeByKey = <U,>(
5955
};
6056

6157
/**
62-
* 更新 key 对应节点为编辑状态
63-
* @param data 遍历的数组
64-
* @param key 当前 key 值
65-
* @returns 更新之后 data
58+
* @description 更新 key 对应节点为编辑状态
59+
* @param {ITreeNode<U>[]} data - 遍历的数组
60+
* @param {ITreeNode<U>['key']} key - 当前 key 值
61+
* @returns {ITreeNode<U>[]} 更新之后 data
6662
*/
6763
export const updateTreeNodeEdit = <U,>(
6864
data: ITreeNode<U>[],
6965
key: ITreeNode<U>['key']
70-
): ITreeNode<U>[] => {
71-
return data.map((node) => {
66+
): ITreeNode<U>[] =>
67+
data.map((node) => {
7268
if (node.key === key) {
7369
return { ...node, edit: true };
7470
}
@@ -77,13 +73,12 @@ export const updateTreeNodeEdit = <U,>(
7773
}
7874
return node;
7975
});
80-
};
8176

8277
/**
83-
* 查找 key 对应的父级节点
84-
* @param data 遍历的数组
85-
* @param key 当前 key 值
86-
* @returns 当前找到父级节点
78+
* @description 查找 key 对应的父级节点
79+
* @param {ITreeNode<U>[]} data - 遍历的数组
80+
* @param {ITreeNode<U>['key']} key - 当前 key 值
81+
* @returns {ITreeNode<U> | null}当前找到父级节点
8782
*/
8883
export const findParentNodeByKey = <U extends { edit?: boolean }>(
8984
data: ITreeNode<U>[],
@@ -103,16 +98,16 @@ export const findParentNodeByKey = <U extends { edit?: boolean }>(
10398
};
10499

105100
/**
106-
* 移除 key 节点
107-
* @param data 遍历的数组
108-
* @param key 当前 key 值
109-
* @returns 删除数据之后的 data
101+
* @description 移除 key 节点
102+
* @param {ITreeNode<U>[]} data - 遍历的数组
103+
* @param {ITreeNode<U>['key']} key - 当前 key 值
104+
* @returns {ITreeNode<U>[]} 删除数据之后的 data
110105
*/
111106
export const removeNodeByKey = <U,>(
112107
data: ITreeNode<U>[],
113108
key: ITreeNode<U>['key']
114-
): ITreeNode<U>[] => {
115-
return data
109+
): ITreeNode<U>[] =>
110+
data
116111
.filter((node) => node.key !== key)
117112
.map((node) => {
118113
if (node.children) {
@@ -123,43 +118,41 @@ export const removeNodeByKey = <U,>(
123118
}
124119
return node;
125120
});
126-
};
127121

128122
/**
129-
* 移除 edit 为 true 的节点
130-
* @param treeData
131-
* @returns 移除之后的数据
123+
* @description 移除 edit 为 true 的节点
124+
* @param {ITreeNode<U>[]} treeData - 遍历的数组
125+
* @returns {ITreeNode<U>[]} 移除之后的数据
132126
*/
133127
export const removeEditNode = <U extends { edit?: boolean }>(
134128
treeData: ITreeNode<U>[]
135-
): ITreeNode<U>[] => {
136-
return treeData
129+
): ITreeNode<U>[] =>
130+
treeData
137131
.filter((node) => !node.edit)
138132
.map((node) => ({
139133
...node,
140134
children: node.children ? removeEditNode(node.children) : undefined,
141135
}));
142-
};
143136

144137
/**
145-
* 在指定节点的子节点列表中添加一组子节点,可以选择添加在开头或结尾
146-
* @param treeData 要操作的树节点数组
147-
* @param key 要添加子节点的目标节点 key
148-
* @param children 要添加的子节点数组
149-
* @param beforeKey 是否将子节点添加到现有子节点之前,true 表示添加到开头,false 表示添加到结尾
150-
* @returns 更新后的树节点数组
138+
* @description 在指定节点的子节点列表中添加一组子节点,可以选择添加在开头或结尾
139+
* @param {ITreeNode<U>[]} treeData - 要操作的树节点数组
140+
* @param {ITreeNode<U>['key']} key - 要添加子节点的目标节点 key
141+
* @param {ITreeNode<U>[]} children - 要添加的子节点数组
142+
* @param {boolean} [insertBefore=true] - 是否将子节点添加到现有子节点之前,true 表示添加到开头,false 表示添加到结尾
143+
* @returns {ITreeNode<U>[]} 更新后的树节点数组
151144
*/
152-
export const addChildrenIntoNode = <U extends { edit?: boolean }>(
145+
export const insertChildrenToNode = <U extends { edit?: boolean }>(
153146
treeData: ITreeNode<U>[],
154147
key: ITreeNode<U>['key'],
155148
children: ITreeNode<U>[],
156-
beforeKey = true
149+
insertBefore = true
157150
): ITreeNode<U>[] =>
158151
treeData.map((node) => {
159-
const updatedChildren = beforeKey
160-
? [...children, ...(node.children || [])]
161-
: [...(node.children || []), ...children];
162152
if (node.key === key) {
153+
const updatedChildren = insertBefore
154+
? [...children, ...(node.children || [])]
155+
: [...(node.children || []), ...children];
163156
return {
164157
...node,
165158
children: node.children ? updatedChildren : children,
@@ -168,44 +161,41 @@ export const addChildrenIntoNode = <U extends { edit?: boolean }>(
168161
if (node.children) {
169162
return {
170163
...node,
171-
children: addChildrenIntoNode(node.children, key, children, beforeKey),
164+
children: insertChildrenToNode(node.children, key, children, insertBefore),
172165
};
173166
}
174167
return node;
175168
});
176169

177170
/**
178171
* @description 在树节点数组中查找指定 key 的节点索引
179-
* @param 要搜索的树节点数组
180-
* @param 要查找的节点 key
181-
* @returns 找到的节点索引,如果未找到则返回 -1
172+
* @param {ITreeNode<U>[]} treeData - 要搜索的树节点数组
173+
* @param {ITreeNode<U>['key']} key - 要查找的节点 key
174+
* @returns {number} 找到的节点索引,如果未找到则返回 -1
182175
*/
183176
export const findChildIndex = <U extends { edit?: boolean }>(
184177
data: ITreeNode<U>[],
185178
key: ITreeNode<U>['key']
186-
): number => {
187-
const findIndex = data.findIndex((item) => item.key === key);
188-
return findIndex;
189-
};
179+
): number => data.findIndex((item) => item.key === key);
190180

191181
/**
192-
* 在树节点数组中,根据指定的 key 找到目标节点,并将新节点插入到目标节点之前或之后。
182+
* @description 在树节点数组中,根据指定的 key 找到目标节点,并将新节点插入到目标节点之前或之后。
193183
* @param {ITreeNode<U>[]} treeData - 要操作的树节点数组。
194184
* @param {ITreeNode<U>['key']} currentKey - 目标节点的 key。
195185
* @param {ITreeNode<U>} node - 要插入的新节点。
196-
* @param {boolean} [beforeKey=true] - 是否将新节点插入到目标节点之前。true 表示之前,false 表示之后。
186+
* @param {boolean} [insertBefore=true] - 是否将新节点插入到目标节点之前。true 表示之前,false 表示之后。
197187
* @returns {ITreeNode<U>[]} 更新后的树节点数组。
198188
*/
199189
export const insertNodeAtKey = <U extends { edit?: boolean }>(
200190
treeData: ITreeNode<U>[],
201191
currentKey: ITreeNode<U>['key'],
202192
node: ITreeNode<U>,
203-
beforeKey = true
193+
insertBefore = true
204194
): ITreeNode<U>[] => {
205195
const newTreeData: ITreeNode<U>[] = [];
206196
for (const item of treeData) {
207197
if (item.key === currentKey) {
208-
if (beforeKey) {
198+
if (insertBefore) {
209199
newTreeData.push(node);
210200
newTreeData.push(item);
211201
} else {
@@ -216,7 +206,7 @@ export const insertNodeAtKey = <U extends { edit?: boolean }>(
216206
newTreeData.push({
217207
...item,
218208
children: item.children
219-
? insertNodeAtKey(item.children, currentKey, node, beforeKey)
209+
? insertNodeAtKey(item.children, currentKey, node, insertBefore)
220210
: item.children,
221211
});
222212
}

0 commit comments

Comments
 (0)