1 |
|
2 |
|
3 | import * as 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?: (values: number | string | data | Array<number | string | data>, props: any) => any;
|
235 |
|
236 | |
237 |
|
238 |
|
239 | useLabelForErrorMessage?: boolean;
|
240 |
|
241 | |
242 |
|
243 |
|
244 | colon?: boolean;
|
245 |
|
246 | |
247 |
|
248 |
|
249 | valueName?: string;
|
250 |
|
251 | |
252 |
|
253 |
|
254 | fullWidth?: boolean;
|
255 | }
|
256 |
|
257 | export class Item extends React.Component<ItemProps, any> {}
|
258 |
|
259 | interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement>, ButtonProps {
|
260 | onClick?: any;
|
261 | }
|
262 |
|
263 | export 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 |
|
276 |
|
277 | iconSize?:
|
278 | | 'xxs'
|
279 | | 'xs'
|
280 | | 'small'
|
281 | | 'medium'
|
282 | | 'large'
|
283 | | 'xl'
|
284 | | 'xxl'
|
285 | | 'xxxl';
|
286 |
|
287 | |
288 |
|
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 |
|
329 |
|
330 | validate?: boolean | Array<any>;
|
331 |
|
332 | |
333 |
|
334 |
|
335 | field?: any;
|
336 | }
|
337 |
|
338 | export class Submit extends React.Component<SubmitProps, any> {}
|
339 |
|
340 | interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
|
341 | onClick?: any;
|
342 | }
|
343 |
|
344 | export 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 |
|
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 |
|
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 |
|
422 |
|
423 | field?: any;
|
424 | }
|
425 |
|
426 | export class Reset extends React.Component<ResetProps, any> {}
|
427 |
|
428 | export interface ErrorProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
|
429 | |
430 |
|
431 |
|
432 | name?: string | Array<any>;
|
433 |
|
434 | |
435 |
|
436 |
|
437 | field?: any;
|
438 |
|
439 | |
440 |
|
441 |
|
442 | children?: React.ReactNode | (() => void);
|
443 | }
|
444 |
|
445 | export class Error extends React.Component<ErrorProps, any> {}
|
446 | interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
|
447 | onChange?: any;
|
448 | }
|
449 |
|
450 | export 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 | * 单个 Item 的 size 自定义,优先级高于 Form 的 size, 并且当组件与 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 |
|
490 |
|
491 | labelCol?: SpanOffset;
|
492 |
|
493 | |
494 |
|
495 |
|
496 | wrapperCol?: SpanOffset;
|
497 |
|
498 | |
499 |
|
500 |
|
501 | onSubmit?: () => void;
|
502 |
|
503 | |
504 |
|
505 |
|
506 | children?: any;
|
507 |
|
508 | |
509 |
|
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 |
|
553 | export 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 |