@faasjs/ant-design 0.0.2-beta.378 → 0.0.2-beta.381
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -6
- package/dist/index.d.ts +21 -5
- package/dist/index.js +94 -45
- package/dist/index.mjs +94 -45
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -31,14 +31,10 @@ type FaasItemProps = {
|
|
|
31
31
|
|
|
32
32
|
Form are based on [Ant Design's Form component](https://ant.design/components/form/#Form).
|
|
33
33
|
|
|
34
|
-
<iframe src="https://codesandbox.io/embed/recursing-lumiere-8wn11" style="width:100%;height:500px;border:0;overflow:hidden;" title="faasjs-ant-design-form" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
|
|
35
|
-
|
|
36
34
|
### FormItem
|
|
37
35
|
|
|
38
36
|
Form are based on [Ant Design's Form.Item component](https://ant.design/components/form/#Form.Item).
|
|
39
37
|
|
|
40
|
-
<iframe src="https://codesandbox.io/embed/faasjs-ant-design-formitem-olqg5" style="width:100%;height:500px;border:0;overflow:hidden;" title="faasjs-ant-design-formitem" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
|
|
41
|
-
|
|
42
38
|
## Modules
|
|
43
39
|
|
|
44
40
|
### Namespaces
|
|
@@ -245,7 +241,7 @@ ___
|
|
|
245
241
|
|
|
246
242
|
### FaasItemType
|
|
247
243
|
|
|
248
|
-
Ƭ **FaasItemType**: ``"string"`` \| ``"string[]"`` \| ``"number"`` \| ``"number[]"`` \| ``"boolean"`` \| ``"date"`` \| ``"time"``
|
|
244
|
+
Ƭ **FaasItemType**: ``"string"`` \| ``"string[]"`` \| ``"number"`` \| ``"number[]"`` \| ``"boolean"`` \| ``"date"`` \| ``"time"`` \| ``"object"`` \| ``"object[]"``
|
|
249
245
|
|
|
250
246
|
___
|
|
251
247
|
|
|
@@ -261,6 +257,8 @@ ___
|
|
|
261
257
|
| `date` | `Dayjs` |
|
|
262
258
|
| `number` | `number` |
|
|
263
259
|
| `number[]` | `number`[] |
|
|
260
|
+
| `object` | `any` |
|
|
261
|
+
| `object[]` | `any`[] |
|
|
264
262
|
| `string` | `string` |
|
|
265
263
|
| `string[]` | `string`[] |
|
|
266
264
|
| `time` | `Dayjs` |
|
|
@@ -293,7 +291,7 @@ ___
|
|
|
293
291
|
|
|
294
292
|
### FormItemProps
|
|
295
293
|
|
|
296
|
-
Ƭ **FormItemProps**<`T`\>: { `children?`: `JSX.Element` \| ``null`` ; `extendTypes?`: { `[type: string]`: [`ExtendFormTypeProps`](#extendformtypeprops); } ; `label?`: `string` \| ``false`` ; `rules?`: `RuleObject`[] ; `render?`: () => `Element` } & `FormItemInputProps
|
|
294
|
+
Ƭ **FormItemProps**<`T`\>: { `children?`: `JSX.Element` \| ``null`` ; `extendTypes?`: { `[type: string]`: [`ExtendFormTypeProps`](#extendformtypeprops); } ; `label?`: `string` \| ``false`` ; `rules?`: `RuleObject`[] ; `render?`: () => `Element` } & `FormItemInputProps` & [`FaasItemProps`](#faasitemprops) & `AntdFormItemProps`<`T`\>
|
|
297
295
|
|
|
298
296
|
#### Type parameters
|
|
299
297
|
|
package/dist/index.d.ts
CHANGED
|
@@ -74,15 +74,17 @@ declare function Config(props: {
|
|
|
74
74
|
config: Partial<FaasState>;
|
|
75
75
|
}): JSX.Element;
|
|
76
76
|
|
|
77
|
-
declare type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean' | 'date' | 'time';
|
|
77
|
+
declare type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean' | 'date' | 'time' | 'object' | 'object[]';
|
|
78
78
|
declare type FaasItemTypeValue = {
|
|
79
79
|
string: string;
|
|
80
80
|
'string[]': string[];
|
|
81
81
|
number: number;
|
|
82
82
|
'number[]': number[];
|
|
83
83
|
boolean: boolean;
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
date: Dayjs;
|
|
85
|
+
time: Dayjs;
|
|
86
|
+
object: any;
|
|
87
|
+
'object[]': any[];
|
|
86
88
|
};
|
|
87
89
|
declare type BaseOption = string | number | {
|
|
88
90
|
label: string;
|
|
@@ -191,12 +193,26 @@ declare type TimeProps = {
|
|
|
191
193
|
type: 'time';
|
|
192
194
|
input?: TimePickerProps$1;
|
|
193
195
|
};
|
|
196
|
+
declare type ObjectProps = {
|
|
197
|
+
type: 'object';
|
|
198
|
+
object: (FaasItemProps & (StringProps | StringListProps | NumberProps | NumberListProps | BooleanProps | OptionsProps | DateProps | TimeProps | ObjectProps))[];
|
|
199
|
+
disabled?: boolean;
|
|
200
|
+
};
|
|
201
|
+
declare type ObjectListProps = {
|
|
202
|
+
type: 'object[]';
|
|
203
|
+
object: (FaasItemProps & {
|
|
204
|
+
/** default is 6 */
|
|
205
|
+
col?: number;
|
|
206
|
+
} & (StringProps | StringListProps | NumberProps | NumberListProps | BooleanProps | OptionsProps | DateProps | TimeProps | ObjectProps))[];
|
|
207
|
+
maxCount?: number;
|
|
208
|
+
disabled?: boolean;
|
|
209
|
+
};
|
|
194
210
|
declare type OptionsProps = {
|
|
195
211
|
options?: BaseOption[];
|
|
196
212
|
type?: 'string' | 'string[]' | 'number' | 'number[]';
|
|
197
213
|
input?: SelectProps<any>;
|
|
198
214
|
};
|
|
199
|
-
declare type FormItemInputProps
|
|
215
|
+
declare type FormItemInputProps = StringProps | StringListProps | NumberProps | NumberListProps | BooleanProps | OptionsProps | DateProps | TimeProps | ObjectProps | ObjectListProps;
|
|
200
216
|
declare type ExtendFormTypeProps = {
|
|
201
217
|
children?: JSX.Element | null;
|
|
202
218
|
};
|
|
@@ -209,7 +225,7 @@ declare type FormItemProps<T = any> = {
|
|
|
209
225
|
extendTypes?: {
|
|
210
226
|
[type: string]: ExtendFormTypeProps;
|
|
211
227
|
};
|
|
212
|
-
} & FormItemInputProps
|
|
228
|
+
} & FormItemInputProps & FaasItemProps & FormItemProps$1<T>;
|
|
213
229
|
/**
|
|
214
230
|
* FormItem, can be used without Form.
|
|
215
231
|
*
|
package/dist/index.js
CHANGED
|
@@ -283,45 +283,57 @@ var TimePicker = (0, import_react6.forwardRef)((props, ref) => {
|
|
|
283
283
|
TimePicker.displayName = "TimePicker";
|
|
284
284
|
|
|
285
285
|
// src/FormItem.tsx
|
|
286
|
+
function processProps(propsCopy) {
|
|
287
|
+
if (!propsCopy.title)
|
|
288
|
+
propsCopy.title = (0, import_lodash4.upperFirst)(propsCopy.id);
|
|
289
|
+
if (!propsCopy.label && propsCopy.label !== false)
|
|
290
|
+
propsCopy.label = propsCopy.title;
|
|
291
|
+
if (!propsCopy.name)
|
|
292
|
+
propsCopy.name = propsCopy.id;
|
|
293
|
+
if (!propsCopy.type)
|
|
294
|
+
propsCopy.type = "string";
|
|
295
|
+
if (!propsCopy.rules)
|
|
296
|
+
propsCopy.rules = [];
|
|
297
|
+
if (propsCopy.required) {
|
|
298
|
+
if (propsCopy.type.endsWith("[]"))
|
|
299
|
+
propsCopy.rules.push({
|
|
300
|
+
required: true,
|
|
301
|
+
validator: async (_, values) => {
|
|
302
|
+
if (!values || values.length < 1)
|
|
303
|
+
return Promise.reject(Error(`${propsCopy.label || propsCopy.title} is required`));
|
|
304
|
+
}
|
|
305
|
+
});
|
|
306
|
+
else
|
|
307
|
+
propsCopy.rules.push({
|
|
308
|
+
required: true,
|
|
309
|
+
message: `${propsCopy.label || propsCopy.title} is required`
|
|
310
|
+
});
|
|
311
|
+
}
|
|
312
|
+
if (!propsCopy.input)
|
|
313
|
+
propsCopy.input = {};
|
|
314
|
+
if (propsCopy.options)
|
|
315
|
+
propsCopy.input.options = transferOptions(propsCopy.options);
|
|
316
|
+
switch (propsCopy.type) {
|
|
317
|
+
case "boolean":
|
|
318
|
+
propsCopy.valuePropName = "checked";
|
|
319
|
+
break;
|
|
320
|
+
case "object":
|
|
321
|
+
if (!Array.isArray(propsCopy.name))
|
|
322
|
+
propsCopy.name = [propsCopy.name];
|
|
323
|
+
for (const sub of propsCopy.object) {
|
|
324
|
+
if (!sub.name)
|
|
325
|
+
sub.name = propsCopy.name.concat(sub.id);
|
|
326
|
+
processProps(sub);
|
|
327
|
+
}
|
|
328
|
+
break;
|
|
329
|
+
}
|
|
330
|
+
return propsCopy;
|
|
331
|
+
}
|
|
286
332
|
function FormItem(props) {
|
|
333
|
+
var _a;
|
|
287
334
|
const [computedProps, setComputedProps] = (0, import_react7.useState)();
|
|
288
335
|
(0, import_react7.useEffect)(() => {
|
|
289
|
-
|
|
290
|
-
if (!propsCopy.title)
|
|
291
|
-
propsCopy.title = (0, import_lodash4.upperFirst)(propsCopy.id);
|
|
292
|
-
if (!propsCopy.label && props.label !== false)
|
|
293
|
-
propsCopy.label = propsCopy.title;
|
|
294
|
-
if (!propsCopy.name)
|
|
295
|
-
propsCopy.name = propsCopy.id;
|
|
296
|
-
if (!propsCopy.type)
|
|
297
|
-
propsCopy.type = "string";
|
|
298
|
-
if (!propsCopy.rules)
|
|
299
|
-
propsCopy.rules = [];
|
|
300
|
-
if (propsCopy.required) {
|
|
301
|
-
if (propsCopy.type.endsWith("[]"))
|
|
302
|
-
propsCopy.rules.push({
|
|
303
|
-
required: true,
|
|
304
|
-
validator: async (_, values) => {
|
|
305
|
-
if (!values || values.length < 1)
|
|
306
|
-
return Promise.reject(Error(`${propsCopy.label || propsCopy.title} is required`));
|
|
307
|
-
}
|
|
308
|
-
});
|
|
309
|
-
else
|
|
310
|
-
propsCopy.rules.push({
|
|
311
|
-
required: true,
|
|
312
|
-
message: `${propsCopy.label || propsCopy.title} is required`
|
|
313
|
-
});
|
|
314
|
-
}
|
|
315
|
-
if (!propsCopy.input)
|
|
316
|
-
propsCopy.input = {};
|
|
317
|
-
if (propsCopy.options)
|
|
318
|
-
propsCopy.input.options = transferOptions(propsCopy.options);
|
|
319
|
-
switch (propsCopy.type) {
|
|
320
|
-
case "boolean":
|
|
321
|
-
propsCopy.valuePropName = "checked";
|
|
322
|
-
break;
|
|
323
|
-
}
|
|
324
|
-
setComputedProps(propsCopy);
|
|
336
|
+
setComputedProps(processProps(__spreadValues({}, props)));
|
|
325
337
|
}, [props]);
|
|
326
338
|
if (!computedProps)
|
|
327
339
|
return null;
|
|
@@ -343,13 +355,13 @@ function FormItem(props) {
|
|
|
343
355
|
name: computedProps.name,
|
|
344
356
|
rules: computedProps.rules
|
|
345
357
|
}, (fields, { add, remove }, { errors }) => {
|
|
346
|
-
var
|
|
358
|
+
var _a2;
|
|
347
359
|
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
|
|
348
360
|
className: "ant-form-item-label"
|
|
349
361
|
}, /* @__PURE__ */ import_react.default.createElement("label", {
|
|
350
362
|
className: computedProps.rules.find((r) => r.required) && "ant-form-item-required"
|
|
351
363
|
}, computedProps.label)), fields.map((field) => {
|
|
352
|
-
var
|
|
364
|
+
var _a3;
|
|
353
365
|
return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, {
|
|
354
366
|
key: field.key
|
|
355
367
|
}, /* @__PURE__ */ import_react.default.createElement(import_antd4.Row, {
|
|
@@ -361,14 +373,14 @@ function FormItem(props) {
|
|
|
361
373
|
noStyle: true
|
|
362
374
|
}), /* @__PURE__ */ import_react.default.createElement(import_antd4.Input, __spreadValues({}, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd4.Col, {
|
|
363
375
|
span: 1
|
|
364
|
-
}, !((
|
|
376
|
+
}, !((_a3 = computedProps.input) == null ? void 0 : _a3.disabled) && (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(import_antd4.Button, {
|
|
365
377
|
danger: true,
|
|
366
378
|
type: "link",
|
|
367
379
|
style: { float: "right" },
|
|
368
380
|
icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.MinusCircleOutlined, null),
|
|
369
381
|
onClick: () => remove(field.name)
|
|
370
382
|
}))));
|
|
371
|
-
}), /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, null, !((
|
|
383
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, null, !((_a2 = computedProps.input) == null ? void 0 : _a2.disabled) && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ import_react.default.createElement(import_antd4.Button, {
|
|
372
384
|
type: "dashed",
|
|
373
385
|
block: true,
|
|
374
386
|
onClick: () => add(),
|
|
@@ -390,13 +402,13 @@ function FormItem(props) {
|
|
|
390
402
|
name: computedProps.name,
|
|
391
403
|
rules: computedProps.rules
|
|
392
404
|
}, (fields, { add, remove }, { errors }) => {
|
|
393
|
-
var
|
|
405
|
+
var _a2, _b;
|
|
394
406
|
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
|
|
395
407
|
className: "ant-form-item-label"
|
|
396
408
|
}, /* @__PURE__ */ import_react.default.createElement("label", {
|
|
397
|
-
className: ((
|
|
409
|
+
className: ((_a2 = computedProps.rules) == null ? void 0 : _a2.find((r) => r.required)) && "ant-form-item-required"
|
|
398
410
|
}, computedProps.label)), fields.map((field) => {
|
|
399
|
-
var
|
|
411
|
+
var _a3;
|
|
400
412
|
return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, {
|
|
401
413
|
key: field.key
|
|
402
414
|
}, /* @__PURE__ */ import_react.default.createElement(import_antd4.Row, {
|
|
@@ -410,7 +422,7 @@ function FormItem(props) {
|
|
|
410
422
|
style: { width: "100%" }
|
|
411
423
|
}, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd4.Col, {
|
|
412
424
|
span: 1
|
|
413
|
-
}, !((
|
|
425
|
+
}, !((_a3 = computedProps.input) == null ? void 0 : _a3.disabled) && (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(import_antd4.Button, {
|
|
414
426
|
danger: true,
|
|
415
427
|
type: "link",
|
|
416
428
|
style: { float: "right" },
|
|
@@ -432,6 +444,43 @@ function FormItem(props) {
|
|
|
432
444
|
return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(DatePicker, __spreadValues({}, computedProps.input)));
|
|
433
445
|
case "time":
|
|
434
446
|
return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(TimePicker, __spreadValues({}, computedProps.input)));
|
|
447
|
+
case "object":
|
|
448
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
|
|
449
|
+
className: "ant-form-item-label"
|
|
450
|
+
}, /* @__PURE__ */ import_react.default.createElement("label", {
|
|
451
|
+
className: ((_a = computedProps.rules) == null ? void 0 : _a.find((r) => r.required)) && "ant-form-item-required"
|
|
452
|
+
}, computedProps.label)), computedProps.object.map((o) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadValues({
|
|
453
|
+
key: o.id
|
|
454
|
+
}, o))));
|
|
455
|
+
case "object[]":
|
|
456
|
+
return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.List, {
|
|
457
|
+
name: computedProps.name,
|
|
458
|
+
rules: computedProps.rules
|
|
459
|
+
}, (fields, { add, remove }, { errors }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, {
|
|
460
|
+
key: field.key,
|
|
461
|
+
style: { marginBottom: 0 }
|
|
462
|
+
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
463
|
+
className: "ant-form-item-label"
|
|
464
|
+
}, /* @__PURE__ */ import_react.default.createElement("label", null, computedProps.label, " ", field.name + 1, !computedProps.disabled && (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(import_antd4.Button, {
|
|
465
|
+
danger: true,
|
|
466
|
+
type: "link",
|
|
467
|
+
icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.MinusCircleOutlined, null),
|
|
468
|
+
onClick: () => remove(field.name)
|
|
469
|
+
}))), /* @__PURE__ */ import_react.default.createElement(import_antd4.Row, {
|
|
470
|
+
gutter: 24
|
|
471
|
+
}, computedProps.object.map((o) => /* @__PURE__ */ import_react.default.createElement(import_antd4.Col, {
|
|
472
|
+
key: o.id,
|
|
473
|
+
span: o.col || 6
|
|
474
|
+
}, /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadProps(__spreadValues({}, o), {
|
|
475
|
+
name: [field.name, o.id]
|
|
476
|
+
}))))))), /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.Item, null, !computedProps.disabled && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ import_react.default.createElement(import_antd4.Button, {
|
|
477
|
+
type: "dashed",
|
|
478
|
+
block: true,
|
|
479
|
+
onClick: () => add(),
|
|
480
|
+
icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.PlusOutlined, null)
|
|
481
|
+
}, computedProps.label), /* @__PURE__ */ import_react.default.createElement(import_antd4.Form.ErrorList, {
|
|
482
|
+
errors
|
|
483
|
+
}))));
|
|
435
484
|
default:
|
|
436
485
|
return null;
|
|
437
486
|
}
|
|
@@ -454,7 +503,7 @@ function Form(props) {
|
|
|
454
503
|
if (propsCopy.submit && ((_a3 = propsCopy.submit.to) == null ? void 0 : _a3.action)) {
|
|
455
504
|
await props.onFinish(values, async (values2) => (0, import_react8.faas)(propsCopy.submit.to.action, propsCopy.submit.to.params ? __spreadValues(__spreadValues({}, values2), propsCopy.submit.to.params) : values2));
|
|
456
505
|
} else
|
|
457
|
-
await
|
|
506
|
+
await props.onFinish(values);
|
|
458
507
|
} catch (error) {
|
|
459
508
|
console.error(error);
|
|
460
509
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -255,45 +255,57 @@ var TimePicker = forwardRef((props, ref) => {
|
|
|
255
255
|
TimePicker.displayName = "TimePicker";
|
|
256
256
|
|
|
257
257
|
// src/FormItem.tsx
|
|
258
|
+
function processProps(propsCopy) {
|
|
259
|
+
if (!propsCopy.title)
|
|
260
|
+
propsCopy.title = upperFirst3(propsCopy.id);
|
|
261
|
+
if (!propsCopy.label && propsCopy.label !== false)
|
|
262
|
+
propsCopy.label = propsCopy.title;
|
|
263
|
+
if (!propsCopy.name)
|
|
264
|
+
propsCopy.name = propsCopy.id;
|
|
265
|
+
if (!propsCopy.type)
|
|
266
|
+
propsCopy.type = "string";
|
|
267
|
+
if (!propsCopy.rules)
|
|
268
|
+
propsCopy.rules = [];
|
|
269
|
+
if (propsCopy.required) {
|
|
270
|
+
if (propsCopy.type.endsWith("[]"))
|
|
271
|
+
propsCopy.rules.push({
|
|
272
|
+
required: true,
|
|
273
|
+
validator: async (_, values) => {
|
|
274
|
+
if (!values || values.length < 1)
|
|
275
|
+
return Promise.reject(Error(`${propsCopy.label || propsCopy.title} is required`));
|
|
276
|
+
}
|
|
277
|
+
});
|
|
278
|
+
else
|
|
279
|
+
propsCopy.rules.push({
|
|
280
|
+
required: true,
|
|
281
|
+
message: `${propsCopy.label || propsCopy.title} is required`
|
|
282
|
+
});
|
|
283
|
+
}
|
|
284
|
+
if (!propsCopy.input)
|
|
285
|
+
propsCopy.input = {};
|
|
286
|
+
if (propsCopy.options)
|
|
287
|
+
propsCopy.input.options = transferOptions(propsCopy.options);
|
|
288
|
+
switch (propsCopy.type) {
|
|
289
|
+
case "boolean":
|
|
290
|
+
propsCopy.valuePropName = "checked";
|
|
291
|
+
break;
|
|
292
|
+
case "object":
|
|
293
|
+
if (!Array.isArray(propsCopy.name))
|
|
294
|
+
propsCopy.name = [propsCopy.name];
|
|
295
|
+
for (const sub of propsCopy.object) {
|
|
296
|
+
if (!sub.name)
|
|
297
|
+
sub.name = propsCopy.name.concat(sub.id);
|
|
298
|
+
processProps(sub);
|
|
299
|
+
}
|
|
300
|
+
break;
|
|
301
|
+
}
|
|
302
|
+
return propsCopy;
|
|
303
|
+
}
|
|
258
304
|
function FormItem(props) {
|
|
305
|
+
var _a;
|
|
259
306
|
const [computedProps, setComputedProps] = useState3();
|
|
260
307
|
useEffect3(() => {
|
|
261
|
-
|
|
262
|
-
if (!propsCopy.title)
|
|
263
|
-
propsCopy.title = upperFirst3(propsCopy.id);
|
|
264
|
-
if (!propsCopy.label && props.label !== false)
|
|
265
|
-
propsCopy.label = propsCopy.title;
|
|
266
|
-
if (!propsCopy.name)
|
|
267
|
-
propsCopy.name = propsCopy.id;
|
|
268
|
-
if (!propsCopy.type)
|
|
269
|
-
propsCopy.type = "string";
|
|
270
|
-
if (!propsCopy.rules)
|
|
271
|
-
propsCopy.rules = [];
|
|
272
|
-
if (propsCopy.required) {
|
|
273
|
-
if (propsCopy.type.endsWith("[]"))
|
|
274
|
-
propsCopy.rules.push({
|
|
275
|
-
required: true,
|
|
276
|
-
validator: async (_, values) => {
|
|
277
|
-
if (!values || values.length < 1)
|
|
278
|
-
return Promise.reject(Error(`${propsCopy.label || propsCopy.title} is required`));
|
|
279
|
-
}
|
|
280
|
-
});
|
|
281
|
-
else
|
|
282
|
-
propsCopy.rules.push({
|
|
283
|
-
required: true,
|
|
284
|
-
message: `${propsCopy.label || propsCopy.title} is required`
|
|
285
|
-
});
|
|
286
|
-
}
|
|
287
|
-
if (!propsCopy.input)
|
|
288
|
-
propsCopy.input = {};
|
|
289
|
-
if (propsCopy.options)
|
|
290
|
-
propsCopy.input.options = transferOptions(propsCopy.options);
|
|
291
|
-
switch (propsCopy.type) {
|
|
292
|
-
case "boolean":
|
|
293
|
-
propsCopy.valuePropName = "checked";
|
|
294
|
-
break;
|
|
295
|
-
}
|
|
296
|
-
setComputedProps(propsCopy);
|
|
308
|
+
setComputedProps(processProps(__spreadValues({}, props)));
|
|
297
309
|
}, [props]);
|
|
298
310
|
if (!computedProps)
|
|
299
311
|
return null;
|
|
@@ -315,13 +327,13 @@ function FormItem(props) {
|
|
|
315
327
|
name: computedProps.name,
|
|
316
328
|
rules: computedProps.rules
|
|
317
329
|
}, (fields, { add, remove }, { errors }) => {
|
|
318
|
-
var
|
|
330
|
+
var _a2;
|
|
319
331
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.label && /* @__PURE__ */ React.createElement("div", {
|
|
320
332
|
className: "ant-form-item-label"
|
|
321
333
|
}, /* @__PURE__ */ React.createElement("label", {
|
|
322
334
|
className: computedProps.rules.find((r) => r.required) && "ant-form-item-required"
|
|
323
335
|
}, computedProps.label)), fields.map((field) => {
|
|
324
|
-
var
|
|
336
|
+
var _a3;
|
|
325
337
|
return /* @__PURE__ */ React.createElement(AntdForm.Item, {
|
|
326
338
|
key: field.key
|
|
327
339
|
}, /* @__PURE__ */ React.createElement(Row, {
|
|
@@ -333,14 +345,14 @@ function FormItem(props) {
|
|
|
333
345
|
noStyle: true
|
|
334
346
|
}), /* @__PURE__ */ React.createElement(Input, __spreadValues({}, computedProps.input)))), /* @__PURE__ */ React.createElement(Col, {
|
|
335
347
|
span: 1
|
|
336
|
-
}, !((
|
|
348
|
+
}, !((_a3 = computedProps.input) == null ? void 0 : _a3.disabled) && (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ React.createElement(Button, {
|
|
337
349
|
danger: true,
|
|
338
350
|
type: "link",
|
|
339
351
|
style: { float: "right" },
|
|
340
352
|
icon: /* @__PURE__ */ React.createElement(MinusCircleOutlined, null),
|
|
341
353
|
onClick: () => remove(field.name)
|
|
342
354
|
}))));
|
|
343
|
-
}), /* @__PURE__ */ React.createElement(AntdForm.Item, null, !((
|
|
355
|
+
}), /* @__PURE__ */ React.createElement(AntdForm.Item, null, !((_a2 = computedProps.input) == null ? void 0 : _a2.disabled) && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ React.createElement(Button, {
|
|
344
356
|
type: "dashed",
|
|
345
357
|
block: true,
|
|
346
358
|
onClick: () => add(),
|
|
@@ -362,13 +374,13 @@ function FormItem(props) {
|
|
|
362
374
|
name: computedProps.name,
|
|
363
375
|
rules: computedProps.rules
|
|
364
376
|
}, (fields, { add, remove }, { errors }) => {
|
|
365
|
-
var
|
|
377
|
+
var _a2, _b;
|
|
366
378
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.label && /* @__PURE__ */ React.createElement("div", {
|
|
367
379
|
className: "ant-form-item-label"
|
|
368
380
|
}, /* @__PURE__ */ React.createElement("label", {
|
|
369
|
-
className: ((
|
|
381
|
+
className: ((_a2 = computedProps.rules) == null ? void 0 : _a2.find((r) => r.required)) && "ant-form-item-required"
|
|
370
382
|
}, computedProps.label)), fields.map((field) => {
|
|
371
|
-
var
|
|
383
|
+
var _a3;
|
|
372
384
|
return /* @__PURE__ */ React.createElement(AntdForm.Item, {
|
|
373
385
|
key: field.key
|
|
374
386
|
}, /* @__PURE__ */ React.createElement(Row, {
|
|
@@ -382,7 +394,7 @@ function FormItem(props) {
|
|
|
382
394
|
style: { width: "100%" }
|
|
383
395
|
}, computedProps.input)))), /* @__PURE__ */ React.createElement(Col, {
|
|
384
396
|
span: 1
|
|
385
|
-
}, !((
|
|
397
|
+
}, !((_a3 = computedProps.input) == null ? void 0 : _a3.disabled) && (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ React.createElement(Button, {
|
|
386
398
|
danger: true,
|
|
387
399
|
type: "link",
|
|
388
400
|
style: { float: "right" },
|
|
@@ -404,6 +416,43 @@ function FormItem(props) {
|
|
|
404
416
|
return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), /* @__PURE__ */ React.createElement(DatePicker, __spreadValues({}, computedProps.input)));
|
|
405
417
|
case "time":
|
|
406
418
|
return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), /* @__PURE__ */ React.createElement(TimePicker, __spreadValues({}, computedProps.input)));
|
|
419
|
+
case "object":
|
|
420
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.label && /* @__PURE__ */ React.createElement("div", {
|
|
421
|
+
className: "ant-form-item-label"
|
|
422
|
+
}, /* @__PURE__ */ React.createElement("label", {
|
|
423
|
+
className: ((_a = computedProps.rules) == null ? void 0 : _a.find((r) => r.required)) && "ant-form-item-required"
|
|
424
|
+
}, computedProps.label)), computedProps.object.map((o) => /* @__PURE__ */ React.createElement(FormItem, __spreadValues({
|
|
425
|
+
key: o.id
|
|
426
|
+
}, o))));
|
|
427
|
+
case "object[]":
|
|
428
|
+
return /* @__PURE__ */ React.createElement(AntdForm.List, {
|
|
429
|
+
name: computedProps.name,
|
|
430
|
+
rules: computedProps.rules
|
|
431
|
+
}, (fields, { add, remove }, { errors }) => /* @__PURE__ */ React.createElement(React.Fragment, null, fields.map((field) => /* @__PURE__ */ React.createElement(AntdForm.Item, {
|
|
432
|
+
key: field.key,
|
|
433
|
+
style: { marginBottom: 0 }
|
|
434
|
+
}, /* @__PURE__ */ React.createElement("div", {
|
|
435
|
+
className: "ant-form-item-label"
|
|
436
|
+
}, /* @__PURE__ */ React.createElement("label", null, computedProps.label, " ", field.name + 1, !computedProps.disabled && (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ React.createElement(Button, {
|
|
437
|
+
danger: true,
|
|
438
|
+
type: "link",
|
|
439
|
+
icon: /* @__PURE__ */ React.createElement(MinusCircleOutlined, null),
|
|
440
|
+
onClick: () => remove(field.name)
|
|
441
|
+
}))), /* @__PURE__ */ React.createElement(Row, {
|
|
442
|
+
gutter: 24
|
|
443
|
+
}, computedProps.object.map((o) => /* @__PURE__ */ React.createElement(Col, {
|
|
444
|
+
key: o.id,
|
|
445
|
+
span: o.col || 6
|
|
446
|
+
}, /* @__PURE__ */ React.createElement(FormItem, __spreadProps(__spreadValues({}, o), {
|
|
447
|
+
name: [field.name, o.id]
|
|
448
|
+
}))))))), /* @__PURE__ */ React.createElement(AntdForm.Item, null, !computedProps.disabled && (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ React.createElement(Button, {
|
|
449
|
+
type: "dashed",
|
|
450
|
+
block: true,
|
|
451
|
+
onClick: () => add(),
|
|
452
|
+
icon: /* @__PURE__ */ React.createElement(PlusOutlined, null)
|
|
453
|
+
}, computedProps.label), /* @__PURE__ */ React.createElement(AntdForm.ErrorList, {
|
|
454
|
+
errors
|
|
455
|
+
}))));
|
|
407
456
|
default:
|
|
408
457
|
return null;
|
|
409
458
|
}
|
|
@@ -426,7 +475,7 @@ function Form(props) {
|
|
|
426
475
|
if (propsCopy.submit && ((_a3 = propsCopy.submit.to) == null ? void 0 : _a3.action)) {
|
|
427
476
|
await props.onFinish(values, async (values2) => faas(propsCopy.submit.to.action, propsCopy.submit.to.params ? __spreadValues(__spreadValues({}, values2), propsCopy.submit.to.params) : values2));
|
|
428
477
|
} else
|
|
429
|
-
await
|
|
478
|
+
await props.onFinish(values);
|
|
430
479
|
} catch (error) {
|
|
431
480
|
console.error(error);
|
|
432
481
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faasjs/ant-design",
|
|
3
|
-
"version": "0.0.2-beta.
|
|
3
|
+
"version": "0.0.2-beta.381",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"lodash": "*",
|
|
29
29
|
"react": "*",
|
|
30
30
|
"react-dom": "*",
|
|
31
|
-
"@faasjs/react": "^0.0.2-beta.
|
|
31
|
+
"@faasjs/react": "^0.0.2-beta.381",
|
|
32
32
|
"react-use": "*",
|
|
33
33
|
"react-router-dom": "*",
|
|
34
34
|
"dayjs": "*"
|