///
import * as React from 'react';
import CommonProps from '../util';
import { data } from '../checkbox';
import { ButtonProps } from '../button';
type SpanOffset = {
span?: string | number;
offset?: string | number;
[propName: string]: any;
}
export interface ItemProps extends React.HTMLAttributes, CommonProps {
/**
* 表单名
*/
name?: string;
/**
* 样式前缀
*/
prefix?: string;
/**
* label 标签的文本
*/
label?: React.ReactNode;
/**
* label 标签布局，通 `` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效
*/
labelCol?: SpanOffset;
/**
* 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
*/
wrapperCol?: SpanOffset;
/**
* 自定义提示信息，如不设置，则会根据校验规则自动生成.
*/
help?: React.ReactNode;
/**
* 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面
*/
extra?: React.ReactNode;
/**
* 校验状态，如不设置，则会根据校验规则自动生成
*/
validateState?: 'error' | 'success' | 'loading' | 'warning';
/**
* 配合 validateState 属性使用，是否展示 success/loading 的校验状态图标, 目前只有Input支持
*/
hasFeedback?: boolean;
/**
* 自定义内联样式
*/
style?: React.CSSProperties;
/**
* node 或者 function(values)
*/
children?: React.ReactNode | (() => void);
/**
* 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。
*/
size?: 'large' | 'small' | 'medium';
/**
* 标签的位置
*/
labelAlign?: 'top' | 'left' | 'inset';
/**
* 标签的左右对齐方式
*/
labelTextAlign?: 'left' | 'right';
/**
* 扩展class
*/
className?: string;
/**
* 是否禁用
*/
disabled?: boolean;
/**
* [表单校验] 不能为空
*/
required?: boolean;
/**
* required 的星号是否显示
*/
asterisk?: boolean;
/**
* required 自定义错误信息
*/
requiredMessage?: string;
/**
* required 自定义触发方式
*/
requiredTrigger?: string | Array;
/**
* [表单校验] 最小值
*/
min?: number;
/**
* [表单校验] 最大值
*/
max?: number;
/**
* min/max 自定义错误信息
*/
minmaxMessage?: string;
/**
* min/max 自定义触发方式
*/
minmaxTrigger?: string | Array;
/**
* [表单校验] 字符串最小长度 / 数组最小个数
*/
minLength?: number;
/**
* [表单校验] 字符串最大长度 / 数组最大个数
*/
maxLength?: number;
/**
* minLength/maxLength 自定义错误信息
*/
minmaxLengthMessage?: string;
/**
* minLength/maxLength 自定义触发方式
*/
minmaxLengthTrigger?: string | Array;
/**
* [表单校验] 字符串精确长度 / 数组精确个数
*/
length?: number;
/**
* length 自定义错误信息
*/
lengthMessage?: string;
/**
* length 自定义触发方式
*/
lengthTrigger?: string | Array;
/**
* 正则校验
*/
pattern?: any;
/**
* pattern 自定义错误信息
*/
patternMessage?: string;
/**
* pattern 自定义触发方式
*/
patternTrigger?: string | Array;
/**
* [表单校验] 四种常用的 pattern
*/
format?: 'number' | 'email' | 'url' | 'tel';
/**
* format 自定义错误信息
*/
formatMessage?: string;
/**
* format 自定义触发方式
*/
formatTrigger?: string | Array;
/**
* [表单校验] 自定义校验函数
*/
validator?: (rule: any, value: any, callback: any) => void;
/**
* validator 自定义触发方式
*/
validatorTrigger?: string | Array;
/**
* 是否修改数据时自动触发校验
*/
autoValidate?: boolean;
/**
* 在响应式布局下，且label在左边时，label的宽度是多少
*/
labelWidth?: number | string;
/**
* 在响应式布局模式下，表单项占多少列
*/
colSpan?: number;
/**
* 是否开启预览态
*/
isPreview?: boolean;
/**
* 预览态模式下渲染的内容
* @param {any} value 根据包裹的组件的 value 类型而决定
*/
renderPreview?: (values: number | string | data | Array, props: any) => any;
/**
* 是否使用 label 替换校验信息的 name 字段
*/
useLabelForErrorMessage?: boolean;
/**
* 表示是否显示 label 后面的冒号
*/
colon?: boolean;
/**
* 子元素的 value 名称
*/
valueName?: string;
/**
* 单个 Item 中表单类组件宽度是否是 100%
*/
fullWidth?: boolean;
}
export class Item extends React.Component {}
interface HTMLAttributesWeak extends React.HTMLAttributes, ButtonProps {
onClick?: any;
}
export interface SubmitProps extends HTMLAttributesWeak, CommonProps {
/**
* 按钮的类型
*/
type?: 'primary' | 'secondary' | 'normal';
/**
* 按钮的尺寸
*/
size?: 'small' | 'medium' | 'large';
/**
* 按钮中 Icon 的尺寸，用于替代 Icon 的默认大小
*/
iconSize?:
| 'xxs'
| 'xs'
| 'small'
| 'medium'
| 'large'
| 'xl'
| 'xxl'
| 'xxxl';
/**
* 当 component = 'button' 时，设置 button 标签的 type 值
*/
htmlType?: 'submit' | 'reset' | 'button';
/**
* 设置标签类型
*/
component?: 'button' | 'a';
/**
* 设置按钮的载入状态
*/
loading?: boolean;
/**
* 是否为幽灵按钮
*/
ghost?: true | false | 'light' | 'dark';
/**
* 是否为文本按钮
*/
text?: boolean;
/**
* 是否为警告按钮
*/
warning?: boolean;
/**
* 是否禁用
*/
disabled?: boolean;
/**
* 点击提交后触发
*/
onClick?: (value: any, errors: any, field: any) => void;
/**
* 是否校验/需要校验的 name 数组
*/
validate?: boolean | Array;
/**
* 自定义 field (在 Form 内不需要设置)
*/
field?: any;
}
export class Submit extends React.Component {}
interface HTMLAttributesWeak extends React.HTMLAttributes {
onClick?: any;
}
export interface ResetProps extends HTMLAttributesWeak, CommonProps {
/**
* 按钮的类型
*/
type?: 'primary' | 'secondary' | 'normal';
/**
* 按钮的尺寸
*/
size?: 'small' | 'medium' | 'large';
/**
* 按钮中 Icon 的尺寸，用于替代 Icon 的默认大小
*/
iconSize?:
| number
| 'xxs'
| 'xs'
| 'small'
| 'medium'
| 'large'
| 'xl'
| 'xxl'
| 'xxxl'
| 'inherit';
/**
* 当 component = 'button' 时，设置 button 标签的 type 值
*/
htmlType?: 'submit' | 'reset' | 'button';
/**
* 设置标签类型
*/
component?: 'button' | 'a';
/**
* 设置按钮的载入状态
*/
loading?: boolean;
/**
* 是否为幽灵按钮
*/
ghost?: true | false | 'light' | 'dark';
/**
* 是否为文本按钮
*/
text?: boolean;
/**
* 是否为警告按钮
*/
warning?: boolean;
/**
* 是否禁用
*/
disabled?: boolean;
/**
* 点击提交后触发
*/
onClick?: () => void;
/**
* 自定义重置的字段
*/
names?: Array;
/**
* 返回默认值
*/
toDefault?: boolean;
/**
* 自定义 field (在 Form 内不需要设置)
*/
field?: any;
}
export class Reset extends React.Component {}
export interface ErrorProps extends React.HTMLAttributes, CommonProps {
/**
* 表单名
*/
name?: string | Array;
/**
* 自定义 field (在 Form 内不需要设置)
*/
field?: any;
/**
* 自定义错误渲染, 可以是 node 或者 function(errors, state)
*/
children?: React.ReactNode | (() => void);
}
export class Error extends React.Component {}
interface HTMLAttributesWeak extends React.HTMLAttributes {
onChange?: any;
}
export interface FormProps extends HTMLAttributesWeak, CommonProps {
/**
* 样式前缀
*/
prefix?: string;
/**
* 内联表单
*/
inline?: boolean;
fullWidth?: boolean;
colon?: boolean;
/**
* 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。
*/
size?: 'large' | 'medium' | 'small';
/**
* 标签的位置
*/
labelAlign?: 'top' | 'left' | 'inset';
/**
* 标签的左右对齐方式
*/
labelTextAlign?: 'left' | 'right';
/**
* 经 `new Field(this)` 初始化后，直接传给 Form 即可 用到表单校验则不可忽略此项
*/
field?: any;
/**
* 保存 Form 自动生成的 field 对象
*/
saveField?: () => void;
/**
* 控制第一级 Item 的 labelCol
*/
labelCol?: SpanOffset;
/**
* 控制第一级 Item 的 wrapperCol
*/
wrapperCol?: SpanOffset;
/**
* form内有 `htmlType="submit"` 的元素的时候会触发
*/
onSubmit?: () => void;
/**
* 子元素
*/
children?: any;
/**
* 扩展class
*/
className?: string;
/**
* 是否禁用
*/
disabled?: boolean;
/**
* 自定义内联样式
*/
style?: React.CSSProperties;
/**
* 表单数值
*/
value?: any;
/**
* 表单变化回调
*/
onChange?: (values: any, item: any) => void;
/**
* 设置标签类型
*/
component?: string | (() => void);
/**
* 是否开启内置的响应式布局 （使用ResponsiveGrid）
*/
responsive?: boolean;
// 在 responsive模式下，透传给 ResponsiveGrid的， 表示 每个 cell 之间的间距， [bottom&top, right&left]
gap?: number | Array;
/**
* 是否开启预览态
*/
isPreview?: boolean;
/**
* 是否使用 label 替换校验信息的 name 字段
*/
useLabelForErrorMessage?: boolean
}
export default class Form extends React.Component {
static Item: typeof Item;
static Submit: typeof Submit;
static Reset: typeof Reset;
static Error: typeof Error;
}