删除修改按钮

dashboard/src/components/article/EditableTreeNode.tsx

@@ -1,6 +1,6 @@
 import { Button, message, Space, Typography } from "antd";
 import { useState } from "react";
-import { PlusOutlined, EditOutlined } from "@ant-design/icons";
+import { PlusOutlined } from "@ant-design/icons";
 
 import { TreeNodeData } from "./EditableTree";
 const { Text } = Typography;
@@ -8,45 +8,33 @@ const { Text } = Typography;
 interface IWidget {
   node: TreeNodeData;
   onAdd?: Function;
-  onEdit?: Function;
   onTitleClick?: Function;
 }
-const EditableTreeNodeWidget = ({
-  node,
-  onAdd,
-  onEdit,
-  onTitleClick,
-}: IWidget) => {
+const EditableTreeNodeWidget = ({ node, onAdd, onTitleClick }: IWidget) => {
   const [showNodeMenu, setShowNodeMenu] = useState(false);
   const [loading, setLoading] = useState(false);
 
-  const title = node.deletedAt ? (
-    <Text delete disabled>
-      {node.title_text ? node.title_text : node.title}
-    </Text>
-  ) : (
-    <Text
-      onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-        if (typeof onTitleClick !== "undefined") {
-          onTitleClick(e);
-        }
-      }}
-    >
-      {node.title_text ? node.title_text : node.title}
-    </Text>
-  );
-  const menu = (
-    <Space style={{ visibility: showNodeMenu ? "visible" : "hidden" }}>
-      <Button
-        size="middle"
-        icon={<EditOutlined />}
-        type="text"
-        onClick={async () => {
-          if (typeof onEdit !== "undefined") {
-            onEdit();
+  const title = node.title_text ? node.title_text : node.title;
+
+  const TitleText = () =>
+    node.deletedAt ? (
+      <Text delete disabled>
+        {title}
+      </Text>
+    ) : (
+      <Text
+        onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          if (typeof onTitleClick !== "undefined") {
+            onTitleClick(e);
           }
         }}
-      />
+      >
+        {title}
+      </Text>
+    );
+
+  const Menu = () => (
+    <Space style={{ visibility: showNodeMenu ? "visible" : "hidden" }}>
       <Button
         loading={loading}
         size="middle"
@@ -65,13 +53,14 @@ const EditableTreeNodeWidget = ({
       />
     </Space>
   );
+
   return (
     <Space
       onMouseEnter={() => setShowNodeMenu(true)}
       onMouseLeave={() => setShowNodeMenu(false)}
     >
-      {title}
-      {menu}
+      <TitleText />
+      <Menu />
     </Space>
   );
 };