1 |
|
2 |
|
3 | import React from 'react';
|
4 | import { CommonProps } from '../util';
|
5 | import { data } from '../checkbox';
|
6 | import { ButtonProps } from '../button';
|
7 |
|
8 | type SpanOffset = {
|
9 | span?: string | number;
|
10 | offset?: string | number;
|
11 | [propName: string]: any;
|
12 | };
|
13 |
|
14 | export interface ItemProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
|
15 | |
16 |
|
17 |
|
18 | name?: string;
|
19 |
|
20 | |
21 |
|
22 |
|
23 | prefix?: string;
|
24 |
|
25 | |
26 |
|
27 |
|
28 | label?: React.ReactNode;
|
29 |
|
30 | |
31 |
|
32 |
|
33 | labelCol?: SpanOffset;
|
34 |
|
35 | |
36 |
|
37 |
|
38 | wrapperCol?: SpanOffset;
|
39 |
|
40 | |
41 |
|
42 |
|
43 | help?: React.ReactNode;
|
44 |
|
45 | |
46 |
|
47 |
|
48 | extra?: React.ReactNode;
|
49 |
|
50 | |
51 |
|
52 |
|
53 | validateState?: 'error' | 'success' | 'loading' | 'warning';
|
54 |
|
55 | |
56 |
|
57 |
|
58 | hasFeedback?: boolean;
|
59 |
|
60 | |
61 |
|
62 |
|
63 | style?: React.CSSProperties;
|
64 |
|
65 | |
66 |
|
67 |
|
68 | children?: React.ReactNode | (() => void);
|
69 |
|
70 | /**
|
71 | * 单个 Item 的 size 自定义,优先级高于 Form 的 size, 并且当组件与 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 |
|
207 |
|
208 | validatorTrigger?: string | Array<any>;
|
209 |
|
210 | |
211 |
|
212 |
|
213 | autoValidate?: boolean;
|
214 |
|
215 | |
216 |
|
217 |
|
218 | labelWidth?: number | string;
|
219 |
|
220 | |
221 |
|
222 |
|
223 | colSpan?: number;
|
224 |
|
225 | |
226 |
|
227 |
|
228 | isPreview?: boolean;
|
229 |
|
230 | |
231 |
|
232 |
|
233 |
|
234 | renderPreview?: (
|
235 | values: number | string | data | Array<number | string | data>,
|
236 | props: any
|
237 | ) => any;
|
238 |
|
239 | |
240 |
|
241 |
|
242 | useLabelForErrorMessage?: boolean;
|
243 |
|
244 | |
245 |
|
246 |
|
247 |
|
248 |
|
249 | preferMarginToDisplayHelp?: boolean;
|
250 |
|
251 | |
252 |
|
253 |
|
254 | colon?: boolean;
|
255 |
|
256 | |
257 |
|
258 |
|
259 | valueName?: string;
|
260 |
|
261 | |
262 |
|
263 |
|
264 | fullWidth?: boolean;
|
265 | }
|
266 |
|
267 | export class Item extends React.Component<ItemProps, any> {}
|
268 |
|
269 | interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement>, ButtonProps {
|
270 | onClick?: any;
|
271 | }
|
272 |
|
273 | export interface SubmitProps extends HTMLAttributesWeak, CommonProps {
|
274 | |
275 |
|
276 |
|
277 | type?: 'primary' | 'secondary' | 'normal';
|
278 |
|
279 | |
280 |
|
281 |
|
282 | size?: 'small' | 'medium' | 'large';
|
283 |
|
284 | |
285 |
|
286 |
|
287 | iconSize?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl';
|
288 |
|
289 | |
290 |
|
291 |
|
292 | htmlType?: 'submit' | 'reset' | 'button';
|
293 |
|
294 | |
295 |
|
296 |
|
297 | component?: 'button' | 'a';
|
298 |
|
299 | |
300 |
|
301 |
|
302 | loading?: boolean;
|
303 |
|
304 | |
305 |
|
306 |
|
307 | ghost?: true | false | 'light' | 'dark';
|
308 |
|
309 | |
310 |
|
311 |
|
312 | text?: boolean;
|
313 |
|
314 | |
315 |
|
316 |
|
317 | warning?: boolean;
|
318 |
|
319 | |
320 |
|
321 |
|
322 | disabled?: boolean;
|
323 |
|
324 | |
325 |
|
326 |
|
327 | onClick?: (value: any, errors: any, field: any) => void;
|
328 |
|
329 | |
330 |
|
331 |
|
332 | validate?: boolean | Array<any>;
|
333 |
|
334 | |
335 |
|
336 |
|
337 | field?: any;
|
338 | }
|
339 |
|
340 | export class Submit extends React.Component<SubmitProps, any> {}
|
341 |
|
342 | interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
|
343 | onClick?: any;
|
344 | }
|
345 |
|
346 | export interface ResetProps extends HTMLAttributesWeak, CommonProps {
|
347 | |
348 |
|
349 |
|
350 | type?: 'primary' | 'secondary' | 'normal';
|
351 |
|
352 | |
353 |
|
354 |
|
355 | size?: 'small' | 'medium' | 'large';
|
356 |
|
357 | |
358 |
|
359 |
|
360 | iconSize?:
|
361 | | number
|
362 | | 'xxs'
|
363 | | 'xs'
|
364 | | 'small'
|
365 | | 'medium'
|
366 | | 'large'
|
367 | | 'xl'
|
368 | | 'xxl'
|
369 | | 'xxxl'
|
370 | | 'inherit';
|
371 |
|
372 | |
373 |
|
374 |
|
375 | htmlType?: 'submit' | 'reset' | 'button';
|
376 |
|
377 | |
378 |
|
379 |
|
380 | component?: 'button' | 'a';
|
381 |
|
382 | |
383 |
|
384 |
|
385 | loading?: boolean;
|
386 |
|
387 | |
388 |
|
389 |
|
390 | ghost?: true | false | 'light' | 'dark';
|
391 |
|
392 | |
393 |
|
394 |
|
395 | text?: boolean;
|
396 |
|
397 | |
398 |
|
399 |
|
400 | warning?: boolean;
|
401 |
|
402 | |
403 |
|
404 |
|
405 | disabled?: boolean;
|
406 |
|
407 | |
408 |
|
409 |
|
410 | onClick?: () => void;
|
411 |
|
412 | |
413 |
|
414 |
|
415 | names?: Array<any>;
|
416 |
|
417 | |
418 |
|
419 |
|
420 | toDefault?: boolean;
|
421 |
|
422 | |
423 |
|
424 |
|
425 | field?: any;
|
426 | }
|
427 |
|
428 | export class Reset extends React.Component<ResetProps, any> {}
|
429 |
|
430 | export interface ErrorProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
|
431 | |
432 |
|
433 |
|
434 | name?: string | Array<any>;
|
435 |
|
436 | |
437 |
|
438 |
|
439 | field?: any;
|
440 |
|
441 | |
442 |
|
443 |
|
444 | children?: React.ReactNode | (() => void);
|
445 | }
|
446 |
|
447 | export class Error extends React.Component<ErrorProps, any> {}
|
448 | interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
|
449 | onChange?: any;
|
450 | }
|
451 |
|
452 | export interface FormProps extends HTMLAttributesWeak, CommonProps {
|
453 | /**
|
454 | * 样式前缀
|
455 | */
|
456 | prefix?: string;
|
457 |
|
458 | /**
|
459 | * 内联表单
|
460 | */
|
461 | inline?: boolean;
|
462 | fullWidth?: boolean;
|
463 | colon?: boolean;
|
464 |
|
465 | /**
|
466 | * 单个 Item 的 size 自定义,优先级高于 Form 的 size, 并且当组件与 Item 一起使用时,组件自身设置 size 属性无效。
|
467 | */
|
468 | size?: 'large' | 'medium' | 'small';
|
469 |
|
470 | /**
|
471 | * 标签的位置
|
472 | */
|
473 | labelAlign?: 'top' | 'left' | 'inset';
|
474 |
|
475 | /**
|
476 | * 标签的左右对齐方式
|
477 | */
|
478 | labelTextAlign?: 'left' | 'right';
|
479 |
|
480 | /**
|
481 | * 经 `new Field(this)` 初始化后,直接传给 Form 即可 用到表单校验则不可忽略此项
|
482 | */
|
483 | field?: any;
|
484 |
|
485 | /**
|
486 | * 保存 Form 自动生成的 field 对象
|
487 | */
|
488 | saveField?: () => void;
|
489 |
|
490 | |
491 |
|
492 |
|
493 | labelCol?: SpanOffset;
|
494 |
|
495 | |
496 |
|
497 |
|
498 | wrapperCol?: SpanOffset;
|
499 |
|
500 | |
501 |
|
502 |
|
503 | onSubmit?: React.FormEventHandler<HTMLFormElement>;
|
504 |
|
505 | |
506 |
|
507 |
|
508 | children?: any;
|
509 |
|
510 | |
511 |
|
512 |
|
513 | className?: string;
|
514 |
|
515 | |
516 |
|
517 |
|
518 | disabled?: boolean;
|
519 |
|
520 | |
521 |
|
522 |
|
523 | style?: React.CSSProperties;
|
524 |
|
525 | |
526 |
|
527 |
|
528 | value?: any;
|
529 |
|
530 | |
531 |
|
532 |
|
533 | onChange?: (values: any, item: any) => void;
|
534 |
|
535 | |
536 |
|
537 |
|
538 | component?: string | (() => void);
|
539 | /**
|
540 | * 是否开启内置的响应式布局 (使用ResponsiveGrid)
|
541 | */
|
542 | responsive?: boolean;
|
543 | // 在 responsive模式下,透传给 ResponsiveGrid的, 表示 每个 cell 之间的间距, [bottom&top, right&left]
|
544 | gap?: number | Array<number>;
|
545 | /**
|
546 | * 是否开启预览态
|
547 | */
|
548 | isPreview?: boolean;
|
549 | /**
|
550 | * 是否使用 label 替换校验信息的 name 字段
|
551 | */
|
552 | useLabelForErrorMessage?: boolean;
|
553 | /**
|
554 | * 倾向使用 item 的 margin 空间来展示 help
|
555 | * @default false
|
556 | * @version 1.26.37
|
557 | */
|
558 | preferMarginToDisplayHelp?: boolean;
|
559 | }
|
560 |
|
561 | export default class Form extends React.Component<FormProps, any> {
|
562 | static Item: typeof Item;
|
563 | static Submit: typeof Submit;
|
564 | static Reset: typeof Reset;
|
565 | static Error: typeof Error;
|
566 | }
|
567 |
|
\ | No newline at end of file |