@flatbiz/antd
Version:
152 lines (149 loc) • 5.77 kB
TypeScript
import { TAny, TPlainObject } from '@flatbiz/utils';
import { FormItemProps, TimeRangePickerProps } from 'antd';
import { CSSProperties, ReactElement, ReactNode } from 'react';
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;
};
export type TDayjsTimeType = "HH:mm:ss" | "HH:mm" | "HH" | "mm:ss" | "mm" | "ss" | (string & {});
export type TimeRangePickerWrapperProps = Omit<TimeRangePickerProps, "value" | "onChange" | "format"> & {
value?: [
string,
string
];
onChange?: (value?: [
string,
string
]) => void;
/**
* 1. minTime、maxTime设置格式,默认格式:HH:mm:ss
* 2. minTime、maxTime格式必须与 format 相同
*/
disabledTimeConfig?: {
minTime?: TDayjsTimeType;
maxTime?: TDayjsTimeType;
/** 禁用 小时 刻度列表,与日期无关 */
disabledHourList?: number[];
/** 禁用 分钟 刻度列表,与日期无关 */
disabledMinuteList?: number[];
/** 禁用 秒钟 刻度列表,与日期无关 */
disabledSecondList?: number[];
};
format?: TDayjsTimeType;
};
export type FormItemNamePath = string | number | Array<string | number>;
export type TimeRangePickerWrapperFormItemProps = Omit<FormItemWrapperProps, "name"> & {
/**
* 开始的时间name
*/
startName: FormItemNamePath;
/**
* 结束的时间name
*/
endName: FormItemNamePath;
/**
* 如果 TimeRangePickerWrapperFormItem 在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;
timeRangePickerWrapperProps?: TimeRangePickerWrapperProps;
};
/**
* 包含了Form.Item组件的时间区间选择组件,时间区间组件可以定义成两个字段操作,不用再通过数组处理
* ```
* 1. 会在form中产生一个 `__#invalid_time_xxxx_xxxx` 的无效字段,可以直接忽略
* 2. 设置日期格式 timeRangePickerWrapperProps={{ format: 'HH:mm:ss' }}
* 使用场景:
* 1. 基础使用场景
* <TimeRangePickerWrapperFormItem startName={'date1'} endName={'date2'} />
* 2. Form.List 内部使用
* <FormListWrapper name="dataList" prevCompleteName={[]}>
* {(data) => {
* return <TimeRangePickerWrapperFormItem 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 <TimeRangePickerWrapperFormItem formListCompleteName={data2.prevCompleteName} startName={data2.getInsideFormItemName('date1')} endName={data2.getInsideFormItemName('date2')} />
* }}
* </FormListWrapper>
* }}
* </FormListWrapper>
* ```
*/
export declare const TimeRangePickerWrapperFormItem: (props: TimeRangePickerWrapperFormItemProps) => import("react").JSX.Element;
export {};