@faasjs/ant-design 0.0.2-beta.325 → 0.0.2-beta.329

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 +54 -7
  4. package/dist/index.mjs +61 -9
  5. package/package.json +4 -2
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/s/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,12 +119,16 @@ 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"
@@ -118,18 +153,24 @@ 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"
@@ -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))), /* @__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,12 +102,16 @@ 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"
@@ -96,18 +136,24 @@ 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"
@@ -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))), /* @__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.325",
3
+ "version": "0.0.2-beta.329",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -16,7 +16,8 @@
16
16
  },
17
17
  "funding": "https://github.com/sponsors/faasjs",
18
18
  "scripts": {
19
- "build": "rm -rf ./dist && tsup src/index.ts --format esm,cjs --dts --inject react-shim.js"
19
+ "build": "tsup src/index.ts --format esm,cjs --inject react-shim.js",
20
+ "build:types": "tsup-node src/index.ts --dts-only"
20
21
  },
21
22
  "files": [
22
23
  "dist"
@@ -32,6 +33,7 @@
32
33
  "@types/lodash": "*",
33
34
  "@testing-library/jest-dom": "*",
34
35
  "@testing-library/react": "*",
36
+ "@testing-library/user-event": "*",
35
37
  "tsup": "*",
36
38
  "typescript": "*"
37
39
  },