UNPKG

@flatbiz/antd

Version:
153 lines (150 loc) 5.92 kB
import { TAny, TNoopDefine, TPlainObject } from '@flatbiz/utils'; import { ButtonProps, DropdownProps, FormInstance, ModalProps, PopconfirmProps, SpaceProps } from 'antd'; import { ConfigProviderProps } from 'antd/es/config-provider'; import { CSSProperties, FC, 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 declare const ButtonOperateItemContent: (props: Pick<ButtonOperateItem, "hoverTips" | "tipsType"> & { content: ReactNode; }) => import("react").JSX.Element; /** * 按钮组合处理组件 * ``` * 1. operateList中存在ReactElement类型的元素,可通过配置 v-permission 属性来设置权限,例如 v-permission="add" * 2. operateList中存在ReactElement类型的元素,如果有hidden、v-hidden属性,值为true会隐藏 * * * flatbiz/antd@4.2.49 * 1. 替换 Fold 中 needConfirm交互,有 Popconfirm 改为 dialogConfirm组件实现二次弹框确认功能 * 2. 修改原因:升级 antd 5.5.1 后,Dropdown 中 Popconfirm弹框组合使用存在问题 * ``` */ export declare const ButtonOperate: FC<ButtonOperateProps>; export {};