From 5f15108949962d5a1e68393d561225a337b57756 Mon Sep 17 00:00:00 2001 From: haishan <710328466@qq.com> Date: Wed, 5 Jun 2024 18:14:15 +0800 Subject: [PATCH] =?UTF-8?q?feat(zhst/biz):=20=E6=96=B0=E5=A2=9E=E6=A0=91?= =?UTF-8?q?=E9=9D=A2=E6=9D=BF2.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WarningRecordList/WarningRecordList.tsx | 2 +- .../components/WindowToggle/WindowToggle.tsx | 2 +- .../ViewLargerImageModal.tsx | 2 +- .../WarningRecordCard/WarningRecordCard.tsx | 2 +- .../components/boxPanel/index.tsx | 3 +- .../biz/src/infiniteList/InfiniteList.tsx | 3 +- packages/biz/src/odModal/OdModal.tsx | 3 +- packages/biz/src/tree/index.tsx | 2 +- packages/biz/src/treePanel/TreePanel.tsx | 276 ++++++++++++++++-- packages/biz/src/treePanel/constants.ts | 0 packages/biz/src/treePanel/demo/basic.tsx | 123 +++++++- packages/biz/src/treePanel/demo/mock.tsx | 54 ++++ packages/biz/src/treePanel/demo/no | 0 packages/biz/src/treePanel/index.less | 129 ++++++++ packages/biz/src/treePanel/index.md | 53 ++++ .../biz/src/treeTransfer/TreeTransfer.tsx | 3 +- .../treeTransferModal/TreeTransferModal.tsx | 2 +- packages/meta/src/index.tsx | 2 + packages/meta/src/theme/themes/seed.ts | 6 +- 19 files changed, 629 insertions(+), 38 deletions(-) create mode 100644 packages/biz/src/treePanel/constants.ts create mode 100644 packages/biz/src/treePanel/demo/mock.tsx create mode 100644 packages/biz/src/treePanel/demo/no create mode 100644 packages/biz/src/treePanel/index.less diff --git a/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx b/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx index 75a2c2b..83986a9 100644 --- a/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx +++ b/packages/biz/src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx @@ -3,7 +3,7 @@ import { IRecord } from '../../../WarningRecordCard'; import { ViewLargerImageModalRef } from '../../../ViewLargerImageModal'; import WarningRecordCard from '../../../WarningRecordCard'; import ViewLargerImageModal from '../../../ViewLargerImageModal'; -import { Empty, Space, Spin } from 'antd'; +import { Empty, Space, Spin } from '@zhst/meta'; import { pxToRem } from '@zhst/func' import { LoadingOutlined } from '@ant-design/icons'; import "./index.less" diff --git a/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx b/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx index 0a6fc8e..5c8dd9b 100644 --- a/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx +++ b/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx @@ -1,7 +1,7 @@ import React from 'react'; import VideoPlayerCard from '../../../VideoPlayerCard'; import { VideoPlayerCardProps } from '../../../VideoPlayerCard'; -import { Row, Col, Segmented, theme } from 'antd'; +import { Row, Col, Segmented, theme } from '@zhst/meta'; import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons'; import { pxToRem } from '@zhst/func' import './index.less' diff --git a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx index 6904e8d..75e0609 100644 --- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx +++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx @@ -1,5 +1,5 @@ import React, { useImperativeHandle, useRef, useState, forwardRef, useContext } from 'react'; -import { Modal, ModalProps, Space, SpaceProps, theme } from 'antd'; +import { Modal, ModalProps, Space, SpaceProps, theme } from '@zhst/meta'; import { DownloadOutlined } from '@ant-design/icons'; import { ConfigProvider, CropperImage } from '@zhst/meta'; diff --git a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx index c1c26fa..6baad2e 100644 --- a/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx +++ b/packages/biz/src/WarningRecordCard/WarningRecordCard.tsx @@ -1,4 +1,4 @@ -import { Card, Space, Divider, CardProps, theme } from 'antd'; +import { Card, Space, Divider, CardProps, theme } from '@zhst/meta'; import React, { useContext } from 'react'; import dayjs from 'dayjs'; import { ConfigProvider, CropperImage } from '@zhst/meta'; diff --git a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx index 79fa16e..7dc540b 100644 --- a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx +++ b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx @@ -1,9 +1,10 @@ import React, { FC, useState, useContext, ReactNode } from 'react'; import { ModalFormProps } from '@ant-design/pro-components' -import { Input, Dropdown } from 'antd' import { ButtonProps, ConfigProvider, + Input, + Dropdown, Tooltip, Button, Divider, diff --git a/packages/biz/src/infiniteList/InfiniteList.tsx b/packages/biz/src/infiniteList/InfiniteList.tsx index 53c6097..6caae90 100644 --- a/packages/biz/src/infiniteList/InfiniteList.tsx +++ b/packages/biz/src/infiniteList/InfiniteList.tsx @@ -3,10 +3,9 @@ */ import React, { forwardRef, ReactNode, useContext, useEffect, useImperativeHandle, useRef } from 'react' -import { ConfigProvider } from '@zhst/meta'; +import { ConfigProvider, Spin, SpinProps } from '@zhst/meta'; import classNames from 'classnames'; import InfiniteScroll from 'react-infinite-scroll-component'; -import { Spin, SpinProps } from 'antd'; import { useSize } from '@zhst/hooks'; import './index.less' diff --git a/packages/biz/src/odModal/OdModal.tsx b/packages/biz/src/odModal/OdModal.tsx index 8122017..315c2b6 100644 --- a/packages/biz/src/odModal/OdModal.tsx +++ b/packages/biz/src/odModal/OdModal.tsx @@ -1,6 +1,5 @@ import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react'; -import { Button, Modal, ModalProps, Select, SelectProps, Space, theme } from 'antd'; -import { ConfigProvider, CropperImage, Scanner, CropperImageProps, CropperImageRefProps } from '@zhst/meta' +import { ConfigProvider, CropperImage, Scanner, CropperImageProps, CropperImageRefProps, Button, Modal, ModalProps, Select, SelectProps, Space, theme } from '@zhst/meta' import { IconFont } from '@zhst/icon' import classNames from 'classnames'; import './index.less' diff --git a/packages/biz/src/tree/index.tsx b/packages/biz/src/tree/index.tsx index 7f1277a..5d8aa3b 100644 --- a/packages/biz/src/tree/index.tsx +++ b/packages/biz/src/tree/index.tsx @@ -1,4 +1,4 @@ -import { TreeDataNode } from 'antd'; +import { TreeDataNode } from '@zhst/meta'; import BoxTree from './boxTree'; export interface TreeData extends TreeDataNode { diff --git a/packages/biz/src/treePanel/TreePanel.tsx b/packages/biz/src/treePanel/TreePanel.tsx index 4531c43..e0b93ee 100644 --- a/packages/biz/src/treePanel/TreePanel.tsx +++ b/packages/biz/src/treePanel/TreePanel.tsx @@ -1,33 +1,267 @@ -/** - * Created by jiangzhixiong on 2024/06/04 - */ -import React, { forwardRef, useContext, useImperativeHandle } from 'react' -import { ConfigProvider } from '@zhst/meta' -import { Input } from 'antd'; +import React, { FC, useContext, ReactNode } from 'react'; +import { + ConfigProvider, + Input, + Dropdown, + Tooltip, + Button, + DataNode as TreeDataNode, + Tree as BoxTree, + TreeProps as BoxTreeProps, + TreeProps, + InputProps, + DropDownProps, + SelectProps, + Select +} from '@zhst/meta'; +import { IconFont } from '@zhst/icon'; +import classNames from 'classnames'; +import './index.less' + +interface IOption { + label: string + key: string + icon?: string | ReactNode + disabled?: boolean; + showTooltip?: boolean; + onClick?: () => void + className?: string; + dropdownConfig?: DropDownProps +} + +interface ITag { + label: string + value: string + icon?: ReactNode + parentNode?: string + children?: ITag[] +} + +export interface BoxPanelProps { + treeType?: 'directory' | 'normal' + searchInputProps?: InputProps + showOptions?: boolean + showSelectBar?: boolean // 显示搜索框 + filterSelectProps?: SelectProps + onSelect?: SelectProps['onChange'] + treeProps?: Partial + data: TreeDataNode[] + onSearch?: (e: any) => void + onItemCheck?: TreeProps['onCheck'] + onItemSelect?: TreeProps['onSelect'] + customImport?: ReactNode | string // 自定义搜索栏边上的过滤图标 + extra?: ReactNode | string // 搜索栏下面的插槽 + prefixCls?: string + showSearchBar?: boolean // 是否显示搜索栏 + noFilter?: boolean // 是否显示搜索拓展 icon + filterList?: IOption[] + optionList?: IOption[] + showTagPanel?: boolean // 标签插槽 + tagList?: ITag[] // 标签列表 + tagExpandAll?: boolean // 展开所有 + onTagCheck?: (value: string, tag: ITag) => void; + checkedTags?: string[] + onResetTags?: () => void + onTagExpand?: (e: any) => void + tagFootRender?: ReactNode +} const { ConfigContext } = ConfigProvider +const { DirectoryTree } = BoxTree -export interface TreePanelProps { - prefixCls?: string; -} - -export interface TreePanelRefProps { -} - -const TreePanel = forwardRef((props, ref) => { +const BoxPanel: FC = (props) => { const { - prefixCls: customizePrefixCls + treeType = 'directory', + searchInputProps, + showOptions = true, + showSelectBar, + filterSelectProps, + extra, + noFilter, + data = [], + treeProps, + onSelect, + onSearch, + onItemCheck, + onItemSelect, + showSearchBar = true, + optionList = [], + filterList = [], + showTagPanel, + tagList, + tagExpandAll, + onTagExpand, + checkedTags = [], + onTagCheck, + onResetTags, + tagFootRender, + prefixCls: customizePrefixCls, + customImport: customFilter } = props - const { getPrefixCls } = useContext(ConfigContext) - const componentName = getPrefixCls('', customizePrefixCls); - useImperativeHandle(ref, () => ({})) + const { getPrefixCls } = useContext(ConfigContext); + const componentName = getPrefixCls('biz-tree-panel', customizePrefixCls); + const CurrentTree = treeType === 'directory' ? DirectoryTree : BoxTree + + /** + * 初始化拓展 filter + * @param _list + * @returns + */ + const initFilter = (_list?: BoxPanelProps['filterList']) => { + const WithDropdown = (dom: ReactNode, isShow?: boolean, _config?: DropDownProps) => { + if (!isShow) { + return dom + } + + return ( + + {dom} + + ) + } + + return _list?.map(item => ( + + {WithDropdown( +