@faasjs/ant-design 0.0.2-beta.343 → 0.0.2-beta.347

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.
Files changed (4) hide show
  1. package/dist/index.d.ts +24 -17
  2. package/dist/index.js +182 -68
  3. package/dist/index.mjs +147 -34
  4. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  import { DescriptionsProps, FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, FormProps as FormProps$1, TableColumnProps, TableProps as TableProps$1 } from 'antd';
2
2
  import * as antd_lib_form_Form from 'antd/lib/form/Form';
3
3
  import { RuleObject } from 'rc-field-form/lib/interface';
4
- import { ReactNode } from 'react';
4
+
5
+ declare function Blank(options?: {
6
+ value?: any;
7
+ text?: string;
8
+ }): any;
5
9
 
6
10
  declare type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean';
7
11
  declare type FaasItemTypeValue = {
@@ -11,23 +15,32 @@ declare type FaasItemTypeValue = {
11
15
  'number[]': number[];
12
16
  boolean: boolean;
13
17
  };
14
- declare type BaseItemType = {
18
+ declare type BaseOption = string | number | {
19
+ label: string;
20
+ value?: string | number;
21
+ };
22
+ declare type BaseItemProps = {
15
23
  id: string;
16
24
  title?: string;
25
+ options?: BaseOption[];
17
26
  };
18
- declare type FaasItemProps = BaseItemType & {
27
+ declare type FaasItemProps = BaseItemProps & {
19
28
  /**
20
29
  * Support string, string[], number, number[], boolean
21
30
  * @default 'string'
22
31
  */
23
32
  type?: FaasItemType;
24
33
  };
34
+ declare function transferOptions(options: BaseOption[]): {
35
+ label: string;
36
+ value?: string | number;
37
+ }[];
25
38
 
26
39
  declare type ExtendDescriptionTypeProps = {
27
40
  children?: JSX.Element | null;
28
41
  render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
29
42
  };
30
- declare type ExtendDescriptionItemProps = BaseItemType;
43
+ declare type ExtendDescriptionItemProps = BaseItemProps;
31
44
  declare type DescriptionItemProps<T = any> = {
32
45
  children?: JSX.Element;
33
46
  render?: (value: T, values: any) => JSX.Element | string | number | boolean | null;
@@ -67,22 +80,16 @@ declare type BooleanProps = {
67
80
  type: 'boolean';
68
81
  input?: SwitchProps;
69
82
  };
70
- declare type OptionType<T = any> = {
71
- label: ReactNode;
72
- value?: T;
73
- disabled?: boolean;
74
- children?: Omit<OptionType<T>, 'children'>[];
75
- };
76
- declare type OptionsProps<T = any> = {
77
- options?: OptionType<T>[] | string[] | number[];
83
+ declare type OptionsProps = {
84
+ options: BaseOption[];
78
85
  type?: 'string' | 'string[]' | 'number' | 'number[]';
79
86
  input?: SelectProps<any>;
80
87
  };
81
- declare type FormItemInputProps<T = any> = StringProps | StringListProps | NumberProps | NumberListProps | BooleanProps | OptionsProps<T>;
88
+ declare type FormItemInputProps<T = any> = StringProps | StringListProps | NumberProps | NumberListProps | BooleanProps | OptionsProps;
82
89
  declare type ExtendFormTypeProps = {
83
90
  children?: JSX.Element | null;
84
91
  };
85
- declare type ExtendFormItemProps = BaseItemType & FormItemProps$1;
92
+ declare type ExtendFormItemProps = BaseItemProps & FormItemProps$1;
86
93
  declare type FormItemProps<T = any> = {
87
94
  children?: JSX.Element;
88
95
  rules?: RuleObject[];
@@ -115,9 +122,9 @@ declare type ExtendTableTypeProps = {
115
122
  children?: JSX.Element | null;
116
123
  render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
117
124
  };
118
- declare type ExtendTableItemProps<T = any> = BaseItemType & TableColumnProps<T>;
125
+ declare type ExtendTableItemProps<T = any> = BaseItemProps & TableColumnProps<T>;
119
126
  declare type TableProps<T = any, ExtendTypes = any> = {
120
- items: (TableItemProps | (ExtendTypes & BaseItemType))[];
127
+ items: (TableItemProps | (ExtendTypes & ExtendTableItemProps))[];
121
128
  extendTypes?: {
122
129
  [key: string]: ExtendTableTypeProps;
123
130
  };
@@ -128,4 +135,4 @@ declare type TableProps<T = any, ExtendTypes = any> = {
128
135
  } & TableProps$1<T>;
129
136
  declare function Table<T = any, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
130
137
 
131
- export { BaseItemType, Description, DescriptionItemProps, DescriptionProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, Table, TableItemProps, TableProps };
138
+ export { BaseItemProps, BaseOption, Blank, Description, DescriptionItemProps, DescriptionProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, Table, TableItemProps, TableProps, transferOptions };
package/dist/index.js CHANGED
@@ -46,19 +46,43 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
46
46
  // src/index.ts
47
47
  var src_exports = {};
48
48
  __export(src_exports, {
49
+ Blank: () => Blank,
49
50
  Description: () => Description,
50
51
  Form: () => Form,
51
52
  FormItem: () => FormItem,
52
- Table: () => Table
53
+ Table: () => Table,
54
+ transferOptions: () => transferOptions
53
55
  });
54
56
 
55
57
  // react-shim.js
56
58
  var import_react = __toESM(require("react"));
57
59
 
58
- // src/Description.tsx
59
- var import_icons = require("@ant-design/icons");
60
+ // src/Blank.tsx
60
61
  var import_antd = require("antd");
61
62
  var import_lodash = require("lodash");
63
+ var _a;
64
+ var text = ((_a = navigator.language) == null ? void 0 : _a.includes("CN")) ? "\u7A7A" : "Empty";
65
+ function Blank(options) {
66
+ return !options || (0, import_lodash.isNil)(options.value) || Array.isArray(options.value) && !options.value.length || options.value === "" ? /* @__PURE__ */ import_react.default.createElement(import_antd.Typography.Text, {
67
+ disabled: true
68
+ }, (options == null ? void 0 : options.text) || text) : options.value;
69
+ }
70
+
71
+ // src/data.ts
72
+ var import_lodash2 = require("lodash");
73
+ function transferOptions(options) {
74
+ if (!options)
75
+ return [];
76
+ return options.map((item) => typeof item === "object" ? item : {
77
+ label: (0, import_lodash2.upperFirst)(item.toString()),
78
+ value: item
79
+ });
80
+ }
81
+
82
+ // src/Description.tsx
83
+ var import_icons = require("@ant-design/icons");
84
+ var import_antd2 = require("antd");
85
+ var import_lodash3 = require("lodash");
62
86
  var import_react4 = require("react");
63
87
 
64
88
  // src/FaasWrapper.tsx
@@ -87,11 +111,24 @@ function FaasDataWrapper({
87
111
  function DescriptionItemContent(props) {
88
112
  const [computedProps, setComputedProps] = (0, import_react4.useState)();
89
113
  (0, import_react4.useEffect)(() => {
114
+ var _a2, _b;
90
115
  const propsCopy = __spreadValues({}, props);
91
116
  if (!propsCopy.item.title)
92
- propsCopy.item.title = (0, import_lodash.upperFirst)(propsCopy.item.id);
117
+ propsCopy.item.title = (0, import_lodash3.upperFirst)(propsCopy.item.id);
93
118
  if (!propsCopy.item.type)
94
119
  propsCopy.item.type = "string";
120
+ if ((_a2 = propsCopy.item.options) == null ? void 0 : _a2.length) {
121
+ propsCopy.item.options = transferOptions(propsCopy.item.options);
122
+ }
123
+ if (propsCopy.item.options && typeof propsCopy.value !== "undefined" && propsCopy.value !== null) {
124
+ if (propsCopy.item.type.endsWith("[]"))
125
+ propsCopy.value = propsCopy.value.map((v) => {
126
+ var _a3;
127
+ return ((_a3 = propsCopy.item.options.find((option) => option.value === v)) == null ? void 0 : _a3.label) || v;
128
+ });
129
+ else
130
+ propsCopy.value = ((_b = props.item.options.find((option) => option.value === props.value)) == null ? void 0 : _b.label) || props.value;
131
+ }
95
132
  setComputedProps(propsCopy);
96
133
  }, [props]);
97
134
  if (!computedProps)
@@ -121,9 +158,15 @@ function DescriptionItemContent(props) {
121
158
  return computedProps.value.join(", ");
122
159
  case "boolean":
123
160
  return computedProps.value ? /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, {
124
- style: { marginTop: "4px" }
161
+ style: {
162
+ marginTop: "4px",
163
+ color: "#52c41a"
164
+ }
125
165
  }) : /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, {
126
- style: { marginTop: "4px" }
166
+ style: {
167
+ marginTop: "4px",
168
+ color: "#ff4d4f"
169
+ }
127
170
  });
128
171
  default:
129
172
  return computedProps.value;
@@ -133,9 +176,9 @@ function Description(props) {
133
176
  return /* @__PURE__ */ import_react.default.createElement(FaasDataWrapper, {
134
177
  dataSource: props.dataSource,
135
178
  faasData: props.faasData,
136
- render: ({ data }) => /* @__PURE__ */ import_react.default.createElement(import_antd.Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_antd.Descriptions.Item, {
179
+ render: ({ data }) => /* @__PURE__ */ import_react.default.createElement(import_antd2.Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_antd2.Descriptions.Item, {
137
180
  key: item.id,
138
- label: item.title || (0, import_lodash.upperFirst)(item.id)
181
+ label: item.title || (0, import_lodash3.upperFirst)(item.id)
139
182
  }, /* @__PURE__ */ import_react.default.createElement(DescriptionItemContent, {
140
183
  item,
141
184
  value: data[item.id],
@@ -146,19 +189,19 @@ function Description(props) {
146
189
  }
147
190
 
148
191
  // src/Form.tsx
149
- var import_antd3 = require("antd");
192
+ var import_antd4 = require("antd");
150
193
 
151
194
  // src/FormItem.tsx
152
- var import_antd2 = require("antd");
195
+ var import_antd3 = require("antd");
153
196
  var import_icons2 = require("@ant-design/icons");
154
197
  var import_react5 = require("react");
155
- var import_lodash2 = require("lodash");
198
+ var import_lodash4 = require("lodash");
156
199
  function FormItem(props) {
157
200
  const [computedProps, setComputedProps] = (0, import_react5.useState)();
158
201
  (0, import_react5.useEffect)(() => {
159
202
  const propsCopy = __spreadValues({}, props);
160
203
  if (!propsCopy.title)
161
- propsCopy.title = (0, import_lodash2.upperFirst)(propsCopy.id);
204
+ propsCopy.title = (0, import_lodash4.upperFirst)(propsCopy.id);
162
205
  if (!propsCopy.label && props.label !== false)
163
206
  propsCopy.label = propsCopy.title;
164
207
  if (!propsCopy.name)
@@ -184,20 +227,8 @@ function FormItem(props) {
184
227
  }
185
228
  if (!propsCopy.input)
186
229
  propsCopy.input = {};
187
- if (propsCopy.options) {
188
- const options = [];
189
- if (propsCopy.options.length > 0)
190
- for (const option of propsCopy.options) {
191
- if (typeof option === "object")
192
- options.push(option);
193
- else
194
- options.push({
195
- label: (0, import_lodash2.upperFirst)(option.toString()),
196
- value: option
197
- });
198
- }
199
- propsCopy.input.options = options;
200
- }
230
+ if (propsCopy.options)
231
+ propsCopy.input.options = transferOptions(propsCopy.options);
201
232
  switch (propsCopy.type) {
202
233
  case "boolean":
203
234
  propsCopy.valuePropName = "checked";
@@ -208,95 +239,95 @@ function FormItem(props) {
208
239
  if (!computedProps)
209
240
  return null;
210
241
  if (computedProps.extendTypes && computedProps.extendTypes[computedProps.type])
211
- return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), computedProps.extendTypes[computedProps.type].children);
242
+ return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, __spreadValues({}, computedProps), computedProps.extendTypes[computedProps.type].children);
212
243
  if (computedProps.children)
213
- return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), computedProps.children);
244
+ return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, __spreadValues({}, computedProps), computedProps.children);
214
245
  switch (computedProps.type) {
215
246
  case "string":
216
- 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)));
247
+ return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, __spreadValues({}, computedProps), computedProps.options ? /* @__PURE__ */ import_react.default.createElement(import_antd3.Select, __spreadValues({}, computedProps.input)) : /* @__PURE__ */ import_react.default.createElement(import_antd3.Input, __spreadValues({}, computedProps.input)));
217
248
  case "string[]":
218
249
  if (computedProps.options)
219
- return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd2.Select, __spreadValues({
250
+ return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd3.Select, __spreadValues({
220
251
  mode: "multiple"
221
252
  }, computedProps.input)));
222
- return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.List, {
253
+ return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.List, {
223
254
  name: computedProps.name,
224
255
  rules: computedProps.rules
225
256
  }, (fields, { add, remove }, { errors }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
226
257
  className: "ant-form-item-label"
227
258
  }, /* @__PURE__ */ import_react.default.createElement("label", {
228
259
  className: computedProps.rules.find((r) => r.required) && "ant-form-item-required"
229
- }, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, {
260
+ }, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, {
230
261
  key: field.key
231
- }, /* @__PURE__ */ import_react.default.createElement(import_antd2.Row, {
262
+ }, /* @__PURE__ */ import_react.default.createElement(import_antd3.Row, {
232
263
  gutter: 24
233
- }, /* @__PURE__ */ import_react.default.createElement(import_antd2.Col, {
264
+ }, /* @__PURE__ */ import_react.default.createElement(import_antd3.Col, {
234
265
  span: 23
235
- }, /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadProps(__spreadValues({}, field), {
266
+ }, /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, __spreadProps(__spreadValues({}, field), {
236
267
  noStyle: true
237
- }), /* @__PURE__ */ import_react.default.createElement(import_antd2.Input, __spreadValues({}, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd2.Col, {
268
+ }), /* @__PURE__ */ import_react.default.createElement(import_antd3.Input, __spreadValues({}, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd3.Col, {
238
269
  span: 1
239
- }, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(import_antd2.Button, {
270
+ }, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(import_antd3.Button, {
240
271
  danger: true,
241
272
  type: "link",
242
273
  style: { float: "right" },
243
274
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.MinusCircleOutlined, null),
244
275
  onClick: () => remove(field.name)
245
- }))))), /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, null, (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ import_react.default.createElement(import_antd2.Button, {
276
+ }))))), /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, null, (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ import_react.default.createElement(import_antd3.Button, {
246
277
  type: "dashed",
247
278
  block: true,
248
279
  onClick: () => add(),
249
280
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.PlusOutlined, null)
250
- }), /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.ErrorList, {
281
+ }), /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.ErrorList, {
251
282
  errors
252
283
  }))));
253
284
  case "number":
254
- 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({
285
+ return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, __spreadValues({}, computedProps), computedProps.options ? /* @__PURE__ */ import_react.default.createElement(import_antd3.Select, __spreadValues({}, computedProps.input)) : /* @__PURE__ */ import_react.default.createElement(import_antd3.InputNumber, __spreadValues({
255
286
  style: { width: "100%" }
256
287
  }, computedProps.input)));
257
288
  case "number[]":
258
289
  if (computedProps.options)
259
- return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd2.Select, __spreadValues({
290
+ return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd3.Select, __spreadValues({
260
291
  mode: "multiple"
261
292
  }, computedProps.input)));
262
- return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.List, {
293
+ return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.List, {
263
294
  name: computedProps.name,
264
295
  rules: computedProps.rules
265
296
  }, (fields, { add, remove }, { errors }) => {
266
- var _a;
297
+ var _a2;
267
298
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
268
299
  className: "ant-form-item-label"
269
300
  }, /* @__PURE__ */ import_react.default.createElement("label", {
270
- className: ((_a = computedProps.rules) == null ? void 0 : _a.find((r) => r.required)) && "ant-form-item-required"
271
- }, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, {
301
+ className: ((_a2 = computedProps.rules) == null ? void 0 : _a2.find((r) => r.required)) && "ant-form-item-required"
302
+ }, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, {
272
303
  key: field.key
273
- }, /* @__PURE__ */ import_react.default.createElement(import_antd2.Row, {
304
+ }, /* @__PURE__ */ import_react.default.createElement(import_antd3.Row, {
274
305
  gutter: 24
275
- }, /* @__PURE__ */ import_react.default.createElement(import_antd2.Col, {
306
+ }, /* @__PURE__ */ import_react.default.createElement(import_antd3.Col, {
276
307
  span: 23
277
- }, /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadProps(__spreadValues({}, field), {
308
+ }, /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, __spreadProps(__spreadValues({}, field), {
278
309
  noStyle: true
279
- }), /* @__PURE__ */ import_react.default.createElement(import_antd2.InputNumber, __spreadValues({
310
+ }), /* @__PURE__ */ import_react.default.createElement(import_antd3.InputNumber, __spreadValues({
280
311
  style: { width: "100%" }
281
- }, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd2.Col, {
312
+ }, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd3.Col, {
282
313
  span: 1
283
- }, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(import_antd2.Button, {
314
+ }, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(import_antd3.Button, {
284
315
  danger: true,
285
316
  type: "link",
286
317
  style: { float: "right" },
287
318
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.MinusCircleOutlined, null),
288
319
  onClick: () => remove(field.name)
289
- }))))), /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, null, (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ import_react.default.createElement(import_antd2.Button, {
320
+ }))))), /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, null, (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ import_react.default.createElement(import_antd3.Button, {
290
321
  type: "dashed",
291
322
  block: true,
292
323
  onClick: () => add(),
293
324
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.PlusOutlined, null)
294
- }), /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.ErrorList, {
325
+ }), /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.ErrorList, {
295
326
  errors
296
327
  })));
297
328
  });
298
329
  case "boolean":
299
- return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd2.Switch, __spreadValues({}, computedProps.input)));
330
+ return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd3.Switch, __spreadValues({}, computedProps.input)));
300
331
  default:
301
332
  return null;
302
333
  }
@@ -304,36 +335,57 @@ function FormItem(props) {
304
335
 
305
336
  // src/Form.tsx
306
337
  function Form(props) {
307
- var _a, _b;
308
- 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, __spreadProps(__spreadValues({
338
+ var _a2, _b;
339
+ return /* @__PURE__ */ import_react.default.createElement(import_antd4.Form, __spreadValues({}, props), (_a2 = props.items) == null ? void 0 : _a2.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadProps(__spreadValues({
309
340
  key: item.id
310
341
  }, item), {
311
342
  extendTypes: props.extendTypes
312
- }))), props.children, props.submit !== false && /* @__PURE__ */ import_react.default.createElement(import_antd3.Button, {
343
+ }))), props.children, props.submit !== false && /* @__PURE__ */ import_react.default.createElement(import_antd4.Button, {
313
344
  htmlType: "submit",
314
345
  type: "primary"
315
346
  }, ((_b = props.submit) == null ? void 0 : _b.text) || "Submit"));
316
347
  }
317
- Form.useForm = import_antd3.Form.useForm;
348
+ Form.useForm = import_antd4.Form.useForm;
318
349
  Form.Item = FormItem;
319
350
 
320
351
  // src/Table.tsx
321
352
  var import_react6 = require("react");
322
- var import_antd4 = require("antd");
353
+ var import_antd5 = require("antd");
323
354
  var import_icons3 = require("@ant-design/icons");
324
- var import_lodash3 = require("lodash");
355
+ var import_lodash5 = require("lodash");
356
+ function processValue(item, value) {
357
+ var _a2;
358
+ if (item.options && typeof value !== "undefined" && value !== null) {
359
+ if (item.type.endsWith("[]"))
360
+ return value.map((v) => {
361
+ var _a3;
362
+ return ((_a3 = item.options.find((option) => option.value === v)) == null ? void 0 : _a3.label) || v;
363
+ });
364
+ else
365
+ return ((_a2 = item.options.find((option) => option.value === value)) == null ? void 0 : _a2.label) || value;
366
+ }
367
+ return value;
368
+ }
325
369
  function Table(props) {
326
370
  const [columns, setColumns] = (0, import_react6.useState)();
327
371
  (0, import_react6.useEffect)(() => {
372
+ var _a2;
328
373
  for (const item of props.items) {
329
374
  if (!item.key)
330
375
  item.key = item.id;
331
376
  if (!item.dataIndex)
332
377
  item.dataIndex = item.id;
333
378
  if (!item.title)
334
- item.title = (0, import_lodash3.upperFirst)(item.id);
379
+ item.title = (0, import_lodash5.upperFirst)(item.id);
335
380
  if (!item.type)
336
381
  item.type = "string";
382
+ if ((_a2 = item.options) == null ? void 0 : _a2.length) {
383
+ item.options = transferOptions(item.options);
384
+ item.filters = item.options.map((o) => ({
385
+ text: o.label,
386
+ value: o.value
387
+ }));
388
+ }
337
389
  if (item.render)
338
390
  continue;
339
391
  if (props.extendTypes && props.extendTypes[item.type]) {
@@ -350,17 +402,77 @@ function Table(props) {
350
402
  }
351
403
  switch (item.type) {
352
404
  case "string[]":
353
- item.render = (value) => value.join(", ");
405
+ item.render = (value) => processValue(item, value).join(", ");
406
+ break;
407
+ case "number":
408
+ item.render = (value) => processValue(item, value);
409
+ if (!item.sorter)
410
+ item.sorter = (a, b) => a[item.id] - b[item.id];
354
411
  break;
355
412
  case "number[]":
356
- item.render = (value) => value.join(", ");
413
+ item.render = (value) => processValue(item, value).join(", ");
357
414
  break;
358
415
  case "boolean":
359
- item.render = (value) => value ? /* @__PURE__ */ import_react.default.createElement(import_icons3.CheckOutlined, {
360
- style: { marginTop: "4px" }
416
+ item.render = (value) => typeof value === "undefined" ? /* @__PURE__ */ import_react.default.createElement(Blank, null) : value ? /* @__PURE__ */ import_react.default.createElement(import_icons3.CheckOutlined, {
417
+ style: {
418
+ marginTop: "4px",
419
+ color: "#52c41a"
420
+ }
361
421
  }) : /* @__PURE__ */ import_react.default.createElement(import_icons3.CloseOutlined, {
362
- style: { marginTop: "4px" }
422
+ style: {
423
+ marginTop: "4px",
424
+ color: "#ff4d4f"
425
+ }
363
426
  });
427
+ if (!item.filterDropdown)
428
+ item.filterDropdown = ({
429
+ setSelectedKeys,
430
+ selectedKeys,
431
+ confirm
432
+ }) => {
433
+ var _a3, _b;
434
+ return /* @__PURE__ */ import_react.default.createElement(import_antd5.Radio.Group, {
435
+ style: { padding: 8 },
436
+ buttonStyle: "solid",
437
+ value: selectedKeys[0],
438
+ onChange: (e) => {
439
+ setSelectedKeys(e.target.value ? [e.target.value] : []);
440
+ confirm();
441
+ }
442
+ }, /* @__PURE__ */ import_react.default.createElement(import_antd5.Radio.Button, null, ((_a3 = navigator.language) == null ? void 0 : _a3.includes("CN")) ? "\u5168\u90E8" : "All"), /* @__PURE__ */ import_react.default.createElement(import_antd5.Radio.Button, {
443
+ value: "true"
444
+ }, /* @__PURE__ */ import_react.default.createElement(import_icons3.CheckOutlined, {
445
+ style: {
446
+ color: "#52c41a",
447
+ verticalAlign: "middle"
448
+ }
449
+ })), /* @__PURE__ */ import_react.default.createElement(import_antd5.Radio.Button, {
450
+ value: "false"
451
+ }, /* @__PURE__ */ import_react.default.createElement(import_icons3.CloseOutlined, {
452
+ style: {
453
+ verticalAlign: "middle",
454
+ color: "#ff4d4f"
455
+ }
456
+ })), /* @__PURE__ */ import_react.default.createElement(import_antd5.Radio.Button, {
457
+ value: "empty"
458
+ }, ((_b = navigator.language) == null ? void 0 : _b.includes("CN")) ? "\u7A7A" : "Empty"));
459
+ };
460
+ if (!item.onFilter)
461
+ item.onFilter = (value, row) => {
462
+ switch (value) {
463
+ case "true":
464
+ return !(0, import_lodash5.isNil)(row[item.id]) && !!row[item.id];
465
+ case "false":
466
+ return !(0, import_lodash5.isNil)(row[item.id]) && !row[item.id];
467
+ case "empty":
468
+ return (0, import_lodash5.isNil)(row[item.id]);
469
+ default:
470
+ return true;
471
+ }
472
+ };
473
+ break;
474
+ default:
475
+ item.render = (value) => processValue(item, value);
364
476
  break;
365
477
  }
366
478
  }
@@ -371,7 +483,7 @@ function Table(props) {
371
483
  return /* @__PURE__ */ import_react.default.createElement(FaasDataWrapper, {
372
484
  dataSource: props.dataSource,
373
485
  faasData: props.faasData,
374
- render: ({ data }) => /* @__PURE__ */ import_react.default.createElement(import_antd4.Table, __spreadProps(__spreadValues({}, props), {
486
+ render: ({ data }) => /* @__PURE__ */ import_react.default.createElement(import_antd5.Table, __spreadProps(__spreadValues({}, props), {
375
487
  rowKey: props.rowKey || "id",
376
488
  columns,
377
489
  dataSource: data
@@ -381,8 +493,10 @@ function Table(props) {
381
493
  module.exports = __toCommonJS(src_exports);
382
494
  // Annotate the CommonJS export names for ESM import in node:
383
495
  0 && (module.exports = {
496
+ Blank,
384
497
  Description,
385
498
  Form,
386
499
  FormItem,
387
- Table
500
+ Table,
501
+ transferOptions
388
502
  });
package/dist/index.mjs CHANGED
@@ -21,10 +21,32 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
21
  // react-shim.js
22
22
  import React from "react";
23
23
 
24
+ // src/Blank.tsx
25
+ import { Typography } from "antd";
26
+ import { isNil } from "lodash";
27
+ var _a;
28
+ var text = ((_a = navigator.language) == null ? void 0 : _a.includes("CN")) ? "\u7A7A" : "Empty";
29
+ function Blank(options) {
30
+ return !options || isNil(options.value) || Array.isArray(options.value) && !options.value.length || options.value === "" ? /* @__PURE__ */ React.createElement(Typography.Text, {
31
+ disabled: true
32
+ }, (options == null ? void 0 : options.text) || text) : options.value;
33
+ }
34
+
35
+ // src/data.ts
36
+ import { upperFirst } from "lodash";
37
+ function transferOptions(options) {
38
+ if (!options)
39
+ return [];
40
+ return options.map((item) => typeof item === "object" ? item : {
41
+ label: upperFirst(item.toString()),
42
+ value: item
43
+ });
44
+ }
45
+
24
46
  // src/Description.tsx
25
47
  import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
26
48
  import { Descriptions } from "antd";
27
- import { upperFirst } from "lodash";
49
+ import { upperFirst as upperFirst2 } from "lodash";
28
50
  import {
29
51
  cloneElement,
30
52
  useEffect as useEffect2,
@@ -57,11 +79,24 @@ function FaasDataWrapper({
57
79
  function DescriptionItemContent(props) {
58
80
  const [computedProps, setComputedProps] = useState2();
59
81
  useEffect2(() => {
82
+ var _a2, _b;
60
83
  const propsCopy = __spreadValues({}, props);
61
84
  if (!propsCopy.item.title)
62
- propsCopy.item.title = upperFirst(propsCopy.item.id);
85
+ propsCopy.item.title = upperFirst2(propsCopy.item.id);
63
86
  if (!propsCopy.item.type)
64
87
  propsCopy.item.type = "string";
88
+ if ((_a2 = propsCopy.item.options) == null ? void 0 : _a2.length) {
89
+ propsCopy.item.options = transferOptions(propsCopy.item.options);
90
+ }
91
+ if (propsCopy.item.options && typeof propsCopy.value !== "undefined" && propsCopy.value !== null) {
92
+ if (propsCopy.item.type.endsWith("[]"))
93
+ propsCopy.value = propsCopy.value.map((v) => {
94
+ var _a3;
95
+ return ((_a3 = propsCopy.item.options.find((option) => option.value === v)) == null ? void 0 : _a3.label) || v;
96
+ });
97
+ else
98
+ propsCopy.value = ((_b = props.item.options.find((option) => option.value === props.value)) == null ? void 0 : _b.label) || props.value;
99
+ }
65
100
  setComputedProps(propsCopy);
66
101
  }, [props]);
67
102
  if (!computedProps)
@@ -91,9 +126,15 @@ function DescriptionItemContent(props) {
91
126
  return computedProps.value.join(", ");
92
127
  case "boolean":
93
128
  return computedProps.value ? /* @__PURE__ */ React.createElement(CheckOutlined, {
94
- style: { marginTop: "4px" }
129
+ style: {
130
+ marginTop: "4px",
131
+ color: "#52c41a"
132
+ }
95
133
  }) : /* @__PURE__ */ React.createElement(CloseOutlined, {
96
- style: { marginTop: "4px" }
134
+ style: {
135
+ marginTop: "4px",
136
+ color: "#ff4d4f"
137
+ }
97
138
  });
98
139
  default:
99
140
  return computedProps.value;
@@ -105,7 +146,7 @@ function Description(props) {
105
146
  faasData: props.faasData,
106
147
  render: ({ data }) => /* @__PURE__ */ React.createElement(Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ React.createElement(Descriptions.Item, {
107
148
  key: item.id,
108
- label: item.title || upperFirst(item.id)
149
+ label: item.title || upperFirst2(item.id)
109
150
  }, /* @__PURE__ */ React.createElement(DescriptionItemContent, {
110
151
  item,
111
152
  value: data[item.id],
@@ -137,13 +178,13 @@ import {
137
178
  useEffect as useEffect3,
138
179
  useState as useState3
139
180
  } from "react";
140
- import { upperFirst as upperFirst2 } from "lodash";
181
+ import { upperFirst as upperFirst3 } from "lodash";
141
182
  function FormItem(props) {
142
183
  const [computedProps, setComputedProps] = useState3();
143
184
  useEffect3(() => {
144
185
  const propsCopy = __spreadValues({}, props);
145
186
  if (!propsCopy.title)
146
- propsCopy.title = upperFirst2(propsCopy.id);
187
+ propsCopy.title = upperFirst3(propsCopy.id);
147
188
  if (!propsCopy.label && props.label !== false)
148
189
  propsCopy.label = propsCopy.title;
149
190
  if (!propsCopy.name)
@@ -169,20 +210,8 @@ function FormItem(props) {
169
210
  }
170
211
  if (!propsCopy.input)
171
212
  propsCopy.input = {};
172
- if (propsCopy.options) {
173
- const options = [];
174
- if (propsCopy.options.length > 0)
175
- for (const option of propsCopy.options) {
176
- if (typeof option === "object")
177
- options.push(option);
178
- else
179
- options.push({
180
- label: upperFirst2(option.toString()),
181
- value: option
182
- });
183
- }
184
- propsCopy.input.options = options;
185
- }
213
+ if (propsCopy.options)
214
+ propsCopy.input.options = transferOptions(propsCopy.options);
186
215
  switch (propsCopy.type) {
187
216
  case "boolean":
188
217
  propsCopy.valuePropName = "checked";
@@ -248,11 +277,11 @@ function FormItem(props) {
248
277
  name: computedProps.name,
249
278
  rules: computedProps.rules
250
279
  }, (fields, { add, remove }, { errors }) => {
251
- var _a;
280
+ var _a2;
252
281
  return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.label && /* @__PURE__ */ React.createElement("div", {
253
282
  className: "ant-form-item-label"
254
283
  }, /* @__PURE__ */ React.createElement("label", {
255
- className: ((_a = computedProps.rules) == null ? void 0 : _a.find((r) => r.required)) && "ant-form-item-required"
284
+ className: ((_a2 = computedProps.rules) == null ? void 0 : _a2.find((r) => r.required)) && "ant-form-item-required"
256
285
  }, computedProps.label)), fields.map((field) => /* @__PURE__ */ React.createElement(AntdForm.Item, {
257
286
  key: field.key
258
287
  }, /* @__PURE__ */ React.createElement(Row, {
@@ -289,8 +318,8 @@ function FormItem(props) {
289
318
 
290
319
  // src/Form.tsx
291
320
  function Form(props) {
292
- var _a, _b;
293
- return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, props), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadProps(__spreadValues({
321
+ var _a2, _b;
322
+ return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, props), (_a2 = props.items) == null ? void 0 : _a2.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadProps(__spreadValues({
294
323
  key: item.id
295
324
  }, item), {
296
325
  extendTypes: props.extendTypes
@@ -309,22 +338,44 @@ import {
309
338
  cloneElement as cloneElement2
310
339
  } from "react";
311
340
  import {
312
- Table as AntdTable
341
+ Table as AntdTable,
342
+ Radio
313
343
  } from "antd";
314
344
  import { CheckOutlined as CheckOutlined2, CloseOutlined as CloseOutlined2 } from "@ant-design/icons";
315
- import { upperFirst as upperFirst3 } from "lodash";
345
+ import { isNil as isNil2, upperFirst as upperFirst4 } from "lodash";
346
+ function processValue(item, value) {
347
+ var _a2;
348
+ if (item.options && typeof value !== "undefined" && value !== null) {
349
+ if (item.type.endsWith("[]"))
350
+ return value.map((v) => {
351
+ var _a3;
352
+ return ((_a3 = item.options.find((option) => option.value === v)) == null ? void 0 : _a3.label) || v;
353
+ });
354
+ else
355
+ return ((_a2 = item.options.find((option) => option.value === value)) == null ? void 0 : _a2.label) || value;
356
+ }
357
+ return value;
358
+ }
316
359
  function Table(props) {
317
360
  const [columns, setColumns] = useState4();
318
361
  useEffect4(() => {
362
+ var _a2;
319
363
  for (const item of props.items) {
320
364
  if (!item.key)
321
365
  item.key = item.id;
322
366
  if (!item.dataIndex)
323
367
  item.dataIndex = item.id;
324
368
  if (!item.title)
325
- item.title = upperFirst3(item.id);
369
+ item.title = upperFirst4(item.id);
326
370
  if (!item.type)
327
371
  item.type = "string";
372
+ if ((_a2 = item.options) == null ? void 0 : _a2.length) {
373
+ item.options = transferOptions(item.options);
374
+ item.filters = item.options.map((o) => ({
375
+ text: o.label,
376
+ value: o.value
377
+ }));
378
+ }
328
379
  if (item.render)
329
380
  continue;
330
381
  if (props.extendTypes && props.extendTypes[item.type]) {
@@ -341,17 +392,77 @@ function Table(props) {
341
392
  }
342
393
  switch (item.type) {
343
394
  case "string[]":
344
- item.render = (value) => value.join(", ");
395
+ item.render = (value) => processValue(item, value).join(", ");
396
+ break;
397
+ case "number":
398
+ item.render = (value) => processValue(item, value);
399
+ if (!item.sorter)
400
+ item.sorter = (a, b) => a[item.id] - b[item.id];
345
401
  break;
346
402
  case "number[]":
347
- item.render = (value) => value.join(", ");
403
+ item.render = (value) => processValue(item, value).join(", ");
348
404
  break;
349
405
  case "boolean":
350
- item.render = (value) => value ? /* @__PURE__ */ React.createElement(CheckOutlined2, {
351
- style: { marginTop: "4px" }
406
+ item.render = (value) => typeof value === "undefined" ? /* @__PURE__ */ React.createElement(Blank, null) : value ? /* @__PURE__ */ React.createElement(CheckOutlined2, {
407
+ style: {
408
+ marginTop: "4px",
409
+ color: "#52c41a"
410
+ }
352
411
  }) : /* @__PURE__ */ React.createElement(CloseOutlined2, {
353
- style: { marginTop: "4px" }
412
+ style: {
413
+ marginTop: "4px",
414
+ color: "#ff4d4f"
415
+ }
354
416
  });
417
+ if (!item.filterDropdown)
418
+ item.filterDropdown = ({
419
+ setSelectedKeys,
420
+ selectedKeys,
421
+ confirm
422
+ }) => {
423
+ var _a3, _b;
424
+ return /* @__PURE__ */ React.createElement(Radio.Group, {
425
+ style: { padding: 8 },
426
+ buttonStyle: "solid",
427
+ value: selectedKeys[0],
428
+ onChange: (e) => {
429
+ setSelectedKeys(e.target.value ? [e.target.value] : []);
430
+ confirm();
431
+ }
432
+ }, /* @__PURE__ */ React.createElement(Radio.Button, null, ((_a3 = navigator.language) == null ? void 0 : _a3.includes("CN")) ? "\u5168\u90E8" : "All"), /* @__PURE__ */ React.createElement(Radio.Button, {
433
+ value: "true"
434
+ }, /* @__PURE__ */ React.createElement(CheckOutlined2, {
435
+ style: {
436
+ color: "#52c41a",
437
+ verticalAlign: "middle"
438
+ }
439
+ })), /* @__PURE__ */ React.createElement(Radio.Button, {
440
+ value: "false"
441
+ }, /* @__PURE__ */ React.createElement(CloseOutlined2, {
442
+ style: {
443
+ verticalAlign: "middle",
444
+ color: "#ff4d4f"
445
+ }
446
+ })), /* @__PURE__ */ React.createElement(Radio.Button, {
447
+ value: "empty"
448
+ }, ((_b = navigator.language) == null ? void 0 : _b.includes("CN")) ? "\u7A7A" : "Empty"));
449
+ };
450
+ if (!item.onFilter)
451
+ item.onFilter = (value, row) => {
452
+ switch (value) {
453
+ case "true":
454
+ return !isNil2(row[item.id]) && !!row[item.id];
455
+ case "false":
456
+ return !isNil2(row[item.id]) && !row[item.id];
457
+ case "empty":
458
+ return isNil2(row[item.id]);
459
+ default:
460
+ return true;
461
+ }
462
+ };
463
+ break;
464
+ default:
465
+ item.render = (value) => processValue(item, value);
355
466
  break;
356
467
  }
357
468
  }
@@ -370,8 +481,10 @@ function Table(props) {
370
481
  });
371
482
  }
372
483
  export {
484
+ Blank,
373
485
  Description,
374
486
  Form,
375
487
  FormItem,
376
- Table
488
+ Table,
489
+ transferOptions
377
490
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faasjs/ant-design",
3
- "version": "0.0.2-beta.343",
3
+ "version": "0.0.2-beta.347",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -27,7 +27,7 @@
27
27
  "lodash": "*",
28
28
  "react": "*",
29
29
  "react-dom": "*",
30
- "@faasjs/react": "^0.0.2-beta.343"
30
+ "@faasjs/react": "^0.0.2-beta.347"
31
31
  },
32
32
  "devDependencies": {
33
33
  "@types/lodash": "*",