feat(catalogue): remove some unuse icon

LuckyFBB · LuckyFBB · commit 1cb0c290575f · 2024-12-26T19:34:42.000+08:00
diff --git a/src/catalogue/components/catalogue.tsx b/src/catalogue/components/catalogue.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Dropdown, DropdownProps, Form, Input, Tabs } from 'antd';
-import { BlockHeader } from 'dt-react-component';
+import { BlockHeader, EllipsisText } from 'dt-react-component';
 import { IBlockHeaderProps } from 'dt-react-component/blockHeader';
 
 import { ITreeNode } from '../useTreeData';
@@ -74,7 +74,7 @@ const Catalogue = <U extends Record<string, any> = {}, T extends readOnlyTab = a
     const defaultTitleRender = (item: ITreeNode<U>) => {
         if (item.edit) {
             return (
-                <Form form={form} preserve={false}>
+                <Form form={form} preserve={false} className="tree__title--input">
                     <Form.Item name="catalog_input" initialValue={item?.title as string}>
                         <Input
                             size="small"
@@ -94,7 +94,9 @@ const Catalogue = <U extends Record<string, any> = {}, T extends readOnlyTab = a
         }
         return (
             <div className="tree__title">
-                <div className="tree__title--text">{item.title}</div>
+                <div className="tree__title--text">
+                    <EllipsisText value={item.title} watchParentSizeChange maxWidth="100%" />
+                </div>
                 {edit && renderNodeHover(item)}
             </div>
         );
@@ -161,7 +163,7 @@ const Catalogue = <U extends Record<string, any> = {}, T extends readOnlyTab = a
         return (
             <div
                 className="tree__title--operation"
-                onMouseDown={(e) => {
+                onClick={(e) => {
                     e.stopPropagation();
                 }}
             >
diff --git a/src/catalogue/components/icon.tsx b/src/catalogue/components/icon.tsx
@@ -103,68 +103,6 @@ const CatalogIcon = function ({ className, ...rest }: IIcon) {
     );
 };
 
-const PlusSquareIcon = function ({ className, ...rest }: IIcon) {
-    return (
-        <span className={classNames('dt-catalogue__icon', className)} {...rest}>
-            <svg
-                width="1em"
-                height="1em"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M14.4001 2.6001C14.4001 2.04781 13.9524 1.6001 13.4001 1.6001H2.6001C2.04781 1.6001 1.6001 2.04781 1.6001 2.6001V13.4001C1.6001 13.9524 2.04781 14.4001 2.6001 14.4001H13.4001C13.9524 14.4001 14.4001 13.9524 14.4001 13.4001V2.6001ZM2.60002 2.40002H13.4C13.5105 2.40002 13.6 2.48957 13.6 2.60002V13.4C13.6 13.5105 13.5105 13.6 13.4 13.6H2.60002C2.48957 13.6 2.40002 13.5105 2.40002 13.4V2.60002C2.40002 2.48957 2.48957 2.40002 2.60002 2.40002ZM10.8234 7.62134C11.0305 7.62134 11.1984 7.80042 11.1984 8.02134C11.1984 8.22926 11.0496 8.40012 10.8595 8.41951L10.8234 8.42134H8.3999L8.39986 10.8926C8.39985 11.0997 8.22079 11.2676 7.99991 11.2676C7.79202 11.2676 7.62118 11.1188 7.60181 10.9287L7.59998 10.8926L7.60002 8.42134H5.11072C4.90361 8.42134 4.73572 8.24225 4.73572 8.02134C4.73572 7.81342 4.88444 7.64255 5.0746 7.62317L5.11072 7.62134H7.60004L7.60009 5.16381C7.60009 4.95671 7.77915 4.78882 8.00004 4.78882C8.20792 4.78882 8.37876 4.93755 8.39814 5.12771L8.39997 5.16382L8.39992 7.62134H10.8234Z"
-                />
-            </svg>
-        </span>
-    );
-};
-
-const MenuFoldIcon = function ({ className, ...rest }: IIcon) {
-    return (
-        <span className={classNames('dt-catalogue__icon', className)} {...rest}>
-            <svg
-                width="1em"
-                height="1em"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M2.75 2.875C2.47386 2.875 2.25 3.09886 2.25 3.375C2.25 3.63859 2.45397 3.85454 2.71268 3.87363L2.75 3.875H13.25C13.5261 3.875 13.75 3.65114 13.75 3.375C13.75 3.11141 13.546 2.89546 13.2873 2.87637L13.25 2.875H2.75ZM7.75 7.625C7.47386 7.625 7.25 7.84886 7.25 8.125C7.25 8.38859 7.45397 8.60454 7.71268 8.62363L7.75 8.625H13.25C13.5261 8.625 13.75 8.40114 13.75 8.125C13.75 7.86141 13.546 7.64546 13.2873 7.62637L13.25 7.625H7.75ZM2.75 12.375C2.47386 12.375 2.25 12.5989 2.25 12.875C2.25 13.1386 2.45397 13.3545 2.71268 13.3736L2.75 13.375H13.25C13.5261 13.375 13.75 13.1511 13.75 12.875C13.75 12.6114 13.546 12.3955 13.2873 12.3764L13.25 12.375H2.75ZM5.75 5.625V10.625L2.5 8.07579L5.75 5.625Z"
-                />
-            </svg>
-        </span>
-    );
-};
-
-const MenuUnFoldIcon = function ({ className, ...rest }: IIcon) {
-    return (
-        <span className={classNames('dt-catalogue__icon', className)} {...rest}>
-            <svg
-                width="1em"
-                height="1em"
-                viewBox="0 0 64 64"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <g>
-                    <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M55 13.5C55 12.3954 54.1046 11.5 53 11.5H11L10.8507 11.5055C9.81588 11.5818 9 12.4456 9 13.5C9 14.6046 9.89543 15.5 11 15.5H53L53.1493 15.4945C54.1841 15.4182 55 14.5544 55 13.5ZM35 32.5C35 31.3954 34.1046 30.5 33 30.5H11L10.8507 30.5055C9.81588 30.5818 9 31.4456 9 32.5C9 33.6046 9.89543 34.5 11 34.5H33L33.1493 34.4945C34.1841 34.4182 35 33.5544 35 32.5ZM53 49.5C54.1046 49.5 55 50.3954 55 51.5C55 52.5544 54.1841 53.4182 53.1493 53.4945L53 53.5H11C9.89543 53.5 9 52.6046 9 51.5C9 50.4456 9.81588 49.5818 10.8507 49.5055L11 49.5H53ZM54 32.3032L41 42.5V22.5L54 32.3032Z"
-                    />
-                </g>
-            </svg>
-        </span>
-    );
-};
-
 const DragIcon = function ({ className, ...rest }: IIcon) {
     return (
         <span className={classNames('dt-catalogue__icon', className)} {...rest}>
@@ -209,71 +147,6 @@ const EllipsisIcon = function ({ className, ...rest }: IIcon) {
     );
 };
 
-const EditIcon = function ({ className, ...rest }: IIcon) {
-    return (
-        <span className={classNames('dt-catalogue__icon', className)} {...rest}>
-            <svg
-                width="1em"
-                height="1em"
-                viewBox="0 0 64 64"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <g>
-                    <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M40.8452 6.58663L13.2518 34.2132C12.8772 34.5882 12.6668 35.0965 12.6668 35.6265V45.3333C12.6668 46.4379 13.5623 47.3333 14.6668 47.3333H24.4231C24.9537 47.3333 25.4625 47.1225 25.8376 46.7472L53.4147 19.158C54.1953 18.3771 54.1953 17.1112 53.4147 16.3302L43.6748 6.5861C42.8935 5.80442 41.6263 5.80467 40.8452 6.58663ZM42.2605 10.829L49.1725 17.744L23.5945 43.333H16.6665V36.453L42.2605 10.829ZM56.7963 56C56.7963 54.8954 55.9008 54 54.7963 54H9.3335L9.18423 54.0055C8.14937 54.0818 7.3335 54.9456 7.3335 56C7.3335 57.1046 8.22893 58 9.3335 58H54.7963L54.9455 57.9945C55.9804 57.9182 56.7963 57.0544 56.7963 56Z"
-                    />
-                </g>
-            </svg>
-        </span>
-    );
-};
-
-const DeleteIcon = function ({ className, ...rest }: IIcon) {
-    return (
-        <span className={classNames('dt-catalogue__icon', className)} {...rest}>
-            <svg
-                width="1em"
-                height="1em"
-                viewBox="0 0 64 64"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <g>
-                    <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M42 12C42 9.79086 40.2091 8 38 8H26C23.7909 8 22 9.79086 22 12V16H16H7C5.89543 16 5 16.8954 5 18C5 19.1046 5.89543 20 7 20H12V52C12 54.2091 13.7909 56 16 56H48C50.2091 56 52 54.2091 52 52V20H57C58.1046 20 59 19.1046 59 18C59 16.8954 58.1046 16 57 16H48H42V12ZM38 16V12H26V16H38ZM48 20H38H26H16V52H48V20ZM24 28C24 26.8954 24.8954 26 26 26C27.1046 26 28 26.8954 28 28V44C28 45.1046 27.1046 46 26 46C24.8954 46 24 45.1046 24 44V28ZM38 26C36.8954 26 36 26.8954 36 28V44C36 45.1046 36.8954 46 38 46C39.1046 46 40 45.1046 40 44V28C40 26.8954 39.1046 26 38 26Z"
-                    />
-                </g>
-            </svg>
-        </span>
-    );
-};
-const PlusCircleIcon = function ({ className, ...rest }: IIcon) {
-    return (
-        <span className={classNames('dt-catalogue__icon', className)} {...rest}>
-            <svg
-                width="1em"
-                height="1em"
-                viewBox="0 0 64 64"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <g>
-                    <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M32 5C46.9117 5 59 17.0883 59 32C59 46.9117 46.9117 59 32 59C17.0883 59 5 46.9117 5 32C5 17.0883 17.0883 5 32 5ZM32 9C19.2975 9 9 19.2975 9 32C9 44.7025 19.2975 55 32 55C44.7025 55 55 44.7025 55 32C55 19.2975 44.7025 9 32 9ZM32 16C33.1046 16 34 16.8954 34 18V30H46C47.1046 30 48 30.8954 48 32C48 33.1046 47.1046 34 46 34H34V46C34 47.1046 33.1046 48 32 48C30.8954 48 30 47.1046 30 46V34H18C16.8954 34 16 33.1046 16 32C16 30.8954 16.8954 30 18 30H30V18C30 16.8954 30.8954 16 32 16Z"
-                    />
-                </g>
-            </svg>
-        </span>
-    );
-};
-
 const SearchIcon = function ({ className, ...rest }: IIcon) {
     return (
         <span className={classNames('dt-catalogue__icon', className)} {...rest}>
@@ -319,16 +192,10 @@ const CloseIcon = function ({ className, ...rest }: IIcon) {
 export {
     CatalogIcon,
     CloseIcon,
-    DeleteIcon,
     DownTriangleIcon,
     DragIcon,
-    EditIcon,
     EllipsisIcon,
     FolderIcon,
     FolderOpenedIcon,
-    MenuFoldIcon,
-    MenuUnFoldIcon,
-    PlusCircleIcon,
-    PlusSquareIcon,
     SearchIcon,
 };
diff --git a/src/catalogue/demos/config.tsx b/src/catalogue/demos/config.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react';
+import { DeleteOutlined, EditOutlined, PlusSquareOutlined } from '@ant-design/icons';
 import { Menu } from 'antd';
 import { Catalogue, EllipsisText } from 'dt-react-component';
 import { cloneDeep } from 'lodash';
 import shortid from 'shortid';
 
 import { CatalogueProps } from '../components/catalogue';
-import { DeleteIcon, EditIcon, PlusCircleIcon, PlusSquareIcon } from '../components/icon';
 import {
     appendNodeByKey,
     findNodeByKey,
@@ -211,7 +211,7 @@ export default () => {
             <Catalogue
                 tooltip="嘿嘿，这是tooltip"
                 addonAfter={
-                    <PlusSquareIcon
+                    <PlusSquareOutlined
                         style={{ cursor: 'pointer' }}
                         onClick={() =>
                             treeData.onChange([
@@ -237,7 +237,7 @@ export default () => {
                                 disabled={!addable}
                                 onClick={() => addable && handleAdd(item.key)}
                             >
-                                <PlusCircleIcon />
+                                <PlusSquareOutlined />
                                 <span>新建目录</span>
                             </Menu.Item>
                             <Menu.Item
@@ -246,7 +246,7 @@ export default () => {
                                 disabled={!editable}
                                 onClick={() => editable && handleEdit(item.key)}
                             >
-                                <EditIcon />
+                                <EditOutlined />
                                 <span>编辑</span>
                             </Menu.Item>
                             <Menu.Item
@@ -255,7 +255,7 @@ export default () => {
                                 disabled={!deletable}
                                 onClick={() => deletable && handleDelete(item)}
                             >
-                                <DeleteIcon />
+                                <DeleteOutlined />
                                 <span>删除</span>
                             </Menu.Item>
                         </Menu>
diff --git a/src/catalogue/demos/drag.tsx b/src/catalogue/demos/drag.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react';
+import { DeleteOutlined, EditOutlined, PlusSquareOutlined } from '@ant-design/icons';
 import { Menu } from 'antd';
 import { Catalogue } from 'dt-react-component';
 import { cloneDeep } from 'lodash';
 import shortid from 'shortid';
 
 import { CatalogueProps } from '../components/catalogue';
-import { DeleteIcon, EditIcon, PlusCircleIcon, PlusSquareIcon } from '../components/icon';
 import {
     appendNodeByKey,
     findNodeByKey,
@@ -200,7 +200,7 @@ export default () => {
             <Catalogue
                 tooltip="嘿嘿，这是tooltip"
                 addonAfter={
-                    <PlusSquareIcon
+                    <PlusSquareOutlined
                         style={{ cursor: 'pointer' }}
                         onClick={() =>
                             treeData.onChange([
@@ -226,7 +226,7 @@ export default () => {
                                 disabled={!addable}
                                 onClick={() => addable && handleAdd(item.key)}
                             >
-                                <PlusCircleIcon />
+                                <PlusSquareOutlined />
                                 <span>新建目录</span>
                             </Menu.Item>
                             <Menu.Item
@@ -235,7 +235,7 @@ export default () => {
                                 disabled={!editable}
                                 onClick={() => editable && handleEdit(item.key)}
                             >
-                                <EditIcon />
+                                <EditOutlined />
                                 <span>编辑</span>
                             </Menu.Item>
                             <Menu.Item
@@ -244,7 +244,7 @@ export default () => {
                                 disabled={!deletable}
                                 onClick={() => deletable && handleDelete(item)}
                             >
-                                <DeleteIcon />
+                                <DeleteOutlined />
                                 <span>删除</span>
                             </Menu.Item>
                         </Menu>
diff --git a/src/catalogue/demos/operator.tsx b/src/catalogue/demos/operator.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
+import { DeleteOutlined, EditOutlined, PlusSquareOutlined } from '@ant-design/icons';
 import { Menu } from 'antd';
 import { Catalogue } from 'dt-react-component';
 import { cloneDeep } from 'lodash';
 import shortid from 'shortid';
 
-import { DeleteIcon, EditIcon, PlusCircleIcon, PlusSquareIcon } from '../components/icon';
 import {
     appendNodeByKey,
     findNodeByKey,
@@ -200,7 +200,7 @@ export default () => {
             <Catalogue<IData, any>
                 tooltip="嘿嘿，这是tooltip"
                 addonAfter={
-                    <PlusSquareIcon
+                    <PlusSquareOutlined
                         style={{ cursor: 'pointer' }}
                         onClick={() =>
                             treeData.onChange([
@@ -224,7 +224,7 @@ export default () => {
                                 disabled={!addable}
                                 onClick={() => addable && handleAdd(item.key)}
                             >
-                                <PlusCircleIcon />
+                                <PlusSquareOutlined />
                                 <span>新建目录</span>
                             </Menu.Item>
                             <Menu.Item
@@ -233,7 +233,7 @@ export default () => {
                                 disabled={!editable}
                                 onClick={() => editable && handleEdit(item.key)}
                             >
-                                <EditIcon />
+                                <EditOutlined />
                                 <span>编辑</span>
                             </Menu.Item>
                             <Menu.Item
@@ -242,7 +242,7 @@ export default () => {
                                 disabled={!deletable}
                                 onClick={() => deletable && handleDelete(item)}
                             >
-                                <DeleteIcon />
+                                <DeleteOutlined />
                                 <span>删除</span>
                             </Menu.Item>
                         </Menu>
diff --git a/src/catalogue/index.scss b/src/catalogue/index.scss
@@ -107,7 +107,7 @@
         .ant-tree {
             height: 100%;
             .ant-tree-treenode-leaf-last .ant-tree-switcher-leaf-line::before {
-                height: 100% !important;
+                height: 50% !important;
             }
             .ant-tree-node-content-wrapper.ant-tree-node-selected {
                 background: none;

Original file line number	Diff line number	Diff line change
`@@ -107,7 +107,7 @@`
`107`	`107`	`.ant-tree {`
`108`	`108`	`height: 100%;`
`109`	`109`	`.ant-tree-treenode-leaf-last .ant-tree-switcher-leaf-line::before {`
`110`		`- height: 100% !important;`
	`110`	`+ height: 50% !important;`
`111`	`111`	`}`
`112`	`112`	`.ant-tree-node-content-wrapper.ant-tree-node-selected {`
`113`	`113`	`background: none;`