@flatbiz/antd
Version:
98 lines (95 loc) • 3.7 kB
TypeScript
import { TAny, TNoopDefine, TPlainObject } from '@flatbiz/utils';
import { ButtonProps, DrawerProps, FormInstance } from 'antd';
import { ConfigProviderProps } from 'antd/es/config-provider';
import { 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 DialogDrawerProps = Omit<DrawerProps, "onOk" | "onCancel" | "getContainer" | "open" | "open" | "footer" | "extra"> & {
okText?: string | ReactElement;
cancelText?: string | ReactElement;
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;
okButtonExtraProps?: Omit<ButtonWrapperProps, "onClick" | "children" | "loading">;
cancelButtonExtraProps?: Omit<ButtonWrapperProps, "onClick" | "children">;
okHidden?: boolean;
cancelHidden?: boolean;
/** 设置操作区域位置 */
operatePosition?: "header" | "footer";
/** 右上角自定义内容,如果operatePosition=header,此设置无效 */
extra?: ReactNode | ((form: FormInstance) => ReactElement);
/**
* ```
* 1. 自定义弹框操作区域,通过 operatePosition 配置可以自定义位置
* 2. extraData 为外部通过 useDialogModal.rerenderFooter 重新渲染footer携带的数据
* ```
*/
operateRender?: (form: FormInstance, extraData?: TPlainObject) => ReactElement;
};
/**
* 抽屉弹框
* ```
* 1. 可嵌套使用
* 2. 为什么不推荐使用
* dialogDrawer.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化
* 适配兼容旧版浏览器(https://ant-design.antgroup.com/docs/react/compatible-style-cn)
* 3. 需要修改默认主题风格的场景,请使用
* const { appDialogDrawer } = FbaApp.useDialogDrawer();
* appDialogDrawer.open({})
* ```
*/
export declare const dialogDrawer: {
open: (props: DialogDrawerProps) => {
close: () => void;
};
/**
* ```
* 1. 关闭最新弹框,如果有多个弹框只能关闭最后一个
* 2. 多个弹框主动关闭,只能使用 dialogDrawer.open()返回值中的close
* ```
*/
close: () => void;
/**
* ```
* 1. rerenderFooter 携带指定数据重新渲染 footer,可用于切换footer中的按钮状态
* ```
*/
useDialogDrawer: () => {
/** 重新渲染 footer, data为携带的数据,是footer的第二个参数 */
rerenderFooter: (data?: TPlainObject) => void;
};
};
export {};