nicecode/nicecode-v2
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(zhst/biz): 新增树面板2.0

Browse Source
This commit is contained in:
NICE CODE BY DEV 2024-06-06 11:31:37 +08:00
parent dc98cd8ad4
commit 03433e3108
11 changed files with 190 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/biz/src/index.tsx
View File

@ -4,6 +4,8 @@ export { default as BoxSelectTree } from './boxSelectTree'
export type { BoxSelectTreeProps } from './boxSelectTree'
export { default as Tree } from './tree'
export type { BoxTreeProps, TreeData } from './tree'
export { default as TreePanel } from './treePanel'
export type { TreePanelProps } from './treePanel'
export { default as TreeTransfer } from './treeTransfer'
export type { TreeTransferProps } from './treeTransfer'
export { default as TreeTransferModal } from './treeTransferModal'
@ -21,8 +23,6 @@ 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'

6
packages/biz/src/tree/index.tsx
View File

@ -1,8 +1,8 @@
import { TreeDataNode } from '@zhst/meta';
import { DataNode } from '@zhst/meta';
import BoxTree from './boxTree';
export interface TreeData extends TreeDataNode {
children?: TreeDataNode['children'] & {
export interface TreeData extends DataNode {
children?: DataNode['children'] & {
isCamera?: boolean
/**
* 0-失败 1-成功 2-进行中 3-未知

16
packages/biz/src/treePanel/TreePanel.tsx
View File

@ -37,7 +37,7 @@ interface ITag {
children?: ITag[]
}
export interface BoxPanelProps {
export interface TreePanelProps {
treeType?: 'directory' | 'normal'
searchInputProps?: InputProps
showOptions?: boolean
@ -69,7 +69,7 @@ export interface BoxPanelProps {
const { ConfigContext } = ConfigProvider
const { DirectoryTree } = BoxTree
const BoxPanel: FC<BoxPanelProps> = (props) => {
const TreePanel: FC<TreePanelProps> = (props) => {
const {
treeType = 'directory',
searchInputProps,
@ -108,7 +108,7 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
* @param _list
* @returns
*/
const initFilter = (_list?: BoxPanelProps['filterList']) => {
const initFilter = (_list?: TreePanelProps['filterList']) => {
const WithDropdown = (dom: ReactNode, isShow?: boolean, _config?: DropDownProps) => {
if (!isShow) {
return dom
@ -127,7 +127,7 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
open={item.showTooltip}
>
{WithDropdown(
<Button className={classNames(componentName + '-search-btns-btn')} type="text" onClick={item.onClick} icon={item.icon} />,
<Button className={classNames(componentName + '-search-btns-btn')} onClick={item.onClick} icon={item.icon} />,
item.type === 'dropdown',
item.dropdownConfig
)}
@ -140,7 +140,7 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
* @param _list
* @returns
*/
const initOptions = (_list?: BoxPanelProps['optionList']) => {
const initOptions = (_list?: TreePanelProps['optionList']) => {
return _list?.map((item, idx) => (
<>
{/* @ts-ignore */}
@ -159,7 +159,7 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
* @param sort 是否分类
* @returns
*/
const initTagPanel = (_tagList: BoxPanelProps['tagList'], sort?: boolean) => {
const initTagPanel = (_tagList: TreePanelProps['tagList'], sort?: boolean) => {
// 正常标签渲染
const commonTag = (_tagProps: ITag) => (
<span
@ -237,7 +237,7 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
<span
className={classNames(componentName + '-tags-tag_option-btn')}
onClick={onTagExpand}
>{tagExpandAll ? '收起' : '更多'}<IconFont icon={tagExpandAll ? 'icon-shangjiantou' : 'icon-xiajiantou'} /></span>
>{tagExpandAll ? '收起' : '展开'}<IconFont icon={tagExpandAll ? 'icon-shangjiantou' : 'icon-xiajiantou'} /></span>
</div>
</div>
{initTagPanel(tagList, tagExpandAll)}
@ -264,4 +264,4 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
)
}
export default BoxPanel
export default TreePanel

63
packages/biz/src/treePanel/demo/basic.tsx
View File

@ -1,31 +1,15 @@
import React, { useState, useRef } from 'react';
import React, {} from 'react';
import { TreePanel } from '@zhst/biz';
import { Badge, Checkbox } from '@zhst/meta'
import { treeData, boxDataSource } from './mock'
import { boxDataSource } from './mock'
import { ImportOutlined, FolderAddOutlined, CloseCircleOutlined, FilterOutlined } from '@ant-design/icons';
const demo = () => {
const [checkedTags, setCheckedTags] = useState<string[]>([]);
const [tagExpandAll, setTagExpandAll] = useState(false);
const [showTagPanel, setShowTagPanel] = useState(true);
return (
<div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
<TreePanel
data={boxDataSource}
showTagPanel={showTagPanel}
tagExpandAll={tagExpandAll}
showSelectBar
onTagCheck={(value) => setCheckedTags(pre => {
if (pre.includes(value)) {
return pre.filter(item => item !== value)
} else {
return [...pre, value]
}
})}
onResetTags={() => setCheckedTags([])}
checkedTags={checkedTags}
filterList={[
{
label: '过滤',
@ -65,9 +49,15 @@ const demo = () => {
}
}
},
{
label: '过滤',
key: 'ee',
icon: <FilterOutlined />,
showTooltip: false,
},
]}
extra={(
<div>
<div style={{ border: '1px solid red' }}>
<span><Checkbox>全选</Checkbox></span>
<a style={{ float: 'right', color: '#09f' }} >批量操作</a>
</div>
@ -92,41 +82,6 @@ const demo = () => {
}
},
]}
tagList={[
{
label: '标签组1',
value: '1',
children: [
{
label: '标签1-1',
value: '1-1',
},
{
label: '标签1-2',
value: '1-2',
}
]
},
{
label: '标签组2',
value: '2',
children: [
{
label: '标签2-1',
value: '2-1',
},
{
label: '标签2-2',
value: '2-2',
}
]
},
]
}
onTagExpand={() => {
setTagExpandAll(pre => !pre)
setCheckedTags([])
}}
/>
</div>
);

0
packages/biz/src/treePanel/demo/no
View File

24
packages/biz/src/treePanel/demo/normal.tsx Normal file
View File

@ -0,0 +1,24 @@
import React, { useState, useRef } from 'react';
import { TreePanel } from '@zhst/biz';
import { boxDataSource } from './mock'
const demo = () => {
return (
<div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
<TreePanel
data={boxDataSource}
treeType='normal'
showSelectBar
filterSelectProps={{
placeholder: '请输入',
options: [
{ label: '测试', key: '123', value: 'test' }
]
}}
/>
</div>
);
};
export default demo;

135
packages/biz/src/treePanel/demo/withTags.tsx Normal file
View File

@ -0,0 +1,135 @@
import React, { useState, useRef } from 'react';
import { TreePanel } from '@zhst/biz';
import { Badge, Checkbox } from '@zhst/meta'
import { treeData, boxDataSource } from './mock'
import { ImportOutlined, FolderAddOutlined, CloseCircleOutlined, FilterOutlined } from '@ant-design/icons';
const demo = () => {
const [checkedTags, setCheckedTags] = useState<string[]>([]);
const [tagExpandAll, setTagExpandAll] = useState(false);
const [showTagPanel, setShowTagPanel] = useState(true);
return (
<div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
<TreePanel
data={boxDataSource}
showTagPanel={showTagPanel}
tagExpandAll={tagExpandAll}
showSelectBar
onTagCheck={(value) => setCheckedTags(pre => {
if (pre.includes(value)) {
return pre.filter(item => item !== value)
} else {
return [...pre, value]
}
})}
onResetTags={() => setCheckedTags([])}
checkedTags={checkedTags}
filterList={[
{
label: '过滤',
key: 'multi',
icon: <FilterOutlined />,
type: 'dropdown',
showTooltip: false,
dropdownConfig: {
menu: {
// 自定义返回项
_internalRenderMenuItem: (originNode, menuItemProps, stateProps) => {
return (
<div>
{originNode}
</div>
)
},
selectable: true,
items: [
{
label: <p style={{ margin: '0', textAlign: 'center' }} >全部</p>,
key: 'all',
onClick: () => console.log('多选1')
},
{
icon: <Badge status="success" />,
label: '多选1',
key: 'multi1',
onClick: () => console.log('多选1')
},
{
label: '多选2',
icon: <Badge status='error' />,
key: 'multi2',
},
],
}
}
},
]}
extra={(
<div>
<span><Checkbox>全选</Checkbox></span>
<a style={{ float: 'right', color: '#09f' }} >批量操作</a>
</div>
)}
optionList={[
{
label: '导入盒子',
key: 'import',
icon: <ImportOutlined />,
},
{
label: '新建组',
key: 'add',
icon: <FolderAddOutlined />,
},
{
label: '删除',
key: 'del',
icon: <CloseCircleOutlined />,
props: {
danger: true
}
},
]}
tagList={[
{
label: '标签组1',
value: '1',
children: [
{
label: '标签1-1',
value: '1-1',
},
{
label: '标签1-2',
value: '1-2',
}
]
},
{
label: '标签组2',
value: '2',
children: [
{
label: '标签2-1',
value: '2-1',
},
{
label: '标签2-2',
value: '2-2',
}
]
},
]
}
onTagExpand={() => {
setTagExpandAll(pre => !pre)
setCheckedTags([])
}}
/>
</div>
);
};
export default demo;

4
packages/biz/src/treePanel/index.less
View File

@ -6,11 +6,13 @@
&-input {
flex: 1;
margin-right: 4px;
}
&-btns {
flex: none;
&-btn {
margin-left: 8px;
}
}
}

3
packages/biz/src/treePanel/index.md
View File

@ -8,10 +8,11 @@ group:
title: 数据展示
---
## 代码演示
<code src="./demo/basic.tsx">基本用法</code>
<code src="./demo/normal.tsx">普通树</code>
<code src="./demo/withTags.tsx">标签面板</code>
## API

2
packages/biz/src/treePanel/index.tsx
View File

@ -2,6 +2,6 @@
* Created by jiangzhixiong on 2024/06/04
*/
import TreePanel from './TreePanel'
export type { TreePanelProps, TreePanelRefProps } from './TreePanel'
export type { TreePanelProps } from './TreePanel'
export default TreePanel

7
packages/biz/src/treeTransferModal/TreeTransferModal.tsx
View File

@ -1,17 +1,16 @@
import React, { FC, useState } from 'react';
import { Modal, ModalProps, Radio, RadioGroupProps, Select, SelectProps, TransferProps, TreeDataNode, TreeProps } from '@zhst/meta';
import { Modal, ModalProps, Radio, RadioGroupProps, Select, SelectProps, DataNode, TreeProps } from '@zhst/meta';
import TreeTransfer from '../treeTransfer';
import { TreeTransferProps } from '../treeTransfer'
export interface TreeTransferModalProps {
dataSource: TreeDataNode[]
dataSource: DataNode[]
treeProps?: TreeProps
targetItems: TreeDataNode[];
targetItems: DataNode[];
checkedKeys: string[];
onTreeSelect?: TreeProps['onSelect']
onTreeCheck?: TreeProps['onCheck']
onItemDelete?: TreeTransferProps['onItemDelete']
onChange?: TransferProps['onChange'];
onOk?: (data: any) => void;
onReset?: () => void;
open?: boolean