faet(fr): v1.13.17 (#941)

* feat: support react18 * feat(fr): cardList和simpleList支持自定义新增按钮 * feat(fr): update docs * feat(fr): 添加add-widget和methods类型声明 * list 增加 onAdd、onRemove 事件 * list 增加 onAdd、onRemove 事件 * 增加列表展上文档，补充 onAdd、onRemove 扩展 * v1.1.0-beta.2 * v1.1.0-beta.1 * chore: 发布beta版本 * feat(fr): v1.13.17-beta.2 * docs(fr): udpate docs * feat: 修改 onValuesChange 入参形式 * 0.0.1-0 * feat(fr): v1.13.17-beta.3 * feat(fr): 更新 onValuesChange 类型声明 * feat(fr): v1.13.17-beta.4 * feat(fr): udpate changelog * feat(fr): v1.13.17 Co-authored-by: zhanbo.lh <zhanbo.lh@alibaba-inc.com>
alibaba · Oct 20, 2022 · da9875a · da9875a · vercel · Oct 20, 2022
1 parent 19604e2
commit da9875a
Show file tree

Hide file tree

Showing 13 changed files with 123 additions and 18 deletions.
diff --git a/docs/form-render/advanced/listDisplay.md b/docs/form-render/advanced/listDisplay.md
@@ -77,6 +77,8 @@ export default Demo;
 
 ```jsx
 import React from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
 import Form from '../demo/display';
 
 const schema = {
@@ -87,6 +89,7 @@ const schema = {
       description: '对象数组嵌套功能',
       type: 'array',
       widget: 'simpleList',
+      'add-widget': 'addBtn',
       items: {
         type: 'object',
         properties: {
@@ -107,8 +110,16 @@ const schema = {
   },
 };
 
+const AddBtn = props => {
+  return (
+    <Button {...props} style={{ width: '50%' }} icon={<PlusOutlined />}>
+      新增一条
+    </Button>
+  );
+};
+
 const Demo = () => {
-  return <Form schema={schema} />;
+  return <Form widgets={{ addBtn: AddBtn }} schema={schema} />;
 };
 
 export default Demo;
@@ -374,6 +385,7 @@ const Demo = () => {
 
 export default Demo;
 ```
+
 <br>
 <br>
 
@@ -410,4 +422,56 @@ const Demo = () => {
 };
 
 export default Demo;
-```
+```
+
+8. 自定义 onAdd(添加)、onRemove(删除)
+
+```jsx
+import React from 'react';
+import Form from '../demo/display';
+
+const schema = {
+  type: 'object',
+  properties: {
+    listName2: {
+      title: '礼物配置',
+      description: '可以有多套配置方案',
+      type: 'array',
+      widget: 'simpleList',
+      props: {
+        onAdd: 'addFunc',
+        onRemove: 'removeFunc'
+      },
+      items: {
+        type: 'object',
+        properties: {
+          input1: {
+            title: '{{`配置方案${rootValue.index + 1}`}}',
+            type: 'string',
+            required: true,
+          },
+        },
+      },
+    },
+  },
+};
+
+const Demo = () => {
+  const methods = {
+    addFunc: (cb, { schema }) => {
+      alert('自定义新增');
+      // 处理完成，执行内置逻辑
+      cb();
+    },
+    removeFunc: (cb, { schema }) => {
+      alert('自定义删除');
+      // 处理完成，执行内置逻辑
+      cb();
+    }
+  };
+
+  return <Form schema={schema} methods={methods}/>;
+};
+
+export default Demo;
+```
diff --git a/docs/form-render/api/props.md b/docs/form-render/api/props.md
@@ -20,7 +20,7 @@ toc: content
 | colon            | 是否显示 label 后面的冒号                                                                 | `boolean`                                                                                             | true   |
 | widgets          | 自定义组件，当内置组件无法满足时使用，详见[Widgets](#widgets)                             | `Record<string, ReactNode>`                                                                           | -      |
 | watch            | 监听表单的数据变化，详见[Watch](#watch)                                                   | `Record<string, (val: any) => void \| { handler:(val:any) => void,immediate?: boolean }>`             | -      |
-| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据，默认不隐藏                                  | `boolean`                                                                                             | false  |
+| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据，默认不隐藏                                  | `boolean`                                                                                             | true   |
 | readOnly         | 只读模式，一般用于预览展示，全文 text 展示                                                | `boolean`                                                                                             | false  |
 | className        | 顶层 className                                                                            | `string`                                                                                              | -      |
 | style            | 顶层 style                                                                                | `CSSProperties`                                                                                       | -      |

diff --git a/package.json b/package.json
@@ -76,8 +76,8 @@
         "prettier": "^2.6.0",
         "prettier-plugin-packagejson": "^2.2.16",
         "prismjs": "^1.27.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "react-monaco-editor": "^0.44.0",
         "react-simple-code-editor": "^0.11.0",
         "react-test-renderer": "^17.0.2",
@@ -87,5 +87,5 @@
         "typescript": "^4.6.2",
         "yorkie": "^2.0.0"
     },
-    "version": "0.0.1"
+    "version": "0.0.1-0"
 }
diff --git a/packages/form-render/CHANGELOG.md b/packages/form-render/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.13.17
+
+- [+] `simpleList` 和 `cardList` 支持自定义新增按钮
+- [!] `removeHiddenData` 默认设置为 `true`
+- [!] 修改 `onValuesChange` 入参形式
+- [+] 列表组件支持自定义增加与删除
+
 ## 1.13.15
 
 - [+] 新增获取隐藏表单值的方法：`form.getHiddenValues()`
@@ -383,7 +390,7 @@
 ### 1.3.1
 
 - [+] 列表支持 props/buttons 属性，用于添加更多的自定义操作按钮 ([#343](https://github.com/alibaba/x-render/issues/343))
-- [+] 添加了 `onValuesChange` 方法，用于时时更新的钩子，暂时不放文档，内部试验一下性能
+- [+] 添加了 `onValuesChange` 方法，用于实时更新的钩子，暂时不放文档，内部试验一下性能
 - [+] 添加了 `className` 这个基础属性，用于样式覆盖特定的表单元素
 - [!] 解决包体积大小问题 lodash -> lodash-es ([#341](https://github.com/alibaba/x-render/issues/341))
 - [!] 修复颜色选择器无法选中透明度的问题 ([#349](https://github.com/alibaba/x-render/issues/349))

diff --git a/packages/form-render/README.md b/packages/form-render/README.md
@@ -147,7 +147,7 @@ import Form, { useForm, connectForm } from 'form-render';
 | colon            | 表示是否显示 label 后面的冒号                                                  | `boolean`                                                            | 否       | true     |
 | widgets          | 自定义组件，当内置组件无法满足时使用                                           | `object`                                                             | 否       | {}       |
 | watch            | 类似于 vue 的 watch 的用法，详见[表单监听 & 回调](/form-render/advanced/watch) | `object`                                                             | 否       | {}       |
-| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据，默认不隐藏                       | `boolean`                                                            | 否       | false    |
+| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据，默认不隐藏                       | `boolean`                                                            | 否       | true     |
 | debug            | 开启 debug 模式，时时显示表单内部状态，**开发的时候强烈建议打开**              | `boolean`                                                            | 否       | false    |
 | readOnly         | 只读模式，一般用于预览展示，全文 text 展示                                     | `boolean`                                                            | 否       | false    |
 

diff --git a/packages/form-render/package.json b/packages/form-render/package.json
@@ -1,6 +1,6 @@
 {
   "name": "form-render",
-  "version": "1.13.16",
+  "version": "1.13.17",
   "description": "通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成",
   "keywords": [
     "Form",

diff --git a/packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/CardList.js b/packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/CardList.js
@@ -23,7 +23,11 @@ const CardList = ({
   getFieldsProps,
 }) => {
   const { props = {}, itemProps, min = 0, max = 9999 } = schema;
-  const { methods } = useTools();
+  const { methods, widgets } = useTools();
+
+  const CustomAddBtn = widgets[schema['add-widget']];
+
+  const AddWidget = CustomAddBtn || Button;
 
   let addBtnProps = {
     type: 'dashed',
@@ -111,7 +115,7 @@ const CardList = ({
       </div>
       <div style={{ marginTop: displayList.length > 0 ? 0 : 8 }}>
         {!props.hideAdd && displayList.length < max && (
-          <Button onClick={addItem} {...addBtnProps} />
+          <AddWidget {...addBtnProps} />
         )}
         {Array.isArray(props.buttons)
           ? props.buttons.map((item, idx) => {

diff --git a/packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/SimpleList.js b/packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/SimpleList.js
@@ -6,6 +6,7 @@ import {
 } from '@ant-design/icons';
 import { Button, Popconfirm } from 'antd';
 import React from 'react';
+import { useTools } from '../../../hooks';
 import Core from '../../index';
 
 const SimpleList = ({
@@ -21,6 +22,11 @@ const SimpleList = ({
   getFieldsProps,
 }) => {
   const { props = {}, itemProps, min = 0, max = 99999 } = schema;
+  const { widgets } = useTools();
+
+  const CustomAddBtn = widgets[schema['add-widget']];
+
+  const AddWidget = CustomAddBtn || Button;
 
   let addBtnProps = {
     type: 'dashed',
@@ -37,6 +43,8 @@ const SimpleList = ({
     addBtnProps = { ...addBtnProps, ...props.addBtnProps };
   }
 
+  addBtnProps.onClick = addItem;
+
   if (props.delConfirmProps && typeof props.delConfirmProps === 'object') {
     delConfirmProps = { ...delConfirmProps, ...props.delConfirmProps };
   }
@@ -85,7 +93,7 @@ const SimpleList = ({
       })}
       <div style={{ marginTop: displayList.length > 0 ? 0 : 8 }}>
         {!props.hideAdd && displayList.length < max && (
-          <Button onClick={addItem} {...addBtnProps} />
+          <AddWidget {...addBtnProps} />
         )}
         {Array.isArray(props.buttons)
           ? props.buttons.map((item, idx) => {

diff --git a/packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/index.js b/packages/form-render/src/form-render-core/src/core/RenderChildren/RenderList/index.js
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { get } from 'lodash-es';
+import { get, isFunction } from 'lodash-es';
 import React from 'react';
 import { useStore, useTools } from '../../../hooks';
 import {
@@ -128,7 +128,7 @@ const RenderList = ({
     };
   };
 
-  const displayProps = {
+  let displayProps = {
     displayList,
     changeList,
     schema,
@@ -147,6 +147,18 @@ const RenderList = ({
     getFieldsProps,
   };
 
+  // 外部定义：添加按钮事件
+  const onAdd = methods[props.onAdd];
+  if (isFunction(onAdd)) {
+    displayProps.addItem = () => onAdd(addItem, { schema });
+  }
+
+  // 外部定义：删除按钮事件
+  const onRemove = methods[props.onRemove];
+  if (isFunction(onRemove)) {
+    displayProps.deleteItem = (idx) => onRemove(() => deleteItem(idx), { schema })
+  }
+
   if (layoutWidgets && layoutWidgets[renderWidget]) {
     const Component = layoutWidgets[renderWidget];
     return <Component {...displayProps} />;

diff --git a/packages/form-render/src/form-render-core/src/core/RenderField/index.js b/packages/form-render/src/form-render-core/src/core/RenderField/index.js
@@ -111,7 +111,7 @@ const RenderField = props => {
     }
     // 先不暴露给外部，这个api
     if (typeof onValuesChange === 'function') {
-      onValuesChange({ [dataPath]: value }, formDataRef.current);
+      onValuesChange({ dataPath, value, dataIndex }, formDataRef.current);
     }
 
     validateField({

diff --git a/packages/form-render/src/form-render-core/src/index.js b/packages/form-render/src/form-render-core/src/index.js
@@ -53,7 +53,7 @@ function App({
   allCollapsed = false,
   onValuesChange,
   column,
-  removeHiddenData = false,
+  removeHiddenData = true,
   globalProps = {},
   methods = {},
   renderTitle,

diff --git a/packages/form-render/src/form-render-core/src/utils.js b/packages/form-render/src/form-render-core/src/utils.js
@@ -1063,7 +1063,6 @@ export const getHiddenData = (data, flatten) => {
         hidden = parseSingleExpression(hidden, result, key);
       }
       if (hidden) {
-        debugger;
         hiddenData[key] = result[key];
       }
     }

diff --git a/packages/form-render/src/index.d.ts b/packages/form-render/src/index.d.ts
@@ -62,6 +62,8 @@ export interface SchemaBase {
   enumNames: Array<string | number> | string;
   rules: RuleItem | RuleItem[];
   props: Record<string, any>;
+  /**扩展字段 */
+  'add-widget'?: string;
 }
 
 export type Schema = Partial<SchemaBase>;
@@ -223,11 +225,20 @@ export interface FRProps {
   /** 表单提交后钩子 */
   onFinish?: (formData: any, error: Error[]) => void;
   /** 时时与外部更新同步的钩子 */
-  onValuesChange?: (changedValues: any, formData: any) => void;
+  onValuesChange?: (
+    changedValues: {
+      dataPath: string;
+      value: any;
+      dataIndex: number[] | unknown;
+    },
+    formData: any
+  ) => void;
   /** 隐藏的数据是否去掉，默认不去掉（false） */
   removeHiddenData?: boolean;
   /** 配置自定义layout组件 */
   layoutWidgets?: any;
+  /** 扩展方法 */
+  methods?: Record<string, Function>;
 }
 
 declare const FR: React.FC<FRProps>;