@faasjs/ant-design 0.0.2-beta.327 → 0.0.2-beta.331

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 (5) hide show
  1. package/README.md +6 -25
  2. package/dist/index.d.ts +16 -6
  3. package/dist/index.js +45 -16
  4. package/dist/index.mjs +46 -16
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -27,33 +27,14 @@ type FaasItemProps = {
27
27
  }
28
28
  ```
29
29
 
30
- ### Component special props
30
+ ### Form
31
31
 
32
- Each component's props extends from `FaasItemProps` structures.
32
+ Form are based on [Ant Design's Form component](https://ant.design/components/form/#Form).
33
33
 
34
- #### DescriptionItemProps
34
+ <iframe src="https://codesandbox.io/embed/recursing-lumiere-8wn11" style="width:100%;height:500px;border:0;overflow:hidden;" title="faasjs-ant-design-form" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
35
35
 
36
- ```ts
37
- type DescriptionItemProps<T = any> = FaasItemProps & {
38
- content?: (props: {
39
- value: T
40
- }) => JSX.Element
41
- }
42
- ```
43
-
44
- #### FormItemProps
45
-
46
- ```ts
47
- type FormItemProps<T = any> = AntdFormItemProps<T> & FaasItemProps & {
48
- input?: (args: {
49
- value?: T
50
- onChange?: (value: T) => void
51
- }) => JSX.Element
52
- }
53
- ```
36
+ ### FormItem
54
37
 
55
- #### TableItemProps
38
+ Form are based on [Ant Design's Form.Item component](https://ant.design/components/form/#Form.Item).
56
39
 
57
- ```ts
58
- type TableItemProps<T = any> = AntdTableColumnProps<T> & FaasItemProps
59
- ```
40
+ <iframe src="https://codesandbox.io/embed/faasjs-ant-design-formitem-olqg5" style="width:100%;height:500px;border:0;overflow:hidden;" title="faasjs-ant-design-formitem" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
package/dist/index.d.ts CHANGED
@@ -15,15 +15,25 @@ declare type FaasItemProps = {
15
15
  };
16
16
 
17
17
  declare type StringProps = {
18
- type?: 'string' | 'string[]';
18
+ type?: 'string';
19
19
  input?: InputProps;
20
20
  };
21
+ declare type StringListProps = {
22
+ type: 'string[]';
23
+ input?: InputProps;
24
+ maxCount?: number;
25
+ };
21
26
  declare type NumberProps = {
22
- type?: 'number' | 'number[]';
27
+ type: 'number';
28
+ input?: InputNumberProps;
29
+ };
30
+ declare type NumberListProps = {
31
+ type: 'number[]';
23
32
  input?: InputNumberProps;
33
+ maxCount?: number;
24
34
  };
25
35
  declare type BooleanProps = {
26
- type?: 'boolean';
36
+ type: 'boolean';
27
37
  input?: SwitchProps;
28
38
  };
29
39
  declare type OptionType<T = any> = {
@@ -33,11 +43,11 @@ declare type OptionType<T = any> = {
33
43
  children?: Omit<OptionType<T>, 'children'>[];
34
44
  };
35
45
  declare type OptionsProps<T = any> = {
36
- options?: OptionType<T>[];
46
+ options?: OptionType<T>[] | string[] | number[];
37
47
  type?: 'string' | 'string[]' | 'number' | 'number[]';
38
48
  input?: SelectProps<any>;
39
49
  };
40
- declare type FormItemInputProps<T = any> = StringProps | NumberProps | BooleanProps | OptionsProps<T>;
50
+ declare type FormItemInputProps<T = any> = StringProps | StringListProps | NumberProps | NumberListProps | BooleanProps | OptionsProps<T>;
41
51
  declare type FormItemProps<T = any> = {
42
52
  children?: JSX.Element;
43
53
  rules?: RuleObject[];
@@ -46,7 +56,7 @@ declare type FormItemProps<T = any> = {
46
56
  declare function FormItem<T = any>(props: FormItemProps<T>): JSX.Element;
47
57
 
48
58
  declare type FormProps<T = any> = {
49
- items: FormItemProps[];
59
+ items?: FormItemProps[];
50
60
  } & FormProps$1<T>;
51
61
  declare const Form: {
52
62
  <T = any>(props: FormProps<T>): JSX.Element;
package/dist/index.js CHANGED
@@ -75,15 +75,36 @@ function FormItem(props) {
75
75
  propsCopy.type = "string";
76
76
  if (!propsCopy.rules)
77
77
  propsCopy.rules = [];
78
- if (propsCopy.required)
79
- propsCopy.rules.push({
80
- required: true,
81
- message: `${propsCopy.label} is required`
82
- });
78
+ if (propsCopy.required) {
79
+ if (propsCopy.type.endsWith("[]"))
80
+ propsCopy.rules.push({
81
+ required: true,
82
+ validator: async (_, values) => {
83
+ if (!values || values.length < 1)
84
+ return Promise.reject(Error(`${propsCopy.label || propsCopy.title} is required`));
85
+ }
86
+ });
87
+ else
88
+ propsCopy.rules.push({
89
+ required: true,
90
+ message: `${propsCopy.label || propsCopy.title} is required`
91
+ });
92
+ }
83
93
  if (!propsCopy.input)
84
94
  propsCopy.input = {};
85
95
  if (propsCopy.options) {
86
- propsCopy.input.options = propsCopy.options;
96
+ const options = [];
97
+ if (propsCopy.options.length > 0)
98
+ for (const option of propsCopy.options) {
99
+ if (typeof option === "object")
100
+ options.push(option);
101
+ else
102
+ options.push({
103
+ label: (0, import_lodash.upperFirst)(option.toString()),
104
+ value: option
105
+ });
106
+ }
107
+ propsCopy.input.options = options;
87
108
  }
88
109
  switch (propsCopy.type) {
89
110
  case "boolean":
@@ -107,31 +128,33 @@ function FormItem(props) {
107
128
  return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.List, {
108
129
  name: computedProps.name,
109
130
  rules: computedProps.rules
110
- }, (fields, { add, remove }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
131
+ }, (fields, { add, remove }, { errors }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
111
132
  className: "ant-form-item-label"
112
133
  }, /* @__PURE__ */ import_react.default.createElement("label", {
113
134
  className: computedProps.rules.find((r) => r.required) && "ant-form-item-required"
114
135
  }, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, {
115
136
  key: field.key
116
137
  }, /* @__PURE__ */ import_react.default.createElement(import_antd.Row, {
117
- gutter: 16
138
+ gutter: 24
118
139
  }, /* @__PURE__ */ import_react.default.createElement(import_antd.Col, {
119
140
  span: 23
120
141
  }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, __spreadProps(__spreadValues({}, field), {
121
142
  noStyle: true
122
143
  }), /* @__PURE__ */ import_react.default.createElement(import_antd.Input, __spreadValues({}, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd.Col, {
123
144
  span: 1
124
- }, !computedProps.rules.find((r) => r.required) && /* @__PURE__ */ import_react.default.createElement(import_antd.Button, {
145
+ }, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(import_antd.Button, {
125
146
  danger: true,
126
147
  type: "link",
127
148
  style: { float: "right" },
128
149
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MinusCircleOutlined, null),
129
150
  onClick: () => remove(field.name)
130
- }))))), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, {
151
+ }))))), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ import_react.default.createElement(import_antd.Button, {
131
152
  type: "dashed",
132
153
  block: true,
133
154
  onClick: () => add(),
134
155
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
156
+ }), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.ErrorList, {
157
+ errors
135
158
  }))));
136
159
  case "number":
137
160
  return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, __spreadValues({}, computedProps), computedProps.options ? /* @__PURE__ */ import_react.default.createElement(import_antd.Select, __spreadValues({}, computedProps.input)) : /* @__PURE__ */ import_react.default.createElement(import_antd.InputNumber, __spreadValues({
@@ -145,7 +168,7 @@ function FormItem(props) {
145
168
  return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.List, {
146
169
  name: computedProps.name,
147
170
  rules: computedProps.rules
148
- }, (fields, { add, remove }) => {
171
+ }, (fields, { add, remove }, { errors }) => {
149
172
  var _a;
150
173
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
151
174
  className: "ant-form-item-label"
@@ -154,7 +177,7 @@ function FormItem(props) {
154
177
  }, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, {
155
178
  key: field.key
156
179
  }, /* @__PURE__ */ import_react.default.createElement(import_antd.Row, {
157
- gutter: 16
180
+ gutter: 24
158
181
  }, /* @__PURE__ */ import_react.default.createElement(import_antd.Col, {
159
182
  span: 23
160
183
  }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, __spreadProps(__spreadValues({}, field), {
@@ -163,17 +186,19 @@ function FormItem(props) {
163
186
  style: { width: "100%" }
164
187
  }, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd.Col, {
165
188
  span: 1
166
- }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, {
189
+ }, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ import_react.default.createElement(import_antd.Button, {
167
190
  danger: true,
168
191
  type: "link",
169
192
  style: { float: "right" },
170
193
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MinusCircleOutlined, null),
171
194
  onClick: () => remove(field.name)
172
- }))))), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, {
195
+ }))))), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ import_react.default.createElement(import_antd.Button, {
173
196
  type: "dashed",
174
197
  block: true,
175
198
  onClick: () => add(),
176
199
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
200
+ }), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.ErrorList, {
201
+ errors
177
202
  })));
178
203
  });
179
204
  case "boolean":
@@ -185,9 +210,13 @@ function FormItem(props) {
185
210
 
186
211
  // src/components/Form.tsx
187
212
  var Form = function(props) {
188
- return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadValues({
213
+ var _a;
214
+ return /* @__PURE__ */ import_react.default.createElement(import_antd2.Form, __spreadValues({}, props), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ import_react.default.createElement(FormItem, __spreadValues({
189
215
  key: item.id
190
- }, item))));
216
+ }, item))), props.children, /* @__PURE__ */ import_react.default.createElement(import_antd2.Button, {
217
+ htmlType: "submit",
218
+ type: "primary"
219
+ }, "Submit"));
191
220
  };
192
221
  Form.useForm = import_antd2.Form.useForm;
193
222
  module.exports = __toCommonJS(src_exports);
package/dist/index.mjs CHANGED
@@ -23,6 +23,7 @@ import React from "react";
23
23
 
24
24
  // src/components/Form.tsx
25
25
  import {
26
+ Button as Button2,
26
27
  Form as AntdForm2
27
28
  } from "antd";
28
29
 
@@ -57,15 +58,36 @@ function FormItem(props) {
57
58
  propsCopy.type = "string";
58
59
  if (!propsCopy.rules)
59
60
  propsCopy.rules = [];
60
- if (propsCopy.required)
61
- propsCopy.rules.push({
62
- required: true,
63
- message: `${propsCopy.label} is required`
64
- });
61
+ if (propsCopy.required) {
62
+ if (propsCopy.type.endsWith("[]"))
63
+ propsCopy.rules.push({
64
+ required: true,
65
+ validator: async (_, values) => {
66
+ if (!values || values.length < 1)
67
+ return Promise.reject(Error(`${propsCopy.label || propsCopy.title} is required`));
68
+ }
69
+ });
70
+ else
71
+ propsCopy.rules.push({
72
+ required: true,
73
+ message: `${propsCopy.label || propsCopy.title} is required`
74
+ });
75
+ }
65
76
  if (!propsCopy.input)
66
77
  propsCopy.input = {};
67
78
  if (propsCopy.options) {
68
- propsCopy.input.options = propsCopy.options;
79
+ const options = [];
80
+ if (propsCopy.options.length > 0)
81
+ for (const option of propsCopy.options) {
82
+ if (typeof option === "object")
83
+ options.push(option);
84
+ else
85
+ options.push({
86
+ label: upperFirst(option.toString()),
87
+ value: option
88
+ });
89
+ }
90
+ propsCopy.input.options = options;
69
91
  }
70
92
  switch (propsCopy.type) {
71
93
  case "boolean":
@@ -89,31 +111,33 @@ function FormItem(props) {
89
111
  return /* @__PURE__ */ React.createElement(AntdForm.List, {
90
112
  name: computedProps.name,
91
113
  rules: computedProps.rules
92
- }, (fields, { add, remove }) => /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.label && /* @__PURE__ */ React.createElement("div", {
114
+ }, (fields, { add, remove }, { errors }) => /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.label && /* @__PURE__ */ React.createElement("div", {
93
115
  className: "ant-form-item-label"
94
116
  }, /* @__PURE__ */ React.createElement("label", {
95
117
  className: computedProps.rules.find((r) => r.required) && "ant-form-item-required"
96
118
  }, computedProps.label)), fields.map((field) => /* @__PURE__ */ React.createElement(AntdForm.Item, {
97
119
  key: field.key
98
120
  }, /* @__PURE__ */ React.createElement(Row, {
99
- gutter: 16
121
+ gutter: 24
100
122
  }, /* @__PURE__ */ React.createElement(Col, {
101
123
  span: 23
102
124
  }, /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadProps(__spreadValues({}, field), {
103
125
  noStyle: true
104
126
  }), /* @__PURE__ */ React.createElement(Input, __spreadValues({}, computedProps.input)))), /* @__PURE__ */ React.createElement(Col, {
105
127
  span: 1
106
- }, !computedProps.rules.find((r) => r.required) && /* @__PURE__ */ React.createElement(Button, {
128
+ }, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ React.createElement(Button, {
107
129
  danger: true,
108
130
  type: "link",
109
131
  style: { float: "right" },
110
132
  icon: /* @__PURE__ */ React.createElement(MinusCircleOutlined, null),
111
133
  onClick: () => remove(field.name)
112
- }))))), /* @__PURE__ */ React.createElement(AntdForm.Item, null, /* @__PURE__ */ React.createElement(Button, {
134
+ }))))), /* @__PURE__ */ React.createElement(AntdForm.Item, null, (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ React.createElement(Button, {
113
135
  type: "dashed",
114
136
  block: true,
115
137
  onClick: () => add(),
116
138
  icon: /* @__PURE__ */ React.createElement(PlusOutlined, null)
139
+ }), /* @__PURE__ */ React.createElement(AntdForm.ErrorList, {
140
+ errors
117
141
  }))));
118
142
  case "number":
119
143
  return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), computedProps.options ? /* @__PURE__ */ React.createElement(Select, __spreadValues({}, computedProps.input)) : /* @__PURE__ */ React.createElement(InputNumber, __spreadValues({
@@ -127,7 +151,7 @@ function FormItem(props) {
127
151
  return /* @__PURE__ */ React.createElement(AntdForm.List, {
128
152
  name: computedProps.name,
129
153
  rules: computedProps.rules
130
- }, (fields, { add, remove }) => {
154
+ }, (fields, { add, remove }, { errors }) => {
131
155
  var _a;
132
156
  return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.label && /* @__PURE__ */ React.createElement("div", {
133
157
  className: "ant-form-item-label"
@@ -136,7 +160,7 @@ function FormItem(props) {
136
160
  }, computedProps.label)), fields.map((field) => /* @__PURE__ */ React.createElement(AntdForm.Item, {
137
161
  key: field.key
138
162
  }, /* @__PURE__ */ React.createElement(Row, {
139
- gutter: 16
163
+ gutter: 24
140
164
  }, /* @__PURE__ */ React.createElement(Col, {
141
165
  span: 23
142
166
  }, /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadProps(__spreadValues({}, field), {
@@ -145,17 +169,19 @@ function FormItem(props) {
145
169
  style: { width: "100%" }
146
170
  }, computedProps.input)))), /* @__PURE__ */ React.createElement(Col, {
147
171
  span: 1
148
- }, /* @__PURE__ */ React.createElement(Button, {
172
+ }, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ React.createElement(Button, {
149
173
  danger: true,
150
174
  type: "link",
151
175
  style: { float: "right" },
152
176
  icon: /* @__PURE__ */ React.createElement(MinusCircleOutlined, null),
153
177
  onClick: () => remove(field.name)
154
- }))))), /* @__PURE__ */ React.createElement(AntdForm.Item, null, /* @__PURE__ */ React.createElement(Button, {
178
+ }))))), /* @__PURE__ */ React.createElement(AntdForm.Item, null, (!computedProps.maxCount || computedProps.maxCount > fields.length) && /* @__PURE__ */ React.createElement(Button, {
155
179
  type: "dashed",
156
180
  block: true,
157
181
  onClick: () => add(),
158
182
  icon: /* @__PURE__ */ React.createElement(PlusOutlined, null)
183
+ }), /* @__PURE__ */ React.createElement(AntdForm.ErrorList, {
184
+ errors
159
185
  })));
160
186
  });
161
187
  case "boolean":
@@ -167,9 +193,13 @@ function FormItem(props) {
167
193
 
168
194
  // src/components/Form.tsx
169
195
  var Form = function(props) {
170
- return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, props), props.items.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadValues({
196
+ var _a;
197
+ return /* @__PURE__ */ React.createElement(AntdForm2, __spreadValues({}, props), (_a = props.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ React.createElement(FormItem, __spreadValues({
171
198
  key: item.id
172
- }, item))));
199
+ }, item))), props.children, /* @__PURE__ */ React.createElement(Button2, {
200
+ htmlType: "submit",
201
+ type: "primary"
202
+ }, "Submit"));
173
203
  };
174
204
  Form.useForm = AntdForm2.useForm;
175
205
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faasjs/ant-design",
3
- "version": "0.0.2-beta.327",
3
+ "version": "0.0.2-beta.331",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",