@faasjs/ant-design 0.0.2-beta.333 → 0.0.2-beta.337
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/dist/index.d.ts +33 -5
- package/dist/index.js +146 -48
- package/dist/index.mjs +118 -16
- package/package.json +3 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
|
+
import { DescriptionsProps, FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, FormProps as FormProps$1, TableColumnProps, TableProps as TableProps$1 } from 'antd';
|
|
1
2
|
import * as antd_lib_form_Form from 'antd/lib/form/Form';
|
|
2
|
-
import { FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, FormProps as FormProps$1 } from 'antd';
|
|
3
3
|
import { RuleObject } from 'rc-field-form/lib/interface';
|
|
4
4
|
import { ReactNode } from 'react';
|
|
5
5
|
|
|
6
6
|
declare type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean';
|
|
7
|
+
declare type FaasItemTypeValue = {
|
|
8
|
+
string: string;
|
|
9
|
+
'string[]': string[];
|
|
10
|
+
number: number;
|
|
11
|
+
'number[]': number[];
|
|
12
|
+
boolean: boolean;
|
|
13
|
+
};
|
|
7
14
|
declare type FaasItemProps = {
|
|
8
15
|
/**
|
|
9
16
|
* Support string, string[], number, number[], boolean
|
|
@@ -14,6 +21,16 @@ declare type FaasItemProps = {
|
|
|
14
21
|
title?: string;
|
|
15
22
|
};
|
|
16
23
|
|
|
24
|
+
declare type DescriptionItemProps<T = any> = FaasItemProps & {
|
|
25
|
+
children?: JSX.Element;
|
|
26
|
+
render?: (value: T, values: any) => JSX.Element | null;
|
|
27
|
+
};
|
|
28
|
+
declare type DescriptionProps<T = any> = {
|
|
29
|
+
items: DescriptionItemProps[];
|
|
30
|
+
dataSource: T;
|
|
31
|
+
} & DescriptionsProps;
|
|
32
|
+
declare function Description(props: DescriptionProps): JSX.Element;
|
|
33
|
+
|
|
17
34
|
declare type StringProps = {
|
|
18
35
|
type?: 'string';
|
|
19
36
|
input?: InputProps;
|
|
@@ -57,10 +74,21 @@ declare function FormItem<T = any>(props: FormItemProps<T>): JSX.Element;
|
|
|
57
74
|
|
|
58
75
|
declare type FormProps<T = any> = {
|
|
59
76
|
items?: FormItemProps[];
|
|
77
|
+
/** Default: { text: 'Submit' } */
|
|
78
|
+
submit?: false | {
|
|
79
|
+
/** Default: Submit */
|
|
80
|
+
text?: string;
|
|
81
|
+
};
|
|
60
82
|
} & FormProps$1<T>;
|
|
61
|
-
declare
|
|
62
|
-
|
|
63
|
-
useForm: typeof antd_lib_form_Form.useForm;
|
|
83
|
+
declare function Form<T = any>(props: FormProps<T>): JSX.Element;
|
|
84
|
+
declare namespace Form {
|
|
85
|
+
var useForm: typeof antd_lib_form_Form.useForm;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
declare type TableItemProps<T = any> = FaasItemProps & TableColumnProps<T>;
|
|
89
|
+
declare type TableProps<T = any> = TableProps$1<T> & {
|
|
90
|
+
items: TableItemProps[];
|
|
64
91
|
};
|
|
92
|
+
declare function Table(props: TableProps): JSX.Element;
|
|
65
93
|
|
|
66
|
-
export { Form, FormItem, FormItemProps, FormProps };
|
|
94
|
+
export { Description, DescriptionItemProps, DescriptionProps, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, Table, TableItemProps, TableProps };
|
package/dist/index.js
CHANGED
|
@@ -46,27 +46,78 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
|
46
46
|
// src/index.ts
|
|
47
47
|
var src_exports = {};
|
|
48
48
|
__export(src_exports, {
|
|
49
|
+
Description: () => Description,
|
|
49
50
|
Form: () => Form,
|
|
50
|
-
FormItem: () => FormItem
|
|
51
|
+
FormItem: () => FormItem,
|
|
52
|
+
Table: () => Table
|
|
51
53
|
});
|
|
52
54
|
|
|
53
55
|
// react-shim.js
|
|
54
56
|
var import_react = __toESM(require("react"));
|
|
55
57
|
|
|
56
|
-
// src/
|
|
57
|
-
var import_antd2 = require("antd");
|
|
58
|
-
|
|
59
|
-
// src/components/FormItem.tsx
|
|
60
|
-
var import_antd = require("antd");
|
|
58
|
+
// src/Description.tsx
|
|
61
59
|
var import_icons = require("@ant-design/icons");
|
|
62
|
-
var
|
|
60
|
+
var import_antd = require("antd");
|
|
63
61
|
var import_lodash = require("lodash");
|
|
64
|
-
|
|
62
|
+
var import_react2 = require("react");
|
|
63
|
+
function DescriptionItemContent(props) {
|
|
65
64
|
const [computedProps, setComputedProps] = (0, import_react2.useState)();
|
|
66
65
|
(0, import_react2.useEffect)(() => {
|
|
66
|
+
const propsCopy = __spreadValues({}, props);
|
|
67
|
+
if (!propsCopy.item.title)
|
|
68
|
+
propsCopy.item.title = (0, import_lodash.upperFirst)(propsCopy.item.id);
|
|
69
|
+
if (!propsCopy.item.type)
|
|
70
|
+
propsCopy.item.type = "string";
|
|
71
|
+
setComputedProps(propsCopy);
|
|
72
|
+
}, [props]);
|
|
73
|
+
if (!computedProps || typeof computedProps.value === "undefined" || computedProps.value === null)
|
|
74
|
+
return null;
|
|
75
|
+
if (computedProps.item.children)
|
|
76
|
+
return (0, import_react2.cloneElement)(computedProps.item.children, { value: computedProps.value });
|
|
77
|
+
if (computedProps.item.render)
|
|
78
|
+
return computedProps.item.render(computedProps.value, computedProps.values);
|
|
79
|
+
switch (computedProps.item.type) {
|
|
80
|
+
case "string[]":
|
|
81
|
+
return computedProps.value.join(", ");
|
|
82
|
+
case "number":
|
|
83
|
+
return computedProps.value;
|
|
84
|
+
case "number[]":
|
|
85
|
+
return computedProps.value.join(", ");
|
|
86
|
+
case "boolean":
|
|
87
|
+
return computedProps.value ? /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, {
|
|
88
|
+
style: { marginTop: "4px" }
|
|
89
|
+
}) : /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, {
|
|
90
|
+
style: { marginTop: "4px" }
|
|
91
|
+
});
|
|
92
|
+
default:
|
|
93
|
+
return computedProps.value;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
function Description(props) {
|
|
97
|
+
return /* @__PURE__ */ import_react.default.createElement(import_antd.Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_antd.Descriptions.Item, {
|
|
98
|
+
key: item.id,
|
|
99
|
+
label: item.title || (0, import_lodash.upperFirst)(item.id)
|
|
100
|
+
}, /* @__PURE__ */ import_react.default.createElement(DescriptionItemContent, {
|
|
101
|
+
item,
|
|
102
|
+
value: props.dataSource[item.id],
|
|
103
|
+
values: props.dataSource
|
|
104
|
+
}))));
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// src/Form.tsx
|
|
108
|
+
var import_antd3 = require("antd");
|
|
109
|
+
|
|
110
|
+
// src/FormItem.tsx
|
|
111
|
+
var import_antd2 = require("antd");
|
|
112
|
+
var import_icons2 = require("@ant-design/icons");
|
|
113
|
+
var import_react3 = require("react");
|
|
114
|
+
var import_lodash2 = require("lodash");
|
|
115
|
+
function FormItem(props) {
|
|
116
|
+
const [computedProps, setComputedProps] = (0, import_react3.useState)();
|
|
117
|
+
(0, import_react3.useEffect)(() => {
|
|
67
118
|
const propsCopy = __spreadValues({}, props);
|
|
68
119
|
if (!propsCopy.title)
|
|
69
|
-
propsCopy.title = (0,
|
|
120
|
+
propsCopy.title = (0, import_lodash2.upperFirst)(propsCopy.id);
|
|
70
121
|
if (!propsCopy.label && props.label !== false)
|
|
71
122
|
propsCopy.label = propsCopy.title;
|
|
72
123
|
if (!propsCopy.name)
|
|
@@ -100,7 +151,7 @@ function FormItem(props) {
|
|
|
100
151
|
options.push(option);
|
|
101
152
|
else
|
|
102
153
|
options.push({
|
|
103
|
-
label: (0,
|
|
154
|
+
label: (0, import_lodash2.upperFirst)(option.toString()),
|
|
104
155
|
value: option
|
|
105
156
|
});
|
|
106
157
|
}
|
|
@@ -116,56 +167,56 @@ function FormItem(props) {
|
|
|
116
167
|
if (!computedProps)
|
|
117
168
|
return null;
|
|
118
169
|
if (computedProps.children)
|
|
119
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
170
|
+
return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), computedProps.children);
|
|
120
171
|
switch (computedProps.type) {
|
|
121
172
|
case "string":
|
|
122
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
173
|
+
return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), computedProps.options ? /* @__PURE__ */ import_react.default.createElement(import_antd2.Select, __spreadValues({}, computedProps.input)) : /* @__PURE__ */ import_react.default.createElement(import_antd2.Input, __spreadValues({}, computedProps.input)));
|
|
123
174
|
case "string[]":
|
|
124
175
|
if (computedProps.options)
|
|
125
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
176
|
+
return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd2.Select, __spreadValues({
|
|
126
177
|
mode: "multiple"
|
|
127
178
|
}, computedProps.input)));
|
|
128
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
179
|
+
return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.List, {
|
|
129
180
|
name: computedProps.name,
|
|
130
181
|
rules: computedProps.rules
|
|
131
182
|
}, (fields, { add, remove }, { errors }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
|
|
132
183
|
className: "ant-form-item-label"
|
|
133
184
|
}, /* @__PURE__ */ import_react.default.createElement("label", {
|
|
134
185
|
className: computedProps.rules.find((r) => r.required) && "ant-form-item-required"
|
|
135
|
-
}, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(
|
|
186
|
+
}, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, {
|
|
136
187
|
key: field.key
|
|
137
|
-
}, /* @__PURE__ */ import_react.default.createElement(
|
|
188
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_antd2.Row, {
|
|
138
189
|
gutter: 24
|
|
139
|
-
}, /* @__PURE__ */ import_react.default.createElement(
|
|
190
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_antd2.Col, {
|
|
140
191
|
span: 23
|
|
141
|
-
}, /* @__PURE__ */ import_react.default.createElement(
|
|
192
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadProps(__spreadValues({}, field), {
|
|
142
193
|
noStyle: true
|
|
143
|
-
}), /* @__PURE__ */ import_react.default.createElement(
|
|
194
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_antd2.Input, __spreadValues({}, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd2.Col, {
|
|
144
195
|
span: 1
|
|
145
|
-
}, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(
|
|
196
|
+
}, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(import_antd2.Button, {
|
|
146
197
|
danger: true,
|
|
147
198
|
type: "link",
|
|
148
199
|
style: { float: "right" },
|
|
149
|
-
icon: /* @__PURE__ */ import_react.default.createElement(
|
|
200
|
+
icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.MinusCircleOutlined, null),
|
|
150
201
|
onClick: () => remove(field.name)
|
|
151
|
-
}))))), /* @__PURE__ */ import_react.default.createElement(
|
|
202
|
+
}))))), /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, null, (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ import_react.default.createElement(import_antd2.Button, {
|
|
152
203
|
type: "dashed",
|
|
153
204
|
block: true,
|
|
154
205
|
onClick: () => add(),
|
|
155
|
-
icon: /* @__PURE__ */ import_react.default.createElement(
|
|
156
|
-
}), /* @__PURE__ */ import_react.default.createElement(
|
|
206
|
+
icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.PlusOutlined, null)
|
|
207
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.ErrorList, {
|
|
157
208
|
errors
|
|
158
209
|
}))));
|
|
159
210
|
case "number":
|
|
160
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
211
|
+
return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), computedProps.options ? /* @__PURE__ */ import_react.default.createElement(import_antd2.Select, __spreadValues({}, computedProps.input)) : /* @__PURE__ */ import_react.default.createElement(import_antd2.InputNumber, __spreadValues({
|
|
161
212
|
style: { width: "100%" }
|
|
162
213
|
}, computedProps.input)));
|
|
163
214
|
case "number[]":
|
|
164
215
|
if (computedProps.options)
|
|
165
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
216
|
+
return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd2.Select, __spreadValues({
|
|
166
217
|
mode: "multiple"
|
|
167
218
|
}, computedProps.input)));
|
|
168
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
219
|
+
return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.List, {
|
|
169
220
|
name: computedProps.name,
|
|
170
221
|
rules: computedProps.rules
|
|
171
222
|
}, (fields, { add, remove }, { errors }) => {
|
|
@@ -174,54 +225,101 @@ function FormItem(props) {
|
|
|
174
225
|
className: "ant-form-item-label"
|
|
175
226
|
}, /* @__PURE__ */ import_react.default.createElement("label", {
|
|
176
227
|
className: ((_a = computedProps.rules) == null ? void 0 : _a.find((r) => r.required)) && "ant-form-item-required"
|
|
177
|
-
}, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(
|
|
228
|
+
}, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, {
|
|
178
229
|
key: field.key
|
|
179
|
-
}, /* @__PURE__ */ import_react.default.createElement(
|
|
230
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_antd2.Row, {
|
|
180
231
|
gutter: 24
|
|
181
|
-
}, /* @__PURE__ */ import_react.default.createElement(
|
|
232
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_antd2.Col, {
|
|
182
233
|
span: 23
|
|
183
|
-
}, /* @__PURE__ */ import_react.default.createElement(
|
|
234
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadProps(__spreadValues({}, field), {
|
|
184
235
|
noStyle: true
|
|
185
|
-
}), /* @__PURE__ */ import_react.default.createElement(
|
|
236
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_antd2.InputNumber, __spreadValues({
|
|
186
237
|
style: { width: "100%" }
|
|
187
|
-
}, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(
|
|
238
|
+
}, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd2.Col, {
|
|
188
239
|
span: 1
|
|
189
|
-
}, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(
|
|
240
|
+
}, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(import_antd2.Button, {
|
|
190
241
|
danger: true,
|
|
191
242
|
type: "link",
|
|
192
243
|
style: { float: "right" },
|
|
193
|
-
icon: /* @__PURE__ */ import_react.default.createElement(
|
|
244
|
+
icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.MinusCircleOutlined, null),
|
|
194
245
|
onClick: () => remove(field.name)
|
|
195
|
-
}))))), /* @__PURE__ */ import_react.default.createElement(
|
|
246
|
+
}))))), /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, null, (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ import_react.default.createElement(import_antd2.Button, {
|
|
196
247
|
type: "dashed",
|
|
197
248
|
block: true,
|
|
198
249
|
onClick: () => add(),
|
|
199
|
-
icon: /* @__PURE__ */ import_react.default.createElement(
|
|
200
|
-
}), /* @__PURE__ */ import_react.default.createElement(
|
|
250
|
+
icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.PlusOutlined, null)
|
|
251
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.ErrorList, {
|
|
201
252
|
errors
|
|
202
253
|
})));
|
|
203
254
|
});
|
|
204
255
|
case "boolean":
|
|
205
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
256
|
+
return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd2.Switch, __spreadValues({}, computedProps.input)));
|
|
206
257
|
default:
|
|
207
258
|
return null;
|
|
208
259
|
}
|
|
209
260
|
}
|
|
210
261
|
|
|
211
|
-
// src/
|
|
212
|
-
|
|
213
|
-
var _a;
|
|
214
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
262
|
+
// src/Form.tsx
|
|
263
|
+
function Form(props) {
|
|
264
|
+
var _a, _b;
|
|
265
|
+
return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form, __spreadValues({}, props), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadValues({
|
|
215
266
|
key: item.id
|
|
216
|
-
}, item))), props.children, /* @__PURE__ */ import_react.default.createElement(
|
|
267
|
+
}, item))), props.children, props.submit !== false && /* @__PURE__ */ import_react.default.createElement(import_antd3.Button, {
|
|
217
268
|
htmlType: "submit",
|
|
218
269
|
type: "primary"
|
|
219
|
-
}, "Submit"));
|
|
220
|
-
}
|
|
221
|
-
Form.useForm =
|
|
270
|
+
}, ((_b = props.submit) == null ? void 0 : _b.text) || "Submit"));
|
|
271
|
+
}
|
|
272
|
+
Form.useForm = import_antd3.Form.useForm;
|
|
273
|
+
|
|
274
|
+
// src/Table.tsx
|
|
275
|
+
var import_react4 = require("react");
|
|
276
|
+
var import_antd4 = require("antd");
|
|
277
|
+
var import_icons3 = require("@ant-design/icons");
|
|
278
|
+
var import_lodash3 = require("lodash");
|
|
279
|
+
function Table(props) {
|
|
280
|
+
const [columns, setColumns] = (0, import_react4.useState)();
|
|
281
|
+
(0, import_react4.useEffect)(() => {
|
|
282
|
+
for (const item of props.items) {
|
|
283
|
+
if (!item.key)
|
|
284
|
+
item.key = item.id;
|
|
285
|
+
if (!item.dataIndex)
|
|
286
|
+
item.dataIndex = item.id;
|
|
287
|
+
if (!item.title)
|
|
288
|
+
item.title = (0, import_lodash3.upperFirst)(item.id);
|
|
289
|
+
if (!item.type)
|
|
290
|
+
item.type = "string";
|
|
291
|
+
if (item.render)
|
|
292
|
+
continue;
|
|
293
|
+
switch (item.type) {
|
|
294
|
+
case "string[]":
|
|
295
|
+
item.render = (value) => value.join(", ");
|
|
296
|
+
break;
|
|
297
|
+
case "number[]":
|
|
298
|
+
item.render = (value) => value.join(", ");
|
|
299
|
+
break;
|
|
300
|
+
case "boolean":
|
|
301
|
+
item.render = (value) => value ? /* @__PURE__ */ import_react.default.createElement(import_icons3.CheckOutlined, {
|
|
302
|
+
style: { marginTop: "4px" }
|
|
303
|
+
}) : /* @__PURE__ */ import_react.default.createElement(import_icons3.CloseOutlined, {
|
|
304
|
+
style: { marginTop: "4px" }
|
|
305
|
+
});
|
|
306
|
+
break;
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
setColumns(props.items);
|
|
310
|
+
}, [props.items]);
|
|
311
|
+
if (!columns)
|
|
312
|
+
return null;
|
|
313
|
+
return /* @__PURE__ */ import_react.default.createElement(import_antd4.Table, __spreadProps(__spreadValues({}, props), {
|
|
314
|
+
rowKey: props.rowKey || "id",
|
|
315
|
+
columns
|
|
316
|
+
}));
|
|
317
|
+
}
|
|
222
318
|
module.exports = __toCommonJS(src_exports);
|
|
223
319
|
// Annotate the CommonJS export names for ESM import in node:
|
|
224
320
|
0 && (module.exports = {
|
|
321
|
+
Description,
|
|
225
322
|
Form,
|
|
226
|
-
FormItem
|
|
323
|
+
FormItem,
|
|
324
|
+
Table
|
|
227
325
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -21,13 +21,66 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
|
21
21
|
// react-shim.js
|
|
22
22
|
import React from "react";
|
|
23
23
|
|
|
24
|
-
// src/
|
|
24
|
+
// src/Description.tsx
|
|
25
|
+
import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
|
|
26
|
+
import { Descriptions } from "antd";
|
|
27
|
+
import { upperFirst } from "lodash";
|
|
28
|
+
import {
|
|
29
|
+
cloneElement,
|
|
30
|
+
useEffect,
|
|
31
|
+
useState
|
|
32
|
+
} from "react";
|
|
33
|
+
function DescriptionItemContent(props) {
|
|
34
|
+
const [computedProps, setComputedProps] = useState();
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
const propsCopy = __spreadValues({}, props);
|
|
37
|
+
if (!propsCopy.item.title)
|
|
38
|
+
propsCopy.item.title = upperFirst(propsCopy.item.id);
|
|
39
|
+
if (!propsCopy.item.type)
|
|
40
|
+
propsCopy.item.type = "string";
|
|
41
|
+
setComputedProps(propsCopy);
|
|
42
|
+
}, [props]);
|
|
43
|
+
if (!computedProps || typeof computedProps.value === "undefined" || computedProps.value === null)
|
|
44
|
+
return null;
|
|
45
|
+
if (computedProps.item.children)
|
|
46
|
+
return cloneElement(computedProps.item.children, { value: computedProps.value });
|
|
47
|
+
if (computedProps.item.render)
|
|
48
|
+
return computedProps.item.render(computedProps.value, computedProps.values);
|
|
49
|
+
switch (computedProps.item.type) {
|
|
50
|
+
case "string[]":
|
|
51
|
+
return computedProps.value.join(", ");
|
|
52
|
+
case "number":
|
|
53
|
+
return computedProps.value;
|
|
54
|
+
case "number[]":
|
|
55
|
+
return computedProps.value.join(", ");
|
|
56
|
+
case "boolean":
|
|
57
|
+
return computedProps.value ? /* @__PURE__ */ React.createElement(CheckOutlined, {
|
|
58
|
+
style: { marginTop: "4px" }
|
|
59
|
+
}) : /* @__PURE__ */ React.createElement(CloseOutlined, {
|
|
60
|
+
style: { marginTop: "4px" }
|
|
61
|
+
});
|
|
62
|
+
default:
|
|
63
|
+
return computedProps.value;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
function Description(props) {
|
|
67
|
+
return /* @__PURE__ */ React.createElement(Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ React.createElement(Descriptions.Item, {
|
|
68
|
+
key: item.id,
|
|
69
|
+
label: item.title || upperFirst(item.id)
|
|
70
|
+
}, /* @__PURE__ */ React.createElement(DescriptionItemContent, {
|
|
71
|
+
item,
|
|
72
|
+
value: props.dataSource[item.id],
|
|
73
|
+
values: props.dataSource
|
|
74
|
+
}))));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// src/Form.tsx
|
|
25
78
|
import {
|
|
26
79
|
Button as Button2,
|
|
27
80
|
Form as AntdForm2
|
|
28
81
|
} from "antd";
|
|
29
82
|
|
|
30
|
-
// src/
|
|
83
|
+
// src/FormItem.tsx
|
|
31
84
|
import {
|
|
32
85
|
Button,
|
|
33
86
|
Row,
|
|
@@ -40,16 +93,16 @@ import {
|
|
|
40
93
|
} from "antd";
|
|
41
94
|
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
|
|
42
95
|
import {
|
|
43
|
-
useEffect,
|
|
44
|
-
useState
|
|
96
|
+
useEffect as useEffect2,
|
|
97
|
+
useState as useState2
|
|
45
98
|
} from "react";
|
|
46
|
-
import { upperFirst } from "lodash";
|
|
99
|
+
import { upperFirst as upperFirst2 } from "lodash";
|
|
47
100
|
function FormItem(props) {
|
|
48
|
-
const [computedProps, setComputedProps] =
|
|
49
|
-
|
|
101
|
+
const [computedProps, setComputedProps] = useState2();
|
|
102
|
+
useEffect2(() => {
|
|
50
103
|
const propsCopy = __spreadValues({}, props);
|
|
51
104
|
if (!propsCopy.title)
|
|
52
|
-
propsCopy.title =
|
|
105
|
+
propsCopy.title = upperFirst2(propsCopy.id);
|
|
53
106
|
if (!propsCopy.label && props.label !== false)
|
|
54
107
|
propsCopy.label = propsCopy.title;
|
|
55
108
|
if (!propsCopy.name)
|
|
@@ -83,7 +136,7 @@ function FormItem(props) {
|
|
|
83
136
|
options.push(option);
|
|
84
137
|
else
|
|
85
138
|
options.push({
|
|
86
|
-
label:
|
|
139
|
+
label: upperFirst2(option.toString()),
|
|
87
140
|
value: option
|
|
88
141
|
});
|
|
89
142
|
}
|
|
@@ -191,18 +244,67 @@ function FormItem(props) {
|
|
|
191
244
|
}
|
|
192
245
|
}
|
|
193
246
|
|
|
194
|
-
// src/
|
|
195
|
-
|
|
196
|
-
var _a;
|
|
247
|
+
// src/Form.tsx
|
|
248
|
+
function Form(props) {
|
|
249
|
+
var _a, _b;
|
|
197
250
|
return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, props), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadValues({
|
|
198
251
|
key: item.id
|
|
199
|
-
}, item))), props.children, /* @__PURE__ */ React.createElement(Button2, {
|
|
252
|
+
}, item))), props.children, props.submit !== false && /* @__PURE__ */ React.createElement(Button2, {
|
|
200
253
|
htmlType: "submit",
|
|
201
254
|
type: "primary"
|
|
202
|
-
}, "Submit"));
|
|
203
|
-
}
|
|
255
|
+
}, ((_b = props.submit) == null ? void 0 : _b.text) || "Submit"));
|
|
256
|
+
}
|
|
204
257
|
Form.useForm = AntdForm2.useForm;
|
|
258
|
+
|
|
259
|
+
// src/Table.tsx
|
|
260
|
+
import { useState as useState3, useEffect as useEffect3 } from "react";
|
|
261
|
+
import {
|
|
262
|
+
Table as AntdTable
|
|
263
|
+
} from "antd";
|
|
264
|
+
import { CheckOutlined as CheckOutlined2, CloseOutlined as CloseOutlined2 } from "@ant-design/icons";
|
|
265
|
+
import { upperFirst as upperFirst3 } from "lodash";
|
|
266
|
+
function Table(props) {
|
|
267
|
+
const [columns, setColumns] = useState3();
|
|
268
|
+
useEffect3(() => {
|
|
269
|
+
for (const item of props.items) {
|
|
270
|
+
if (!item.key)
|
|
271
|
+
item.key = item.id;
|
|
272
|
+
if (!item.dataIndex)
|
|
273
|
+
item.dataIndex = item.id;
|
|
274
|
+
if (!item.title)
|
|
275
|
+
item.title = upperFirst3(item.id);
|
|
276
|
+
if (!item.type)
|
|
277
|
+
item.type = "string";
|
|
278
|
+
if (item.render)
|
|
279
|
+
continue;
|
|
280
|
+
switch (item.type) {
|
|
281
|
+
case "string[]":
|
|
282
|
+
item.render = (value) => value.join(", ");
|
|
283
|
+
break;
|
|
284
|
+
case "number[]":
|
|
285
|
+
item.render = (value) => value.join(", ");
|
|
286
|
+
break;
|
|
287
|
+
case "boolean":
|
|
288
|
+
item.render = (value) => value ? /* @__PURE__ */ React.createElement(CheckOutlined2, {
|
|
289
|
+
style: { marginTop: "4px" }
|
|
290
|
+
}) : /* @__PURE__ */ React.createElement(CloseOutlined2, {
|
|
291
|
+
style: { marginTop: "4px" }
|
|
292
|
+
});
|
|
293
|
+
break;
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
setColumns(props.items);
|
|
297
|
+
}, [props.items]);
|
|
298
|
+
if (!columns)
|
|
299
|
+
return null;
|
|
300
|
+
return /* @__PURE__ */ React.createElement(AntdTable, __spreadProps(__spreadValues({}, props), {
|
|
301
|
+
rowKey: props.rowKey || "id",
|
|
302
|
+
columns
|
|
303
|
+
}));
|
|
304
|
+
}
|
|
205
305
|
export {
|
|
306
|
+
Description,
|
|
206
307
|
Form,
|
|
207
|
-
FormItem
|
|
308
|
+
FormItem,
|
|
309
|
+
Table
|
|
208
310
|
};
|
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.337",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -26,7 +26,8 @@
|
|
|
26
26
|
"antd": "*",
|
|
27
27
|
"lodash": "*",
|
|
28
28
|
"react": "*",
|
|
29
|
-
"react-dom": "*"
|
|
29
|
+
"react-dom": "*",
|
|
30
|
+
"@faasjs/react": "^0.0.2-beta.337"
|
|
30
31
|
},
|
|
31
32
|
"devDependencies": {
|
|
32
33
|
"@types/lodash": "*",
|