UNPKG

11.2 kBTypeScriptView Raw
1/// <reference types="react" />
2
3import * as React from 'react';
4import CommonProps from '../util';
5import { data } from '../checkbox';
6import { ButtonProps } from '../button';
7
8type SpanOffset = {
9 span?: string | number;
10 offset?: string | number;
11 [propName: string]: any;
12}
13
14export interface ItemProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
15 /**
16 * 表单名
17 */
18 name?: string;
19
20 /**
21 * 样式前缀
22 */
23 prefix?: string;
24
25 /**
26 * label 标签的文本
27 */
28 label?: React.ReactNode;
29
30 /**
31 * label 标签布局,通 `<Col>` 组件,设置 span offset 值,如 {span: 8, offset: 16},该项仅在垂直表单有效
32 */
33 labelCol?: SpanOffset;
34
35 /**
36 * 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol
37 */
38 wrapperCol?: SpanOffset;
39
40 /**
41 * 自定义提示信息,如不设置,则会根据校验规则自动生成.
42 */
43 help?: React.ReactNode;
44
45 /**
46 * 额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。 位于错误信息后面
47 */
48 extra?: React.ReactNode;
49
50 /**
51 * 校验状态,如不设置,则会根据校验规则自动生成
52 */
53 validateState?: 'error' | 'success' | 'loading' | 'warning';
54
55 /**
56 * 配合 validateState 属性使用,是否展示 success/loading 的校验状态图标, 目前只有Input支持
57 */
58 hasFeedback?: boolean;
59
60 /**
61 * 自定义内联样式
62 */
63 style?: React.CSSProperties;
64
65 /**
66 * node 或者 function(values)
67 */
68 children?: React.ReactNode | (() => void);
69
70 /**
71 * 单个 Itemsize 自定义,优先级高于 Formsize, 并且当组件与 Item 一起使用时,组件自身设置 size 属性无效。
72 */
73 size?: 'large' | 'small' | 'medium';
74
75 /**
76 * 标签的位置
77 */
78 labelAlign?: 'top' | 'left' | 'inset';
79
80 /**
81 * 标签的左右对齐方式
82 */
83 labelTextAlign?: 'left' | 'right';
84
85 /**
86 * 扩展class
87 */
88 className?: string;
89
90 /**
91 * 是否禁用
92 */
93 disabled?: boolean;
94
95 /**
96 * [表单校验] 不能为空
97 */
98 required?: boolean;
99
100 /**
101 * required 的星号是否显示
102 */
103 asterisk?: boolean;
104
105 /**
106 * required 自定义错误信息
107 */
108 requiredMessage?: string;
109
110 /**
111 * required 自定义触发方式
112 */
113 requiredTrigger?: string | Array<any>;
114
115 /**
116 * [表单校验] 最小值
117 */
118 min?: number;
119
120 /**
121 * [表单校验] 最大值
122 */
123 max?: number;
124
125 /**
126 * min/max 自定义错误信息
127 */
128 minmaxMessage?: string;
129
130 /**
131 * min/max 自定义触发方式
132 */
133 minmaxTrigger?: string | Array<any>;
134
135 /**
136 * [表单校验] 字符串最小长度 / 数组最小个数
137 */
138 minLength?: number;
139
140 /**
141 * [表单校验] 字符串最大长度 / 数组最大个数
142 */
143 maxLength?: number;
144
145 /**
146 * minLength/maxLength 自定义错误信息
147 */
148 minmaxLengthMessage?: string;
149
150 /**
151 * minLength/maxLength 自定义触发方式
152 */
153 minmaxLengthTrigger?: string | Array<any>;
154
155 /**
156 * [表单校验] 字符串精确长度 / 数组精确个数
157 */
158 length?: number;
159
160 /**
161 * length 自定义错误信息
162 */
163 lengthMessage?: string;
164
165 /**
166 * length 自定义触发方式
167 */
168 lengthTrigger?: string | Array<any>;
169
170 /**
171 * 正则校验
172 */
173 pattern?: any;
174
175 /**
176 * pattern 自定义错误信息
177 */
178 patternMessage?: string;
179
180 /**
181 * pattern 自定义触发方式
182 */
183 patternTrigger?: string | Array<any>;
184
185 /**
186 * [表单校验] 四种常用的 pattern
187 */
188 format?: 'number' | 'email' | 'url' | 'tel';
189
190 /**
191 * format 自定义错误信息
192 */
193 formatMessage?: string;
194
195 /**
196 * format 自定义触发方式
197 */
198 formatTrigger?: string | Array<any>;
199
200 /**
201 * [表单校验] 自定义校验函数
202 */
203 validator?: (rule: any, value: any, callback: any) => void;
204
205 /**
206 * validator 自定义触发方式
207 */
208 validatorTrigger?: string | Array<any>;
209
210 /**
211 * 是否修改数据时自动触发校验
212 */
213 autoValidate?: boolean;
214
215 /**
216 * 在响应式布局下,且label在左边时,label的宽度是多少
217 */
218 labelWidth?: number | string;
219
220 /**
221 * 在响应式布局模式下,表单项占多少列
222 */
223 colSpan?: number;
224
225 /**
226 * 是否开启预览态
227 */
228 isPreview?: boolean;
229
230 /**
231 * 预览态模式下渲染的内容
232 * @param {any} value 根据包裹的组件的 value 类型而决定
233 */
234 renderPreview?: (values: number | string | data | Array<number | string | data>, props: any) => any;
235
236 /**
237 * 是否使用 label 替换校验信息的 name 字段
238 */
239 useLabelForErrorMessage?: boolean;
240
241 /**
242 * 表示是否显示 label 后面的冒号
243 */
244 colon?: boolean;
245
246 /**
247 * 子元素的 value 名称
248 */
249 valueName?: string;
250
251 /**
252 * 单个 Item 中表单类组件宽度是否是 100%
253 */
254 fullWidth?: boolean;
255}
256
257export class Item extends React.Component<ItemProps, any> {}
258
259interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement>, ButtonProps {
260 onClick?: any;
261}
262
263export interface SubmitProps extends HTMLAttributesWeak, CommonProps {
264 /**
265 * 按钮的类型
266 */
267 type?: 'primary' | 'secondary' | 'normal';
268
269 /**
270 * 按钮的尺寸
271 */
272 size?: 'small' | 'medium' | 'large';
273
274 /**
275 * 按钮中 Icon 的尺寸,用于替代 Icon 的默认大小
276 */
277 iconSize?:
278 | 'xxs'
279 | 'xs'
280 | 'small'
281 | 'medium'
282 | 'large'
283 | 'xl'
284 | 'xxl'
285 | 'xxxl';
286
287 /**
288 * 当 component = 'button' 时,设置 button 标签的 type 值
289 */
290 htmlType?: 'submit' | 'reset' | 'button';
291
292 /**
293 * 设置标签类型
294 */
295 component?: 'button' | 'a';
296
297 /**
298 * 设置按钮的载入状态
299 */
300 loading?: boolean;
301
302 /**
303 * 是否为幽灵按钮
304 */
305 ghost?: true | false | 'light' | 'dark';
306
307 /**
308 * 是否为文本按钮
309 */
310 text?: boolean;
311
312 /**
313 * 是否为警告按钮
314 */
315 warning?: boolean;
316
317 /**
318 * 是否禁用
319 */
320 disabled?: boolean;
321
322 /**
323 * 点击提交后触发
324 */
325 onClick?: (value: any, errors: any, field: any) => void;
326
327 /**
328 * 是否校验/需要校验的 name 数组
329 */
330 validate?: boolean | Array<any>;
331
332 /**
333 * 自定义 field (在 Form 内不需要设置)
334 */
335 field?: any;
336}
337
338export class Submit extends React.Component<SubmitProps, any> {}
339
340interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
341 onClick?: any;
342}
343
344export interface ResetProps extends HTMLAttributesWeak, CommonProps {
345 /**
346 * 按钮的类型
347 */
348 type?: 'primary' | 'secondary' | 'normal';
349
350 /**
351 * 按钮的尺寸
352 */
353 size?: 'small' | 'medium' | 'large';
354
355 /**
356 * 按钮中 Icon 的尺寸,用于替代 Icon 的默认大小
357 */
358 iconSize?:
359 | number
360 | 'xxs'
361 | 'xs'
362 | 'small'
363 | 'medium'
364 | 'large'
365 | 'xl'
366 | 'xxl'
367 | 'xxxl'
368 | 'inherit';
369
370 /**
371 * 当 component = 'button' 时,设置 button 标签的 type 值
372 */
373 htmlType?: 'submit' | 'reset' | 'button';
374
375 /**
376 * 设置标签类型
377 */
378 component?: 'button' | 'a';
379
380 /**
381 * 设置按钮的载入状态
382 */
383 loading?: boolean;
384
385 /**
386 * 是否为幽灵按钮
387 */
388 ghost?: true | false | 'light' | 'dark';
389
390 /**
391 * 是否为文本按钮
392 */
393 text?: boolean;
394
395 /**
396 * 是否为警告按钮
397 */
398 warning?: boolean;
399
400 /**
401 * 是否禁用
402 */
403 disabled?: boolean;
404
405 /**
406 * 点击提交后触发
407 */
408 onClick?: () => void;
409
410 /**
411 * 自定义重置的字段
412 */
413 names?: Array<any>;
414
415 /**
416 * 返回默认值
417 */
418 toDefault?: boolean;
419
420 /**
421 * 自定义 field (在 Form 内不需要设置)
422 */
423 field?: any;
424}
425
426export class Reset extends React.Component<ResetProps, any> {}
427
428export interface ErrorProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
429 /**
430 * 表单名
431 */
432 name?: string | Array<any>;
433
434 /**
435 * 自定义 field (在 Form 内不需要设置)
436 */
437 field?: any;
438
439 /**
440 * 自定义错误渲染, 可以是 node 或者 function(errors, state)
441 */
442 children?: React.ReactNode | (() => void);
443}
444
445export class Error extends React.Component<ErrorProps, any> {}
446interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
447 onChange?: any;
448}
449
450export interface FormProps extends HTMLAttributesWeak, CommonProps {
451 /**
452 * 样式前缀
453 */
454 prefix?: string;
455
456 /**
457 * 内联表单
458 */
459 inline?: boolean;
460 fullWidth?: boolean;
461 colon?: boolean;
462
463 /**
464 * 单个 Itemsize 自定义,优先级高于 Formsize, 并且当组件与 Item 一起使用时,组件自身设置 size 属性无效。
465 */
466 size?: 'large' | 'medium' | 'small';
467
468 /**
469 * 标签的位置
470 */
471 labelAlign?: 'top' | 'left' | 'inset';
472
473 /**
474 * 标签的左右对齐方式
475 */
476 labelTextAlign?: 'left' | 'right';
477
478 /**
479 * 经 `new Field(this)` 初始化后,直接传给 Form 即可 用到表单校验则不可忽略此项
480 */
481 field?: any;
482
483 /**
484 * 保存 Form 自动生成的 field 对象
485 */
486 saveField?: () => void;
487
488 /**
489 * 控制第一级 Item 的 labelCol
490 */
491 labelCol?: SpanOffset;
492
493 /**
494 * 控制第一级 Item 的 wrapperCol
495 */
496 wrapperCol?: SpanOffset;
497
498 /**
499 * form内有 `htmlType="submit"` 的元素的时候会触发
500 */
501 onSubmit?: () => void;
502
503 /**
504 * 子元素
505 */
506 children?: any;
507
508 /**
509 * 扩展class
510 */
511 className?: string;
512
513 /**
514 * 是否禁用
515 */
516 disabled?: boolean;
517
518 /**
519 * 自定义内联样式
520 */
521 style?: React.CSSProperties;
522
523 /**
524 * 表单数值
525 */
526 value?: any;
527
528 /**
529 * 表单变化回调
530 */
531 onChange?: (values: any, item: any) => void;
532
533 /**
534 * 设置标签类型
535 */
536 component?: string | (() => void);
537 /**
538 * 是否开启内置的响应式布局 (使用ResponsiveGrid
539 */
540 responsive?: boolean;
541 // 在 responsive模式下,透传给 ResponsiveGrid的, 表示 每个 cell 之间的间距, [bottom&top, right&left]
542 gap?: number | Array<number>;
543 /**
544 * 是否开启预览态
545 */
546 isPreview?: boolean;
547 /**
548 * 是否使用 label 替换校验信息的 name 字段
549 */
550 useLabelForErrorMessage?: boolean
551}
552
553export default class Form extends React.Component<FormProps, any> {
554 static Item: typeof Item;
555 static Submit: typeof Submit;
556 static Reset: typeof Reset;
557 static Error: typeof Error;
558}
559
\No newline at end of file