diff --git a/packages/biz/CHANGELOG.md b/packages/biz/CHANGELOG.md index 5aeef88..cea2db4 100644 --- a/packages/biz/CHANGELOG.md +++ b/packages/biz/CHANGELOG.md @@ -1,11 +1,16 @@ # @zhst/biz -## 0.22.3 +## 0.24.0 -### Patch Changes +### Minor Changes -- Updated dependencies - - @zhst/meta@0.22.0 +- 树组件支持 tag 面板、优化 filter 传参、优化 option 传参、废弃之前的定制化方案 + +## 0.23.0 + +### Minor Changes + +- feat(biz 无限滚动组件): 添加无限滚动组件,屏幕自适应撑开 ## 0.22.2 diff --git a/packages/biz/package.json b/packages/biz/package.json index ba5f7d0..08240e5 100644 --- a/packages/biz/package.json +++ b/packages/biz/package.json @@ -1,6 +1,6 @@ { "name": "@zhst/biz", - "version": "0.22.3", + "version": "0.24.0", "description": "业务库", "keywords": [ "business", diff --git a/packages/biz/src/infiniteList/components/SearchCard.tsx b/packages/biz/src/CustomCard/components/commonCard/CommonCard.tsx similarity index 54% rename from packages/biz/src/infiniteList/components/SearchCard.tsx rename to packages/biz/src/CustomCard/components/commonCard/CommonCard.tsx index af4f9e2..a4feece 100644 --- a/packages/biz/src/infiniteList/components/SearchCard.tsx +++ b/packages/biz/src/CustomCard/components/commonCard/CommonCard.tsx @@ -2,14 +2,14 @@ * Created by jiangzhixiong on 2024/04/28 */ -import React, { forwardRef, useContext, useImperativeHandle } from 'react' +import React, { forwardRef, MouseEventHandler, ReactNode, useContext, useImperativeHandle } from 'react' import { ConfigProvider, EMPTY_BASE64 } from '@zhst/meta' import { Flex, Image } from 'antd'; import './index.less' const { ConfigContext } = ConfigProvider -export interface Idata { +export interface IData { id?: string | number; url?: string; sort?: number; @@ -17,24 +17,25 @@ export interface Idata { subtitle?: string; } -export interface SearchCardProps extends Idata { +export interface CommonCardProps extends IData { prefixCls?: string; - data?: Idata + data?: IData width?: string; height?: string; onCreateTxt?: string; - onCreate?: (data: any) => void; + onCreate?: () => void; onAddTxt?: string; onAdd?: (data: any) => void; onRemoveTxt?: string; onRemove?: (data: any) => void; - customOptionRender?: React.ReactNode + actions?: ReactNode[] + onItemClick?: (data: any, e: React.MouseEvent) => void; } -export interface SearchCardRefProps { +export interface CommonCardRefProps { } -const SearchCard = forwardRef((props, ref) => { +const CommonCard = forwardRef((props, ref) => { const { prefixCls: customizePrefixCls, url, @@ -43,26 +44,29 @@ const SearchCard = forwardRef((props, ref) subtitle, sort, data, - onCreate, - onCreateTxt = '创建检索', - onAddTxt = '添加目标', - onRemoveTxt = '移除轨迹', - onAdd, - onRemove, - customOptionRender, + actions = [], width = '184px', - height = '100%' + height = '100%', + onItemClick } = props const { getPrefixCls } = useContext(ConfigContext) const componentName = getPrefixCls('biz-search-card', customizePrefixCls); - const stopBumble = (e: React.MouseEvent, fn?: ((data: Idata) => void), data?: Idata) => { - e.stopPropagation() - fn?.(data!) + const optionListRender = (_actions: ReactNode[]) => { + return _actions.map((action, i) => ( + // eslint-disable-next-line react/no-array-index-key +
  • + {action} + {i !== _actions.length - 1 && } +
    • + )) + } + + const handleItemClick = (e: React.MouseEvent, _data: IData | undefined) => { + onItemClick?.(data, e) } useImperativeHandle(ref, () => ({ - })) return ( @@ -72,9 +76,10 @@ const SearchCard = forwardRef((props, ref) width, height }} + onClick={e => handleItemClick(e, data)} >
    - {id || sort} + {sort || id} ((props, ref) preview={false} fallback={EMPTY_BASE64} /> - - {customOptionRender || ( - <> - stopBumble(e, onCreate, data)}>{onCreateTxt} - | - stopBumble(e, onAdd, data)}>{onAddTxt} - | - stopBumble(e, onRemove, data)}>{onRemoveTxt} - - )} - +
      + {optionListRender(actions)} +

    {title || data?.title}

    @@ -102,4 +99,4 @@ const SearchCard = forwardRef((props, ref) ) }) -export default SearchCard +export default CommonCard diff --git a/packages/biz/src/infiniteList/components/index.less b/packages/biz/src/CustomCard/components/commonCard/index.less similarity index 67% rename from packages/biz/src/infiniteList/components/index.less rename to packages/biz/src/CustomCard/components/commonCard/index.less index c9c413d..acd6da6 100644 --- a/packages/biz/src/infiniteList/components/index.less +++ b/packages/biz/src/CustomCard/components/commonCard/index.less @@ -1,18 +1,23 @@ .zhst-biz-search-card { + display: inline-block; border: 2px solid transparent; transition: .1s ease-in all; cursor: pointer; + overflow: hidden; &:hover { + transition: .5s ease all; border: 2px solid #09f; .zhst-biz-search-card-main-opt { display: flex; + align-items: center; } } &-main { position: relative; + overflow: hidden; &-num { position: absolute; @@ -32,11 +37,17 @@ &-img { width: 100%; - height: 240px; + overflow: hidden; + + &:hover { + transition: .5s ease-in all; + transform: scale(1.05); + } } &-opt { display: none; + margin: 0; position: absolute; padding: 6px 3px; left: 0; @@ -48,11 +59,28 @@ box-sizing: border-box; transition: .2s ease-in all; + li { + position: relative; + list-style: none; + flex: 1; + text-align: center; + } + + &-action-split { + position: absolute; + top: 50%; + right: 0; + width: 1px; + height: 80%; + transform: translateY(-50%); + background-color: #fff; + } + a { color: #fff; &:hover { - opacity: 0.9; + opacity: 0.88; } } } diff --git a/packages/biz/src/CustomCard/components/commonCard/index.tsx b/packages/biz/src/CustomCard/components/commonCard/index.tsx new file mode 100644 index 0000000..390b0af --- /dev/null +++ b/packages/biz/src/CustomCard/components/commonCard/index.tsx @@ -0,0 +1,5 @@ +import CommonCard from './CommonCard' + +export type { CommonCardProps, CommonCardRefProps } from './CommonCard' + +export default CommonCard diff --git a/packages/biz/src/CustomCard/demo/commonCard.tsx b/packages/biz/src/CustomCard/demo/commonCard.tsx new file mode 100644 index 0000000..8c48276 --- /dev/null +++ b/packages/biz/src/CustomCard/demo/commonCard.tsx @@ -0,0 +1,42 @@ +import React, { useEffect, useState } from 'react' +import { CommonCard } from '@zhst/biz' +import { uniqueId } from '@zhst/func' + +export default () => { + const [data, setData] = useState([]) + + useEffect(() => { + fetch('https://randomuser.me/api/?results=10&inc=id,key,name,gender,email,nat,picture&noinfo') + .then((res) => res.json()) + .then((body) => { + let res = body.results.map((o, index) => { + return { + id: uniqueId(), + sort: index + 1, + title: o.name.first, + subtitle: o.name.last, + url: o.picture.large + } + }) + setData(res); + }) + }, []) + + return ( +
    + {data?.map(item => ( + 创建检索, + 创建布控, + 删除点位 + ]} + /> + ))} +
    + ) +} diff --git a/packages/biz/src/CustomCard/index.md b/packages/biz/src/CustomCard/index.md new file mode 100644 index 0000000..758b53b --- /dev/null +++ b/packages/biz/src/CustomCard/index.md @@ -0,0 +1,31 @@ +--- +category: Components +title: CustomCard 定制化卡片 +toc: content +group: + title: 数据展示 +--- + +定制化卡片 + +## 代码演示 + +基本卡片 + +## API + +### CommonCardProps + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| data | 数据源 | IData[] | [] | - | +| prefixCls | 数据源 | string | [] | - | +| width | 宽度 | string | [] | - | +| height | 高度 | string | [] | - | +| onCreateTxt | 创建方法文字 | string | [] | - | +| onCreate | 创建方法 | () => void | [] | - | +| onAddTxt | 数据源 | string | [] | - | +| onAdd | 数据源 | () => void | [] | - | +| onRemoveTxt | 数据源 | string | [] | - | +| onRemove | 数据源 | () => void | [] | - | +| customOptionRender | 数据源 | React.ReactNode | - | - | diff --git a/packages/biz/src/CustomCard/index.tsx b/packages/biz/src/CustomCard/index.tsx new file mode 100644 index 0000000..67afe2c --- /dev/null +++ b/packages/biz/src/CustomCard/index.tsx @@ -0,0 +1,6 @@ +/** + * Created by jiangzhixiong on 2024/04/28 + */ + +export { default as CommonCard } from './components/commonCard' +export type { CommonCardProps, CommonCardRefProps } from './components/commonCard' diff --git a/packages/biz/src/boxSelectTree/boxSelectTree.tsx b/packages/biz/src/boxSelectTree/boxSelectTree.tsx index b8b7484..e460842 100644 --- a/packages/biz/src/boxSelectTree/boxSelectTree.tsx +++ b/packages/biz/src/boxSelectTree/boxSelectTree.tsx @@ -1,4 +1,4 @@ -import React, { FC, useContext } from 'react'; +import React, { FC, ReactNode, useContext } from 'react'; import { Tabs, TabsProps } from 'antd' import { ConfigProvider } from '@zhst/meta'; import BoxPanel from './components/boxPanel'; @@ -9,31 +9,18 @@ export interface BoxSelectTreeProps extends BoxPanelProps { onTabChange?: (e: any) => void tabsProps?: TabsProps prefixCls?: string; + footer?: ReactNode } const { ConfigContext } = ConfigProvider const BoxSelectTree: FC = (props) => { const { - data, - boxDataSource = [], - onTabChange, - onSearch, - onItemCheck, - onItemSelect, - onBoxBatchDelete, - onBoxDelete, - onCreateSubmit, - onClockClick, - onImport, - onCreate, + prefixCls: customizePrefixCls, tabsProps, - searchInputProps, - treeProps, - customImport, - showOptions, - extraBtns, - prefixCls: customizePrefixCls + onTabChange, + footer, + ...rest } = props const { getPrefixCls } = useContext(ConfigContext); const componentName = getPrefixCls('biz-box-select-tree', customizePrefixCls); @@ -61,23 +48,9 @@ const BoxSelectTree: FC = (props) => { {...tabsProps} /> + {footer}
    ); }; diff --git a/packages/biz/src/boxSelectTree/components/boxPanel/constants.ts b/packages/biz/src/boxSelectTree/components/boxPanel/constants.ts new file mode 100644 index 0000000..e69de29 diff --git a/packages/biz/src/boxSelectTree/components/boxPanel/index.less b/packages/biz/src/boxSelectTree/components/boxPanel/index.less index 0567c7f..73c02e3 100644 --- a/packages/biz/src/boxSelectTree/components/boxPanel/index.less +++ b/packages/biz/src/boxSelectTree/components/boxPanel/index.less @@ -1,9 +1,11 @@ .zhst-biz-box-select-tree-panel { &-search { display: flex; + align-items: center; padding: 0 12px; &-input { + flex: 1; margin-right: 4px; } @@ -18,6 +20,7 @@ justify-content: space-between; &-common { + flex: 1; padding: 4px 8px; } @@ -30,6 +33,60 @@ } } + &-tags { + position: relative; + height: 100%; + margin-top: 6px; + padding: 12px; + font-size: 0; + border-top: 1px solid #09f; + border-bottom: 1px solid #09f; + + &-tag { + margin-right: 6px; + font-weight: bold; + font-size: 14px; + transition:.3s ease all; + + &_common{ + margin-bottom: 6px; + display: inline-block; + margin-right: 6px; + padding: 6px; + font-size: 12px; + cursor: pointer; + background-color: #f6f6f6; + transition: .3s ease all; + border-radius: 3px; + box-sizing: content-box; + + &:hover { + color: #09f; + background-color: rgba(0, 0, 0, 6%); + } + } + + &_checked { + color: #09f; + background-color: #edf8ff; + } + + &_fz12 { + font-size: 12px; + } + + &_option { + display: inline-block; + } + + &_absolute { + position: absolute; + top: 12px; + right: 0; + } + } + } + &-tree { padding: 6px 0; } diff --git a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx index 2168c40..299b2b1 100644 --- a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx +++ b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx @@ -1,73 +1,160 @@ -import React, { FC, useState, useRef, useContext } from 'react'; -import{ Button, Divider, Input, Space, TreeDataNode } from 'antd' -import { ModalForm, ModalFormProps, ProFormInstance, ProFormText } from '@ant-design/pro-components' -import { ConfigProvider } from '@zhst/meta'; +import React, { FC, useState, useContext, ReactNode } from 'react'; +import{ Button, Divider, Dropdown, Input, TreeDataNode } from 'antd' +import { ModalFormProps } from '@ant-design/pro-components' +import { ButtonProps, ConfigProvider, Tooltip } from '@zhst/meta'; +import { IconFont } from '@zhst/icon'; import { ClockCircleOutlined, CloseCircleOutlined, DiffOutlined, FolderAddOutlined, ImportOutlined, SwitcherOutlined } from '@ant-design/icons' -import type { TreeProps, InputProps } from 'antd'; +import type { TreeProps, InputProps, DropDownProps } from 'antd'; +import classNames from 'classnames'; import type { BoxTreeProps } from '../../../tree'; -import TreeTransferModal from '../../../treeTransferModal' import BoxTree from '../../../tree'; import './index.less' -import classNames from 'classnames'; + +interface IOption { + label: string + key: string + icon?: string | ReactNode + type?: ButtonProps['type'] | 'dropdown' + disabled?: boolean; + showTooltip?: boolean; + props?: ButtonProps + onClick?: () => void + dropdownConfig?: DropDownProps +} + +interface ITag { + label: string + value: string + icon?: ReactNode + parentNode?: string + children?: ITag[] +} export interface BoxPanelProps { searchInputProps?: InputProps showOptions?: boolean treeProps?: Partial data: TreeDataNode[] - boxDataSource: TreeDataNode[] - handleImport?: () => void onSearch?: (e: any) => void onItemCheck?: TreeProps['onCheck'] onItemSelect?: TreeProps['onSelect'] + /** + * @deprecated 将于下个版本 0.23.0 以后弃用 + */ onBoxBatchDelete?: (data?: any) => void + /** + * @deprecated 将于下个版本 0.23.0 以后弃用 + */ onBoxDelete?: (data?: any) => void + /** + * @deprecated 将于下个版本 0.23.0 以后弃用 + */ onCreateSubmit?: ModalFormProps['onFinish'] - onClockClick?: () => void + /** + * @deprecated 将于下个版本 0.23.0 以后弃用 + */ + onClockClick?: () => void // + /** + * @deprecated 将于下个版本 0.23.0 以后弃用 + */ onImport?: () => void + /** + * @deprecated 将于下个版本 0.23.0 以后弃用 + */ onBatch?: () => void + /** + * @deprecated 将于下个版本 0.23.0 以后弃用 + */ onCreate?: () => void - customImport?: any - extraBtns?: any - prefixCls?: string; + customImport?: ReactNode | string // 自定义搜索栏边上的过滤图标 + extraBtns?: 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 BoxPanel: FC = (props) => { + const [isTreeCheckable, setIsTreeCheckable] = useState(false) const { searchInputProps, showOptions = true, extraBtns, + noFilter, data = [], onSearch, treeProps, onItemCheck, onItemSelect, - onCreateSubmit, onBoxBatchDelete, onBoxDelete, onClockClick, onImport, onBatch, onCreate, - boxDataSource, + showSearchBar = true, + optionList = [ + { + label: '导入盒子', + key: 'import', + icon: , + onClick: () => onImport?.() + }, + { + label: '新建组', + key: 'add', + icon: , + onClick: () => onCreate?.() + }, + { + label: '删除', + key: 'del', + icon: , + onClick: () => onBoxBatchDelete?.(), + props: { + danger: true + } + } + ], + filterList = [ + { + label: '多选', + key: 'multi', + icon: isTreeCheckable ? : , + onClick: () => onBatch?.() || handleCheckable() + }, + { + label: '时钟', + key: 'clock', + icon: , + onClick: () => onClockClick?.() + } + ], + showTagPanel, + tagList, + tagExpandAll, + onTagExpand, + checkedTags = [], + onTagCheck, + onResetTags, + tagFootRender, prefixCls: customizePrefixCls, - customImport + customImport: customFilter } = props const { getPrefixCls } = useContext(ConfigContext); const componentName = getPrefixCls('biz-box-select-tree-panel', customizePrefixCls); - const [isTreeCheckable, setIsTreeCheckable] = useState(false) - const [targetItems, setTargetItems] = useState([]); - const [boxChoiceOpen, setBoxChoiceOpen] = useState(false) - const [checkedKeys, setCheckedKeys] = useState([]); - const createFormRef = useRef< - ProFormInstance<{ - name: string; - boxList?: any[]; - }> - >() /** * 修改选择状态 @@ -77,151 +164,154 @@ const BoxPanel: FC = (props) => { setIsTreeCheckable(pre => !pre) } - const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => { - let _targetItems: TreeDataNode[] = [] - setCheckedKeys(keys) - info.checkedNodes.forEach(o => { - o.isLeaf && _targetItems.push(o) - }) - setTargetItems(_targetItems) + /** + * 初始化拓展 filter + * @param _list + * @returns + */ + const initFilter = (_list?: BoxPanelProps['filterList']) => { + const WithDropdown = (dom: ReactNode, _config?: DropDownProps) => { + return ( + + {dom} + + ) + } + + return _list?.map(item => ( + + {item.type === 'dropdown' ? ( + WithDropdown( + + + {idx !== _list.length - 1 && } + + )) + } + + /** + * 初始化标签面板 + * @param _tagList + * @param sort 是否分类 + * @returns + */ + const initTagPanel = (_tagList: BoxPanelProps['tagList'], sort?: boolean) => { + // 正常标签渲染 + const commonTag = (_tagProps: ITag) => ( + onTagCheck?.(_tagProps.value, _tagProps)} + >{_tagProps.label} + ) + // 包装父级标签 + const _withFather = (tag: ITag) => ( +
    + {tag.label} + {tag.children?.map?.(_tag => commonTag(_tag))} +
    + ) + + return _tagList?.map(tag => { + if (tag.children?.length && sort) { + return _withFather(tag) + } else { + return commonTag(tag) + } }) - setTargetItems(pre => pre.filter(o => o.key !== key)) - } - - // 盒子点击确定 - const onBoxChoiceOk = async (data: any) => { - createFormRef.current?.setFieldValue('boxList', data) - createFormRef.current?.setFieldValue('boxName', 123) - console.log(createFormRef.current?.getFieldValue('boxList')) - setBoxChoiceOpen(false) - } - - // 盒子选择重置 - const onBoxChoiceReset = () => { - setCheckedKeys([]) - setTargetItems([]) } return (
    - {/* 盒子选择弹框 */} - setBoxChoiceOpen(false)} - onRadioChange={(e) => console.log('radio', e.target.value)} // 顶部 radio 事件 - dataSource={boxDataSource} // 数据源 - targetItems={targetItems} // 右侧选中项 - checkedKeys={checkedKeys} // 左侧选中 - onReset={onBoxChoiceReset} // 重置按钮事件 - onOk={onBoxChoiceOk} // 确定按钮事件 - onTreeCheck={onTreeCheck} // 树check选中事件 - onItemDelete={onItemDelete} // 右侧点击删除事件 - /> -
    - onSearch?.(e)} - placeholder='请输入盒子名称' - {...searchInputProps} - /> - {customImport || ( -
    -
    - )} -
    - {/* 是否显示操作按钮 */} + {/* 搜索栏 */} + {showSearchBar && ( +
    + onSearch?.(e)} + placeholder='请输入盒子名称' + {...searchInputProps} + /> + {customFilter || (!noFilter && ( +
    + {/* @ts-ignore */} + {initFilter(filterList)} +
    + ))} +
    + )} + {/* 默认操作按钮 */} {showOptions && ( <>
    - - - {onCreate ? - ( - - ) : ( - - className={classNames(componentName + '-create-modal')} - open={onCreate ? false : undefined} - formRef={createFormRef} - title="新建组" - modalProps={{ destroyOnClose: true }} - layout='horizontal' - labelCol={{ span: 6 }} - wrapperCol={{ span: 18 }} - trigger={} - submitter={{ - searchConfig: { - submitText: '确定', - resetText: '取消', - }, - }} - onFinish={onCreateSubmit} - > - - - { - createFormRef.current?.setFieldValue('boxList', null) - onBoxChoiceReset() - }} >恢复默认 - setBoxChoiceOpen(true)}>范围选择 - - ) - }} - /> - - ) - } - - {/* @ts-ignore */} - + {initOptions(optionList)}
    )} {extraBtns} + {showTagPanel && ( +
    + 标签： + {initTagPanel(tagList, tagExpandAll)} +
    + {tagExpandAll && ( + 重置 + )} + {tagExpandAll ? '收起' : '更多'} +
    + {tagFootRender} +
    + )} { onItemRenameFinish: async (val, data) => console.log('盒子重命名提交(返回boolean,控制弹框显示\隐藏)', val, data), checkedKeys, }} + footer={} />
    ); diff --git a/packages/biz/src/boxSelectTree/demo/customFilter.tsx b/packages/biz/src/boxSelectTree/demo/customFilter.tsx new file mode 100644 index 0000000..73b9c76 --- /dev/null +++ b/packages/biz/src/boxSelectTree/demo/customFilter.tsx @@ -0,0 +1,68 @@ +import React, { useState } from 'react'; +import { BoxSelectTree } from '@zhst/biz'; +import { treeData, boxDataSource } from './mock' +import { FilterOutlined } from '@ant-design/icons'; +import { Badge } from 'antd'; + +const demo = () => { + const [activeKey] = useState('1') + const [checkedKeys] = useState([]); + + return ( +
    + , + type: 'dropdown', + showTooltip: false, + dropdownConfig: { + menu: { + // 自定义返回项 + _internalRenderMenuItem: (originNode, menuItemProps, stateProps) => { + return ( +
    + {originNode} +
    + ) + }, + selectable: true, + items: [ + { + label:

    全部

    , + key: 'all', + onClick: () => console.log('多选1') + }, + { + icon: , + label: '多选1', + key: 'multi1', + onClick: () => console.log('多选1') + }, + { + label: '多选2', + icon: , + key: 'multi2', + }, + ], + } + } + }, + ]} + /> +
    + ); +}; + +export default demo; diff --git a/packages/biz/src/boxSelectTree/demo/customOptions.tsx b/packages/biz/src/boxSelectTree/demo/customOptions.tsx new file mode 100644 index 0000000..85197ab --- /dev/null +++ b/packages/biz/src/boxSelectTree/demo/customOptions.tsx @@ -0,0 +1,33 @@ +import React, { useState } from 'react'; +import { BoxSelectTree } from '@zhst/biz'; +import { treeData, boxDataSource } from './mock' +import { CloseCircleOutlined } from '@ant-design/icons'; + +const demo = () => { + const [activeKey, setActiveKey] = useState('1') + const [checkedKeys, setCheckedKeys] = useState([]); + + return ( +
    + , + } + ]} + /> +
    + ); +}; + +export default demo; diff --git a/packages/biz/src/boxSelectTree/demo/extraBtns.tsx b/packages/biz/src/boxSelectTree/demo/extraBtns.tsx index d889b8b..2c01e2b 100644 --- a/packages/biz/src/boxSelectTree/demo/extraBtns.tsx +++ b/packages/biz/src/boxSelectTree/demo/extraBtns.tsx @@ -2,10 +2,12 @@ import React, { useState } from 'react'; import { BoxSelectTree } from '@zhst/biz'; import { treeData, boxDataSource } from './mock' import { Button } from 'antd'; +import { ClockCircleOutlined, DiffOutlined, SwitcherOutlined } from '@ant-design/icons'; const demo = () => { const [activeKey, setActiveKey] = useState('1') const [checkedKeys, setCheckedKeys] = useState([]); + const [isTreeCheckable, setIsTreeCheckable] = useState(false) return (
    @@ -13,10 +15,23 @@ const demo = () => { data={activeKey === '1' ? treeData : boxDataSource} boxDataSource={boxDataSource} showOptions={false} - extraBtns={} + extraBtns={
    Hello Lambo
    } tabsProps={{ activeKey, }} + filterList={[ + { + label: '多选', + key: 'multi', + icon: isTreeCheckable ? : , + onClick: () => setIsTreeCheckable(pre => !pre) + }, + { + label: '时钟', + key: 'clock', + icon: , + } + ]} treeProps={{ checkedKeys }} diff --git a/packages/biz/src/boxSelectTree/demo/noFilter.tsx b/packages/biz/src/boxSelectTree/demo/noFilter.tsx new file mode 100644 index 0000000..349e87d --- /dev/null +++ b/packages/biz/src/boxSelectTree/demo/noFilter.tsx @@ -0,0 +1,27 @@ +import React, { useState } from 'react'; +import { BoxSelectTree } from '@zhst/biz'; +import { treeData, boxDataSource } from './mock' + +const demo = () => { + const [activeKey, setActiveKey] = useState('1') + const [checkedKeys, setCheckedKeys] = useState([]); + + return ( +
    + +
    + ); +}; + +export default demo; diff --git a/packages/biz/src/boxSelectTree/demo/noOptions.tsx b/packages/biz/src/boxSelectTree/demo/noOptions.tsx index 304bb73..9b4b0b0 100644 --- a/packages/biz/src/boxSelectTree/demo/noOptions.tsx +++ b/packages/biz/src/boxSelectTree/demo/noOptions.tsx @@ -30,7 +30,7 @@ const demo = () => { tabsProps={{ activeKey, }} - customImport={} - onItemClick={data => console.log('item点击：', data)} /> ) diff --git a/packages/biz/src/infiniteList/index.md b/packages/biz/src/infiniteList/index.md index 186315c..2135cf3 100644 --- a/packages/biz/src/infiniteList/index.md +++ b/packages/biz/src/infiniteList/index.md @@ -18,21 +18,20 @@ group: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| data | 数据源 | Idata[] | [] | - | +| data | 数据源 | IData[] | [] | - | +| height | 无限滚动列表可视区高度 | number | 600 | - | | loading | 数据源 | Array[] | [] | - | -| data | 数据源 | Array[] | [] | - | -| data | 数据源 | Array[] | [] | - | -| data | 数据源 | Array[] | [] | - | -| data | 数据源 | Array[] | [] | - | -| data | 数据源 | Array[] | [] | - | +| dataLength | 数据数量 | number | [] | - | +| next | 下一页方法 | function | () => {} | - | +| hasMore | 是否还有更多 | boolean | false | - | +| loadingProps | 参考 antd-spin | spinProps | [] | - | +| itemRender | 自定义渲染项 | (IData) => ReactNode | - | - | -## Idata +## 设计思路 -```js -interface Idata { - id?: string | number; - url?: string; // 链接 - title?: string; // 标题 - subtitle?: string; // 副标题 -} -``` +无限滚动，同时支持： + +1. 自动、主动加载更多 +2. 一屏没加载完，继续加载，直到填满屏幕: + - 需要第二次加载的内容是否为空，为空则停止加载 + - 通过整体的page-height 和 浏览器可视区域 diff --git a/packages/biz/src/infiniteList/type.ts b/packages/biz/src/infiniteList/type.ts new file mode 100644 index 0000000..e69de29 diff --git a/packages/biz/src/tree/boxTree.tsx b/packages/biz/src/tree/boxTree.tsx index 48798f6..3caf29d 100644 --- a/packages/biz/src/tree/boxTree.tsx +++ b/packages/biz/src/tree/boxTree.tsx @@ -1,7 +1,7 @@ import React, { FC, useState } from 'react'; -import { Tree, Badge, TreeDataNode, Space, TreeProps, theme } from 'antd'; +import { Tree, Badge, TreeDataNode, Space, TreeProps, theme, ConfigProvider } from 'antd'; import { CloseOutlined, EditOutlined, SettingOutlined } from '@ant-design/icons' -import { ModalForm, ProFormText } from '@ant-design/pro-components'; +import classNames from 'classnames'; import './index.less' const componentName = 'zhst-biz-tree' @@ -30,7 +30,7 @@ const boxTree: FC = (props) => { showItemOption = true, treeCheckable = false, onItemRename, - onItemRenameFinish, + className: customClassName, customOptions } = props const { token } = useToken() @@ -45,6 +45,7 @@ const boxTree: FC = (props) => { return ( { @@ -70,38 +71,11 @@ const boxTree: FC = (props) => { {customOptions || ( <> - { - e.preventDefault(); - e.stopPropagation(); - onItemRename?.(_nodeData) - }} />} - submitter={{ - searchConfig: { - submitText: '确定', - resetText: '取消', - }, - }} - onFinish={async (value) => onItemRenameFinish?.(value, _nodeData)} - > - - + { + e.preventDefault(); + e.stopPropagation(); + onItemRename?.(_nodeData) + }} /> { e.preventDefault(); e.stopPropagation(); diff --git a/packages/biz/src/tree/index.less b/packages/biz/src/tree/index.less index 9da4e2d..da68ccc 100644 --- a/packages/biz/src/tree/index.less +++ b/packages/biz/src/tree/index.less @@ -1,9 +1,11 @@ -.zhst-biz-tree-item-render { - &_right { - display: none; - } +.zhst-biz-tree { + &-item-render { + &_right { + display: none; + } - &:hover &_right { - display: inline-flex; + &:hover &_right { + display: inline-flex; + } } } diff --git a/packages/material/CHANGELOG.md b/packages/material/CHANGELOG.md index 9e467a4..09d3800 100644 --- a/packages/material/CHANGELOG.md +++ b/packages/material/CHANGELOG.md @@ -1,12 +1,18 @@ # @zhst/material +## 0.18.4 + +### Patch Changes + +- Updated dependencies + - @zhst/biz@0.24.0 + ## 0.18.3 ### Patch Changes - Updated dependencies - - @zhst/meta@0.22.0 - - @zhst/biz@0.22.3 + - @zhst/biz@0.23.0 ## 0.18.2 diff --git a/packages/material/package.json b/packages/material/package.json index e4a246c..8979d9b 100644 --- a/packages/material/package.json +++ b/packages/material/package.json @@ -1,6 +1,6 @@ { "name": "@zhst/material", - "version": "0.18.3", + "version": "0.18.4", "description": "物料库", "keywords": [ "business",