@flatbiz/antd

import { DateFormatType, TAny, TNoopDefine, TPlainObject } from '@flatbiz/utils'; import { ButtonProps, DropdownProps, FormInstance, ModalProps, PopconfirmProps, SpaceProps } from 'antd'; import { ConfigProviderProps } from 'antd/es/config-provider'; import { CSSProperties, ReactElement, ReactNode } from 'react'; export type ButtonWrapperProps = Omit<ButtonProps, "onClick" | "color"> & { /** 当返回 Promise 时，按钮自动loading */ onClick?: (e: React.MouseEvent<HTMLElement>) => Promise<TAny> | void; /** 重复点击间隙，单位毫秒默认值：500 */ debounceDuration?: number; /** 基于GLOBAL中elemAclLimits按钮权限列表，控制按钮显示、隐藏 */ permission?: string; /** 是否隐藏按钮 */ hidden?: boolean; /** loading 显示位置，默认值：left */ loadingPosition?: "left" | "center"; /** 移除按钮内边距，一般用于 type=link 类型下 */ removeGap?: boolean; color?: string; }; export type TLocale = "en" | "zh-cn"; export type TFbaLocale = { TreeWrapper?: { /** 数据加载异常默认文案 */ requestError?: string; }; FbaDialogModal?: { cancelText?: string; }; }; export type ConfigProviderWrapperProps = Omit<ConfigProviderProps, "locale"> & { locale?: TLocale; /** 自定义国际化数据 */ customLocaleMessage?: Partial<TFbaLocale>; /** 同 fbaHooks.useCopyRemoveSpace[ignoreClass] */ copyOperateIgnoreClass?: string[]; }; export type DialogModalProps = Omit<ModalProps, "onOk" | "onCancel" | "getContainer" | "open" | "open" | "okButtonProps" | "cancelButtonProps" | "footer"> & { /** * 内置尺寸，根据比例固定高度、宽度，默认：无 * ``` * 1. 如果自定义了width、bodyHeight属性，size中的height、width将对应失效 * 2. 不传、传null值可取消内置尺寸 * ``` */ size?: "small" | "middle" | "large" | null; onOk?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>; onCancel?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>; content: string | ReactElement | ((form: FormInstance, operate: { onClose: TNoopDefine; }) => ReactElement); configProviderProps?: ConfigProviderWrapperProps; okHidden?: boolean; cancelHidden?: boolean; okButtonProps?: Omit<ButtonWrapperProps, "hidden" | "children" | "onClick">; cancelButtonProps?: Omit<ButtonWrapperProps, "hidden" | "children" | "onClick">; /** * 设置modal body height 为当前窗口height的百分比，例如：30 * @deprecated 已失效，可通过size属性设置 * ``` * 1. 最大值：80 * 1. 设置bodyStyle.height 后，bodyHeightPercent失效 * ``` */ bodyHeightPercent?: number; titleExtra?: ReactElement; /** * null则隐藏footer * ``` * extraData 为外部通过 useDialogModal.rerenderFooter 重新渲染footer携带的数据 * ``` */ footer?: null | ReactElement | ReactElement[] | ((form: FormInstance, extraData?: TPlainObject) => ReactElement); /** 内容高度，为styles.body.height快捷配置，优先级低于styles.body.height */ bodyHeight?: number; }; export interface DropdownMenuItem extends Omit<ButtonProps, "color"> { text?: string | ReactElement; color?: string; onClick?: (event: React.MouseEvent<HTMLElement>) => void | Promise<void>; permission?: string; needConfirm?: boolean; confirmMessage?: ReactNode; hidden?: boolean; confirmModalProps?: DialogModalProps; stopPropagation?: boolean; } export interface DropdownMenuWrapperProps extends Omit<DropdownProps, "menu"> { menuList: Array<DropdownMenuItem | null>; /** dropdown 设置弹框根节点在body下 */ isFixed?: boolean; } export interface ButtonOperateItem extends ButtonWrapperProps { /** hover 提示文字，isFold=true无效 */ hoverTips?: string | ReactElement; /** hover 提示类型默认：'tooltip' */ tipsType?: "popover" | "tooltip"; /** 按钮文案 */ text?: string | ReactElement; /** 自定义按钮颜色 */ color?: string; /** 是否需要二次弹框确认 */ needConfirm?: boolean; /** 二次弹框确认文案 */ confirmMessage?: ReactNode; popconfirmProps?: Pick<PopconfirmProps, "placement" | "okText" | "cancelText" | "trigger">; /** 是否折叠合拢 */ isFold?: boolean; confirmModalProps?: DialogModalProps; } export interface ButtonOperateProps { className?: string; style?: CSSProperties; /** * 如果数组中元素为ReactElement类型 * 1. 一般为antd Button组件，如果组件存在属性hidden=true、v-hidden=true，则会隐藏 * 2. 可配置 v-permission 权限值，例如 v-permission="add" * 3. 任何confirm、disabled等状态在外部控制 * 3. 不支持fold效果 */ operateList: Array<ButtonOperateItem | null | ReactElement>; /** 是否换行，默认true */ wrap?: boolean; /** 隐藏图标Icon */ foldIcon?: ReactElement; /** 按钮之间是否添加分隔符 */ split?: boolean; /** 多个按钮的包装组件Space属性 */ spaceProps?: SpaceProps; /** 间距，默认：10；split=true配置下无效（可通过spaceProps设置间距） */ gap?: number; /** 折叠合拢属性 */ dropdownMenuProps?: Omit<DropdownMenuWrapperProps, "menuList">; } export type TagListSelectValue = string | number | boolean; export type TagListSelectDataItem = { label: string; value: TagListSelectValue; color?: string; }; export type TagListSelectProps = { dataList: TagListSelectDataItem[]; /** 颜色配置数据，例如：{ 1:'red', 2: 'blue'} key值与 dataList中value相同 */ colorMap?: Record<string | number, string>; value?: TagListSelectValue | TagListSelectValue[]; /** 是否强制匹配，默认值false */ forceMatch?: boolean; }; export type TableColumnIconRenderProps = { /** 额外内容，一般为Icon */ extra: ReactElement; extraPosition?: "before" | "after"; onClick?: (e: any) => void; /** 是否显示原单元格数据，默认值：true */ showData?: boolean; /** 溢出显示【...】, 最大长度（默认：20个字节） */ showMaxNumber?: number; /** 未溢出显示【extra】配置，默认值：true */ notOverflowShowExtra?: boolean; }; export declare const tableCellRender: { /** * 表格单元格拼接额外内容渲染 * ``` * 1. extra 额外内容 * 2. showData 是否显示原单元格数据，默认值：true * 3. showMaxNumber 显示最大长度，作用于原单元格字符串数据 * * * 结合table column render 使用 * # 在单元格渲染文字右侧添加图标 * render: tableCellRender.extraContentRender(() => { * return { * extra: <FullscreenOutlined />, * onClick: () => { ... }, * }; * }), * ``` */ extraContentRender: (handle: (item: TPlainObject) => TableColumnIconRenderProps) => (value: TAny, item: TPlainObject) => any; /** * table 索引展示，如果存在pageSize、pageNo参数可分页展示索引，否则每页都从1开始 * @deprecated 已过时 4.3.0版本移除，请使用 serialNumberCell */ indexCell: (pageNo?: number, pageSize?: number) => (_value: any, _record: any, index: number) => number; /** * table 序号展示，如果存在pageSize、pageNo参数可分页展示累加序号，否则每页都从1开始 * ``` * render: tableCellRender.serialNumberCell(() => { * return { pageNo,pageSize }; * }), * ``` */ serialNumberCell: (method?: () => { pageNo?: number; pageSize?: number; }) => (_value: any, _record: any, index: number) => number; /** * 表格日期格式数据渲染，默认格式：YYYY-MM-DD * ``` * 独立使用 * tableCellRender.dateCell('YYYY-MM-DD hh:mm:ss')(value) * * 结合table column render 使用 * render: tableCellRender.dateCell('YYYY-MM-DD hh:mm:ss') * render: (value) => { * return tableCellRender.dateCell('YYYY-MM-DD')(value); * } * ``` */ dateCell: (dateFormatType?: DateFormatType, defaultValue?: string) => (value: string | number) => string | number | undefined; /** * table操作栏目渲染 * ``` * 使用方式 * tableCellRender.operateCell((item) => ({ * operateList: [ * { * text: '编辑', * onClick: onItemOperate.bind(null, 'update', item), * }, * { * text: '删除', * needConfirm: true, * confirmMessage: '确定要删除吗？', * onClick: onItemOperate.bind(null, 'delete', item), * }, * ], * })) * ``` */ operateCell: (options: (item: TAny, index: number) => ButtonOperateProps) => (_value: string | number, record: any, index: number) => import("react").JSX.Element; /** * 实现字段超出隐藏，默认长度10个字符 * @deprecated 已过期，请使用 TextOverflow 组件实现 * ``` * 1. showMaxNumber: 显示最大长度 * 2. 会讲字符转出字节进行计算显示 * ``` */ tooltipCell: (showMaxNumber?: number, defaultValue?: string) => (value: string | number) => string | number | import("react").JSX.Element | undefined; /** * Tag格式数据渲染，可结合枚举定义数据 * ``` * 独立使用 * tableCellRender.selectorCell([{ label: '已开启', value: 1 }])(value) * tableCellRender.selectorCell([{ label: '已开启', value: 1, color: '#108ee9' }])(value) * tableCellRender.selectorCell([{ label: '已开启', value: 1 }], { 1: '#108ee9' })(value) * tableCellRender.selectorCell(taskTypeEnumList)(value); * * * 结合table column render 使用 * render: tableCellRender.selectorCell(taskTypeEnumList); * render: tableCellRender.selectorCell([{ label: '已开启', value: 1 ]); * render: (value) => { * return tableCellRender.selectorCell([{ label: '已开启', value: 1 ])(value); * } * * 其中value值可以是单个值或者数组；例如：'1' 或者 ['1', '2'] * ``` */ selectorCell: (selectorList: TagListSelectProps["dataList"], colorMap?: TagListSelectProps["colorMap"], options?: { /** 最大显示Tag数量，超出折叠隐藏 */ maxShowCount?: number; /** 触发maxShowCount后，被折叠的内容是否显示完整tag，默认值：false */ foldShowAllTag?: boolean; }) => (value?: TAny) => import("react").JSX.Element | null; /** * 单元格对象数据处理，支持多级处理 * ``` * tableCellRender.objectCell('a.b.c') * ``` */ objectCell: (key: string, defaultValue?: string) => (value?: TPlainObject) => any; /** * 分金额展示，入参分，显示元（默认添加千分位） * ``` * 可配置 * 1. separator：是否显示千分位分隔符，默认值：false * 2. defaultValue：当值为空默认展示 * 3. hideBgColor：隐藏背景颜色 * * 例如： * fen2yuanCell()(100090) => 1000.90 * fen2yuanCell({separator: true})(100090) => 1,000.90 * fen2yuanCell()('abc') => abc * fen2yuanCell({defaultValue: '--'})('') => -- * fen2yuanCell()('') => undefined * fen2yuanCell({ defaultValue: 0 })('') => 0.00 * ``` */ fen2yuanCell: (options?: { /** 是否显示分隔符，默认值：false */ separator?: boolean; defaultValue?: string | number; /** 隐藏背景颜色, 默认值：true */ hideBgColor?: boolean; }) => (value?: string | number) => string | number | import("react").JSX.Element | undefined; /** * 分金额展示，入参分，显示万元（默认添加千分位） * ``` * 可配置 * 1. separator：是否显示千分位分隔符，默认值：false * 2. defaultValue：当值为空默认展示 * 3. showBgColor：隐藏背景颜色 * 4. removeTailZero：移除小数点后末尾零 * * 例如： * fen2yuanCell()(1000900000) => 1000.90 * fen2yuanCell({separator: true})(1000900000) => 1,000.90 * fen2yuanCell()('abc') => abc * fen2yuanCell({defaultValue: '--'})('') => -- * fen2yuanCell()('') => undefined * fen2yuanCell({ defaultValue: 0 })('') => 0.00 * ``` */ fen2wanCell: (options?: { /** 是否显示分隔符，默认值：false */ separator?: boolean; defaultValue?: string | number; /** 隐藏背景颜色，默认：false */ showBgColor?: boolean; /** 移除小数点后末尾零 */ removeTailZero?: boolean; }) => (value?: string | number) => string | number | import("react").JSX.Element | undefined; /** * 单元格徽标展示数据 * ``` * 1. badge 默认颜色：灰色rgba(0, 0, 0, 0.25) * * 独立使用 * tableCellRender.badgeCell([{ label: '已开启', value: 1 ])(value) * tableCellRender.badgeCell([{ label: '已开启', value: 1, color: '#108ee9' }])(value) * tableCellRender.badgeCell([{ label: '已开启', value: 1 }], { 1: '#108ee9' })(value) * * 结合table column render 使用 * render: tableCellRender.badgeCell([{ label: '已开启', value: 1 ]) * render: (value) => { * return tableCellRender.badgeCell([{ label: '已开启', value: 1 ])(value) * } * ``` */ badgeCell: (selectorList: { label: string; value: TagListSelectValue; color?: string; }[], colorMap?: Record<string | string, string>) => (value?: TAny) => any; /** * 单元格点击事件 * ``` * 独立使用 * tableCellRender.clickCell(onClick)(value, record) * * 结合table column render 使用 * render: tableCellRender.clickCell(onClick) * render: (value, record) => { * return tableCellRender.clickCell(onClick)(value, record) * } * ``` */ clickCell: (onClick: (record: TPlainObject, e: any) => void, defaultValue?: string) => (value: TAny, record: TPlainObject) => string | import("react").JSX.Element | undefined; }; export {};