@faasjs/ant-design 0.0.2-beta.326 → 0.0.2-beta.330

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 +24 -9
  3. package/dist/index.js +58 -11
  4. package/dist/index.mjs +65 -13
  5. package/package.json +2 -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
@@ -1,6 +1,7 @@
1
1
  import * as antd_lib_form_Form from 'antd/lib/form/Form';
2
- import { FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, FormProps as FormProps$1 } from 'antd';
2
+ import { FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, FormProps as FormProps$1 } from 'antd';
3
3
  import { RuleObject } from 'rc-field-form/lib/interface';
4
+ import { ReactNode } from 'react';
4
5
 
5
6
  declare type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean';
6
7
  declare type FaasItemProps = {
@@ -13,25 +14,39 @@ declare type FaasItemProps = {
13
14
  title?: string;
14
15
  };
15
16
 
16
- declare type FormItemInputProps = {
17
+ declare type StringProps = {
17
18
  type?: 'string' | 'string[]';
18
19
  input?: InputProps;
19
- } | {
20
- type: 'number' | 'number[]';
20
+ };
21
+ declare type NumberProps = {
22
+ type?: 'number' | 'number[]';
21
23
  input?: InputNumberProps;
22
- } | {
23
- type: 'boolean';
24
+ };
25
+ declare type BooleanProps = {
26
+ type?: 'boolean';
24
27
  input?: SwitchProps;
25
28
  };
29
+ declare type OptionType<T = any> = {
30
+ label: ReactNode;
31
+ value?: T;
32
+ disabled?: boolean;
33
+ children?: Omit<OptionType<T>, 'children'>[];
34
+ };
35
+ declare type OptionsProps<T = any> = {
36
+ options?: OptionType<T>[] | string[] | number[];
37
+ type?: 'string' | 'string[]' | 'number' | 'number[]';
38
+ input?: SelectProps<any>;
39
+ };
40
+ declare type FormItemInputProps<T = any> = StringProps | NumberProps | BooleanProps | OptionsProps<T>;
26
41
  declare type FormItemProps<T = any> = {
27
42
  children?: JSX.Element;
28
43
  rules?: RuleObject[];
29
44
  label?: string | false;
30
- } & FormItemInputProps & FaasItemProps & FormItemProps$1<T>;
31
- declare function FormItem<T>(props: FormItemProps<T>): JSX.Element;
45
+ } & FormItemInputProps<T> & FaasItemProps & FormItemProps$1<T>;
46
+ declare function FormItem<T = any>(props: FormItemProps<T>): JSX.Element;
32
47
 
33
48
  declare type FormProps<T = any> = {
34
- items: FormItemProps[];
49
+ items?: FormItemProps[];
35
50
  } & FormProps$1<T>;
36
51
  declare const Form: {
37
52
  <T = any>(props: FormProps<T>): JSX.Element;
package/dist/index.js CHANGED
@@ -75,6 +75,37 @@ function FormItem(props) {
75
75
  propsCopy.type = "string";
76
76
  if (!propsCopy.rules)
77
77
  propsCopy.rules = [];
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
+ }
93
+ if (!propsCopy.input)
94
+ propsCopy.input = {};
95
+ if (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;
108
+ }
78
109
  switch (propsCopy.type) {
79
110
  case "boolean":
80
111
  propsCopy.valuePropName = "checked";
@@ -88,26 +119,30 @@ function FormItem(props) {
88
119
  return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, __spreadValues({}, computedProps), computedProps.children);
89
120
  switch (computedProps.type) {
90
121
  case "string":
91
- return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd.Input, __spreadValues({}, computedProps.input)));
122
+ 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.Input, __spreadValues({}, computedProps.input)));
92
123
  case "string[]":
124
+ if (computedProps.options)
125
+ return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd.Select, __spreadValues({
126
+ mode: "multiple"
127
+ }, computedProps.input)));
93
128
  return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.List, {
94
129
  name: computedProps.name,
95
130
  rules: computedProps.rules
96
- }, (fields, { add, remove }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__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", {
97
132
  className: "ant-form-item-label"
98
133
  }, /* @__PURE__ */ import_react.default.createElement("label", {
99
134
  className: computedProps.rules.find((r) => r.required) && "ant-form-item-required"
100
135
  }, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, {
101
136
  key: field.key
102
137
  }, /* @__PURE__ */ import_react.default.createElement(import_antd.Row, {
103
- gutter: 16
138
+ gutter: 24
104
139
  }, /* @__PURE__ */ import_react.default.createElement(import_antd.Col, {
105
140
  span: 23
106
141
  }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, __spreadProps(__spreadValues({}, field), {
107
142
  noStyle: true
108
143
  }), /* @__PURE__ */ import_react.default.createElement(import_antd.Input, __spreadValues({}, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd.Col, {
109
144
  span: 1
110
- }, !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, {
111
146
  danger: true,
112
147
  type: "link",
113
148
  style: { float: "right" },
@@ -118,25 +153,31 @@ function FormItem(props) {
118
153
  block: true,
119
154
  onClick: () => add(),
120
155
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
156
+ }), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.ErrorList, {
157
+ errors
121
158
  }))));
122
159
  case "number":
123
- return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd.InputNumber, __spreadValues({
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({
124
161
  style: { width: "100%" }
125
162
  }, computedProps.input)));
126
163
  case "number[]":
164
+ if (computedProps.options)
165
+ return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, __spreadValues({}, computedProps), /* @__PURE__ */ import_react.default.createElement(import_antd.Select, __spreadValues({
166
+ mode: "multiple"
167
+ }, computedProps.input)));
127
168
  return /* @__PURE__ */ import_react.default.createElement(import_antd.Form.List, {
128
169
  name: computedProps.name,
129
170
  rules: computedProps.rules
130
- }, (fields, { add, remove }) => {
171
+ }, (fields, { add, remove }, { errors }) => {
131
172
  var _a;
132
- return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", {
173
+ return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, computedProps.label && /* @__PURE__ */ import_react.default.createElement("div", {
133
174
  className: "ant-form-item-label"
134
175
  }, /* @__PURE__ */ import_react.default.createElement("label", {
135
176
  className: ((_a = computedProps.rules) == null ? void 0 : _a.find((r) => r.required)) && "ant-form-item-required"
136
177
  }, computedProps.label)), fields.map((field) => /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, {
137
178
  key: field.key
138
179
  }, /* @__PURE__ */ import_react.default.createElement(import_antd.Row, {
139
- gutter: 16
180
+ gutter: 24
140
181
  }, /* @__PURE__ */ import_react.default.createElement(import_antd.Col, {
141
182
  span: 23
142
183
  }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, __spreadProps(__spreadValues({}, field), {
@@ -145,7 +186,7 @@ function FormItem(props) {
145
186
  style: { width: "100%" }
146
187
  }, computedProps.input)))), /* @__PURE__ */ import_react.default.createElement(import_antd.Col, {
147
188
  span: 1
148
- }, /* @__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, {
149
190
  danger: true,
150
191
  type: "link",
151
192
  style: { float: "right" },
@@ -156,6 +197,8 @@ function FormItem(props) {
156
197
  block: true,
157
198
  onClick: () => add(),
158
199
  icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
200
+ }), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.ErrorList, {
201
+ errors
159
202
  })));
160
203
  });
161
204
  case "boolean":
@@ -167,9 +210,13 @@ function FormItem(props) {
167
210
 
168
211
  // src/components/Form.tsx
169
212
  var Form = function(props) {
170
- 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({
171
215
  key: item.id
172
- }, item))));
216
+ }, item))), props.children, /* @__PURE__ */ import_react.default.createElement(import_antd2.Button, {
217
+ htmlType: "submit",
218
+ type: "primary"
219
+ }, "Submit"));
173
220
  };
174
221
  Form.useForm = import_antd2.Form.useForm;
175
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
 
@@ -34,10 +35,14 @@ import {
34
35
  Form as AntdForm,
35
36
  Input,
36
37
  InputNumber,
37
- Switch
38
+ Switch,
39
+ Select
38
40
  } from "antd";
39
41
  import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
40
- import { useEffect, useState } from "react";
42
+ import {
43
+ useEffect,
44
+ useState
45
+ } from "react";
41
46
  import { upperFirst } from "lodash";
42
47
  function FormItem(props) {
43
48
  const [computedProps, setComputedProps] = useState();
@@ -53,6 +58,37 @@ function FormItem(props) {
53
58
  propsCopy.type = "string";
54
59
  if (!propsCopy.rules)
55
60
  propsCopy.rules = [];
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
+ }
76
+ if (!propsCopy.input)
77
+ propsCopy.input = {};
78
+ if (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;
91
+ }
56
92
  switch (propsCopy.type) {
57
93
  case "boolean":
58
94
  propsCopy.valuePropName = "checked";
@@ -66,26 +102,30 @@ function FormItem(props) {
66
102
  return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), computedProps.children);
67
103
  switch (computedProps.type) {
68
104
  case "string":
69
- return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), /* @__PURE__ */ React.createElement(Input, __spreadValues({}, computedProps.input)));
105
+ return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), computedProps.options ? /* @__PURE__ */ React.createElement(Select, __spreadValues({}, computedProps.input)) : /* @__PURE__ */ React.createElement(Input, __spreadValues({}, computedProps.input)));
70
106
  case "string[]":
107
+ if (computedProps.options)
108
+ return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), /* @__PURE__ */ React.createElement(Select, __spreadValues({
109
+ mode: "multiple"
110
+ }, computedProps.input)));
71
111
  return /* @__PURE__ */ React.createElement(AntdForm.List, {
72
112
  name: computedProps.name,
73
113
  rules: computedProps.rules
74
- }, (fields, { add, remove }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
114
+ }, (fields, { add, remove }, { errors }) => /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.label && /* @__PURE__ */ React.createElement("div", {
75
115
  className: "ant-form-item-label"
76
116
  }, /* @__PURE__ */ React.createElement("label", {
77
117
  className: computedProps.rules.find((r) => r.required) && "ant-form-item-required"
78
118
  }, computedProps.label)), fields.map((field) => /* @__PURE__ */ React.createElement(AntdForm.Item, {
79
119
  key: field.key
80
120
  }, /* @__PURE__ */ React.createElement(Row, {
81
- gutter: 16
121
+ gutter: 24
82
122
  }, /* @__PURE__ */ React.createElement(Col, {
83
123
  span: 23
84
124
  }, /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadProps(__spreadValues({}, field), {
85
125
  noStyle: true
86
126
  }), /* @__PURE__ */ React.createElement(Input, __spreadValues({}, computedProps.input)))), /* @__PURE__ */ React.createElement(Col, {
87
127
  span: 1
88
- }, !computedProps.rules.find((r) => r.required) && /* @__PURE__ */ React.createElement(Button, {
128
+ }, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ React.createElement(Button, {
89
129
  danger: true,
90
130
  type: "link",
91
131
  style: { float: "right" },
@@ -96,25 +136,31 @@ function FormItem(props) {
96
136
  block: true,
97
137
  onClick: () => add(),
98
138
  icon: /* @__PURE__ */ React.createElement(PlusOutlined, null)
139
+ }), /* @__PURE__ */ React.createElement(AntdForm.ErrorList, {
140
+ errors
99
141
  }))));
100
142
  case "number":
101
- return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), /* @__PURE__ */ React.createElement(InputNumber, __spreadValues({
143
+ return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), computedProps.options ? /* @__PURE__ */ React.createElement(Select, __spreadValues({}, computedProps.input)) : /* @__PURE__ */ React.createElement(InputNumber, __spreadValues({
102
144
  style: { width: "100%" }
103
145
  }, computedProps.input)));
104
146
  case "number[]":
147
+ if (computedProps.options)
148
+ return /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadValues({}, computedProps), /* @__PURE__ */ React.createElement(Select, __spreadValues({
149
+ mode: "multiple"
150
+ }, computedProps.input)));
105
151
  return /* @__PURE__ */ React.createElement(AntdForm.List, {
106
152
  name: computedProps.name,
107
153
  rules: computedProps.rules
108
- }, (fields, { add, remove }) => {
154
+ }, (fields, { add, remove }, { errors }) => {
109
155
  var _a;
110
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
156
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, computedProps.label && /* @__PURE__ */ React.createElement("div", {
111
157
  className: "ant-form-item-label"
112
158
  }, /* @__PURE__ */ React.createElement("label", {
113
159
  className: ((_a = computedProps.rules) == null ? void 0 : _a.find((r) => r.required)) && "ant-form-item-required"
114
160
  }, computedProps.label)), fields.map((field) => /* @__PURE__ */ React.createElement(AntdForm.Item, {
115
161
  key: field.key
116
162
  }, /* @__PURE__ */ React.createElement(Row, {
117
- gutter: 16
163
+ gutter: 24
118
164
  }, /* @__PURE__ */ React.createElement(Col, {
119
165
  span: 23
120
166
  }, /* @__PURE__ */ React.createElement(AntdForm.Item, __spreadProps(__spreadValues({}, field), {
@@ -123,7 +169,7 @@ function FormItem(props) {
123
169
  style: { width: "100%" }
124
170
  }, computedProps.input)))), /* @__PURE__ */ React.createElement(Col, {
125
171
  span: 1
126
- }, /* @__PURE__ */ React.createElement(Button, {
172
+ }, (!computedProps.rules.find((r) => r.required) || field.key > 0) && /* @__PURE__ */ React.createElement(Button, {
127
173
  danger: true,
128
174
  type: "link",
129
175
  style: { float: "right" },
@@ -134,6 +180,8 @@ function FormItem(props) {
134
180
  block: true,
135
181
  onClick: () => add(),
136
182
  icon: /* @__PURE__ */ React.createElement(PlusOutlined, null)
183
+ }), /* @__PURE__ */ React.createElement(AntdForm.ErrorList, {
184
+ errors
137
185
  })));
138
186
  });
139
187
  case "boolean":
@@ -145,9 +193,13 @@ function FormItem(props) {
145
193
 
146
194
  // src/components/Form.tsx
147
195
  var Form = function(props) {
148
- 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({
149
198
  key: item.id
150
- }, item))));
199
+ }, item))), props.children, /* @__PURE__ */ React.createElement(Button2, {
200
+ htmlType: "submit",
201
+ type: "primary"
202
+ }, "Submit"));
151
203
  };
152
204
  Form.useForm = AntdForm2.useForm;
153
205
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faasjs/ant-design",
3
- "version": "0.0.2-beta.326",
3
+ "version": "0.0.2-beta.330",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -33,6 +33,7 @@
33
33
  "@types/lodash": "*",
34
34
  "@testing-library/jest-dom": "*",
35
35
  "@testing-library/react": "*",
36
+ "@testing-library/user-event": "*",
36
37
  "tsup": "*",
37
38
  "typescript": "*"
38
39
  },