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

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