@simpleform/render 3.0.8 → 3.0.10

package/README.md

@@ -2,7 +2,7 @@
 
 English | [中文说明](./README_CN.md)
 
-[![](https://img.shields.io/badge/version-3.0.8-green)](https://www.npmjs.com/package/@simpleform/render)
+[![](https://img.shields.io/badge/version-3.0.10-green)](https://www.npmjs.com/package/@simpleform/render)
 
 > A lightweight dynamic forms engine that makes it easy to dynamically render forms.
 
@@ -307,65 +307,104 @@ export default function Demo(props) {
 ### 4. List Demo
 Support for array rendering
 ```javascript
-import React, { useState } from 'react';
-import FormRender, { useSimpleForm } from './form-render';
+import React, { useEffect, useState } from 'react';
+import FormRender, { CustomFormRenderProps, useSimpleForm } from './form-render';
 import { Button } from 'antd';
-export default function Demo(props) {
+
+const OptionList = React.forwardRef<HTMLElement, any>((props, ref) => {
+
+  const {
+    value,
+    onChange,
+    ...rest
+  } = props;
+
+  const intialValue = [{ label: '', value: '' }];
+  const [dataSource, setDataSource] = useState<Array<any>>([]);
   const form = useSimpleForm();
-  const widgetList =
-    [
-      {
-        label: "list-0",
-        name: 'list[0]',
-        rules: [{ required: true, message: 'list[0] empty' }],
-        initialValue: 1,
-        type: 'Input',
-        props: {}
-      },
+
+  useEffect(() => {
+    const options = value || [...intialValue];
+    setDataSource(options);
+    form.setFieldsValue(options);
+  }, [value]);
+
+  const widgetList = dataSource.map((item, index) => ({
+    type: 'row',
+    props: {
+      gutter: 12,
+      align: 'middle'
+    },
+    widgetList: [
       {
-        label: "list-1",
-        name: 'list[1]',
-        rules: [{ required: true, message: 'list[1] empty' }],
-        initialValue: 2,
+        name: `[${index}]label`,
+        compact: true,
+        outside: { type: 'col', props: { span: 9 } },
+        rules: [{ required: true }],
         type: 'Input',
-        props: {}
+        props: {
+          placeholder: 'label',
+          style: { width: '100%' }
+        }
       },
       {
-        label: "list-2",
-        name: 'list[2]',
-        rules: [{ required: true, message: 'list[2] empty' }],
-        initialValue: 3,
+        name: `[${index}]value`,
+        compact: true,
+        outside: { type: 'col', props: { span: 9 } },
+        rules: [{ required: true }],
         type: 'Input',
-        props: {}
+        props: {
+          placeholder: 'value',
+          style: { width: '100%' }
+        }
       },
       {
-        label: "list-3",
-        name: 'list[3]',
-        rules: [{ required: true, message: 'list[3] empty' }],
-        initialValue: 4,
-        type: 'Input',
-        props: {}
+        outside: { type: 'col', props: { span: 6 } },
+        typeRender: <Button type="link" onClick={() => deleteItem(index)}>delete</Button>
       },
-    ];
+    ]
+  }));
+
+  const deleteItem = (index: number) => {
+    const oldData = [...dataSource];
+    if (!oldData) return;
+    const newData = [...oldData];
+    newData.splice(index, 1);
+    setDataSource(newData);
+    form.setFieldsValue(newData);
+    onChange && onChange(newData);
+  };
 
-  const onSubmit = async (e) => {
-    e?.preventDefault?.();
-    const result = await form.validate();
-    console.log(result, 'result');
+  const addItem = () => {
+    const { error } = await form.validate();
+    if (error) {
+      return;
+    }
+    const newData = dataSource.concat(intialValue);
+    form.setFieldsValue(newData);
+    setDataSource(newData);
+  };
+
+  const onFieldsChange: CustomFormRenderProps['onFieldsChange'] = (_, values) => {
+    setDataSource(values);
+    onChange && onChange(values);
   };
 
   return (
-    <div style={{ padding: '0 8px' }}>
+    <div>
       <FormRender
         form={form}
         widgetList={widgetList}
+        onFieldsChange={onFieldsChange}
       />
-      <div style={{ marginLeft: '120px' }}>
-        <Button onClick={onSubmit}>submit</Button>
-      </div>
+      <Button type="link" onClick={addItem}>
+        add
+      </Button>
     </div>
   );
-}
+});
+
+export default OptionList;
 ```
 ## API
 
@@ -400,7 +439,7 @@ Sourced from [@simpleform/form](../form);
 ## Other
 
 ### widgetList structure description
-Each item in the `widgetList` list is a rendering node, divided into a form control node and nonform node.
+Each item in the `widgetList` list is a rendering node, rendered from `type` and `props`. divided into a form control node and nonform node.
 - Form control nodes.
 Nodes with the `name` attribute are form control nodes and carry the form field component (`Form.Item`) by default, for example:
 ```javascript

package/README_CN.md

@@ -2,7 +2,7 @@
 
 [English](./README.md) | 中文说明
 
-[![](https://img.shields.io/badge/version-3.0.8-green)](https://www.npmjs.com/package/@simpleform/render)
+[![](https://img.shields.io/badge/version-3.0.10-green)](https://www.npmjs.com/package/@simpleform/render)
 
 > 轻量级动态表单引擎，实现动态渲染表单很简单.
 
@@ -308,67 +308,106 @@ export default function Demo(props) {
 }
 ```
 ### 4. 数组数据
-支持数组渲染
+复杂的列表渲染增删改功能demo
 ```javascript
-import React, { useState } from 'react';
-import FormRender, { useSimpleForm } from './form-render';
+import React, { useEffect, useState } from 'react';
+import FormRender, { CustomFormRenderProps, useSimpleForm } from './form-render';
 import { Button } from 'antd';
-export default function Demo(props) {
+
+const OptionList = React.forwardRef<HTMLElement, any>((props, ref) => {
+
+  const {
+    value,
+    onChange,
+    ...rest
+  } = props;
+
+  const intialValue = [{ label: '', value: '' }];
+  const [dataSource, setDataSource] = useState<Array<any>>([]);
   const form = useSimpleForm();
-  const widgetList =
-    [
-      {
-        label: "list-0",
-        name: 'list[0]',
-        rules: [{ required: true, message: 'list[0] empty' }],
-        initialValue: 1,
-        type: 'Input',
-        props: {}
-      },
+
+  useEffect(() => {
+    const options = value || [...intialValue];
+    setDataSource(options);
+    form.setFieldsValue(options);
+  }, [value]);
+
+  const widgetList = dataSource.map((item, index) => ({
+    type: 'row',
+    props: {
+      gutter: 12,
+      align: 'middle',
+    },
+    widgetList: [
       {
-        label: "list-1",
-        name: 'list[1]',
-        rules: [{ required: true, message: 'list[1] empty' }],
-        initialValue: 2,
+        name: `[${index}]label`,
+        compact: true,
+        outside: { type: 'col', props: { span: 9 } },
+        rules: [{ required: true }],
         type: 'Input',
-        props: {}
+        props: {
+          placeholder: 'label',
+          style: { width: '100%' }
+        }
       },
       {
-        label: "list-2",
-        name: 'list[2]',
-        rules: [{ required: true, message: 'list[2] empty' }],
-        initialValue: 3,
+        name: `[${index}]value`,
+        compact: true,
+        outside: { type: 'col', props: { span: 9 } },
+        rules: [{ required: true }],
         type: 'Input',
-        props: {}
+        props: {
+          placeholder: 'value',
+          style: { width: '100%' }
+        }
       },
       {
-        label: "list-3",
-        name: 'list[3]',
-        rules: [{ required: true, message: 'list[3] empty' }],
-        initialValue: 4,
-        type: 'Input',
-        props: {}
+        outside: { type: 'col', props: { span: 6 } },
+        typeRender: <Button type="link" onClick={() => deleteItem(index)}>delete</Button>
       },
-    ];
+    ]
+  }));
+
+  const deleteItem = (index: number) => {
+    const oldData = [...dataSource];
+    if (!oldData) return;
+    const newData = [...oldData];
+    newData.splice(index, 1);
+    setDataSource(newData);
+    form.setFieldsValue(newData);
+    onChange && onChange(newData);
+  };
 
-  const onSubmit = async (e) => {
-    e?.preventDefault?.();
-    const result = await form.validate();
-    console.log(result, 'result');
+  const addItem = () => {
+    const { error } = await form.validate();
+    if (error) {
+      return;
+    }
+    const newData = dataSource.concat(intialValue);
+    form.setFieldsValue(newData);
+    setDataSource(newData);
+  };
+
+  const onFieldsChange: CustomFormRenderProps['onFieldsChange'] = (_, values) => {
+    setDataSource(values);
+    onChange && onChange(values);
   };
 
   return (
-    <div style={{ padding: '0 8px' }}>
+    <div>
       <FormRender
         form={form}
         widgetList={widgetList}
+        onFieldsChange={onFieldsChange}
       />
-      <div style={{ marginLeft: '120px' }}>
-        <Button onClick={onSubmit}>submit</Button>
-      </div>
+      <Button type="link" onClick={addItem}>
+        add
+      </Button>
     </div>
   );
-}
+});
+
+export default OptionList;
 ```
 
 ## API
@@ -404,7 +443,7 @@ export default function Demo(props) {
 ## 其他
 
 ### widgetList结构说明
-`widgetList`列表中每一项均为一个渲染节点, 分为表单控件节点和非控件节点
+`widgetList`列表中每一项均为一个渲染节点, 由`type`和`props`渲染而成, 分为表单控件节点和非控件节点
 - 表单控件节点:
 具有`name`属性的节点为表单控件节点，默认携带表单域组件(`Form.Item`)，举例：
 ```javascript