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?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl';
|
278 |
|
279 | |
280 |
|
281 |
|
282 | htmlType?: 'submit' | 'reset' | 'button';
|
283 |
|
284 | |
285 |
|
286 |
|
287 | component?: 'button' | 'a';
|
288 |
|
289 | |
290 |
|
291 |
|
292 | loading?: boolean;
|
293 |
|
294 | |
295 |
|
296 |
|
297 | ghost?: true | false | 'light' | 'dark';
|
298 |
|
299 | |
300 |
|
301 |
|
302 | text?: boolean;
|
303 |
|
304 | |
305 |
|
306 |
|
307 | warning?: boolean;
|
308 |
|
309 | |
310 |
|
311 |
|
312 | disabled?: boolean;
|
313 |
|
314 | |
315 |
|
316 |
|
317 | onClick?: (value: any, errors: any, field: any) => void;
|
318 |
|
319 | |
320 |
|
321 |
|
322 | validate?: boolean | Array<any>;
|
323 |
|
324 | |
325 |
|
326 |
|
327 | field?: any;
|
328 | }
|
329 |
|
330 | export class Submit extends React.Component<SubmitProps, any> {}
|
331 |
|
332 | interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
|
333 | onClick?: any;
|
334 | }
|
335 |
|
336 | export interface ResetProps extends HTMLAttributesWeak, CommonProps {
|
337 | |
338 |
|
339 |
|
340 | type?: 'primary' | 'secondary' | 'normal';
|
341 |
|
342 | |
343 |
|
344 |
|
345 | size?: 'small' | 'medium' | 'large';
|
346 |
|
347 | |
348 |
|
349 |
|
350 | iconSize?: number | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit';
|
351 |
|
352 | |
353 |
|
354 |
|
355 | htmlType?: 'submit' | 'reset' | 'button';
|
356 |
|
357 | |
358 |
|
359 |
|
360 | component?: 'button' | 'a';
|
361 |
|
362 | |
363 |
|
364 |
|
365 | loading?: boolean;
|
366 |
|
367 | |
368 |
|
369 |
|
370 | ghost?: true | false | 'light' | 'dark';
|
371 |
|
372 | |
373 |
|
374 |
|
375 | text?: boolean;
|
376 |
|
377 | |
378 |
|
379 |
|
380 | warning?: boolean;
|
381 |
|
382 | |
383 |
|
384 |
|
385 | disabled?: boolean;
|
386 |
|
387 | |
388 |
|
389 |
|
390 | onClick?: () => void;
|
391 |
|
392 | |
393 |
|
394 |
|
395 | names?: Array<any>;
|
396 |
|
397 | |
398 |
|
399 |
|
400 | toDefault?: boolean;
|
401 |
|
402 | |
403 |
|
404 |
|
405 | field?: any;
|
406 | }
|
407 |
|
408 | export class Reset extends React.Component<ResetProps, any> {}
|
409 |
|
410 | export interface ErrorProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
|
411 | |
412 |
|
413 |
|
414 | name?: string | Array<any>;
|
415 |
|
416 | |
417 |
|
418 |
|
419 | field?: any;
|
420 |
|
421 | |
422 |
|
423 |
|
424 | children?: React.ReactNode | (() => void);
|
425 | }
|
426 |
|
427 | export class Error extends React.Component<ErrorProps, any> {}
|
428 | interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
|
429 | onChange?: any;
|
430 | }
|
431 |
|
432 | export interface FormProps extends HTMLAttributesWeak, CommonProps {
|
433 | /**
|
434 | * 样式前缀
|
435 | */
|
436 | prefix?: string;
|
437 |
|
438 | /**
|
439 | * 内联表单
|
440 | */
|
441 | inline?: boolean;
|
442 | fullWidth?: boolean;
|
443 | colon?: boolean;
|
444 |
|
445 | /**
|
446 | * 单个 Item 的 size 自定义,优先级高于 Form 的 size, 并且当组件与 Item 一起使用时,组件自身设置 size 属性无效。
|
447 | */
|
448 | size?: 'large' | 'medium' | 'small';
|
449 |
|
450 | /**
|
451 | * 标签的位置
|
452 | */
|
453 | labelAlign?: 'top' | 'left' | 'inset';
|
454 |
|
455 | /**
|
456 | * 标签的左右对齐方式
|
457 | */
|
458 | labelTextAlign?: 'left' | 'right';
|
459 |
|
460 | /**
|
461 | * 经 `new Field(this)` 初始化后,直接传给 Form 即可 用到表单校验则不可忽略此项
|
462 | */
|
463 | field?: any;
|
464 |
|
465 | /**
|
466 | * 保存 Form 自动生成的 field 对象
|
467 | */
|
468 | saveField?: () => void;
|
469 |
|
470 | |
471 |
|
472 |
|
473 | labelCol?: SpanOffset;
|
474 |
|
475 | |
476 |
|
477 |
|
478 | wrapperCol?: SpanOffset;
|
479 |
|
480 | |
481 |
|
482 |
|
483 | onSubmit?: React.FormEventHandler<HTMLFormElement>;
|
484 |
|
485 | |
486 |
|
487 |
|
488 | children?: any;
|
489 |
|
490 | |
491 |
|
492 |
|
493 | className?: string;
|
494 |
|
495 | |
496 |
|
497 |
|
498 | disabled?: boolean;
|
499 |
|
500 | |
501 |
|
502 |
|
503 | style?: React.CSSProperties;
|
504 |
|
505 | |
506 |
|
507 |
|
508 | value?: any;
|
509 |
|
510 | |
511 |
|
512 |
|
513 | onChange?: (values: any, item: any) => void;
|
514 |
|
515 | |
516 |
|
517 |
|
518 | component?: string | (() => void);
|
519 | /**
|
520 | * 是否开启内置的响应式布局 (使用ResponsiveGrid)
|
521 | */
|
522 | responsive?: boolean;
|
523 | // 在 responsive模式下,透传给 ResponsiveGrid的, 表示 每个 cell 之间的间距, [bottom&top, right&left]
|
524 | gap?: number | Array<number>;
|
525 | /**
|
526 | * 是否开启预览态
|
527 | */
|
528 | isPreview?: boolean;
|
529 | /**
|
530 | * 是否使用 label 替换校验信息的 name 字段
|
531 | */
|
532 | useLabelForErrorMessage?: boolean;
|
533 | }
|
534 |
|
535 | export default class Form extends React.Component<FormProps, any> {
|
536 | static Item: typeof Item;
|
537 | static Submit: typeof Submit;
|
538 | static Reset: typeof Reset;
|
539 | static Error: typeof Error;
|
540 | }
|
541 |
|
\ | No newline at end of file |