From a129d391689bd1481913d34ca5dbf53cd8d0ac4f Mon Sep 17 00:00:00 2001 From: haishan <710328466@qq.com> Date: Tue, 4 Jun 2024 16:01:30 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(zhst/biz):=20treePanel=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biz/src/Demo/index.tsx | 12 --------- packages/biz/src/index.tsx | 2 ++ packages/biz/src/treePanel/TreePanel.tsx | 33 +++++++++++++++++++++++ packages/biz/src/treePanel/demo/basic.tsx | 14 ++++++++++ packages/biz/src/treePanel/index.md | 28 +++++++++++++++++++ packages/biz/src/treePanel/index.tsx | 7 +++++ 6 files changed, 84 insertions(+), 12 deletions(-) delete mode 100644 packages/biz/src/Demo/index.tsx create mode 100644 packages/biz/src/treePanel/TreePanel.tsx create mode 100644 packages/biz/src/treePanel/demo/basic.tsx create mode 100644 packages/biz/src/treePanel/index.md create mode 100644 packages/biz/src/treePanel/index.tsx diff --git a/packages/biz/src/Demo/index.tsx b/packages/biz/src/Demo/index.tsx deleted file mode 100644 index 7545062..0000000 --- a/packages/biz/src/Demo/index.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' -import { Button } from '@zhst/meta' -import { useThrottleFn } from '@zhst/hooks' - -export default () => { - - const { run } = useThrottleFn(() => console.log('123')) - - return ( - - ) -} diff --git a/packages/biz/src/index.tsx b/packages/biz/src/index.tsx index f9d89b3..c367ca4 100644 --- a/packages/biz/src/index.tsx +++ b/packages/biz/src/index.tsx @@ -21,6 +21,8 @@ export type { ViewLargerImageModalRef, ViewLargerImageModalProps } from './ViewL export { default as ViewLargerImageModal, useViewLargerImageModal } from './ViewLargerImageModal' export type { VideoPlayerCardProps } from './VideoPlayerCard' export { default as VideoPlayerCard } from './VideoPlayerCard' +export type { TreePanelProps, TreePanelRefProps } from './treePanel' +export { default as TreePanel } from './treePanel' export { default as RealTimeMonitor } from './RealTimeMonitor' export { default as InfiniteList } from './infiniteList' export type { InfiniteListProps, InfiniteListRefProps } from './infiniteList' diff --git a/packages/biz/src/treePanel/TreePanel.tsx b/packages/biz/src/treePanel/TreePanel.tsx new file mode 100644 index 0000000..4531c43 --- /dev/null +++ b/packages/biz/src/treePanel/TreePanel.tsx @@ -0,0 +1,33 @@ +/** + * Created by jiangzhixiong on 2024/06/04 + */ +import React, { forwardRef, useContext, useImperativeHandle } from 'react' +import { ConfigProvider } from '@zhst/meta' +import { Input } from 'antd'; + +const { ConfigContext } = ConfigProvider + +export interface TreePanelProps { + prefixCls?: string; +} + +export interface TreePanelRefProps { +} + +const TreePanel = forwardRef((props, ref) => { + const { + prefixCls: customizePrefixCls + } = props + const { getPrefixCls } = useContext(ConfigContext) + const componentName = getPrefixCls('', customizePrefixCls); + + useImperativeHandle(ref, () => ({})) + + return ( +
+ +
+ ) +}) + +export default TreePanel diff --git a/packages/biz/src/treePanel/demo/basic.tsx b/packages/biz/src/treePanel/demo/basic.tsx new file mode 100644 index 0000000..d45092b --- /dev/null +++ b/packages/biz/src/treePanel/demo/basic.tsx @@ -0,0 +1,14 @@ +import React, { useState, useRef } from 'react'; +import { TreePanel } from '@zhst/biz'; + +const demo = () => { + + return ( +
+ +
+ ); +}; + +export default demo; diff --git a/packages/biz/src/treePanel/index.md b/packages/biz/src/treePanel/index.md new file mode 100644 index 0000000..b9fe8a2 --- /dev/null +++ b/packages/biz/src/treePanel/index.md @@ -0,0 +1,28 @@ +--- +category: Components +title: TreePanel 树面板 +toc: content +demo: + cols: 2 +group: + title: 数据展示 +--- + + +## 代码演示 + +基本用法 + +## API + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | + +## 组件设计 + +该组件包含以下功能： + +1. 顶部按钮支持 +2. 输入框单行展示 +3. 选择框和筛选框同一行 +4. 按钮列表 diff --git a/packages/biz/src/treePanel/index.tsx b/packages/biz/src/treePanel/index.tsx new file mode 100644 index 0000000..14bfed2 --- /dev/null +++ b/packages/biz/src/treePanel/index.tsx @@ -0,0 +1,7 @@ +/** + * Created by jiangzhixiong on 2024/06/04 + */ +import TreePanel from './TreePanel' +export type { TreePanelProps, TreePanelRefProps } from './TreePanel' + +export default TreePanel 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 2/3] =?UTF-8?q?feat(zhst/biz):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=A0=91=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( +