diff --git a/src/catalogue/components/catalogue.tsx b/src/catalogue/components/catalogue.tsx index a72cf7bb6..ccbef9b7c 100644 --- a/src/catalogue/components/catalogue.tsx +++ b/src/catalogue/components/catalogue.tsx @@ -1,11 +1,17 @@ import React, { useState } from 'react'; +import { + CatalogFilled, + CloseOutlined, + DragOutlined, + EllipsisTableOutlined, + SearchOutlined, +} from '@dtinsight/react-icons'; import { Dropdown, DropdownProps, Form, Input, Tabs } from 'antd'; import { BlockHeader, EllipsisText } from 'dt-react-component'; import { IBlockHeaderProps } from 'dt-react-component/blockHeader'; import useLocale from '../../locale/useLocale'; import { ITreeNode } from '../useTreeData'; -import { CatalogIcon, CloseIcon, DragIcon, EllipsisIcon, SearchIcon } from './icon'; import CatalogueTree, { ICatalogueTree } from './tree'; interface Tab { @@ -53,7 +59,7 @@ const Catalogue = = {}, T extends readOnlyTab = a const locale = useLocale('Catalogue'); const { title, - addonBefore = , + addonBefore = , tooltip = false, showSearch = false, placeholder = locale.searchPlaceholder, @@ -126,7 +132,7 @@ const Catalogue = = {}, T extends readOnlyTab = a
{isTabMode(props) && ( - setTabSearch(false)} /> + setTabSearch(false)} /> )}
); @@ -140,7 +146,7 @@ const Catalogue = = {}, T extends readOnlyTab = a className="dt-catalogue__tabs" size="small" tabBarExtraContent={ - setTabSearch(true)} /> + setTabSearch(true)} /> } activeKey={activeTabKey} onChange={onTabChange} @@ -179,10 +185,10 @@ const Catalogue = = {}, T extends readOnlyTab = a triggerNode.parentElement as HTMLElement } > - e.stopPropagation()} /> + e.stopPropagation()} /> )} - {draggable && } + {draggable && } ); }; diff --git a/src/catalogue/components/icon.tsx b/src/catalogue/components/icon.tsx deleted file mode 100644 index 73203ed57..000000000 --- a/src/catalogue/components/icon.tsx +++ /dev/null @@ -1,201 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; - -interface IIcon { - className?: string; - style?: React.CSSProperties; - onClick?: React.MouseEventHandler; -} - -const FolderIcon = function ({ className, ...rest }: IIcon) { - return ( - - - - - - - - - - ); -}; - -const FolderOpenedIcon = function ({ className, ...rest }: IIcon) { - return ( - - - - - - - - - - ); -}; - -const DownTriangleIcon = function ({ className, ...rest }: IIcon) { - return ( - - - - - - - - ); -}; - -const CatalogIcon = function ({ className, ...rest }: IIcon) { - return ( - - - - - - - - ); -}; - -const DragIcon = function ({ className, ...rest }: IIcon) { - return ( - - - - - - - - ); -}; - -const EllipsisIcon = function ({ className, ...rest }: IIcon) { - return ( - - - - - - - - ); -}; - -const SearchIcon = function ({ className, ...rest }: IIcon) { - return ( - - - - - - ); -}; - -const CloseIcon = function ({ className, ...rest }: IIcon) { - return ( - - - - - - ); -}; - -export { - CatalogIcon, - CloseIcon, - DownTriangleIcon, - DragIcon, - EllipsisIcon, - FolderIcon, - FolderOpenedIcon, - SearchIcon, -}; diff --git a/src/catalogue/components/tree.tsx b/src/catalogue/components/tree.tsx index cd2a2beec..031b4ae6c 100644 --- a/src/catalogue/components/tree.tsx +++ b/src/catalogue/components/tree.tsx @@ -1,10 +1,10 @@ import React, { useMemo } from 'react'; +import { DownTriangleFilled } from '@dtinsight/react-icons'; import { Spin, Tree, TreeProps } from 'antd'; import { Empty } from 'dt-react-component'; import { ITreeNode } from '../useTreeData'; import { loopTree } from '../utils'; -import { DownTriangleIcon } from './icon'; export interface ICatalogueTree = {}> extends Omit { @@ -28,7 +28,7 @@ const CatalogueTree = = {}>({ > showLine={{ showLeafIcon: false }} - switcherIcon={} + switcherIcon={} showIcon treeData={renderTreeData} titleRender={titleRender} diff --git a/src/catalogue/demos/basic.tsx b/src/catalogue/demos/basic.tsx index 843a44662..4f5201caa 100644 --- a/src/catalogue/demos/basic.tsx +++ b/src/catalogue/demos/basic.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { Catalogue, EllipsisText } from 'dt-react-component'; +import { Catalogue } from 'dt-react-component'; import { useTreeData } from 'dt-react-component/catalogue/useTreeData'; const DEFAULT_DATA = [ @@ -8,12 +8,7 @@ const DEFAULT_DATA = [ key: '0-0', children: [ { - title: ( - - ), + title: '长长长长长长长长长长长长长长长长长长长长长长长长Title', key: '0-0-0', children: [ { title: '0-0-0-0', key: '0-0-0-0' }, diff --git a/src/catalogue/demos/config.tsx b/src/catalogue/demos/config.tsx index 2c7be9df8..5947e9180 100644 --- a/src/catalogue/demos/config.tsx +++ b/src/catalogue/demos/config.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { DeleteOutlined, EditOutlined, PlusSquareOutlined } from '@dtinsight/react-icons'; import { Menu } from 'antd'; -import { Catalogue, EllipsisText } from 'dt-react-component'; +import { Catalogue } from 'dt-react-component'; import { CatalogueProps } from 'dt-react-component/catalogue/components/catalogue'; import { ITreeNode, useTreeData } from 'dt-react-component/catalogue/useTreeData'; import { cloneDeep } from 'lodash-es'; @@ -23,12 +23,7 @@ const DEFAULT_DATA: ITreeNode[] = [ key: '0-0', children: [ { - title: ( - - ), + title: '长长长长长长长长长长长长长长长长长长长长长长长长Title', key: '0-0-0', children: [ { diff --git a/src/catalogue/demos/simple.tsx b/src/catalogue/demos/simple.tsx index bb994b7b3..45c9c5f3b 100644 --- a/src/catalogue/demos/simple.tsx +++ b/src/catalogue/demos/simple.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { Catalogue, EllipsisText } from 'dt-react-component'; +import { Catalogue } from 'dt-react-component'; import { useTreeData } from 'dt-react-component/catalogue/useTreeData'; const DEFAULT_DATA = [ @@ -8,12 +8,7 @@ const DEFAULT_DATA = [ key: '0-0', children: [ { - title: ( - - ), + title: '长长长长长长长长长长长长长长长长长长长长长长长长Title', key: '0-0-0', children: [ { title: '0-0-0-0', key: '0-0-0-0' }, diff --git a/src/catalogue/demos/tabs.tsx b/src/catalogue/demos/tabs.tsx index 9ed09759f..4af7ef0da 100644 --- a/src/catalogue/demos/tabs.tsx +++ b/src/catalogue/demos/tabs.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Catalogue, EllipsisText } from 'dt-react-component'; +import { Catalogue } from 'dt-react-component'; import { useTreeData } from 'dt-react-component/catalogue/useTreeData'; enum TreeType { @@ -13,12 +13,7 @@ const DEFAULT_DATA = (key: TreeType) => [ key: '0-0', children: [ { - title: ( - - ), + title: '长长长长长长长长长长长长长长长长长长长长长长长长Title', key: '0-0-0', children: [ { title: '0-0-0-0', key: '0-0-0-0' }, diff --git a/src/catalogue/utils.tsx b/src/catalogue/utils.tsx index 69f88c132..42827a416 100644 --- a/src/catalogue/utils.tsx +++ b/src/catalogue/utils.tsx @@ -1,7 +1,7 @@ import React from 'react'; +import { FolderFilled, FolderOpenedFilled } from '@dtinsight/react-icons'; import { CatalogueProps } from './components/catalogue'; -import { FolderIcon, FolderOpenedIcon } from './components/icon'; import { ITreeNode } from './useTreeData'; export const getIcon: ITreeNode['icon'] = ({ selected, expanded }) => { @@ -10,8 +10,8 @@ export const getIcon: ITreeNode['icon'] = ({ selected, expanded }) => { color: '#1D78FF', }; - if (expanded || selected) return ; - return ; + if (expanded || selected) return ; + return ; }; /** diff --git a/src/components/icon.tsx b/src/empty/icon.tsx similarity index 100% rename from src/components/icon.tsx rename to src/empty/icon.tsx diff --git a/src/empty/index.tsx b/src/empty/index.tsx index b578d78b6..dc5f835a7 100644 --- a/src/empty/index.tsx +++ b/src/empty/index.tsx @@ -2,7 +2,7 @@ import React, { ReactNode } from 'react'; import { Empty as AntdEmpty, EmptyProps as AntdEmptyProps } from 'antd'; import classNames from 'classnames'; -import { LoupeIcon, SearchIcon } from '../components/icon'; +import { LoupeIcon, SearchIcon } from './icon'; import './style.scss'; export const IMG_MAP = { diff --git a/src/input/__tests__/__snapshots__/match.test.tsx.snap b/src/input/__tests__/__snapshots__/match.test.tsx.snap index ae6fdc03a..a3d379c3a 100644 --- a/src/input/__tests__/__snapshots__/match.test.tsx.snap +++ b/src/input/__tests__/__snapshots__/match.test.tsx.snap @@ -16,54 +16,22 @@ exports[`Test Input.Match component Should match snapshot 1`] = `
- - - - + - - - + - - - + - - + data-mock-icon="SuffixMatchOutlined" + />
diff --git a/src/input/__tests__/match.test.tsx b/src/input/__tests__/match.test.tsx index f3605eccd..26bc8ed1e 100644 --- a/src/input/__tests__/match.test.tsx +++ b/src/input/__tests__/match.test.tsx @@ -12,7 +12,7 @@ describe('Test Input.Match component', () => { it('Should support searchType', () => { const fn = jest.fn(); const { rerender, container } = render(); - const elements = container.querySelectorAll('svg.dtc-input-match-suffixItem')!; + const elements = container.querySelectorAll('span.dtc-input-match-suffixItem')!; expect(elements).toHaveLength(4); fireEvent.click(elements[0]); @@ -20,18 +20,18 @@ describe('Test Input.Match component', () => { expect(fn).toBeCalledWith('caseSensitive'); rerender(); - expect(container.querySelectorAll('svg.dtc-input-match-suffixItem')!).toHaveLength(4); - expect(container.querySelectorAll('svg.dtc-input-match-suffixItem')[0].classList).toContain( - 'dtc-input-match-suffixItem__active' - ); - fireEvent.click(container.querySelectorAll('svg.dtc-input-match-suffixItem')[0]); + expect(container.querySelectorAll('span.dtc-input-match-suffixItem')!).toHaveLength(4); + expect( + container.querySelectorAll('span.dtc-input-match-suffixItem')[0].classList + ).toContain('dtc-input-match-suffixItem__active'); + fireEvent.click(container.querySelectorAll('span.dtc-input-match-suffixItem')[0]); expect(fn).toBeCalledWith('fuzzy'); }); it('Should support filterOptions', () => { const { container } = render(); - expect(container.querySelectorAll('svg.dtc-input-match-suffixItem')!).toHaveLength(1); + expect(container.querySelectorAll('span.dtc-input-match-suffixItem')!).toHaveLength(1); }); it('Should support onSearch and onPressEnter', () => { diff --git a/src/input/icons.tsx b/src/input/icons.tsx deleted file mode 100644 index 386cd3e72..000000000 --- a/src/input/icons.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; - -export function CaseSensitiveIcon(props: { className: string; onClick: () => void }) { - return ( - - - - ); -} - -export function PreciseIcon(props: { className: string; onClick: () => void }) { - return ( - - - - ); -} - -export function FrontIcon(props: { className: string; onClick: () => void }) { - return ( - - - - ); -} - -export function TailIcon(props: { className: string; onClick: () => void }) { - return ( - - - - ); -} diff --git a/src/input/match.tsx b/src/input/match.tsx index 51cc2d8c3..a13ef5139 100644 --- a/src/input/match.tsx +++ b/src/input/match.tsx @@ -1,9 +1,14 @@ import React, { useState } from 'react'; +import { + CaseSensitiveMatchOutlined, + ExactMatchOutlined, + PrefixMatchOutlined, + SuffixMatchOutlined, +} from '@dtinsight/react-icons'; import { Input, type InputProps, Tooltip } from 'antd'; import classNames from 'classnames'; import useLocale from '../locale/useLocale'; -import { CaseSensitiveIcon, FrontIcon, PreciseIcon, TailIcon } from './icons'; import './match.scss'; /** @@ -90,7 +95,7 @@ export default function Match({ switch (op.key) { case 'caseSensitive': return ( -