@faasjs/ant-design 0.0.1-development → 0.0.2-development

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 (10) hide show
  1. package/lib/components/Description.d.ts +11 -0
  2. package/lib/components/Description.stories.d.ts +6 -0
  3. package/lib/components/FormItem.d.ts +3 -6
  4. package/lib/components/FormItem.stories.d.ts +4 -1
  5. package/lib/components/Table.d.ts +8 -0
  6. package/lib/components/Table.stories.d.ts +6 -0
  7. package/lib/components/data.d.ts +1 -1
  8. package/lib/index.esm.js +36 -11
  9. package/lib/index.js +35 -10
  10. package/package.json +5 -3
package/lib/components/Description.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import { DescriptionsProps } from 'antd';
3
+ import { FaasItemProps } from './data';
4
+ export declare type DescriptionItemProps<T = any> = FaasItemProps & {
5
+ children?: JSX.Element;
6
+ };
7
+ export declare type DescriptionProps = DescriptionsProps & {
8
+ items: DescriptionItemProps[];
9
+ dataSource: any;
10
+ };
11
+ export declare function Description(props: DescriptionProps): JSX.Element;
package/lib/components/Description.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ComponentStory, ComponentMeta } from '@storybook/react';
2
+ import { Description } from './Description';
3
+ import 'antd/dist/antd.css';
4
+ declare const _default: ComponentMeta<typeof Description>;
5
+ export default _default;
6
+ export declare const Default: ComponentStory<typeof Description>;
package/lib/components/FormItem.d.ts CHANGED
@@ -1,10 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { FormItemProps as AntdFormItemProps } from 'antd';
3
3
  import { FaasItemProps } from './data';
4
- export declare type FormItemProps<Value = any> = AntdFormItemProps<Value> & FaasItemProps & {
5
- input?: (args: {
6
- value?: Value;
7
- onChange?: (value: Value) => void;
8
- }) => JSX.Element;
4
+ export declare type FormItemProps<T = any> = AntdFormItemProps<T> & FaasItemProps & {
5
+ children?: JSX.Element;
9
6
  };
10
- export declare function FormItem<Value>(props: FormItemProps<Value>): JSX.Element;
7
+ export declare function FormItem<T>(props: FormItemProps<T>): JSX.Element;
package/lib/components/FormItem.stories.d.ts CHANGED
@@ -5,4 +5,7 @@ declare const _default: ComponentMeta<typeof FormItem>;
5
5
  export default _default;
6
6
  export declare const String: ComponentStory<typeof FormItem>;
7
7
  export declare const StringList: ComponentStory<typeof FormItem>;
8
- export declare const CustomRender: ComponentStory<typeof FormItem>;
8
+ export declare const Number: ComponentStory<typeof FormItem>;
9
+ export declare const NumberList: ComponentStory<typeof FormItem>;
10
+ export declare const Boolean: ComponentStory<typeof FormItem>;
11
+ export declare const Children: ComponentStory<typeof FormItem>;
package/lib/components/Table.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import { TableProps as AntdTableProps, TableColumnProps as AntdTableColumnProps } from 'antd';
3
+ import { FaasItemProps } from './data';
4
+ export declare type TableItemProps<T = any> = AntdTableColumnProps<T> & FaasItemProps;
5
+ export declare type TableProps<T = any> = AntdTableProps<T> & {
6
+ items: TableItemProps[];
7
+ };
8
+ export declare function Table(props: TableProps): JSX.Element;
package/lib/components/Table.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ComponentStory, ComponentMeta } from '@storybook/react';
2
+ import { Table } from './Table';
3
+ import 'antd/dist/antd.css';
4
+ declare const _default: ComponentMeta<typeof Table>;
5
+ export default _default;
6
+ export declare const Default: ComponentStory<typeof Table>;
package/lib/components/data.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare type FaasItemType = 'string' | 'string[]';
1
+ export declare type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean';
2
2
  export declare type FaasItemProps = {
3
3
  type: FaasItemType;
4
4
  id: string;
package/lib/index.esm.js CHANGED
@@ -1,22 +1,47 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { Form as Form$1, Row, Col, Input, Button } from 'antd';
2
+ import { Form as Form$1, Switch, Row, Col, InputNumber, Button, Input } from 'antd';
3
3
  import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
4
+ import { useState, useEffect } from 'react';
5
+ import { upperFirst } from 'lodash';
4
6
 
5
7
  function FormItem(props) {
6
- console.log(props);
7
- if (props.input)
8
- return jsx(Form$1.Item, { label: props.title || props.id, name: props.id, ...props, children: jsx(props.input, {}, void 0) }, void 0);
9
- switch (props.type) {
8
+ const [computedProps, setComputedProps] = useState();
9
+ useEffect(() => {
10
+ const propsCopy = { ...props };
11
+ if (!propsCopy.title)
12
+ propsCopy.title = upperFirst(propsCopy.id);
13
+ if (!propsCopy.label)
14
+ propsCopy.label = propsCopy.title;
15
+ if (!propsCopy.name)
16
+ propsCopy.name = propsCopy.id;
17
+ switch (propsCopy.type) {
18
+ case 'boolean':
19
+ propsCopy.valuePropName = 'checked';
20
+ break;
21
+ }
22
+ setComputedProps(propsCopy);
23
+ }, [JSON.stringify(props)]);
24
+ if (!computedProps)
25
+ return null;
26
+ if (computedProps.children)
27
+ return jsx(Form$1.Item, { ...computedProps, children: computedProps.children }, void 0);
28
+ switch (computedProps.type) {
10
29
  case 'string':
11
- return jsx(Form$1.Item, { label: props.title || props.id, name: props.id, ...props, children: jsx(Input, {}, void 0) }, void 0);
30
+ return jsx(Form$1.Item, { ...computedProps, children: jsx(Input, {}, void 0) }, void 0);
12
31
  case 'string[]':
13
- return jsx(Form$1.List, { name: props.id, rules: props.rules, children: (fields, { add, remove }) => {
32
+ return jsx(Form$1.List, { name: computedProps.name, rules: computedProps.rules, children: (fields, { add, remove }) => {
33
+ var _a;
34
+ return jsxs(Fragment, { children: [jsx("div", { className: 'ant-row ant-form-item ant-form-item-label', style: { rowGap: '0px' }, children: jsx("label", { className: ((_a = computedProps.rules) === null || _a === void 0 ? void 0 : _a.find((r) => r.required)) && 'ant-form-item-required', children: computedProps.label }, void 0) }, void 0), fields.map(field => jsx(Form$1.Item, { children: jsxs(Row, { gutter: 16, children: [jsx(Col, { span: 23, children: jsx(Form$1.Item, { ...field, noStyle: true, children: jsx(Input, {}, void 0) }, void 0) }, void 0), jsx(Col, { span: 1, children: jsx(Button, { danger: true, type: 'link', style: { float: 'right' }, icon: jsx(MinusCircleOutlined, {}, void 0), onClick: () => remove(field.name) }, void 0) }, void 0)] }, void 0) }, field.key)), jsx(Form$1.Item, { children: jsx(Button, { type: 'dashed', block: true, onClick: () => add(), icon: jsx(PlusOutlined, {}, void 0) }, void 0) }, void 0)] }, void 0);
35
+ } }, void 0);
36
+ case 'number':
37
+ return jsx(Form$1.Item, { ...computedProps, children: jsx(InputNumber, { style: { width: '100%' } }, void 0) }, void 0);
38
+ case 'number[]':
39
+ return jsx(Form$1.List, { name: computedProps.name, rules: computedProps.rules, children: (fields, { add, remove }) => {
14
40
  var _a;
15
- return jsxs(Fragment, { children: [jsx("div", { className: 'ant-row ant-form-item ant-form-item-label', style: { rowGap: '0px' }, children: jsx("label", { className: ((_a = props.rules) === null || _a === void 0 ? void 0 : _a.find((r) => r.required)) && 'ant-form-item-required', children: props.title || props.id }, void 0) }, void 0), fields.map(field => jsx(Form$1.Item, { children: jsxs(Row, { gutter: 16, children: [jsx(Col, { span: 23, children: jsx(Form$1.Item, { ...field, noStyle: true, children: jsx(Input, { style: {
16
- width: '100%',
17
- marginRight: '12px'
18
- } }, void 0) }, void 0) }, void 0), jsx(Col, { span: 1, children: jsx(Button, { danger: true, type: 'link', style: { float: 'right' }, icon: jsx(MinusCircleOutlined, {}, void 0), onClick: () => remove(field.name) }, void 0) }, void 0)] }, void 0) }, field.key)), jsx(Form$1.Item, { children: jsx(Button, { type: 'dashed', block: true, onClick: () => add(), icon: jsx(PlusOutlined, {}, void 0) }, void 0) }, void 0)] }, void 0);
41
+ return jsxs(Fragment, { children: [jsx("div", { className: 'ant-row ant-form-item ant-form-item-label', style: { rowGap: '0px' }, children: jsx("label", { className: ((_a = computedProps.rules) === null || _a === void 0 ? void 0 : _a.find((r) => r.required)) && 'ant-form-item-required', children: computedProps.label }, void 0) }, void 0), fields.map(field => jsx(Form$1.Item, { children: jsxs(Row, { gutter: 16, children: [jsx(Col, { span: 23, children: jsx(Form$1.Item, { ...field, noStyle: true, children: jsx(InputNumber, { style: { width: '100%' } }, void 0) }, void 0) }, void 0), jsx(Col, { span: 1, children: jsx(Button, { danger: true, type: 'link', style: { float: 'right' }, icon: jsx(MinusCircleOutlined, {}, void 0), onClick: () => remove(field.name) }, void 0) }, void 0)] }, void 0) }, field.key)), jsx(Form$1.Item, { children: jsx(Button, { type: 'dashed', block: true, onClick: () => add(), icon: jsx(PlusOutlined, {}, void 0) }, void 0) }, void 0)] }, void 0);
19
42
  } }, void 0);
43
+ case 'boolean':
44
+ return jsx(Form$1.Item, { ...computedProps, children: jsx(Switch, {}, void 0) }, void 0);
20
45
  default:
21
46
  return null;
22
47
  }
package/lib/index.js CHANGED
@@ -5,22 +5,47 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var antd = require('antd');
7
7
  var icons = require('@ant-design/icons');
8
+ var react = require('react');
9
+ var lodash = require('lodash');
8
10
 
9
11
  function FormItem(props) {
10
- console.log(props);
11
- if (props.input)
12
- return jsxRuntime.jsx(antd.Form.Item, { label: props.title || props.id, name: props.id, ...props, children: jsxRuntime.jsx(props.input, {}, void 0) }, void 0);
13
- switch (props.type) {
12
+ const [computedProps, setComputedProps] = react.useState();
13
+ react.useEffect(() => {
14
+ const propsCopy = { ...props };
15
+ if (!propsCopy.title)
16
+ propsCopy.title = lodash.upperFirst(propsCopy.id);
17
+ if (!propsCopy.label)
18
+ propsCopy.label = propsCopy.title;
19
+ if (!propsCopy.name)
20
+ propsCopy.name = propsCopy.id;
21
+ switch (propsCopy.type) {
22
+ case 'boolean':
23
+ propsCopy.valuePropName = 'checked';
24
+ break;
25
+ }
26
+ setComputedProps(propsCopy);
27
+ }, [JSON.stringify(props)]);
28
+ if (!computedProps)
29
+ return null;
30
+ if (computedProps.children)
31
+ return jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: computedProps.children }, void 0);
32
+ switch (computedProps.type) {
14
33
  case 'string':
15
- return jsxRuntime.jsx(antd.Form.Item, { label: props.title || props.id, name: props.id, ...props, children: jsxRuntime.jsx(antd.Input, {}, void 0) }, void 0);
34
+ return jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: jsxRuntime.jsx(antd.Input, {}, void 0) }, void 0);
16
35
  case 'string[]':
17
- return jsxRuntime.jsx(antd.Form.List, { name: props.id, rules: props.rules, children: (fields, { add, remove }) => {
36
+ return jsxRuntime.jsx(antd.Form.List, { name: computedProps.name, rules: computedProps.rules, children: (fields, { add, remove }) => {
37
+ var _a;
38
+ return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'ant-row ant-form-item ant-form-item-label', style: { rowGap: '0px' }, children: jsxRuntime.jsx("label", { className: ((_a = computedProps.rules) === null || _a === void 0 ? void 0 : _a.find((r) => r.required)) && 'ant-form-item-required', children: computedProps.label }, void 0) }, void 0), fields.map(field => jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsxs(antd.Row, { gutter: 16, children: [jsxRuntime.jsx(antd.Col, { span: 23, children: jsxRuntime.jsx(antd.Form.Item, { ...field, noStyle: true, children: jsxRuntime.jsx(antd.Input, {}, void 0) }, void 0) }, void 0), jsxRuntime.jsx(antd.Col, { span: 1, children: jsxRuntime.jsx(antd.Button, { danger: true, type: 'link', style: { float: 'right' }, icon: jsxRuntime.jsx(icons.MinusCircleOutlined, {}, void 0), onClick: () => remove(field.name) }, void 0) }, void 0)] }, void 0) }, field.key)), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, { type: 'dashed', block: true, onClick: () => add(), icon: jsxRuntime.jsx(icons.PlusOutlined, {}, void 0) }, void 0) }, void 0)] }, void 0);
39
+ } }, void 0);
40
+ case 'number':
41
+ return jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: jsxRuntime.jsx(antd.InputNumber, { style: { width: '100%' } }, void 0) }, void 0);
42
+ case 'number[]':
43
+ return jsxRuntime.jsx(antd.Form.List, { name: computedProps.name, rules: computedProps.rules, children: (fields, { add, remove }) => {
18
44
  var _a;
19
- return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'ant-row ant-form-item ant-form-item-label', style: { rowGap: '0px' }, children: jsxRuntime.jsx("label", { className: ((_a = props.rules) === null || _a === void 0 ? void 0 : _a.find((r) => r.required)) && 'ant-form-item-required', children: props.title || props.id }, void 0) }, void 0), fields.map(field => jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsxs(antd.Row, { gutter: 16, children: [jsxRuntime.jsx(antd.Col, { span: 23, children: jsxRuntime.jsx(antd.Form.Item, { ...field, noStyle: true, children: jsxRuntime.jsx(antd.Input, { style: {
20
- width: '100%',
21
- marginRight: '12px'
22
- } }, void 0) }, void 0) }, void 0), jsxRuntime.jsx(antd.Col, { span: 1, children: jsxRuntime.jsx(antd.Button, { danger: true, type: 'link', style: { float: 'right' }, icon: jsxRuntime.jsx(icons.MinusCircleOutlined, {}, void 0), onClick: () => remove(field.name) }, void 0) }, void 0)] }, void 0) }, field.key)), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, { type: 'dashed', block: true, onClick: () => add(), icon: jsxRuntime.jsx(icons.PlusOutlined, {}, void 0) }, void 0) }, void 0)] }, void 0);
45
+ return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'ant-row ant-form-item ant-form-item-label', style: { rowGap: '0px' }, children: jsxRuntime.jsx("label", { className: ((_a = computedProps.rules) === null || _a === void 0 ? void 0 : _a.find((r) => r.required)) && 'ant-form-item-required', children: computedProps.label }, void 0) }, void 0), fields.map(field => jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsxs(antd.Row, { gutter: 16, children: [jsxRuntime.jsx(antd.Col, { span: 23, children: jsxRuntime.jsx(antd.Form.Item, { ...field, noStyle: true, children: jsxRuntime.jsx(antd.InputNumber, { style: { width: '100%' } }, void 0) }, void 0) }, void 0), jsxRuntime.jsx(antd.Col, { span: 1, children: jsxRuntime.jsx(antd.Button, { danger: true, type: 'link', style: { float: 'right' }, icon: jsxRuntime.jsx(icons.MinusCircleOutlined, {}, void 0), onClick: () => remove(field.name) }, void 0) }, void 0)] }, void 0) }, field.key)), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, { type: 'dashed', block: true, onClick: () => add(), icon: jsxRuntime.jsx(icons.PlusOutlined, {}, void 0) }, void 0) }, void 0)] }, void 0);
23
46
  } }, void 0);
47
+ case 'boolean':
48
+ return jsxRuntime.jsx(antd.Form.Item, { ...computedProps, children: jsxRuntime.jsx(antd.Switch, {}, void 0) }, void 0);
24
49
  default:
25
50
  return null;
26
51
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faasjs/ant-design",
3
- "version": "0.0.1-development",
3
+ "version": "0.0.2-development",
4
4
  "main": "lib/index.js",
5
5
  "module": "lib/index.esm.js",
6
6
  "types": "lib/index.d.ts",
@@ -44,13 +44,15 @@
44
44
  "@testing-library/react": "*",
45
45
  "jest": "*",
46
46
  "trim": ">=0.0.3",
47
- "immer": ">=9.0.6"
47
+ "immer": ">=9.0.6",
48
+ "@types/lodash": "*"
48
49
  },
49
50
  "peerDependencies": {
50
51
  "react": "*",
51
52
  "react-dom": "*",
52
53
  "antd": "*",
53
- "@ant-design/icons": "*"
54
+ "@ant-design/icons": "*",
55
+ "lodash": "*"
54
56
  },
55
57
  "eslintConfig": {
56
58
  "extends": [