Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/catalogue/demos/async.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import { Catalogue } from 'dt-react-component';
import { useTreeData } from 'dt-react-component/catalogue/useTreeData';
import { insertChildIntoNode } from 'dt-react-component/catalogue/utils';
import { addChildrenIntoNode } from 'dt-react-component/catalogue/utils';

interface DataNode {
title: string;
Expand Down Expand Up @@ -30,7 +30,7 @@ const App: React.FC = () => {
return;
}
setTimeout(() => {
const newData = insertChildIntoNode(treeData.data, key, [
const newData = addChildrenIntoNode(treeData.data, key, [
{ title: 'Child Node', key: `${key}-0` },
{ title: 'Child Node', key: `${key}-1` },
]);
Expand Down
10 changes: 8 additions & 2 deletions src/catalogue/demos/config.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { cloneDeep } from 'lodash-es';
import shortid from 'shortid';

import {
appendNodeByKey,
addChildrenIntoNode,
findNodeByKey,
findParentNodeByKey,
removeEditNode,
Expand Down Expand Up @@ -83,7 +83,13 @@ export default () => {

const handleAdd = (key: ITreeNode<IData>['key']) => {
const newExpandedKeys = treeData.expandedKeys ? [...treeData.expandedKeys] : [];
const data = appendNodeByKey<IData>(treeData.data, key);
const data = addChildrenIntoNode<IData>(treeData.data, key, [
{
key: 'new_',
title: '',
edit: true,
},
]);
if (!newExpandedKeys?.includes(key)) {
newExpandedKeys.push(key);
}
Expand Down
6 changes: 4 additions & 2 deletions src/catalogue/demos/drag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { cloneDeep } from 'lodash-es';
import shortid from 'shortid';

import {
appendNodeByKey,
addChildrenIntoNode,
findNodeByKey,
findParentNodeByKey,
removeEditNode,
Expand Down Expand Up @@ -77,7 +77,9 @@ export default () => {

const handleAdd = (key: ITreeNode<IData>['key']) => {
const newExpandedKeys = treeData.expandedKeys ? [...treeData.expandedKeys] : [];
const data = appendNodeByKey<IData>(treeData.data, key);
const data = addChildrenIntoNode<IData>(treeData.data, key, [
{ key: 'new_', title: '', edit: true },
]);
if (!newExpandedKeys?.includes(key)) {
newExpandedKeys.push(key);
}
Expand Down
6 changes: 4 additions & 2 deletions src/catalogue/demos/operator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { cloneDeep } from 'lodash-es';
import shortid from 'shortid';

import {
appendNodeByKey,
addChildrenIntoNode,
findNodeByKey,
findParentNodeByKey,
removeEditNode,
Expand Down Expand Up @@ -130,7 +130,9 @@ export default () => {

const handleAdd = (key: ITreeNode<IData>['key']) => {
const newExpandedKeys = treeData.expandedKeys ? [...treeData.expandedKeys] : [];
const data = appendNodeByKey<IData>(treeData.data, key);
const data = addChildrenIntoNode<IData>(treeData.data, key, [
{ key: 'new_', title: '', edit: true },
]);
if (!newExpandedKeys?.includes(key)) {
newExpandedKeys.push(key);
}
Expand Down
96 changes: 65 additions & 31 deletions src/catalogue/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -102,29 +102,6 @@ export const findParentNodeByKey = <U extends { edit?: boolean }>(
return null;
};

/**
* 在 key 节点中添加子节点
* @param data 遍历的数组
* @param key 当前 key 值
* @returns 插入新数据之后的 data
*/
export const appendNodeByKey = <U extends { edit?: boolean }>(
data: ITreeNode<U>[],
key: ITreeNode<U>['key']
): ITreeNode<U>[] => {
const newNode = { key: 'new_', title: '', edit: true };
return data.map((node) => {
if (node.key === key) {
const updatedChildren = node.children ? [...node.children, newNode] : [newNode];
return { ...node, children: updatedChildren };
}
if (node.children) {
return { ...node, children: appendNodeByKey(node.children, key) };
}
return node;
});
};

/**
* 移除 key 节点
* @param data 遍历的数组
Expand Down Expand Up @@ -165,27 +142,84 @@ export const removeEditNode = <U extends { edit?: boolean }>(
};

/**
*
* 在指定节点的子节点列表中添加一组子节点,可以选择添加在开头或结尾
* @param treeData 要操作的树节点数组
* @param key 要添加子节点的目标节点 key
* @param children 要添加的子节点数组
* @param beforeKey 是否将子节点添加到现有子节点之前,true 表示添加到开头,false 表示添加到结尾
* @returns 更新后的树节点数组
*/

export const insertChildIntoNode = <U extends { edit?: boolean }>(
export const addChildrenIntoNode = <U extends { edit?: boolean }>(
treeData: ITreeNode<U>[],
key: ITreeNode<U>['key'],
children: ITreeNode<U>[]
): ITreeNode<U>[] => {
return treeData.map((node) => {
children: ITreeNode<U>[],
beforeKey = true
): ITreeNode<U>[] =>
treeData.map((node) => {
const updatedChildren = beforeKey
? [...children, ...(node.children || [])]
: [...(node.children || []), ...children];
if (node.key === key) {
return {
...node,
children,
children: node.children ? updatedChildren : children,
};
}
if (node.children) {
return {
...node,
children: insertChildIntoNode(node.children, key, children),
children: addChildrenIntoNode(node.children, key, children, beforeKey),
};
}
return node;
});

/**
* @description 在树节点数组中查找指定 key 的节点索引
* @param 要搜索的树节点数组
* @param 要查找的节点 key
* @returns 找到的节点索引,如果未找到则返回 -1
*/
export const findChildIndex = <U extends { edit?: boolean }>(
data: ITreeNode<U>[],
key: ITreeNode<U>['key']
): number => {
const findIndex = data.findIndex((item) => item.key === key);
return findIndex;
};

/**
* 在树节点数组中,根据指定的 key 找到目标节点,并将新节点插入到目标节点之前或之后。
* @param {ITreeNode<U>[]} treeData - 要操作的树节点数组。
* @param {ITreeNode<U>['key']} currentKey - 目标节点的 key。
* @param {ITreeNode<U>} node - 要插入的新节点。
* @param {boolean} [beforeKey=true] - 是否将新节点插入到目标节点之前。true 表示之前,false 表示之后。
* @returns {ITreeNode<U>[]} 更新后的树节点数组。
*/
export const insertNodeAtKey = <U extends { edit?: boolean }>(
treeData: ITreeNode<U>[],
currentKey: ITreeNode<U>['key'],
node: ITreeNode<U>,
beforeKey = true
): ITreeNode<U>[] => {
const newTreeData: ITreeNode<U>[] = [];
for (const item of treeData) {
if (item.key === currentKey) {
if (beforeKey) {
newTreeData.push(node);
newTreeData.push(item);
} else {
newTreeData.push(item);
newTreeData.push(node);
}
} else {
newTreeData.push({
...item,
children: item.children
? insertNodeAtKey(item.children, currentKey, node, beforeKey)
: item.children,
});
}
}
return newTreeData;
};
Loading