feat(catalogue): support tabs in cataligue

LuckyFBB · LuckyFBB · commit 2e730f56a574 · 2024-12-14T22:03:33.000+08:00
diff --git a/src/catalogue/components/catalogue.tsx b/src/catalogue/components/catalogue.tsx
@@ -1,13 +1,22 @@
-import React from 'react';
-import { Dropdown, DropdownProps, Form, Input } from 'antd';
+import React, { useState } from 'react';
+import { Dropdown, DropdownProps, Form, Input, Tabs } from 'antd';
 import { BlockHeader } from 'dt-react-component';
 import { IBlockHeaderProps } from 'dt-react-component/blockHeader';
 
 import { InputMode, ITreeNode, useTreeData } from '../useTreeData';
-import { CatalogIcon, DragIcon, EllipsisIcon } from './icon';
+import { CatalogIcon, CloseIcon, DragIcon, EllipsisIcon, SearchIcon } from './icon';
 import CatalogueTree, { ICatalogueTree } from './tree';
 
-export interface ICatalogue
+interface Tab {
+    readonly key: string;
+    readonly title: React.ReactNode;
+}
+
+type readOnlyTab = readonly Tab[];
+
+type TabKey<T extends readOnlyTab> = T[number]['key'];
+
+interface NormalCatalogueProps
     extends Pick<IBlockHeaderProps, 'tooltip' | 'addonAfter' | 'addonBefore' | 'title'>,
         ICatalogueTree {
     showSearch?: boolean;
@@ -19,23 +28,43 @@ export interface ICatalogue
     onSearch?: (value: string) => void;
     onSave?: (data: ITreeNode, value: string) => Promise<string | void>;
 }
+interface TabsCatalogueProps<T extends readOnlyTab> extends NormalCatalogueProps {
+    tabList?: T;
+    activeTabKey?: TabKey<T>;
+    defaultTabKey?: TabKey<T>;
+    onTabChange?: (key: TabKey<T>) => void;
+}
+
+export type CatalogueProps<T extends readOnlyTab = any> =
+    | TabsCatalogueProps<T>
+    | NormalCatalogueProps;
+
+function isTabMode<T extends readOnlyTab>(
+    props: CatalogueProps<T>
+): props is TabsCatalogueProps<T> {
+    return 'tabList' in props;
+}
+
+const Catalogue = <T extends readOnlyTab>(props: CatalogueProps<T>) => {
+    const {
+        title,
+        addonBefore = <CatalogIcon style={{ fontSize: 20 }} />,
+        tooltip = false,
+        showSearch = false,
+        placeholder = '搜索目录名称',
+        addonAfter,
+        edit = true,
+        treeData,
+        draggable,
+        overlay,
+        onChange,
+        onSearch,
+        onSave,
+        ...rest
+    } = props;
+
+    const [tabSearch, setTabSearch] = useState(false);
 
-const Catalogue = ({
-    title,
-    addonBefore = <CatalogIcon style={{ fontSize: 20 }} />,
-    tooltip = false,
-    showSearch = false,
-    placeholder = '搜索目录名称',
-    addonAfter,
-    edit = true,
-    treeData,
-    draggable,
-    overlay,
-    onChange,
-    onSearch,
-    onSave,
-    ...rest
-}: ICatalogue) => {
     const [form] = Form.useForm();
 
     const loopTree = (data: ITreeNode[]): ITreeNode[] => {
@@ -64,25 +93,48 @@ const Catalogue = ({
     const renderHeader = () => {
         if (!title) return null;
         return (
-            <BlockHeader
-                title={title}
-                tooltip={tooltip}
-                background={false}
-                addonBefore={addonBefore}
-                addonAfter={addonAfter}
-                spaceBottom={12}
-            />
+            <div className="dt-catalogue__header">
+                <BlockHeader
+                    title={title}
+                    tooltip={tooltip}
+                    background={false}
+                    addonBefore={addonBefore}
+                    addonAfter={addonAfter}
+                    spaceBottom={12}
+                />
+            </div>
         );
     };
 
     const renderSearch = () => {
-        if (!showSearch) return null;
+        if (!showSearch || (isTabMode(props) && !tabSearch)) return null;
         return (
-            <Input.Search
-                placeholder={placeholder}
-                style={{ marginBottom: 12 }}
-                onSearch={onSearch}
-            />
+            <div className="dt-catalogue__search">
+                <Input.Search placeholder={placeholder} onSearch={onSearch} />
+                {isTabMode(props) && (
+                    <CloseIcon className="close" style={{}} onClick={() => setTabSearch(false)} />
+                )}
+            </div>
+        );
+    };
+
+    const renderTab = () => {
+        if (!isTabMode(props) || tabSearch) return null;
+        const { activeTabKey, tabList, onTabChange } = props;
+        return (
+            <Tabs
+                className="dt-catalogue__tabs"
+                size="small"
+                tabBarExtraContent={
+                    <SearchIcon className="search" onClick={() => setTabSearch(true)} />
+                }
+                activeKey={activeTabKey}
+                onChange={onTabChange}
+            >
+                {tabList?.map((tab: { key: string; title: React.ReactNode }) => (
+                    <Tabs.TabPane tab={tab.title} key={tab.key} />
+                ))}
+            </Tabs>
         );
     };
 
@@ -182,10 +234,9 @@ const Catalogue = ({
 
     return (
         <div className="dt-catalogue">
-            <div className="dt-catalogue__header">
-                {renderHeader()}
-                {renderSearch()}
-            </div>
+            {renderHeader()}
+            {renderSearch()}
+            {renderTab()}
             <CatalogueTree
                 treeData={loopTree(treeData)}
                 draggable={draggable ? { icon: false } : false}
diff --git a/src/catalogue/components/icon.tsx b/src/catalogue/components/icon.tsx
@@ -274,8 +274,51 @@ const PlusCircleIcon = function ({ className, ...rest }: IIcon) {
     );
 };
 
+const SearchIcon = function ({ className, ...rest }: IIcon) {
+    return (
+        <span className={classNames('dt-catalogue__icon', className)} {...rest}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 64 64"
+                fill="currentColor"
+            >
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M30.1927 5C43.6716 5 54.3855 15.9572 54.3855 29.7421C54.3855 43.527 43.6716 54.4842 30.1927 54.4842C16.7139 54.4842 6 43.527 6 29.7421C6 15.9572 16.7139 5 30.1927 5ZM30.1927 9.52055C19.2345 9.52055 10.5217 18.4311 10.5217 29.7421C10.5217 41.053 19.2345 49.9636 30.1927 49.9636C41.151 49.9636 49.8638 41.053 49.8638 29.7421C49.8638 18.4311 41.151 9.52055 30.1927 9.52055ZM51.165 49.982C50.2767 49.2338 48.9479 49.2778 48.1115 50.1141C47.2285 50.9968 47.2285 52.4279 48.1115 53.3106L54.1405 59.338L54.2843 59.47C55.1725 60.2182 56.5014 60.1742 57.3378 59.338C58.2207 58.4553 58.2207 57.0242 57.3378 56.1415L51.3088 50.1141L51.165 49.982Z"
+                    fill="currentColor"
+                />
+            </svg>
+        </span>
+    );
+};
+
+const CloseIcon = function ({ className, ...rest }: IIcon) {
+    return (
+        <span className={classNames('dt-catalogue__icon', className)} {...rest}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 64 64"
+                fill="currentColor"
+            >
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M51.0918 12.9081C51.8729 13.6892 51.8729 14.9555 51.0918 15.7365L34.8284 32L51.0918 48.2635C51.8729 49.0445 51.8729 50.3108 51.0918 51.0919C50.3108 51.8729 49.0444 51.8729 48.2634 51.0919L31.9999 34.8284L15.7365 51.0919C14.9554 51.8729 13.6891 51.8729 12.9081 51.0919C12.127 50.3108 12.127 49.0445 12.9081 48.2635L29.1715 32L12.9081 15.7365C12.127 14.9555 12.127 13.6892 12.9081 12.9081C13.6891 12.1271 14.9554 12.1271 15.7365 12.9081L31.9999 29.1716L48.2634 12.9081C49.0444 12.1271 50.3108 12.1271 51.0918 12.9081Z"
+                    fill="currentColor"
+                />
+            </svg>
+        </span>
+    );
+};
+
 export {
     CatalogIcon,
+    CloseIcon,
     DeleteIcon,
     DownTriangleIcon,
     DragIcon,
@@ -287,4 +330,5 @@ export {
     MenuUnFoldIcon,
     PlusCircleIcon,
     PlusSquareIcon,
+    SearchIcon,
 };
diff --git a/src/catalogue/demos/tabs.tsx b/src/catalogue/demos/tabs.tsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import { Catalogue, EllipsisText } from 'dt-react-component';
+
+import { useTreeData } from '../useTreeData';
+
+enum TreeType {
+    Api = 'api',
+    Index = 'index',
+}
+
+const DEFAULT_DATA = (key: TreeType) => [
+    {
+        title: `0-0-${key}`,
+        key: '0-0',
+        children: [
+            {
+                title: (
+                    <EllipsisText
+                        value="长长长长长长长长长长长长长长长长长长长长长长长长Title"
+                        maxWidth="100%"
+                    />
+                ),
+                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}`,
+        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}`,
+        key: '0-2',
+    },
+];
+
+export default () => {
+    const treeData = useTreeData();
+    const [activeKey, setActiveKey] = useState(TreeType.Index);
+
+    useEffect(() => {
+        treeData.initData(DEFAULT_DATA(activeKey));
+    }, [activeKey]);
+
+    return (
+        <div style={{ height: 300, width: 320 }}>
+            <Catalogue
+                tooltip="嘿嘿，这是tooltip"
+                title="标签目录"
+                showSearch
+                treeData={treeData.data}
+                edit={false}
+                activeTabKey={activeKey}
+                tabList={
+                    [
+                        { key: TreeType.Api, title: 'API' },
+                        { key: TreeType.Index, title: '指标' },
+                    ] as const
+                }
+                onTabChange={(key) => setActiveKey(key)}
+                expandedKeys={treeData.expandedKeys}
+                onExpand={treeData.setExpandedKeys}
+            />
+        </div>
+    );
+};
diff --git a/src/catalogue/index.md b/src/catalogue/index.md
@@ -21,6 +21,7 @@ demo:
 <code src="./demos/operator.tsx">可操作的目录树</code>
 <code src="./demos/drag.tsx">可拖拽的目录树</code>
 <code src="./demos/config.tsx">配置操作项的目录树</code>
+<code src="./demos/tabs.tsx">配置操作项的目录树</code>
 
 ## API
 
diff --git a/src/catalogue/index.scss b/src/catalogue/index.scss
@@ -8,6 +8,17 @@
     &__header {
         padding: 12px 12px 0;
     }
+    &__search {
+        display: flex;
+        padding: 0 12px 6px;
+        align-items: center;
+        .close {
+            font-size: 16px;
+            color: #B1B4C5;
+            cursor: pointer;
+            margin-left: 46px;
+        }
+    }
     .dt-catalogue__tree {
         padding: 2px 0 24px;
     }
@@ -130,4 +141,23 @@
             }
         }
     }
+    &__tabs {
+        margin-bottom: 6px;
+        height: fit-content;
+        &.ant-tabs-top > .ant-tabs-nav {
+            margin: 0;
+            padding: 0 16px;
+        }
+        .ant-tabs-extra-content {
+            .search {
+                font-size: 16px;
+                color: #B1B4C5;
+                cursor: pointer;
+            }
+        }
+    }
+    &__icon {
+        display: flex;
+        align-items: center;
+    }
 }
diff --git a/src/catalogue/useTreeData.tsx b/src/catalogue/useTreeData.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { DataNode } from 'antd/lib/tree';
 import { cloneDeep } from 'lodash';
 
-import { ICatalogue } from './components/catalogue';
+import { CatalogueProps } from './components/catalogue';
 
 export interface ITreeNode extends Omit<DataNode, 'children' | 'title'> {
     inputMode?: InputMode;
@@ -25,15 +25,15 @@ export enum InputMode {
 export const useTreeData = (): {
     data: ITreeNode[];
     loading: boolean;
-    expandedKeys: ICatalogue['expandedKeys'];
+    expandedKeys: CatalogueProps['expandedKeys'];
     initData: (treeData: ITreeNode[]) => void;
     onChange: (node?: ITreeNode, inputMode?: InputMode) => void;
     setLoading: React.Dispatch<React.SetStateAction<boolean>>;
-    setExpandedKeys: React.Dispatch<React.SetStateAction<ICatalogue['expandedKeys']>>;
+    setExpandedKeys: React.Dispatch<React.SetStateAction<CatalogueProps['expandedKeys']>>;
 } => {
     const [data, setData] = useState<ITreeNode[]>([]);
     const [loading, setLoading] = useState(false);
-    const [expandedKeys, setExpandedKeys] = useState<ICatalogue['expandedKeys']>([]);
+    const [expandedKeys, setExpandedKeys] = useState<CatalogueProps['expandedKeys']>([]);
 
     const initData = (treeData: ITreeNode[]) => {
         setData(treeData);
