diff --git a/packages/biz/CHANGELOG.md b/packages/biz/CHANGELOG.md index 26df11d..bb64e57 100644 --- a/packages/biz/CHANGELOG.md +++ b/packages/biz/CHANGELOG.md @@ -1,5 +1,16 @@ # @zhst/biz +## 0.28.0 + +### Minor Changes + +- zhst/biz: 新增树面板 + +### Patch Changes + +- Updated dependencies + - @zhst/meta@0.25.0 + ## 0.27.0 ### Minor Changes diff --git a/packages/biz/package.json b/packages/biz/package.json index 9018e0a..6635420 100644 --- a/packages/biz/package.json +++ b/packages/biz/package.json @@ -1,6 +1,6 @@ { "name": "@zhst/biz", - "version": "0.27.0", + "version": "0.28.0", "description": "业务库", "keywords": [ "business", 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/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/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/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 new file mode 100644 index 0000000..e0b93ee --- /dev/null +++ b/packages/biz/src/treePanel/TreePanel.tsx @@ -0,0 +1,267 @@ +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 + +const BoxPanel: FC = (props) => { + const { + 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('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( +