fix[pc-components]: 修改 DageTreeActions 中的 treeData 参数

packages/backend-cli/template/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @dage/backend-template
 
+## 1.0.15
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/pc-components@1.3.4
+
 ## 1.0.14
 
 ### Patch Changes

packages/backend-cli/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/backend-template",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^5.1.4",

packages/docs/docs/components/TreeActions/index.md

@@ -5,28 +5,27 @@
 ```tsx
 import React, { useState, Key } from "react";
 import { message } from "antd";
-import { DataNode } from "antd/es/tree";
-import { DageTreeActions } from "@dage/pc-components";
+import { DageTreeActions, DageTreeActionData } from "@dage/pc-components";
 
-let key = 0;
+let id = 4;
 
 export default () => {
   const [data, setData] = useState([
     {
-      title: "parent 1",
-      key: "0",
+      name: "parent 1",
+      id: 0,
       children: [
         {
-          title: "leaf 1",
-          key: "0-0",
+          name: "leaf 1",
+          id: 1,
         },
         {
-          title: "leaf 2",
-          key: "0-1",
+          name: "leaf 2",
+          id: 2,
           children: [
             {
-              title: "leaf 2-1",
-              key: "0-1-0",
+              name: "leaf 2-1",
+              id: 3,
             },
           ],
         },
@@ -34,11 +33,11 @@ export default () => {
     },
   ]);
 
-  const handleAddNode = async (item: DataNode, path: number[]) => {
+  const handleAddNode = async (item: DageTreeActionData, path: number[]) => {
     return new Promise((res) => {
       setTimeout(() => {
         const temp = [...data];
-        let _item: DataNode = temp;
+        let _item: DageTreeActionData = temp;
 
         while (path.length) {
           _item = _item[path.shift()];
@@ -50,14 +49,14 @@ export default () => {
         if (!_item.children) {
           _item.children = [
             {
-              title: "add leaf " + key,
-              key: "add-" + key++,
+              name: "add leaf " + id,
+              id: id++,
             },
           ];
         } else {
           _item.children.push({
-            title: "add leaf " + key,
-            key: "add-" + key++,
+            name: "add leaf " + id,
+            id: id++,
           });
         }
 
@@ -67,15 +66,15 @@ export default () => {
     });
   };
 
-  const handleEditNode = (item: DataNode, path: number[]) => {
+  const handleEditNode = (item: DageTreeActionData, path: number[]) => {
     message.info("编辑节点路径：" + JSON.stringify(path));
   };
 
-  const handleDeleteNode = (item: DataNode, path: number[]) => {
+  const handleDeleteNode = (item: DageTreeActionData, path: number[]) => {
     return new Promise((res) => {
       setTimeout(() => {
         const temp = [...data];
-        let _item: DataNode = temp;
+        let _item: DageTreeActionData = temp;
 
         while (path.length) {
           if (path.length === 1) {
@@ -120,16 +119,16 @@ export default () => {
 
 ### findNodeLevel 获取节点层级
 
-| Name      | Description | Type         | Default      |
-| --------- | ----------- | ------------ | ------------ |
-| nodes     | --          | `DataNode[]` | `(required)` |
-| targetKey | 目标 key    | `React.Key`  | `(required)` |
-| curLevel  | 当前层级    | `number`     | `--`         |
+| Name      | Description | Type                   | Default      |
+| --------- | ----------- | ---------------------- | ------------ |
+| nodes     | --          | `DageTreeActionData[]` | `(required)` |
+| targetKey | 目标 key    | `React.Key`            | `(required)` |
+| curLevel  | 当前层级    | `number`               | `--`         |
 
 ### findKeyPath 获取节点路径
 
-| Name      | Description | Type         | Default      |
-| --------- | ----------- | ------------ | ------------ |
-| nodes     | --          | `DataNode[]` | `(required)` |
-| targetKey | 目标 key    | `React.Key`  | `(required)` |
-| path      | 路径        | `number[]`   | `[]`         |
+| Name      | Description | Type                   | Default      |
+| --------- | ----------- | ---------------------- | ------------ |
+| nodes     | --          | `DageTreeActionData[]` | `(required)` |
+| targetKey | 目标 key    | `React.Key`            | `(required)` |
+| path      | 路径        | `number[]`             | `[]`         |

packages/docs/docs/log/PC-COMPONENTS_CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/pc-components
 
+## 1.3.4
+
+### Patch Changes
+
+- 修改 DageTreeActions 中的 treeData 参数
+
 ## 1.3.3
 
 ### Patch Changes

packages/pc-components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/pc-components
 
+## 1.3.4
+
+### Patch Changes
+
+- 修改 DageTreeActions 中的 treeData 参数
+
 ## 1.3.3
 
 ### Patch Changes

packages/pc-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/pc-components",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "PC 端组件库",
   "module": "dist/index.js",
   "main": "dist/index.js",

packages/pc-components/src/components/DageTreeActions/Title.tsx

@@ -1,8 +1,7 @@
 import { FC, useState } from "react";
 import { Button, Modal } from "antd";
-import { DataNode } from "antd/es/tree";
 import { ExclamationCircleFilled } from "@ant-design/icons";
-import { DageTreeTitleProps } from "./types";
+import { DageTreeActionData, DageTreeTitleProps } from "./types";
 import { TreeTitle } from "./style";
 import { findKeyPath, findNodeLevel } from "./utils";
 
@@ -19,46 +18,46 @@ export const DageTreeTitle: FC<DageTreeTitleProps> = ({
   const [addLoading, setAddLoading] = useState(false);
   const [editLoading, setEditLoading] = useState(false);
 
-  const handleAdd = async (data: DataNode) => {
+  const handleAdd = async (data: DageTreeActionData) => {
     try {
       setAddLoading(true);
-      await onAdd?.(data, findKeyPath(treeData, data.key)!);
+      await onAdd?.(data, findKeyPath(treeData, data.id)!);
     } finally {
       setAddLoading(false);
     }
   };
 
-  const handleEdit = async (data: DataNode) => {
+  const handleEdit = async (data: DageTreeActionData) => {
     try {
       setEditLoading(true);
-      await onEdit?.(data, findKeyPath(treeData, data.key)!);
+      await onEdit?.(data, findKeyPath(treeData, data.id)!);
     } finally {
       setEditLoading(false);
     }
   };
 
-  const handleDelete = (data: DataNode) => {
+  const handleDelete = (data: DageTreeActionData) => {
     confirm({
       title: `提示`,
       icon: <ExclamationCircleFilled />,
-      content: `确认是否删除 ${data.title} 节点`,
+      content: `确认是否删除 ${data.name} 节点`,
       okText: "确认",
       cancelText: "取消",
       onOk() {
-        return onDelete?.(data, findKeyPath(treeData, data.key)!);
+        return onDelete?.(data, findKeyPath(treeData, data.id)!);
       },
     });
   };
 
   return (
     <TreeTitle>
-      <p>{data.title as string}</p>
+      <p>{data.name as string}</p>
       <div
         className="dage-tree-title-toolbar"
         onClick={(e) => e.stopPropagation()}
       >
         {Boolean(onAdd) &&
-          (!maxLevel || findNodeLevel(treeData, data.key) < maxLevel) && (
+          (!maxLevel || findNodeLevel(treeData, data.id) < maxLevel) && (
             <Button
               type="link"
               size="small"

packages/pc-components/src/components/DageTreeActions/index.tsx

@@ -11,13 +11,19 @@ export const DageTreeActions: FC<DageTreeActionsProps> = ({
   ...props
 }) => {
   return (
+    // @ts-ignore
     <TreeActions
       blockNode
       defaultExpandAll
       virtual={false}
       {...props}
+      fieldNames={{
+        title: "name",
+        key: "id",
+      }}
       titleRender={(data) => (
         <DageTreeTitle
+          // @ts-ignore
           data={data}
           treeData={props.treeData}
           maxLevel={maxLevel}

packages/pc-components/src/components/DageTreeActions/types.ts

@@ -1,15 +1,21 @@
-import { DataNode, TreeProps } from "antd/es/tree";
+import { TreeProps } from "antd/es/tree";
+
+export type DageTreeActionData = {
+  id: number;
+  name: string;
+  children: DageTreeActionData[];
+};
 
 export interface DageTreeActionsProps
-  extends Omit<TreeProps, "titleRender" | "treeData"> {
+  extends Omit<TreeProps, "titleRender" | "treeData" | "fieldNames"> {
   /**
    * 最大层级，从0开始
    */
   maxLevel?: number;
-  treeData: DataNode[];
-  onAdd?: (item: DataNode, path: number[]) => void;
-  onEdit?: (item: DataNode, path: number[]) => void;
-  onDelete?: (item: DataNode, path: number[]) => void;
+  treeData: DageTreeActionData[];
+  onAdd?: (item: DageTreeActionData, path: number[]) => void;
+  onEdit?: (item: DageTreeActionData, path: number[]) => void;
+  onDelete?: (item: DageTreeActionData, path: number[]) => void;
 }
 
 export interface DageTreeTitleProps
@@ -17,5 +23,5 @@ export interface DageTreeTitleProps
     DageTreeActionsProps,
     "onAdd" | "onEdit" | "onDelete" | "maxLevel" | "treeData"
   > {
-  data: DataNode;
+  data: DageTreeActionData;
 }

packages/pc-components/src/components/DageTreeActions/utils.ts

@@ -1,13 +1,13 @@
 import { Key } from "react";
-import { DataNode } from "antd/es/tree";
+import { DageTreeActionData } from "./types";
 
 export const findNodeLevel = (
-  nodes: DataNode[],
+  nodes: DageTreeActionData[],
   targetKey: Key,
   curLevel = 0
 ): number => {
   for (let node of nodes) {
-    if (node.key === targetKey) {
+    if (node.id === targetKey) {
       return curLevel;
     }
     if (node.children) {
@@ -21,7 +21,7 @@ export const findNodeLevel = (
 };
 
 export const findKeyPath = (
-  nodes: DataNode[],
+  nodes: DageTreeActionData[],
   targetKey: Key,
   path: number[] = []
 ): number[] | null => {
@@ -29,7 +29,7 @@ export const findKeyPath = (
     const node = nodes[i];
     const currentPath = [...path, i];
 
-    if (node.key === targetKey) {
+    if (node.id === targetKey) {
       return currentPath;
     }