@faasjs/ant-design 0.0.2-beta.340 → 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 +26 -4
  2. package/dist/index.js +202 -75
  3. package/dist/index.mjs +165 -38
  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,12 +34,20 @@ 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;
35
44
  declare type DescriptionProps<T = any, ExtendItemProps = any> = {
36
45
  items: (DescriptionItemProps | ExtendItemProps)[];
37
- dataSource: T;
46
+ dataSource?: T;
47
+ faasData?: {
48
+ action: string;
49
+ params?: Record<string, any>;
50
+ };
38
51
  extendTypes?: {
39
52
  [key: string]: ExtendDescriptionTypeProps;
40
53
  };
@@ -106,18 +119,27 @@ declare namespace Form {
106
119
  var Item: typeof FormItem;
107
120
  }
108
121
 
109
- 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>;
110
128
  declare type ExtendTableTypeProps = {
111
129
  children?: JSX.Element | null;
112
130
  render?: (value: any, values: any) => JSX.Element | string | number | boolean | null;
113
131
  };
114
132
  declare type ExtendTableItemProps<T = any> = BaseItemType & TableColumnProps<T>;
115
133
  declare type TableProps<T = any, ExtendTypes = any> = {
116
- items: (TableItemProps | (ExtendTypes & BaseItemType))[];
134
+ items: (TableItemProps | (ExtendTypes & ExtendTableItemProps))[];
117
135
  extendTypes?: {
118
136
  [key: string]: ExtendTableTypeProps;
119
137
  };
138
+ faasData?: {
139
+ action: string;
140
+ params?: Record<string, any>;
141
+ };
120
142
  } & TableProps$1<T>;
121
143
  declare function Table<T = any, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
122
144
 
123
- 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,26 +56,71 @@ __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");
74
+ var import_react4 = require("react");
75
+
76
+ // src/FaasWrapper.tsx
62
77
  var import_react2 = require("react");
63
- function DescriptionItemContent(props) {
64
- const [computedProps, setComputedProps] = (0, import_react2.useState)();
78
+ var import_react3 = require("@faasjs/react");
79
+ function FaasDataWrapper({
80
+ dataSource,
81
+ faasData,
82
+ render,
83
+ fallback
84
+ }) {
85
+ const [data, setData] = (0, import_react2.useState)();
65
86
  (0, import_react2.useEffect)(() => {
87
+ if (!faasData)
88
+ return;
89
+ (0, import_react3.getClient)().faas(faasData.action, faasData.action).then((res) => setData(res.data));
90
+ }, [JSON.stringify(faasData)]);
91
+ if (dataSource)
92
+ return render({ data: dataSource });
93
+ if (!data)
94
+ return fallback || null;
95
+ return render({ data });
96
+ }
97
+
98
+ // src/Description.tsx
99
+ function DescriptionItemContent(props) {
100
+ const [computedProps, setComputedProps] = (0, import_react4.useState)();
101
+ (0, import_react4.useEffect)(() => {
102
+ var _a2;
66
103
  const propsCopy = __spreadValues({}, props);
67
104
  if (!propsCopy.item.title)
68
- propsCopy.item.title = (0, import_lodash.upperFirst)(propsCopy.item.id);
105
+ propsCopy.item.title = (0, import_lodash2.upperFirst)(propsCopy.item.id);
69
106
  if (!propsCopy.item.type)
70
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
+ }
71
117
  setComputedProps(propsCopy);
72
118
  }, [props]);
73
- if (!computedProps || typeof computedProps.value === "undefined" || computedProps.value === null)
119
+ if (!computedProps)
74
120
  return null;
75
121
  if (computedProps.extendTypes && computedProps.extendTypes[computedProps.item.type])
76
122
  if (computedProps.extendTypes[computedProps.item.type].children)
77
- return (0, import_react2.cloneElement)(computedProps.extendTypes[computedProps.item.type].children, {
123
+ return (0, import_react4.cloneElement)(computedProps.extendTypes[computedProps.item.type].children, {
78
124
  value: computedProps.value,
79
125
  values: computedProps.values
80
126
  });
@@ -83,9 +129,11 @@ function DescriptionItemContent(props) {
83
129
  else
84
130
  throw Error(computedProps.item.type + " requires children or render");
85
131
  if (computedProps.item.children)
86
- return (0, import_react2.cloneElement)(computedProps.item.children, { value: computedProps.value });
132
+ return (0, import_react4.cloneElement)(computedProps.item.children, { value: computedProps.value });
87
133
  if (computedProps.item.render)
88
134
  return computedProps.item.render(computedProps.value, computedProps.values);
135
+ if (typeof computedProps.value === "undefined" || computedProps.value === null)
136
+ return null;
89
137
  switch (computedProps.item.type) {
90
138
  case "string[]":
91
139
  return computedProps.value.join(", ");
@@ -95,40 +143,50 @@ function DescriptionItemContent(props) {
95
143
  return computedProps.value.join(", ");
96
144
  case "boolean":
97
145
  return computedProps.value ? /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, {
98
- style: { marginTop: "4px" }
146
+ style: {
147
+ marginTop: "4px",
148
+ color: "#52c41a"
149
+ }
99
150
  }) : /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, {
100
- style: { marginTop: "4px" }
151
+ style: {
152
+ marginTop: "4px",
153
+ color: "#ff4d4f"
154
+ }
101
155
  });
102
156
  default:
103
157
  return computedProps.value;
104
158
  }
105
159
  }
106
160
  function Description(props) {
107
- return /* @__PURE__ */ import_react.default.createElement(import_antd.Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_antd.Descriptions.Item, {
108
- key: item.id,
109
- label: item.title || (0, import_lodash.upperFirst)(item.id)
110
- }, /* @__PURE__ */ import_react.default.createElement(DescriptionItemContent, {
111
- item,
112
- value: props.dataSource[item.id],
113
- values: props.dataSource,
114
- extendTypes: props.extendTypes
115
- }))));
161
+ return /* @__PURE__ */ import_react.default.createElement(FaasDataWrapper, {
162
+ dataSource: props.dataSource,
163
+ faasData: props.faasData,
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, {
165
+ key: item.id,
166
+ label: item.title || (0, import_lodash2.upperFirst)(item.id)
167
+ }, /* @__PURE__ */ import_react.default.createElement(DescriptionItemContent, {
168
+ item,
169
+ value: data[item.id],
170
+ values: data,
171
+ extendTypes: props.extendTypes
172
+ }))))
173
+ });
116
174
  }
117
175
 
118
176
  // src/Form.tsx
119
- var import_antd3 = require("antd");
177
+ var import_antd4 = require("antd");
120
178
 
121
179
  // src/FormItem.tsx
122
- var import_antd2 = require("antd");
180
+ var import_antd3 = require("antd");
123
181
  var import_icons2 = require("@ant-design/icons");
124
- var import_react3 = require("react");
125
- var import_lodash2 = require("lodash");
182
+ var import_react5 = require("react");
183
+ var import_lodash3 = require("lodash");
126
184
  function FormItem(props) {
127
- const [computedProps, setComputedProps] = (0, import_react3.useState)();
128
- (0, import_react3.useEffect)(() => {
185
+ const [computedProps, setComputedProps] = (0, import_react5.useState)();
186
+ (0, import_react5.useEffect)(() => {
129
187
  const propsCopy = __spreadValues({}, props);
130
188
  if (!propsCopy.title)
131
- propsCopy.title = (0, import_lodash2.upperFirst)(propsCopy.id);
189
+ propsCopy.title = (0, import_lodash3.upperFirst)(propsCopy.id);
132
190
  if (!propsCopy.label && props.label !== false)
133
191
  propsCopy.label = propsCopy.title;
134
192
  if (!propsCopy.name)
@@ -162,7 +220,7 @@ function FormItem(props) {
162
220
  options.push(option);
163
221
  else
164
222
  options.push({
165
- label: (0, import_lodash2.upperFirst)(option.toString()),
223
+ label: (0, import_lodash3.upperFirst)(option.toString()),
166
224
  value: option
167
225
  });
168
226
  }
@@ -178,95 +236,95 @@ function FormItem(props) {
178
236
  if (!computedProps)
179
237
  return null;
180
238
  if (computedProps.extendTypes && computedProps.extendTypes[computedProps.type])
181
- 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);
182
240
  if (computedProps.children)
183
- 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);
184
242
  switch (computedProps.type) {
185
243
  case "string":
186
- 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)));
187
245
  case "string[]":
188
246
  if (computedProps.options)
189
- 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({
190
248
  mode: "multiple"
191
249
  }, computedProps.input)));
192
- return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.List, {
250
+ return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.List, {
193
251
  name: computedProps.name,
194
252
  rules: computedProps.rules
195
253
  }, (fields, { add, remove }, { errors }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
196
254
  className: "ant-form-item-label"
197
255
  }, /* @__PURE__ */ import_react.default.createElement("label", {
198
256
  className: computedProps.rules.find((r) => r.required) && "ant-form-item-required"
199
- }, 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, {
200
258
  key: field.key
201
- }, /* @__PURE__ */ import_react.default.createElement(import_antd2.Row, {
259
+ }, /* @__PURE__ */ import_react.default.createElement(import_antd3.Row, {
202
260
  gutter: 24
203
- }, /* @__PURE__ */ import_react.default.createElement(import_antd2.Col, {
261
+ }, /* @__PURE__ */ import_react.default.createElement(import_antd3.Col, {
204
262
  span: 23
205
- }, /* @__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), {
206
264
  noStyle: true
207
- }), /* @__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, {
208
266
  span: 1
209
- }, (!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, {
210
268
  danger: true,
211
269
  type: "link",
212
270
  style: { float: "right" },
213
271
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.MinusCircleOutlined, null),
214
272
  onClick: () => remove(field.name)
215
- }))))), /* @__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, {
216
274
  type: "dashed",
217
275
  block: true,
218
276
  onClick: () => add(),
219
277
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.PlusOutlined, null)
220
- }), /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.ErrorList, {
278
+ }), /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.ErrorList, {
221
279
  errors
222
280
  }))));
223
281
  case "number":
224
- 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({
225
283
  style: { width: "100%" }
226
284
  }, computedProps.input)));
227
285
  case "number[]":
228
286
  if (computedProps.options)
229
- 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({
230
288
  mode: "multiple"
231
289
  }, computedProps.input)));
232
- return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.List, {
290
+ return /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.List, {
233
291
  name: computedProps.name,
234
292
  rules: computedProps.rules
235
293
  }, (fields, { add, remove }, { errors }) => {
236
- var _a;
294
+ var _a2;
237
295
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
238
296
  className: "ant-form-item-label"
239
297
  }, /* @__PURE__ */ import_react.default.createElement("label", {
240
- className: ((_a = computedProps.rules) == null ? void 0 : _a.find((r) => r.required)) && "ant-form-item-required"
241
- }, 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, {
242
300
  key: field.key
243
- }, /* @__PURE__ */ import_react.default.createElement(import_antd2.Row, {
301
+ }, /* @__PURE__ */ import_react.default.createElement(import_antd3.Row, {
244
302
  gutter: 24
245
- }, /* @__PURE__ */ import_react.default.createElement(import_antd2.Col, {
303
+ }, /* @__PURE__ */ import_react.default.createElement(import_antd3.Col, {
246
304
  span: 23
247
- }, /* @__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), {
248
306
  noStyle: true
249
- }), /* @__PURE__ */ import_react.default.createElement(import_antd2.InputNumber, __spreadValues({
307
+ }), /* @__PURE__ */ import_react.default.createElement(import_antd3.InputNumber, __spreadValues({
250
308
  style: { width: "100%" }
251
- }, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd2.Col, {
309
+ }, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd3.Col, {
252
310
  span: 1
253
- }, (!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, {
254
312
  danger: true,
255
313
  type: "link",
256
314
  style: { float: "right" },
257
315
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.MinusCircleOutlined, null),
258
316
  onClick: () => remove(field.name)
259
- }))))), /* @__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, {
260
318
  type: "dashed",
261
319
  block: true,
262
320
  onClick: () => add(),
263
321
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons2.PlusOutlined, null)
264
- }), /* @__PURE__ */ import_react.default.createElement(import_antd2.Form.ErrorList, {
322
+ }), /* @__PURE__ */ import_react.default.createElement(import_antd3.Form.ErrorList, {
265
323
  errors
266
324
  })));
267
325
  });
268
326
  case "boolean":
269
- 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)));
270
328
  default:
271
329
  return null;
272
330
  }
@@ -274,41 +332,54 @@ function FormItem(props) {
274
332
 
275
333
  // src/Form.tsx
276
334
  function Form(props) {
277
- var _a, _b;
278
- 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({
279
337
  key: item.id
280
338
  }, item), {
281
339
  extendTypes: props.extendTypes
282
- }))), 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, {
283
341
  htmlType: "submit",
284
342
  type: "primary"
285
343
  }, ((_b = props.submit) == null ? void 0 : _b.text) || "Submit"));
286
344
  }
287
- Form.useForm = import_antd3.Form.useForm;
345
+ Form.useForm = import_antd4.Form.useForm;
288
346
  Form.Item = FormItem;
289
347
 
290
348
  // src/Table.tsx
291
- var import_react4 = require("react");
292
- var import_antd4 = require("antd");
349
+ var import_react6 = require("react");
350
+ var import_antd5 = require("antd");
293
351
  var import_icons3 = require("@ant-design/icons");
294
- 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
+ }
295
366
  function Table(props) {
296
- const [columns, setColumns] = (0, import_react4.useState)();
297
- (0, import_react4.useEffect)(() => {
367
+ const [columns, setColumns] = (0, import_react6.useState)();
368
+ (0, import_react6.useEffect)(() => {
298
369
  for (const item of props.items) {
299
370
  if (!item.key)
300
371
  item.key = item.id;
301
372
  if (!item.dataIndex)
302
373
  item.dataIndex = item.id;
303
374
  if (!item.title)
304
- item.title = (0, import_lodash3.upperFirst)(item.id);
375
+ item.title = (0, import_lodash4.upperFirst)(item.id);
305
376
  if (!item.type)
306
377
  item.type = "string";
307
378
  if (item.render)
308
379
  continue;
309
380
  if (props.extendTypes && props.extendTypes[item.type]) {
310
381
  if (props.extendTypes[item.type].children) {
311
- item.render = (value, values) => (0, import_react4.cloneElement)(props.extendTypes[item.type].children, {
382
+ item.render = (value, values) => (0, import_react6.cloneElement)(props.extendTypes[item.type].children, {
312
383
  value,
313
384
  values
314
385
  });
@@ -320,17 +391,67 @@ function Table(props) {
320
391
  }
321
392
  switch (item.type) {
322
393
  case "string[]":
323
- 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];
324
400
  break;
325
401
  case "number[]":
326
- item.render = (value) => value.join(", ");
402
+ item.render = (value) => processValue(item, value).join(", ");
327
403
  break;
328
404
  case "boolean":
329
- item.render = (value) => value ? /* @__PURE__ */ import_react.default.createElement(import_icons3.CheckOutlined, {
330
- 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
+ }
331
410
  }) : /* @__PURE__ */ import_react.default.createElement(import_icons3.CloseOutlined, {
332
- style: { marginTop: "4px" }
411
+ style: {
412
+ marginTop: "4px",
413
+ color: "#ff4d4f"
414
+ }
333
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);
334
455
  break;
335
456
  }
336
457
  }
@@ -338,14 +459,20 @@ function Table(props) {
338
459
  }, [props.items]);
339
460
  if (!columns)
340
461
  return null;
341
- return /* @__PURE__ */ import_react.default.createElement(import_antd4.Table, __spreadProps(__spreadValues({}, props), {
342
- rowKey: props.rowKey || "id",
343
- columns
344
- }));
462
+ return /* @__PURE__ */ import_react.default.createElement(FaasDataWrapper, {
463
+ dataSource: props.dataSource,
464
+ faasData: props.faasData,
465
+ render: ({ data }) => /* @__PURE__ */ import_react.default.createElement(import_antd5.Table, __spreadProps(__spreadValues({}, props), {
466
+ rowKey: props.rowKey || "id",
467
+ columns,
468
+ dataSource: data
469
+ }))
470
+ });
345
471
  }
346
472
  module.exports = __toCommonJS(src_exports);
347
473
  // Annotate the CommonJS export names for ESM import in node:
348
474
  0 && (module.exports = {
475
+ Blank,
349
476
  Description,
350
477
  Form,
351
478
  FormItem,
package/dist/index.mjs CHANGED
@@ -21,26 +21,71 @@ 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";
27
38
  import { upperFirst } from "lodash";
28
39
  import {
29
40
  cloneElement,
30
- useEffect,
31
- useState
41
+ useEffect as useEffect2,
42
+ useState as useState2
32
43
  } from "react";
33
- function DescriptionItemContent(props) {
34
- const [computedProps, setComputedProps] = useState();
44
+
45
+ // src/FaasWrapper.tsx
46
+ import { useEffect, useState } from "react";
47
+ import { getClient } from "@faasjs/react";
48
+ function FaasDataWrapper({
49
+ dataSource,
50
+ faasData,
51
+ render,
52
+ fallback
53
+ }) {
54
+ const [data, setData] = useState();
35
55
  useEffect(() => {
56
+ if (!faasData)
57
+ return;
58
+ getClient().faas(faasData.action, faasData.action).then((res) => setData(res.data));
59
+ }, [JSON.stringify(faasData)]);
60
+ if (dataSource)
61
+ return render({ data: dataSource });
62
+ if (!data)
63
+ return fallback || null;
64
+ return render({ data });
65
+ }
66
+
67
+ // src/Description.tsx
68
+ function DescriptionItemContent(props) {
69
+ const [computedProps, setComputedProps] = useState2();
70
+ useEffect2(() => {
71
+ var _a2;
36
72
  const propsCopy = __spreadValues({}, props);
37
73
  if (!propsCopy.item.title)
38
74
  propsCopy.item.title = upperFirst(propsCopy.item.id);
39
75
  if (!propsCopy.item.type)
40
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
+ }
41
86
  setComputedProps(propsCopy);
42
87
  }, [props]);
43
- if (!computedProps || typeof computedProps.value === "undefined" || computedProps.value === null)
88
+ if (!computedProps)
44
89
  return null;
45
90
  if (computedProps.extendTypes && computedProps.extendTypes[computedProps.item.type])
46
91
  if (computedProps.extendTypes[computedProps.item.type].children)
@@ -56,6 +101,8 @@ function DescriptionItemContent(props) {
56
101
  return cloneElement(computedProps.item.children, { value: computedProps.value });
57
102
  if (computedProps.item.render)
58
103
  return computedProps.item.render(computedProps.value, computedProps.values);
104
+ if (typeof computedProps.value === "undefined" || computedProps.value === null)
105
+ return null;
59
106
  switch (computedProps.item.type) {
60
107
  case "string[]":
61
108
  return computedProps.value.join(", ");
@@ -65,24 +112,34 @@ function DescriptionItemContent(props) {
65
112
  return computedProps.value.join(", ");
66
113
  case "boolean":
67
114
  return computedProps.value ? /* @__PURE__ */ React.createElement(CheckOutlined, {
68
- style: { marginTop: "4px" }
115
+ style: {
116
+ marginTop: "4px",
117
+ color: "#52c41a"
118
+ }
69
119
  }) : /* @__PURE__ */ React.createElement(CloseOutlined, {
70
- style: { marginTop: "4px" }
120
+ style: {
121
+ marginTop: "4px",
122
+ color: "#ff4d4f"
123
+ }
71
124
  });
72
125
  default:
73
126
  return computedProps.value;
74
127
  }
75
128
  }
76
129
  function Description(props) {
77
- return /* @__PURE__ */ React.createElement(Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ React.createElement(Descriptions.Item, {
78
- key: item.id,
79
- label: item.title || upperFirst(item.id)
80
- }, /* @__PURE__ */ React.createElement(DescriptionItemContent, {
81
- item,
82
- value: props.dataSource[item.id],
83
- values: props.dataSource,
84
- extendTypes: props.extendTypes
85
- }))));
130
+ return /* @__PURE__ */ React.createElement(FaasDataWrapper, {
131
+ dataSource: props.dataSource,
132
+ faasData: props.faasData,
133
+ render: ({ data }) => /* @__PURE__ */ React.createElement(Descriptions, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ React.createElement(Descriptions.Item, {
134
+ key: item.id,
135
+ label: item.title || upperFirst(item.id)
136
+ }, /* @__PURE__ */ React.createElement(DescriptionItemContent, {
137
+ item,
138
+ value: data[item.id],
139
+ values: data,
140
+ extendTypes: props.extendTypes
141
+ }))))
142
+ });
86
143
  }
87
144
 
88
145
  // src/Form.tsx
@@ -104,13 +161,13 @@ import {
104
161
  } from "antd";
105
162
  import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
106
163
  import {
107
- useEffect as useEffect2,
108
- useState as useState2
164
+ useEffect as useEffect3,
165
+ useState as useState3
109
166
  } from "react";
110
167
  import { upperFirst as upperFirst2 } from "lodash";
111
168
  function FormItem(props) {
112
- const [computedProps, setComputedProps] = useState2();
113
- useEffect2(() => {
169
+ const [computedProps, setComputedProps] = useState3();
170
+ useEffect3(() => {
114
171
  const propsCopy = __spreadValues({}, props);
115
172
  if (!propsCopy.title)
116
173
  propsCopy.title = upperFirst2(propsCopy.id);
@@ -218,11 +275,11 @@ function FormItem(props) {
218
275
  name: computedProps.name,
219
276
  rules: computedProps.rules
220
277
  }, (fields, { add, remove }, { errors }) => {
221
- var _a;
278
+ var _a2;
222
279
  return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.label && /* @__PURE__ */ React.createElement("div", {
223
280
  className: "ant-form-item-label"
224
281
  }, /* @__PURE__ */ React.createElement("label", {
225
- 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"
226
283
  }, computedProps.label)), fields.map((field) => /* @__PURE__ */ React.createElement(AntdForm.Item, {
227
284
  key: field.key
228
285
  }, /* @__PURE__ */ React.createElement(Row, {
@@ -259,8 +316,8 @@ function FormItem(props) {
259
316
 
260
317
  // src/Form.tsx
261
318
  function Form(props) {
262
- var _a, _b;
263
- 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({
264
321
  key: item.id
265
322
  }, item), {
266
323
  extendTypes: props.extendTypes
@@ -274,18 +331,32 @@ Form.Item = FormItem;
274
331
 
275
332
  // src/Table.tsx
276
333
  import {
277
- useState as useState3,
278
- useEffect as useEffect3,
334
+ useState as useState4,
335
+ useEffect as useEffect4,
279
336
  cloneElement as cloneElement2
280
337
  } from "react";
281
338
  import {
282
- Table as AntdTable
339
+ Table as AntdTable,
340
+ Radio
283
341
  } from "antd";
284
342
  import { CheckOutlined as CheckOutlined2, CloseOutlined as CloseOutlined2 } from "@ant-design/icons";
285
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
+ }
286
357
  function Table(props) {
287
- const [columns, setColumns] = useState3();
288
- useEffect3(() => {
358
+ const [columns, setColumns] = useState4();
359
+ useEffect4(() => {
289
360
  for (const item of props.items) {
290
361
  if (!item.key)
291
362
  item.key = item.id;
@@ -311,17 +382,67 @@ function Table(props) {
311
382
  }
312
383
  switch (item.type) {
313
384
  case "string[]":
314
- 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];
315
391
  break;
316
392
  case "number[]":
317
- item.render = (value) => value.join(", ");
393
+ item.render = (value) => processValue(item, value).join(", ");
318
394
  break;
319
395
  case "boolean":
320
- item.render = (value) => value ? /* @__PURE__ */ React.createElement(CheckOutlined2, {
321
- 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
+ }
322
401
  }) : /* @__PURE__ */ React.createElement(CloseOutlined2, {
323
- style: { marginTop: "4px" }
402
+ style: {
403
+ marginTop: "4px",
404
+ color: "#ff4d4f"
405
+ }
324
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);
325
446
  break;
326
447
  }
327
448
  }
@@ -329,12 +450,18 @@ function Table(props) {
329
450
  }, [props.items]);
330
451
  if (!columns)
331
452
  return null;
332
- return /* @__PURE__ */ React.createElement(AntdTable, __spreadProps(__spreadValues({}, props), {
333
- rowKey: props.rowKey || "id",
334
- columns
335
- }));
453
+ return /* @__PURE__ */ React.createElement(FaasDataWrapper, {
454
+ dataSource: props.dataSource,
455
+ faasData: props.faasData,
456
+ render: ({ data }) => /* @__PURE__ */ React.createElement(AntdTable, __spreadProps(__spreadValues({}, props), {
457
+ rowKey: props.rowKey || "id",
458
+ columns,
459
+ dataSource: data
460
+ }))
461
+ });
336
462
  }
337
463
  export {
464
+ Blank,
338
465
  Description,
339
466
  Form,
340
467
  FormItem,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faasjs/ant-design",
3
- "version": "0.0.2-beta.340",
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.340"
30
+ "@faasjs/react": "^0.0.2-beta.344"
31
31
  },
32
32
  "devDependencies": {
33
33
  "@types/lodash": "*",