@flatbiz/antd
Version:
1,680 lines (1,678 loc) • 221 kB
TypeScript
import { DateFormatType, LabelValueItem, TAny, TNoopDefine, TPlainObject } from '@flatbiz/utils';
import { IAllProps } from '@tinymce/tinymce-react';
import { AlertProps, ButtonProps, CardProps, CascaderProps, CheckboxProps, CollapseProps, ColorPickerProps, DatePicker, DrawerProps, DropdownProps, FormInstance, FormItemProps, FormListFieldData, FormListOperation, FormProps, GetProps, InputNumber, InputNumberProps, InputProps, MentionProps, ModalProps, PaginationProps, PopconfirmProps, PopoverProps, RadioGroupProps, RowProps, SelectProps, SpaceProps, SwitchProps, TableProps, Tabs, TabsProps, TagProps, TimePickerProps, TimeRangePickerProps, TooltipProps, TreeProps, TreeSelectProps, UploadFile, UploadProps } from 'antd';
import { FormListProps } from 'antd/es/form/FormList.js';
import { CheckboxGroupProps } from 'antd/lib/checkbox/index.js';
import { ConfigProviderProps } from 'antd/lib/config-provider/index.js';
import { FormListProps as FormListProps$1 } from 'antd/lib/form/index.js';
import { SearchProps, TextAreaProps } from 'antd/lib/input/index.js';
import { ColumnsType } from 'antd/lib/table/index.js';
import { RcFile, UploadChangeParam } from 'antd/lib/upload/index.js';
import { CSSProperties, Component, DependencyList, DetailedHTMLProps, FC, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes, useEffect } from 'react';
import { IAceEditorProps } from 'react-ace';
import { SplitProps } from 'react-split';
import { Editor as TinyMCEEditor } from 'tinymce';
export type AceEditorGroovyProps = Omit<IAceEditorProps, "mode" | "value" | "onChange" | "theme"> & {
/** 编辑器高度，默认值：100%，可输入值例如 300px、100% */
height?: string;
value?: string | TPlainObject | TPlainObject[];
onChange?: (value?: string | TPlainObject | TPlainObject[]) => void;
/** 配置输入自动提示关键字 */
autoCompleterList?: {
name: string;
desc?: string;
}[];
/**
* 编辑器主题配置，例如：github、terminal、xcode
* ```
* 1. 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
* 2. 配置 theme = xxxx
* ```
*/
theme?: string;
};
/**
* groovy编辑器
* ```
* 1. 受控组件，需要使用value、onChange配合显示数据
* 2. heigth 默认为100%，如果外层无高度，需要自定义设置height属性
* 3. 通过 autoCompleterList 配置自动提示关键字
* 4. 通过 hiddenVerifyBtn、hiddenFormatterBtn可隐藏底部操作按钮
* 5. 通过 theme 配置编辑器主题，例如：
* 5.1 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
* 5.2 配置 theme = xxxx
* ```
*/
export declare const AceEditorGroovy: (props: AceEditorGroovyProps) => import("react").JSX.Element;
export type AceEditorJavaProps = Omit<IAceEditorProps, "mode" | "value" | "onChange" | "theme"> & {
/** 编辑器高度，默认值：100%，可输入值例如 300px、100% */
height?: string;
value?: string | TPlainObject | TPlainObject[];
onChange?: (value?: string | TPlainObject | TPlainObject[]) => void;
/** 配置输入自动提示关键字 */
autoCompleterList?: {
name: string;
desc?: string;
}[];
/**
* 编辑器主题配置，例如：github、terminal、xcode
* ```
* 1. 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
* 2. 配置 theme = xxxx
* ```
*/
theme?: string;
};
/**
* java编辑器
* ```
* 1. 受控组件，需要使用value、onChange配合显示数据
* 2. heigth 默认为100%，如果外层无高度，需要自定义设置height属性
* 3. 通过 autoCompleterList 配置自动提示关键字
* 4. 通过 hiddenVerifyBtn、hiddenFormatterBtn可隐藏底部操作按钮
* 5. 通过 theme 配置编辑器主题，例如：
* 5.1 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
* 5.2 配置 theme = xxxx
* ```
*/
export declare const AceEditorJava: (props: AceEditorJavaProps) => import("react").JSX.Element;
export type AceEditorJsonProps = Omit<IAceEditorProps, "mode" | "value" | "onChange" | "theme"> & {
/** 编辑器高度，默认值：100%，可输入值例如 300px、100% */
height?: string;
value?: string | TPlainObject | TPlainObject[];
onChange?: (value?: string | TPlainObject | TPlainObject[]) => void;
/** 配置输入自动提示关键字 */
autoCompleterList?: {
name: string;
desc?: string;
}[];
/** 是否隐藏【验证数据】按钮 */
hiddenVerifyBtn?: boolean;
/** 是否隐藏内部验证异常文案 */
hiddenErrorMsg?: boolean;
/**
* 编辑器主题配置，例如：github、terminal、xcode
* ```
* 1. 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
* 2. 配置 theme = xxxx
* ```
*/
theme?: string;
/** 底部额外布局 */
footerExtraRender?: (children: ReactElement) => ReactElement;
footerStyle?: CSSProperties;
};
/**
* Json编辑器
* ```
* 1. 受控组件，需要使用value、onChange配合显示数据
* 2. heigth 默认为100%，如果外层无高度，需要自定义设置height属性
* 3. 通过 autoCompleterList 配置自动提示关键字
* 4. 通过 hiddenVerifyBtn 配置隐藏底部操作按钮
* 5. 通过 theme 配置编辑器主题，例如：
* 5.1 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
* 5.2 配置 theme = xxxx
* ```
*/
export declare const AceEditorJson: (props: AceEditorJsonProps) => import("react").JSX.Element;
export type AceEditorMysqlProps = Omit<IAceEditorProps, "theme" | "mode" | "value" | "onChange"> & {
/** 编辑器高度，默认值：100%，可输入值例如 300px、100% */
height?: string;
value?: string;
onChange?: (value?: string) => void;
/** 配置输入自动提示关键字 */
autoCompleterList?: {
name: string;
desc?: string;
}[];
/** 隐藏【美化】按钮 */
hiddenFormatterBtn?: boolean;
/**
* 编辑器主题配置，例如：github、terminal、xcode
* ```
* 1. 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
* 2. 配置 theme = xxxx
* ```
*/
theme?: string;
/** 底部额外布局 */
footerExtraRender?: (children: ReactElement) => ReactElement;
footerStyle?: CSSProperties;
};
export declare const AceEditorMysql: (props: AceEditorMysqlProps) => import("react").JSX.Element;
export type AceEditorXmlProps = Omit<IAceEditorProps, "mode" | "value" | "onChange" | "theme"> & {
/** 编辑器高度，默认值：100%，可输入值例如 300px、100% */
height?: string;
value?: string | TPlainObject | TPlainObject[];
onChange?: (value?: string | TPlainObject | TPlainObject[]) => void;
/** 配置输入自动提示关键字 */
autoCompleterList?: {
name: string;
desc?: string;
}[];
/** 隐藏【验证数据】按钮 */
hiddenVerifyBtn?: boolean;
/** 是否隐藏内部验证异常文案 */
hiddenErrorMsg?: boolean;
/** 隐藏【美化】按钮 */
hiddenFormatterBtn?: boolean;
/**
* 编辑器主题配置，例如：github、terminal、xcode
* ```
* 1. 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
* 2. 配置 theme = xxxx
* ```
*/
theme?: string;
/** 底部额外布局 */
footerExtraRender?: (children: ReactElement) => ReactElement;
footerStyle?: CSSProperties;
};
/**
* xml编辑器
* ```
* 1. 受控组件，需要使用value、onChange配合显示数据
* 2. heigth 默认为100%，如果外层无高度，需要自定义设置height属性
* 3. 通过 autoCompleterList 配置自动提示关键字
* 4. 通过 hiddenVerifyBtn、hiddenFormatterBtn可隐藏底部操作按钮
* 5. 通过 theme 配置编辑器主题，例如：
* 5.1 顶部引入 import 'ace-builds/src-noconflict/theme-xxxx';
* 5.2 配置 theme = xxxx
* ```
*/
export declare const AceEditorXml: (props: AceEditorXmlProps) => import("react").JSX.Element;
export type AlertWrapperProps = AlertProps & {
size?: "small" | "default" | "large";
};
/**
* antd Alert 无法控制内边距，此组件扩展size属性
*/
export declare const AlertWrapper: (props: AlertWrapperProps) => import("react").JSX.Element;
export type AmountFenInputProps = Omit<InputNumberProps, "defaultValue"> & {
value?: number;
onChange?: (value?: number) => void;
};
export declare const AmountFenInput: (props: AmountFenInputProps) => import("react").JSX.Element;
export type AmountFenInputFormItemProps = FormItemProps & {
inputNumberProps?: Omit<InputNumberProps, "value" | "onChange" | "defaultValue">;
};
/**
* 分金额输入组件（集成了FormItem），入参为分，返回为分，显示为元
* ```
* 例如：
* <AmountFenInputFormItem
* inputNumberProps={{ placeholder: '请输入', style: { width: 'auto' } }}
* name="amount"
* label="金额"
* />
* ```
*/
export declare const AmountFenInputFormItem: (props: AmountFenInputFormItemProps) => import("react").JSX.Element;
export type AnchorStepsProps = {
steps: {
id: string;
title: string;
content: ReactElement;
}[];
className?: string;
};
/**
* 锚点步骤组件
* @param props
* @returns
*/
export declare const AnchorSteps: (props: AnchorStepsProps) => import("react").JSX.Element;
export type BlockLayoutProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
/**
* 块布局（控制light/dark模式下，块背景色和字体颜色）
* ```
* 1. light 模式
* 网页背景色为 #1b1a1a（黑灰），此时块布局背景色为 #000（黑色），字体颜色rgba(255, 255, 255, 0.85)
* 2. dark 模式
* 网页背景色为 #f9f9f9（白灰），此时块布局背景色为 #FFF（白色），字体颜色rgba(0, 0, 0, 0.88)
* ```
* @param props
* @returns
*/
export declare const BlockLayout: (props: BlockLayoutProps) => import("react").JSX.Element;
export type FormItemNamePath = string | number | Array<string | number>;
export type TLocale = "en" | "zh-cn";
export type TFbaLocale = {
TreeWrapper?: {
/** 数据加载异常默认文案 */
requestError?: string;
};
FbaDialogModal?: {
cancelText?: string;
};
};
export declare const types: () => void;
export type ConfigProviderWrapperProps = Omit<ConfigProviderProps, "locale"> & {
locale?: TLocale;
/** 自定义国际化数据 */
customLocaleMessage?: Partial<TFbaLocale>;
/** 同 fbaHooks.useCopyRemoveSpace[ignoreClass] */
copyOperateIgnoreClass?: string[];
};
/**
* antd ConfigProvider 扩展类
* ```
* 1. 新增监听辅助行为，移除复制文本中前后空格能力
* ```
*/
export declare const ConfigProviderWrapper: (props: ConfigProviderWrapperProps) => import("react").JSX.Element;
export type BootstrapProps = {
/** 是否紧凑模式 */
compact?: boolean;
/** 是否drak模式 */
dark?: boolean;
children: ReactNode;
configProviderProps?: ConfigProviderWrapperProps;
/** @default zhCN */
locale?: "en" | "zh-cn";
/**
* 背景颜色配置
* ```
* 默认值：
* dark: { bgColor: '#1b1a1a', blockBgColor: '#000' }
* light: { bgColor: '#f9f9f9', blockBgColor: '#FFF' }
* ```
*/
bgColorConfig?: {
dark?: {
bgColor?: string;
blockBgColor?: string;
};
light?: {
bgColor?: string;
blockBgColor?: string;
};
};
};
/**
* 如果当前项目入口不使用@flatbiz/pro-layout，必须使用 Bootstrap 组件包装
* ```
* Bootstrap 内部
* 1. 封装 antd App组件
* 2. 封装 @flatbiz/antd FbaApp组件
* 3. 适配 light/dark模式
* 4. 封装 antd ConfigProvider 可配置主题
* ```
*/
export declare const Bootstrap: (props: BootstrapProps) => import("react").JSX.Element;
export type TBoxBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
export interface ICommonReact {
children?: ReactNode;
className?: string;
style?: CSSProperties;
}
export type Gutter = number | undefined | Partial<Record<TBoxBreakpoint, number>>;
export type GutterParams = Gutter | [
Gutter,
Gutter
];
/**
* 监听盒子大小变化，返回当前的断点
* @param dom
* @returns
*/
export declare const useBoxBreakpoint: (dom: any) => {
boxBreakpoint: TBoxBreakpoint;
/**
* @deprecated
* 使用 haveWidth 替代
*/
isInit: boolean;
/** width为0，或者不存在 */
haveWidth: boolean;
};
declare const PresetDefaultGrid: {
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
xxl: number;
};
export interface BoxRowProps {
/**
* 在不同响应尺寸下的元素占位格数
* 应用到所有Col子元素上
*/
defaultGrid?: Partial<typeof PresetDefaultGrid>;
/** 间距 */
gutter?: GutterParams;
/** flex 布局的垂直对齐方式 */
align?: "top" | "middle" | "bottom" | "stretch";
/** flex 布局的水平排列方式 */
justify?: "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly";
/** 尺寸变化回调 */
onBoxBreakpointChange?: (breakpoint: TBoxBreakpoint) => void;
}
export type BoxColProps = {
/**
* 栅格占位格数
* span 优先级最高：配置了span后，其他的响应式配置将失效；
* 范围 0 ～ 24
* 为 0 相当于隐藏
* 为 24 相当于独占一行
*/
span?: number;
/** 屏幕 < 576px */
xs?: number;
/** 屏幕 ≥ 576px */
sm?: number;
/** 屏幕 ≥ 768px */
md?: number;
/** 屏幕 ≥ 992px */
lg?: number;
/** 屏幕 ≥ 1200px */
xl?: number;
/** 屏幕 ≥ 1600px */
xxl?: number;
/**
* 是否移除 外部包装div
* ```
* 1. 如果children 为数组，则此配置不生效
* 2. 如果移除，会在children中添加style和className（所以children组件必须要有style、className属性）
* ```
*/
removeWrapper?: boolean;
};
export declare const BoxGrid: {
/**
* 网格响应式布局
*```
* 1. 应用场景：根据盒子大小决定内部元素的布局
* 2. 子元素只能是 BoxGrid.Col
*/
Row: import("react").FC<BoxRowProps & ICommonReact>;
/**
* 网格响应式布局，
* 默认值：
* { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }
* xs={24} sm={12} md={12} lg={8} xl={8} xxl={6}
*```
* 1. 设置 span 栅格占位格数，0 ～ 24
* 2. grid 自定义响应式网格布局
* xs: 容器尺寸 < 576px
* sm: 容器尺寸 ≥ 576px
* md: 容器尺寸 ≥ 768px
* lg: 容器尺寸 ≥ 992px
* xl: 容器尺寸 ≥ 1200px
* xxl: 容器尺寸 ≥ 1600px
* ```
*/
Col: import("react").FC<BoxColProps & ICommonReact>;
/**
* 获取栅格响应式布局的配置
* @param minSize 元素的最小可接受宽度
* @returns { xs: num, sm: num, md: num, lg: num, xl: num, xxl: num }
*/
getGridMapByRange: (minSize: number) => Record<TBoxBreakpoint, number>;
};
export type ButtonWrapperProps = Omit<ButtonProps, "onClick" | "color"> & {
/** 当返回 Promise 时，按钮自动loading */
onClick?: (e: React.MouseEvent) => Promise<TAny> | void;
/** 重复点击间隙，单位毫秒 默认值：500 */
debounceDuration?: number;
/** 基于GLOBAL中elemAclLimits按钮权限列表，控制按钮显示、隐藏 */
permission?: string;
/** 是否隐藏按钮 */
hidden?: boolean;
/** loading 显示位置，默认值：left */
loadingPosition?: "left" | "center";
/** 移除按钮内边距，一般用于 type=link 类型下 */
removeGap?: boolean;
color?: string;
};
/**
* antd Button包装组件
* 1. 添加按钮 onClick 返回 Promise自动loading效果
* 2. 内置 防抖 效果（在第一触发函数后，在指定时间内再次触发无效，即两次触发的时间间隙大于指定时间）
* @param props
* @returns
*/
export declare const ButtonWrapper: (props: ButtonWrapperProps) => import("react").JSX.Element | null;
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只在第一次弹起时，执行一次
*/
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;
};
/**
* 居中弹框
* ```
* 1. 可嵌套使用
* 2. 为什么不推荐使用
* dialogModal.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化
* 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）
* 3. 需要修改默认主题风格的场景，请使用
* const { appDialogModal } = FbaApp.useDialogModal();
* appDialogModal.open({})
* 4. size属性可使用预设的弹窗尺寸（默认值middle），如果不使用内置尺寸可设置 size = null
* ```
*/
export declare const dialogModal: {
open: (props: DialogModalProps) => {
close: () => void;
};
/**
* ```
* 1. 关闭最新弹框，如果有多个弹框只能关闭最后一个
* 2. 多个弹框主动关闭，只能使用 dialogModal.open()返回值中的close
* ```
*/
close: () => void;
/**
* ```
* 1. rerenderFooter 携带指定数据重新渲染 footer，可用于切换footer中的按钮状态
* ```
*/
useDialogModal: () => {
/** 重新渲染 footer， data为携带的数据，是footer的第二个参数 */
rerenderFooter: (data?: TPlainObject) => void;
};
};
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;
}
/**
* DropdownMenuWrapper
* 升级 antd 5.5.1 后，Dropdown 中 Popconfirm弹框使用存在问题，所以在 @flatbiz/antd@4.2.49版本修改为使用dialogConfirm组件实现二次弹框确认功能
* @param props
* @returns
* ```
* 1. Dropdown默认弹框根节点在组件内部，通过isFixed=true可设置弹框根节点在body下
* ```
*/
export declare const DropdownMenuWrapper: (props: DropdownMenuWrapperProps) => import("react").JSX.Element;
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;
/** 是否显示按钮，优先级高于 hidden */
show?: boolean;
}
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">;
/**
* 按钮布局尺寸
* ```
* 1. 设置为small后，gap、split 配置失效
* ```
*/
size?: "small" | "default";
}
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 type CardLayoutProps = {
/** 描述 */
desc?: string | string[] | ReactElement | ReactElement[];
/** 标题 */
title?: string | ReactElement;
/** 子标题，在标题右侧 */
subTitle?: string | ReactElement;
/**
* layoutType 布局类型
* ```
* 1. layer：分层布局
* 2. tight：紧凑布局（没有外边距）
* ```
*/
layoutType?: "layer" | "tight";
/** 隐藏标题左侧符号 */
titleLeftLine?: boolean;
titleStyle?: CSSProperties;
titleContentStyle?: CSSProperties;
subTitleStyle?: CSSProperties;
titleExtraStyle?: CSSProperties;
contentStyle?: CSSProperties;
/** 优先级大于 style padding */
padding?: CSSProperties["padding"];
/** 优先级大于 style width */
width?: CSSProperties["width"];
/** 优先级大于 style height */
height?: CSSProperties["height"];
/** 标题右侧布局 */
titleExtra?: string | ReactElement;
/** 当存在滚动条时，标题固定，滚动区域为内部部分 */
titleFixed?: boolean;
/**
* 间距尺寸
* 1. default = 15
* 2. small = 8
*/
size?: "default" | "small";
onClick?: (event: any) => void;
hidden?: boolean;
children?: ReactNode;
className?: string;
style?: CSSProperties;
};
/**
* 卡片结构布局，替代 SimpleLayout 组件
* @param props
* @returns
* ```
* 1. layoutType 布局类型
* layer：分层布局
* tight：紧凑布局（没有外边距）
* ```
*/
export declare const CardLayout: {
(props: CardLayoutProps): import("react").JSX.Element;
defaultProps: {
titleLeftLine: boolean;
layoutType: string;
};
};
/**
* ```
* 主要为了解决，标题固定，内容滚动
* ```
* @param props
* @returns
*/
export declare const CardWrapper: (props: CardProps) => import("react").JSX.Element;
export type TRequestStatus = "request-init" | "request-progress" | "request-success" | "request-error" | "request-search-keyword-empty" | "no-dependencies-params";
export type TRequestStatusProps = {
status?: TRequestStatus;
errorButton?: ReactElement;
messageConfig?: Partial<Record<TRequestStatus, string>>;
loading?: boolean;
};
export declare const RequestStatus: (props: TRequestStatusProps) => import("react").JSX.Element;
export type CascaderWrapperServiceConfig = {
params?: TPlainObject;
onRequest?: (params?: TAny) => TAny;
/** 响应数据适配器 */
onRequestResultAdapter?: (respData: TAny) => TPlainObject[];
/** 必填字段设置 */
requiredParamsKeys?: string[];
};
export type CascaderWrapperProps = Omit<CascaderProps<TAny>, "loading" | "notFoundContent" | "options" | "value" | "multiple" | "onChange" | "fieldNames"> & {
/**
* 参数Key映射
* ```
* 1. 默认值：value=value、label=label、children=children
* 2. list 为 onRequest 返回数据中列表key值，可多级取值，例如： 'a.b.c'
* 3. 配置 serviceConfig.onRequestResultAdapter后，fieldNames.list配置失效
* 4. 如果没有配置list，可说明接口返回为数组
* ```
*/
fieldNames?: {
list?: string;
label?: string;
value?: string;
children?: string;
};
/**
* 请求服务需求的数据，当设置`selectorList`后无效果
*/
serviceConfig?: CascaderWrapperServiceConfig;
onLabelRenderAdapter?: (dataItem: TPlainObject) => string | ReactElement;
onSelectorListChange?: (dataList: TPlainObject[]) => void;
/**
* 是否动态加载选项
*/
isDynamicLoad?: boolean;
value?: string | number | Array<string | number> | LabelValueItem | LabelValueItem[];
onChange?: (value?: string | number | Array<string | number>, selectedList?: TPlainObject[]) => void;
/** 配置数据查询状态描述，比如有依赖字段描述 */
requestMessageConfig?: TRequestStatusProps["messageConfig"];
/**
* 选择数据响应类型（当用户选中后响应数据）,默认值：last
* ```
* 1. last 响应选中的最后一级数据
* 2. all 响应选中的多级数据
* ```
*/
responseType?: "last" | "all";
/** 响应数据是否包含label、value */
labelInValue?: boolean;
};
export type CascaderWrapperRefApi = {
getCascaderList: () => TPlainObject[];
};
/**
* 级联选择器包装组件
* ```
* 1. 数据源中 value 不能重复
* 2. 不支持多选
* 3. modelKey的配置是为了缓存数据，只缓存初始化数据，如果isDynamicLoad=true，动态获取的数据不再缓存
* 4. onChange操作第一个参数返回叶子节点value（可配置返回多级），第二个参数返回选中的多级数据
* 5. isDynamicLoad=true 会在请求中添加当前选中option的fieldNames.value为key的数据
* 6. @flatbiz/antd@5.0.25 删除 modelKey 字段
* 7. serviceConfig.params 参数发生变化时，会重新请求数据
* ```
*/
export declare const CascaderWrapper: import("react").ForwardRefExoticComponent<Omit<CascaderProps<any, string | number | symbol, boolean>, "multiple" | "onChange" | "value" | "notFoundContent" | "loading" | "fieldNames" | "options"> & {
/**
* 参数Key映射
* ```
* 1. 默认值：value=value、label=label、children=children
* 2. list 为 onRequest 返回数据中列表key值，可多级取值，例如： 'a.b.c'
* 3. 配置 serviceConfig.onRequestResultAdapter后，fieldNames.list配置失效
* 4. 如果没有配置list，可说明接口返回为数组
* ```
*/
fieldNames?: {
list?: string;
label?: string;
value?: string;
children?: string;
};
/**
* 请求服务需求的数据，当设置`selectorList`后无效果
*/
serviceConfig?: CascaderWrapperServiceConfig;
onLabelRenderAdapter?: (dataItem: TPlainObject) => string | ReactElement;
onSelectorListChange?: (dataList: TPlainObject[]) => void;
/**
* 是否动态加载选项
*/
isDynamicLoad?: boolean;
value?: string | number | Array<string | number> | LabelValueItem | LabelValueItem[];
onChange?: (value?: string | number | Array<string | number>, selectedList?: TPlainObject[]) => void;
/** 配置数据查询状态描述，比如有依赖字段描述 */
requestMessageConfig?: TRequestStatusProps["messageConfig"];
/**
* 选择数据响应类型（当用户选中后响应数据）,默认值：last
* ```
* 1. last 响应选中的最后一级数据
* 2. all 响应选中的多级数据
* ```
*/
responseType?: "last" | "all";
/** 响应数据是否包含label、value */
labelInValue?: boolean;
} & import("react").RefAttributes<CascaderWrapperRefApi>>;
export interface CommonPropsWithChildren<S extends TPlainObject = TPlainObject> {
className?: string;
style?: CSSProperties & Partial<S>;
children?: ReactNode | undefined;
}
export type CheckListItemValue = string | number;
export type CheckListSelectedValue<T extends "multi" | "radio"> = T extends "multi" ? CheckListItemValue[] : CheckListItemValue;
export type CheckListProps<T extends "multi" | "radio"> = {
multiple?: boolean;
onChange?: (value: CheckListSelectedValue<T>, operateValue: CheckListItemValue) => void;
onPreChange?: (value: CheckListItemValue) => Promise<void>;
value?: CheckListSelectedValue<T>;
defaultValue?: CheckListSelectedValue<T>;
beforeExtra?: ReactNode;
afterExtra?: ReactNode;
stopPropagation?: boolean;
required?: boolean;
} & CommonPropsWithChildren;
export type CheckListItemContentProps = {
checked?: boolean;
disabled?: boolean;
onClick?: (event: any) => void;
className?: string;
readonly?: boolean;
style?: CSSProperties;
};
export type CheckListItemProps = {
value: CheckListItemValue;
disabled?: boolean;
readonly?: boolean;
children: (data: CheckListItemContentProps) => ReactElement;
className?: string;
style?: CSSProperties;
};
export declare const CheckList: (<T extends "multi" | "radio">(props: CheckListProps<T>) => import("react").JSX.Element) & {
Item: (props: CheckListItemProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
};
export type CheckboxWrapperProps = Omit<CheckboxProps, "checked" | "defaultChecked" | "onChange"> & {
value?: string | number | boolean;
checkedValue: string | number | boolean;
unCheckedValue: string | number | boolean;
onChange?: (value: string | number | boolean) => void;
};
/**
* 解决 Checkbox 只能接收boolean的限制，与Form.Item结合使用最佳
* ```
* 1. value 为状态值，不局限于boolean，可以为 [string | number | boolean]
* 2. checkedValue 选中值
* 3. unCheckedValue 未选中值
* 4. 与 Form.Item 结合使用，不再需要配置 valuePropName
* <Form.Item name="fieldName">
* <CheckboxWrapper checkedValue={2} unCheckedValue={1} />
* </Form.Item>
* ```
*/
export declare const CheckboxWrapper: (props: CheckboxWrapperProps) => import("react").JSX.Element;
export type CodeRenderProps = {
code?: string | string[];
className?: string;
style?: CSSProperties;
/** 是否换行，默认值：true */
wrap?: boolean;
size?: "small" | "default";
};
/**
* 代码、json格式化渲染
* ```
* 1. wrap 是否换行，默认值：true
* 例如：
* // json数据渲染
* <CodeWrapper code={JSON.stringify(data, null, 2)}/>
*
* // 代码渲染
* <CodeWrapper code={`def results=[];
def datas=表单字段.dataList;
for index,data in datas do
def item = [
'a':data.DomainName,
'b':data.Owner,
'userName': 流程参数.发起人账号
];
results = results+item;
end
return results;
`
}/>
*
* ```
*
*/
export declare const CodeRender: (props: CodeRenderProps) => import("react").JSX.Element | null;
export type ColorPickerWrapperProps = Omit<ColorPickerProps, "value" | "onChange"> & {
/** 格式：#1677ff */
value?: string;
/** 转换成 hex 格式颜色字符串，返回格式如：#1677ff */
onChange?: (hex?: string) => void;
placeholder?: string;
};
export declare const ColorPickerWrapper: (props: ColorPickerWrapperProps) => import("react").JSX.Element;
export type CopyWrapperProps = {
copyText: string | (() => string);
/** 复制后提示消息 */
copyAfterMsg?: string;
/** 复制鼠标悬浮提示
* ```
* hoverTips={(trigger) => {
* return trigger ? '复制成功' : '复制数据';
* }}
* ```
*/
hoverTips?: string | ((trigger: any) => string);
/** 设置icon后失效 */
iconStyle?: CSSProperties;
/** 自定义文本，显示在复制图标前或后 */
text?: ReactNode;
hiddenTips?: boolean;
/** 自定义复制icon图标 */
icon?: ReactNode;
/** 复制图标位置，text 为空时，此配置无效 */
iconPosition?: "left" | "right";
};
export declare const CopyWrapper: {
(props: CopyWrapperProps): import("react").JSX.Element;
copy(text: string): void;
};
export type CssHoverProps = {
children: ReactElement | ReactElement[];
} & Pick<CommonPropsWithChildren<{
"--v-css-hover-bgcolor": CSSProperties["backgroundColor"];
"--v-css-hover-opacity": CSSProperties["opacity"];
"--v-css-hover-border-radius": CSSProperties["borderRadius"];
}>, "style" | "children">;
/**
* css hover 效果
* ```
* 1. 当children为数组时，会为children添加父级（会产生新节点）
* 2. 当children为单个元素时，会在children元素上添加className、style（不会产生新节点）
* ```
* @param props
* @returns
*/
export declare const CssNodeHover: (props: CssHoverProps) => import("react").JSX.Element;
export type DataRenderProps = {
isEmpty: boolean | (() => boolean);
empty?: ReactElement;
emptyText?: string | ReactElement;
emptyStyle?: CSSProperties;
emptyClassName?: string;
children: ReactNode;
};
/**
* 数据渲染，内置处理数据为空渲染
* ```
* 1. 配置 empty 后，emptyText、emptyStyle、emptyClassName将失效
* 2. 使用方式，例如
* <DataRender isEmpty={list.length === 0}>
* <Fragment>
* {list.map((item) => {
* return (
* <div key={item}>....</div>
* );
* })}
* </Fragment>
* </DataRender>
* ```
*/
export declare const DataRender: (props: DataRenderProps) => import("react").JSX.Element;
export type TDayjsDateType = "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH" | "YYYY-MM-DD" | (string & {});
export type TDayjsTimeType = "HH:mm:ss" | "HH:mm" | "HH" | "mm:ss" | "mm" | "ss" | (string & {});
export type DatePickerType = GetProps<typeof DatePicker>;
export type DatePickerWrapperProps = Omit<DatePickerType, "value" | "onChange" | "format" | "picker"> & {
/** 默认格式为 'YYYY-MM-DD' */
value?: string;
onChange?: (value?: string) => void;
disabledDateConfig?: {
minDate?: TDayjsDateType;
maxDate?: TDayjsDateType;
/** 禁用 小时 刻度列表，与日期无关 */
disabledHourList?: number[];
/** 禁用 分钟 刻度列表，与日期无关 */
disabledMinuteList?: number[];
/** 禁用 秒钟 刻度列表，与日期无关 */
disabledSecondList?: number[];
};
/** 可自定义格式 */
format?: TDayjsDateType;
/** value 输出适配 */
outputNormalize?: (value?: TAny) => TAny;
/** value 输入适配 */
inputNormalize?: (value?: TAny) => string | undefined;
};
/**
* DatePicker包装组件
* ```
* 1. value 默认格式为 'YYYY-MM-DD'，可以通过 inputNormalize 来进行自定义转换
* 2. onChange返回类型 string，可以通过 outputNormalize 来进行自定义转换
* 3. 默认格式化类型 YYYY-MM-DD； 当showTime===true时，默认格式化类型 DayjsDateTypeEnum.YMDHms；其他格式化类型自定义format
* 4. 设置 disabledDate 后，disabledDateConfig配置将失效
* 5. 设置 disabledTime 后，内置的disabledTime逻辑将失效
* 6. 不支持 周、月份、年份 选择场景，可使用 antd DatePicker组件实现
* ```
*/
export declare const DatePickerWrapper: (props: DatePickerWrapperProps) => import("react").JSX.Element;
export type DateRangePickerType = GetProps<typeof DatePicker.RangePicker>;
export type DateRangePickerWrapperProps = Omit<DateRangePickerType, "value" | "onChange" | "onCalendarChange" | "format" | "picker"> & {
value?: [
string,
string
];
onChange?: (value?: [
string,
string
]) => void;
/**
* 1. minDate、maxDate 与 format格式相同；默认：YYYY-MM-DD
* 2. maxDays 最大可选的天数
*/
disabledDateConfig?: {
minDate?: TDayjsDateType;
maxDate?: TDayjsDateType;
maxDays?: number;
/** 禁用 小时 刻度列表，与日期无关 */
disabledHourList?: number[];
/** 禁用 分钟 刻度列表，与日期无关 */
disabledMinuteList?: number[];
/** 禁用 秒钟 刻度列表，与日期无关 */
disabledSecondList?: number[];
};
format?: TDayjsDateType;
/** value 输出适配 */
outputNormalize?: (value: [
string,
string
]) => TAny;
/** value 输入适配 */
inputNormalize?: (value?: TAny) => [
string,
string
] | undefined;
};
/**
* DatePicker.RangePicker包装组件
* ```
* 1. value类型为 [string, string],可以通过 inputNormalize来进行自定义转换
* 2. onChange返回类型 [string, string]，可以通过 outputNormalize来进行自定义转换
* 3. 默认格式化类型 YYYY-MM-DD； 当showTime===true时，默认格式化类型YYYY-MM-DD HH:mm:ss；其他格式化类型自定义format
* 4. 可设置disabledDateConfig，来控制日期项的disbaled状态
* 5. 设置 disabledDate 后，disabledDateConfig配置将失效
* 6. 设置 disabledTime 后，内置的disabledTime逻辑将失效
* 7. 不支持 周、月份、年份 选择场景，可使用 antd DatePicker.RangePicker组件实现
*
* TODO: 存在场景缺陷，当设置maxDays、showTime后，在选择单个日期不通过确认按钮直接切换输入框，无法获取回调，无法约束disabledDate
* ```
*/
export declare const DateRangePickerWrapper: (props: DateRangePickerWrapperProps) => import("react").JSX.Element;
export type TFormLayoutPreClassNameProps = {
/**
* label宽度，Form内部所有FormItem label都生效
* ```
* 1. 可设置数值
* 2. 可设置`auto`自适应
* ```
*/
labelWidth?: "auto" | "70" | "80" | "90" | "100" | "110" | "120" | "130" | "140" | "150" | "160" | "170" | "180" | "190" | "200";
/** labelItem 竖直布局 */
labelItemVertical?: boolean;
/** label 对齐方式 */
labelAlign?: "left" | "right";
/** formItem之间竖直间距，默认值：24 */
formItemGap?: "24" | "15" | "8" | "5" | "0";
/**
* className 中可能会包含 preDefinedClassName.form.xx，优先级大于 labelWidth、labelItemVertical、labelAlign、formItemGap
*/
className?: string;
};
export type TFormItemLayoutPreClassNameProps = {
/**
* label宽度，Form内部所有FormItem label都生效
* ```
* 1. 可设置数值
* 2. 可设置`auto`自适应
* ```
*/
labelWidth?: "auto" | "70" | "80" | "90" | "100" | "110" | "120" | "130" | "140" | "150" | "160" | "170" | "180" | "190" | "200";
/** labelItem 竖直布局 */
labelItemVertical?: boolean;
/** label 对齐方式 */
labelAlign?: "left" | "right";
/**
* className 中可能会包含 preDefinedClassName.formItem.xx，优先级大于 labelWidth、labelItemVertical、labelAlign
*/
className?: string;
};
export type FormItemWrapperProps = Omit<FormItemProps, "hidden" | "children" | "noStyle"> & TFormItemLayoutPreClassNameProps & {
wrapper?: (children: ReactNode) => ReactElement;
/** 设置wrapper后，before、after失效 */
before?: ReactNode;
/** 设置wrapper后，before、after失效 */
after?: ReactNode;
/** 设置 before、after 属性的包装结构style */
beforeAfterStyle?: CSSProperties;
/** value 序列化处理 */
inputNormalize?: (value?: TAny) => TAny;
/**
* onChange 参数序列化处理
* 如果设置 normalize 属性，outputNormalize将失效
*/
outputNormalize?: (value?: TAny) => TAny;
/**
* 隐藏 Form.Item，同时清除 Form.Item 值
* ```
* 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏
* 2.提交不校验rules
* ```
*/
isClear?: boolean | ((formValues: TPlainObject) => boolean);
/**
* 隐藏 Form.Item，不会清除 Form.Item 值
* ```
* 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏
* 2.提交会校验rules
* ```
*/
hidden?: boolean | ((formValues: TPlainObject) => boolean);
/**
* 栅格占位格数，最大值：24
* ```
* 1. 当前FormItemWrapper处在 EasyForm 直接子节点中有效，即FormItemWrapper在EasyForm栅格中的占位格数；
* 2. 父节点使用属性值，当前节点不使用属性值
* ```
*/
span?: number;
/** 不支持函数式写法，如果需要使用dependencies获取表单值，可使用FormItemWrapperDependencies 组件 */
children?: ReactNode;
/**
* ```
* 1. 设置noStyle后，可能会导致 FromItemWrapper 在 EasyFrom 内部渲染网格布局时出现异常
* 2. 在FormItemWrapper中使用 dependencies 逻辑不需要设置 noStyle
* ```
*/
noStyle?: boolean;
};
/**
* 对 Form.Item 包装处理
* ```
* 1. 为 children 增加 before、after
* 2. 对输入、输出数据进行序列化处理
* 3. 内置布局样式使用 preDefinedClassName.formItem
* 4. 设置隐藏域（不清除字段值） 使用hidden，存在依赖逻辑，可与dependencies属性配合使用
* 5. 设置隐藏域（清除字段值）使用isClear，存在依赖逻辑，可与dependencies属性配合使用
* 6. 不支持noStyle属性、children不支持函数写法、如果需要获取依赖字段值，可使用 FormItemWrapperDependencies 组件
* 7. 设置noStyle后，可能会导致 FromItemWrapper 在 EasyFrom 内部渲染网格布局时出现异常
*
*
* ** 依赖其他字段 自身切换显示隐藏 **
* <FormItemWrapper
* label="label"
* name="xx1"
* dependencies={['type']}
* isClear={(values) => {
* return values.type == 1
* }}>
* <Input placeholder="请输入" />
* </FormItemWrapper>
*
* 如果只是想获取依赖字段值，可使用 FormItemWrapperDependencies 组件
* ```
*/
export declare const FormItemWrapper: {
(props: FormItemWrapperProps): import("react").JSX.Element;
domTypeName: string;
};
export type DateRangePickerWrapperFormItemProps = Omit<FormItemWrapperProps, "name"> & {
/**
* 开始的时间name
*/
startName: FormItemNamePath;
/**
* 结束的时间name
*/
endName: FormItemNamePath;
/**
* 如果 DateRangePickerWrapperFormItem 在Form.List场景下 必传
* @deprecated 使用 formListCompleteName 配置
*/
formListName?: Array<string | number>;
/**
* 前端 formItem 前缀FormName，当 TimeRangePickerWrapperFormItem 处在Form.List场景下，必传
* ```
* 例如 处在formList内部时，则 formListCompleteName = ['xxxxList']
* 例如 处在formList套formList内部时，则 formListCompleteName = ['xxxxList', 索引值, 'xxxxList2']
* ```
*/
formListCompleteName?: Array<string | number> | string;
dateRangePickerWrapperProps?: DateRangePickerWrapperProps;
};
/**
* 包含了Form.Item组件的时间区间选择组件，时间区间组件可以定义成两个字段操作，不用再通过数组处理
* ```
* 1. 会在form中产生一个 `__#invalid_date_xxxx_xxxx` 的无效字段，可以直接忽略
* 2. 设置日期格式 dateRangePickerWrapperProps={{ format: 'YYYY-MM-DD HH:mm' }}
* 使用场景：
* 1. 基础使用场景
* <DateRangePickerWrapperFormItem startName={'date1'} endName={'date2'} />
* 2. Form.List 内部使用
* <FormListWrapper name="dataList" prevCompleteName={[]}>
* {(data) => {
* return <DateRangePickerWrapperFormItem formListCompleteName={data.prevCompleteName} startName={data.getInsideFormItemName('date1')} endName={data.getInsideFormItemName('date2')} />
* }}
* </FormListWrapper>
* 3. Form.List 套 Form.List 内部使用
* <FormListWrapper name="dataList" prevCompleteName={[]}>
* {(data) => {
* return <FormListWrapper name={data.getInsideFormItemName('childrenList')} prevCompleteName={data.prevCompleteName}>
* {(data2) => {
* return <DateRangePickerWrapperFormItem formListCompleteName={data2.prevCompleteName} startName={data2.getInsideFormItemName('date1')} endName={data2.getInsideFormItemName('date2')} />
* }}
* </FormListWrapper>
* }}
* </FormListWrapper>
* ```
*/
export declare const DateRangePickerWrapperFormItem: (props: DateRangePickerWrapperFormItemProps) => import("react").JSX.Element;
/** 删除节点，点击后会显示二次确认点击 */
export declare const DeleteNode: (props: {
onDelete: () => void;
/** 默认图标 */
icon?: ReactElement;
/** 确认图标 */
confirmIcon?: ReactElement;
/** 是否隐藏 */
hidden?: boolean;
style?: CSSProperties;
className?: string;
}) => import("react").JSX.Element;
export type DialogAlertProps = Omit<DialogModalProps, "onOk" | "cancelHidden" | "cancelButtonProps" | "onCancel" | "onClick"> & {
onClick?: (e: React.MouseEvent<HTMLElement>) => void | Promise<void>;
};
/**
* 确认弹框
* ```
* 1. 可嵌套使用
* 2. 为什么不推荐使用
* dialogAlert.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化
* 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）
* 3. 需要修改默认主题风格的场景，请使用
* const { appDialogAlert } = FbaApp.useDialogAlert();
* appDialogAlert.open({})
* ```
*/
export declare const dialogAlert: {
open: (props: DialogAlertProps) => {
close: () => void;
};
};
/**
* 确认弹框
* ```
* 1. 可嵌套使用
* 2. 为什么不推荐使用
* dialogConfirm.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化
* 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）
* 3. 需要修改默认主题风格的场景，请使用
* const { appDialogConfirm } = FbaApp.useDialogConfirm();
* appDialogConfirm.open({})
* ```
*/
export declare const dialogConfirm: {
open: (props: DialogModalProps) => {
close: () => void;
};
};
export type DialogDragModalProps = {
/** 相同的modalKey，最多只有一个弹起状态 */
modalKey?: string;
className?: string;
style?: CSSProperties;
styles?: {
header?: CSSProperties;
body?: CSSProperties;
footer?: CSSProperties;
};
width?: number;
bodyHeight?: number;
/** 触发弹起点击事件event，用于计算鼠标位置 */
event?: React.MouseEvent<HTMLElement>;
/** 定义弹出层距离触发点的x轴偏移量 */
xOffset?: number;
title?: string;
okText?: string | ReactElement;
cancelText?: string | ReactElement;
okHidden?: boolean;
cancelHidden?: boolean;
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);
/** 覆盖当前footer，自定义操作按钮 */
footer?: null | ((form: FormInstance, operate: {
onClose: TNoopDefine;
}) => ReactElement);
/** 当前footer操作按钮，左侧扩展 */
footerOperateBeforeRender?: (form: FormInstance, operate: {
onClose: TNoopDefine;
}) => ReactElement;
/** 当前footer操作按钮，右侧扩展 */
footerOperateAfterRender?: (form: FormInstance, operate: {
onClose: TNoopDefine;
}) => ReactElement;
};
/**
* 可移动弹框
* ```
* 1. 设置 event 后，弹起位置受鼠标点击位置控制
* 2. 相同的modalKey，最多只有一个弹起状态
* ```
*/
export declare const dialogDragModal: {
open: (props: DialogDragModalProps) => {
close: () => void;
} | undefined;
/**
* ```
* 1. 关闭最新弹框，如果有多个弹框只能关闭最后一个
* 2. 多个弹框主动关闭，只能使用 dialogDrawer.open()返回值中的close
* ```
*/
close: (modalKey?: string) => void;
};
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只在第一次弹起时，执行一次
*/
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 type DialogDrawerContentProps = {
footer?: (data: {
onClose: () => void;
}) => ReactElement;
footerStyle?: CSSProperties;
children?: ReactNode;
okHidden?: boolean;
cancelHidden?: boolean;
okButtonExtraProps?: Omit<ButtonWrapperProps, "onClick" | "children" | "loading">;
cancelButtonExtraProps?: Omit<ButtonWrapperProps, "onClick" | "children" | "loading">;
okText?: string | ReactElement;
cancelText?: string | ReactElement;
onOk?: (e: React.MouseEvent<HTMLElement>) => void | Promise<void>;
onCancel?: (e: React.MouseEvent<HTMLElement>) => void | Promise<void>;
};
/**
* 当dialogDrawer底部操作按钮在业务content内部时，使用
* ```
* 1. 只能与 dialogDrawer 配合使用；与 FbaApp.useDialogDrawer 配合使用无效
* 2. 设置 footer 后，okHidden、cancelHidden、okButtonExtraProps、cancelButtonExtraProps、okText、cancelText、onOk、onCancel全部失效
* ```
*/
export declare const DialogDrawerContent: (props: DialogDrawerContentProps) => import("react").JSX.Element;
export type DialogLoadingProps = {
className?: string;
message?: string;
mask?: boolean;
};
/**
* Loading弹框
* ```
* 1. 可嵌套使用
* 2. 为什么不推荐使用
* dialogLoading.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化
* 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）
* 3. 需要修改默认主题风格的场景，请使用
* const { appDialogLoading } = FbaApp.useDialogLoading();
* appDialogLoading.open({})
* ```
*/
export declare const dialogLoading: {
open: (props?: DialogLoadingProps) => {
close: () => void;
};
/**
* ```
* 1. 关闭最新弹框，如果有多个弹框只能关闭最后一个
* 2. 多个弹框主动关闭，只能使用 dialogModal.open()返回值中的close
* ```
*/
close: () => void;
};
export type DialogPreviewImageProps = {
imageUrl: string;
};
/** 图片预览 */
export declare const dialogPreviewImage: {
show: (props: DialogPreviewImageProps) => {
close: () => void;
};
hiden: () => void;
};
export type DragCollapseItemKey = number | string;
export type DragCollapseItem = {
key: DragCollapseItemKey;
header: ReactNode;
content: ReactElement;
};
export type DragCollapseProps = {
className?: string;
style?: CSSProperties;
/** 面板数据 */
items: DragCollapseItem[];
/** 拖拽面板回调 */
onDropChange: (items: DragCollapseItem[]) => void;
/** 手风琴模式，只允许单个内容区域展开 */
accordion?: boolean;
/** 当前激活 tab 面板的key */
activeKey?: DragCollapseItemKey | DragCollapseItemKey[];
/** 所有子面板是否可折叠或指定可折叠触发区域，可选: header | icon | disabled */
collapsible?: CollapseProps["collapsible"];
/** 初始化选中面板的 key */
defaultActiveKey?: DragCollapseItemKey[];
/** 自定义切换图标 */
expandIcon?: CollapseProps["expandIcon"];
/** 设置图标位置，可选：start | end */
expandIconPosition?: CollapseProps["expandIconPosition"];
/** 设置折叠面板大小 */
size?: CollapseProps["size"];
/** 隐藏拖拽图标，默认不隐藏 */
hideDragIcon?: boolean;
/** 设置拖拽图标 */
dragIcon?: ReactElement;
/** 切换面板的回调 */
onChange?: (activeKey?: DragCollapseItemKey | DragCollapseItemKey[]) => void;
};
/**
* 可拖拽 折叠面板
* @param props
* @returns
*/
export declare const DragCollapse: (props: DragCollapseProps) => import("react").JSX.Element;
export type DragCollapseFormListContentProps = {
/** Form.List item fieldData */
formListFieldData: FormListFieldData;
/** 当前阶段 完整 formItem name */
formStageCompleteName: Array<string | number>;
/** Form.List 操作项 */
operation: FormListOperation;
uid: string | number;
/** 获取当前FormList 内部 Form.Item name */
getInsideFormItemName: (key: string | string[]) => Array<string | number>;
/** 获取当前 FormList Item 数据 */
getInsideFormItemData: () => TPlainObject;
/** 索引 */
index: number;
};
export type DragCollapseFormListHeaderProps = DragCollapseFormListContentProps;
export type DragCollapseFormListProps = {
/** formList item 数据中的唯一值，默认值：uid */
uidFieldName?: string;
className?: string;
style?: CSSProperties;
/** formList name */
formListName: string | number | (string | number)[];
/**
* 当前组件嵌套在formList内部时，必传
* ```
* 1. 外层formList name：dataList
* 则
* 第一种情况 formListCompleteName = [...formStageCompleteName, 'innerList']
* 第二种情况 formListCompleteName = ['dataList', formListFieldData.name, 'innerList']
* ```
* 例如：
*/
formListCompleteName?: (string | number)[];
/** 拖拽面板回调 */
onDropChange?: (items: TPlainObject[]) => void;
/** 手风琴模式，只允许单个内容区域展开 */
accordion?: boolean;
/** 当前激活 tab 面板的key */
activeKey?: number | string | (number | string)[];
/** 所有子面板是否可折叠或指定可折叠触发区域，可选: header | icon | disabled */
collapsible?: CollapseProps["collapsible"];
/** 初始化选中面板的 key */
defaultActiveKey?: number | string | (number | string)[];
/** 自定义切换图标 */
expandIcon?: CollapseProps["expandIcon"];
/** 设置图标位置，可选：start | end */
expandIconPosition?: CollapseProps["expandIconPosition"];
/** 设置折叠面板大小 */
size?: CollapseProps["size"];
/** 设置拖拽图标 */
dragIcon?: ReactElement;
/** 切换面板的回调 */
onChange?: (activeKey?: number | string | (number | string)[]) => void;
/** 禁用拖拽，拖拽图标隐藏 */
dragDisabled?: boolean;
/** 折叠面板 header 渲染 */
header: (data: DragCollapseFormListHeaderProps) => ReactElement;
/** 折叠面板 content 渲染 */
content: (data: DragCollapseFormListContentProps) => ReactElement;
/** 设置面板禁止拖拽 */
getItemDragDisabled?: (uid: string | number, index: number) => boolean;
rules?: FormListProps["rules"];
};
/**
* 可拖拽 折叠面板+FormList
* ```
* 1. FormList数组中必须要有唯一值字段，默认值字段名称uid，可通过uidFieldName自定义设置名称
* ```
*/
export declare const DragCollapseFormList: (props: DragCollapseFormListProps) => import("react").JSX.Element;
export type FormWrapperProps<Values = any> = TFormLayoutPreClassNameProps & FormProps<Values> & {
children: ReactNode;
};
/**
* Form 包装组件，添加对formItem的布局控制
* ```
* 1. 内置布局样式使用 preDefinedClassName.form
* ```
*/
export declare const FormWrapper: (props: FormWrapperProps) => import("react").JSX.Element;
export type EasyFormProps = Omit<FormWrapperProps, "children"> & {
/**
* 定义一行显示几列（当外层宽度尺寸大于 992px（lg） 时，一行显示几列）, 默认值：3
* ```
* 1. 当外层宽度尺寸小于992px（lg），为xs、sm、md情况下不受column值影响（column=1除外）
* 2. 宽度尺寸定义
* xs: 宽度 < 576px
* sm: 宽度 ≥ 576px
* md: 宽度 ≥ 768px
* lg: 宽度 ≥ 992px
* xl: 宽度 ≥ 1200px
* xxl: 宽度 ≥ 1600px
* 3. 列数尺寸定义
* {
* 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
* 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },
* 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },
* 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },
* };
* ```
*/
column?: 1 | 2 | 3 | 4;
/**
* 强制定义一行显示几列，不考虑响应式
* ```
* 1. 优先级大于column
* 2. 建议优先使用column配置
* ```
*/
forceColumn?: 1 | 2 | 3 | 4;
/**
* Form显示宽度，可数值、可百分比；在小屏幕尺寸（xs、sm）上无效
*/
width?: number | string;
/** 网格间距 */
gridGutter?: BoxRowProps["gutter"];
children: ReactNode;
/**
* 是否为纯净模式，对EasyForm的子节点不做任何包装处理
*/
isPure?: boolean;
/**
* 栅格占位格数，最大值：24
* ```
* 1. 当前EasyForm处在 EasyForm 直接子节点中有效，即当前EasyForm在EasyForm栅格中的占位格数；
* 2. 父节点使用属性值，当前节点不使用属性值
* ```
*/
span?: number;
};
/**
* 简单Form布局，可自定义网格布局
* ```
* 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid
* 2. EasyForm的children列表会进行网格化布局
* 3. 自定义栅格占位格数的4中方式
* 3.1 设置FormItemWrapper、FormItemText组件span属性；
* 3.2 使用 EasyFormItemSpan 包裹children item，设置span属性
* 3.3 使用 <BoxGrid.Col span={24} ></BoxGrid.Col> 包裹，设置响应式属性
* 3.4 设置 EasyForm isPure = true设置纯净模式，对EasyForm的子节点不做任何包装处理
* 4. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效
* <EasyForm form={form}>
* ....
* <EasyForm>...</EasyForm>
* ....
* <EasyForm>...</EasyForm>
* ....
* </EasyForm>
* 5. 布局网格以当前组件的宽度来计算的，不是屏幕宽度
* 6. EasyForm 子节点包含 hidden = true 会被忽略
* 7. 通过 column 可定义一行显示几列FormItem
* 8. 通过 labelItemVertical 可定义 formitem 竖直布局
* 9. 通过 formItemGap 可定义 formItem竖直方向间隙
* 10. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式
* 11. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）
* 12. 自定义栅格占位格数，见下方`例如`
* 例如
* <EasyForm column={3}>
* <FormItemWrapper name="field1" label="条件1">
* <Input placeholder="请输入" allowClear={true} />
* </FormItemWrapper>
* <!-- ！！自定义栅格占位格数第一种方式：可通过使用 BoxGrid.Col 包裹元素来自定义网格占比 -->
* <BoxGrid.Col span={24}>
* <FormItemWrapper name="field5" label="条件5">
* <Input placeholder="请输入" allowClear={true} />
* </FormItemWrapper>
* </BoxGrid.Col>
* <!-- ！！自定义栅格占位格数第二种方式：如果为FormItemWrapper组件，可设置span属性 -->
* <FormItemWrapper name="field6" label="条件6" span={24}>
* <Input placeholder="请输入" allowClear={true} />
* </FormItemWrapper>
* <FormItemWrapper noStyle span={24}>
* <Button>按钮</Buttone>
* </FormItemWrapper>
* </EasyForm>
* ```
*/
export declare const EasyForm: {
(props: EasyFormProps): import("react").JSX.Element;
domTypeName: string;
};
export type EditableCardDataIndex = string | string[];
export interface EditableCardOperation {
index: number;
add: (defaultValue: TPlainObject, insertIndex?: number) => void;
remove: (index: number) => void;
/** 同一级内移动 */
move: (fromIndex: number, toIndex: number) => void;
/** 是否可编辑 */
editable: boolean;
/**
* 设置当前卡片指定字段值
*/
setCurrentRowField: (dataIndexConfigs: {
name: EditableCardDataIndex;
value?: TAny;
}[