@flatbiz/antd/dist/easy-form/index.d.ts

import { FormProps } from 'antd';
import { ReactNode } from 'react';

declare const PresetDefaultGrid: {
	xs: number;
	sm: number;
	md: number;
	lg: number;
	xl: number;
	xxl: number;
};
export type TBoxBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
export type Gutter = number | undefined | Partial<Record<TBoxBreakpoint, number>>;
export type GutterParams = Gutter | [
	Gutter,
	Gutter
];
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 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 FormWrapperProps<Values = any> = TFormLayoutPreClassNameProps & FormProps<Values> & {
	children: ReactNode;
};
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;
	/**
	 * true: 当前EasyForm组件不使用Antd Form包裹，可在Form、EasyForm、FormWrapper内部使用
	 */
	nonuseFormWrapper?: 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 {};