feat(catalogue): change catalogue and add examples

Author: LuckyFBB

src/catalogue/components/catalogue.tsx

@@ -9,23 +9,21 @@ import { CatalogIcon, DeleteIcon, DragIcon, EditIcon, EllipsisIcon, PlusCircleIc
 import CatalogueTree, { ICatalogueTree } from './tree';
 
 interface ICatalogue
-    extends Pick<IBlockHeaderProps, 'tooltip' | 'addonAfter'>,
-        Partial<Pick<ReturnType<typeof useTreeData>, 'onChange'>>,
+    extends Pick<IBlockHeaderProps, 'tooltip' | 'addonAfter' | 'addonBefore' | 'title'>,
+        Pick<ReturnType<typeof useTreeData>, 'onChange'>,
         ICatalogueTree {
-    icon?: React.ReactNode;
-    title?: string;
     showSearch?: boolean;
     edit?: boolean;
     placeholder?: string;
     loading?: boolean;
     onSearch?: (value: string) => void;
-    onSave?: (data: ITreeNode, value: string) => Promise<void>;
-    onDelete?: (data: ITreeNode) => Promise<void>;
+    onSave?: (data: ITreeNode, value: string) => void;
+    onDelete?: (data: ITreeNode) => void;
 }
 
 const Catalogue = ({
     title,
-    icon = <CatalogIcon style={{ fontSize: 20 }} />,
+    addonBefore = <CatalogIcon style={{ fontSize: 20 }} />,
     tooltip = false,
     showSearch = false,
     placeholder = '搜索目录名称',
@@ -43,18 +41,24 @@ const Catalogue = ({
 }: ICatalogue) => {
     const [form] = Form.useForm();
 
-    const loopTree = (data: DataNode[]): DataNode[] => {
+    const loopTree = (data: ITreeNode[]): ITreeNode[] => {
         return data?.map((item) => {
+            const reset: ITreeNode = {
+                ...item,
+                editable: item?.editable === undefined ? true : item?.editable,
+                addable: item?.addable === undefined ? true : item?.addable,
+                deletable: item?.deletable === undefined ? true : item?.deletable,
+            };
             if (item.children) {
                 return {
-                    ...item,
-                    title: renderTitle(item),
+                    ...reset,
+                    title: renderTitle(reset),
                     children: loopTree(item.children),
                 };
             }
             return {
-                ...item,
-                title: renderTitle(item),
+                ...reset,
+                title: renderTitle(reset),
                 children: undefined,
             };
         });
@@ -67,7 +71,7 @@ const Catalogue = ({
                 title={title}
                 tooltip={tooltip}
                 background={false}
-                addonBefore={icon}
+                addonBefore={addonBefore}
                 addonAfter={addonAfter}
                 spaceBottom={12}
             />
@@ -165,7 +169,7 @@ const Catalogue = ({
         );
     };
 
-    const renderNodeHover = (item: DataNode) => {
+    const renderNodeHover = (item: ITreeNode) => {
         const menu = (
             <Menu
                 className="tree__title--menu"
@@ -176,23 +180,26 @@ const Catalogue = ({
                 <Menu.Item
                     key="add"
                     className="title__menu--item"
-                    onClick={() => onChange?.(item, InputStatus.Append)}
+                    disabled={!item.addable}
+                    onClick={() => item.addable && onChange?.(item, InputStatus.Append)}
                 >
                     <PlusCircleIcon />
                     <span>新建目录</span>
                 </Menu.Item>
                 <Menu.Item
                     key="edit"
                     className="title__menu--item"
-                    onClick={() => onChange?.(item, InputStatus.Edit)}
+                    disabled={!item.editable}
+                    onClick={() => item.editable && onChange?.(item, InputStatus.Edit)}
                 >
                     <EditIcon />
                     <span>编辑</span>
                 </Menu.Item>
                 <Menu.Item
                     key="delete"
                     className="title__menu--item"
-                    onClick={() => onDelete?.(item)}
+                    disabled={!item.deletable}
+                    onClick={() => item.deletable && onDelete?.(item)}
                 >
                     <DeleteIcon />
                     <span>删除</span>
@@ -204,19 +211,19 @@ const Catalogue = ({
                 className="tree__title--operation"
                 onMouseDown={(e) => {
                     e.stopPropagation();
-                    // this.setState({ isSelected: false, draggable: false });
                 }}
             >
                 <Dropdown
                     overlay={menu}
                     trigger={['click']}
                     placement="bottomRight"
                     arrow
-                    getPopupContainer={(triggerNode) => triggerNode.parentElement}
+                    destroyPopupOnHide
+                    getPopupContainer={(triggerNode) => triggerNode.parentElement as HTMLElement}
                 >
                     <EllipsisIcon onClick={(e) => e.stopPropagation()} />
                 </Dropdown>
-                <DragIcon />
+                {draggable && <DragIcon />}
             </div>
         );
     };

src/catalogue/components/icon.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 interface IIcon {
     className?: string;
     style?: React.CSSProperties;
-    onClick?: (e) => void;
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
 }
 
 const FolderIcon = function ({ className, ...rest }: IIcon) {

src/catalogue/components/tree.tsx

@@ -1,4 +1,4 @@
-import React, { Key, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Tree, TreeProps } from 'antd';
 
 import { ITreeNode } from '../useTreeData';
@@ -10,10 +10,10 @@ export interface ICatalogueTree
     treeData: ITreeNode[];
 }
 
-const CatalogueTree = ({ treeData, onExpand, ...rest }: ICatalogueTree) => {
+const CatalogueTree = ({ treeData = [], onExpand, ...rest }: ICatalogueTree) => {
     const renderTreeData = useMemo(() => loopTree(treeData), [treeData]);
 
-    const handleExpand = (expandedKeys: Key[], info) => {
+    const handleExpand: TreeProps['onExpand'] = (expandedKeys, info) => {
         onExpand?.(expandedKeys, info);
     };
 

src/catalogue/demos/basic.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect } from 'react';
+
+import { useTreeData } from '../useTreeData';
+import Catalogue from '..';
+
+const DEFAULT_DATA = [
+    {
+        title: '0-0',
+        key: '0-0',
+        children: [
+            {
+                title: '0-0-0',
+                key: '0-0-0',
+                children: [
+                    { title: '0-0-0-0', key: '0-0-0-0' },
+                    { title: '0-0-0-1', key: '0-0-0-1' },
+                    { title: '0-0-0-2', key: '0-0-0-2' },
+                ],
+            },
+            {
+                title: '0-0-1',
+                key: '0-0-1',
+                children: [
+                    { title: '0-0-1-0', key: '0-0-1-0' },
+                    { title: '0-0-1-1', key: '0-0-1-1' },
+                    { title: '0-0-1-2', key: '0-0-1-2' },
+                ],
+            },
+            {
+                title: '0-0-2',
+                key: '0-0-2',
+            },
+        ],
+    },
+    {
+        title: '0-1',
+        key: '0-1',
+        children: [
+            { title: '0-1-0-0', key: '0-1-0-0' },
+            { title: '0-1-0-1', key: '0-1-0-1' },
+            { title: '0-1-0-2', key: '0-1-0-2' },
+        ],
+    },
+    {
+        title: '0-2',
+        key: '0-2',
+    },
+];
+
+export default () => {
+    const treeData = useTreeData();
+
+    useEffect(() => {
+        treeData.initData(DEFAULT_DATA);
+    }, []);
+
+    return (
+        <div style={{ height: 300, width: 320 }}>
+            <Catalogue
+                tooltip="嘿嘿，这是tooltip"
+                title="标签目录"
+                showSearch
+                treeData={treeData.data}
+                edit={false}
+                expandedKeys={treeData.expandedKeys}
+                onExpand={treeData.setExpandedKeys}
+            />
+        </div>
+    );
+};