feat(fr): v1.14.0 (#964)

* 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 * feat(fr): widget add memo * feat(fr): v1.13.18-beta.0 * [+] 增加 void 支持, 可以让 data 的结构和 schema 结构有区别数据中会自动忽略 $void_xxx 的 key, $void_xxx 的数据会自动放到上一层. * feat(fr): update changelog * fix: Search组件在searchOnMount参数和onMount都存在时，先执行onMount; * feat(fr): support flex style for object type (#961) * fix: use nanoid instead of randombytes in browser (#949) * feat(generator): v2.8.3 * fix(fr): 修复 drawerList 表头显示异常的问题 * feat(fr): v1.13.20 * feat(docs): update * fix(fr): tableList title * feat(fr): v1.13.21 * feat(tr): improve types * feat(tr): v1.3.9 * feat(tr): update changelog * feat(tr): dateTime 格式化为 YYYY-MM-DD HH:mm:ss * feat(tr): v1.3.10 * chore: merge windows start command (#956) * fix: fr-generator editor styles * Style/beautify code (#959) * style: use classnames to manage 1. clean code * test: fix test error * fix: ui error * feat(fr): support flex style for object type Co-authored-by: Johny.Li <[email protected]> Co-authored-by: siyi98 <[email protected]> Co-authored-by: 糠帅傅 <[email protected]> * feat(fr): update changelog Co-authored-by: zhanbo.lh <[email protected]> Co-authored-by: yanxi <[email protected]> Co-authored-by: Liuchang <[email protected]> Co-authored-by: zhichaosong <[email protected]> Co-authored-by: Johny.Li <[email protected]> Co-authored-by: 糠帅傅 <[email protected]>
alibaba · Nov 21, 2022 · 8add06f · 8add06f · vercel · Nov 21, 2022
1 parent d2ebed9
commit 8add06f
Show file tree

Hide file tree

Showing 22 changed files with 482 additions and 97 deletions.
diff --git a/docs/form-render/advanced/display.md b/docs/form-render/advanced/display.md
@@ -373,7 +373,7 @@ export default Demo;
 
 ### 主题设置
 
-对于嵌套类型的表单，我们内置了三种主题，分别为 `collapse | card | tile `, 默认为 `collapse` 主题
+对于嵌套类型的表单，我们内置了四种主题，分别为 `collapse | card | tile | flex`, 默认为 `collapse` 主题
 
 1. 默认样式：`theme: 'collapse'` ，支持`无边框模式: 'collapse:pure'`、`幽灵模式:'collapse:ghost'`
 
@@ -612,3 +612,64 @@ const Demo = () => {
 
 export default Demo;
 ```
+
+4. 弹性布局模式：`theme: 'flex'`，支持通过 style 属性配置相关样式
+
+```jsx
+import React from 'react';
+import Form from '../demo/display';
+const schema = {
+  type: 'object',
+  displayType: 'row',
+  properties: {
+    objectName2: {
+      title: '弹性布局',
+      description: '这是一个对象类型',
+      type: 'object',
+      theme: 'flex',
+      props: {
+        style: {
+          flexDirection: 'column',
+          flexWrap: 'wrap',
+          margin: '0 0 0 0',
+          padding: '0 0 0 0',
+          justifyContent: 'flex-start',
+          alignItems: 'flex-start',
+          alignContent: 'flex-start',
+        },
+      },
+      properties: {
+        input1: {
+          title: '简单输入框',
+          type: 'string',
+          required: true,
+          width: '30%',
+        },
+        select1: {
+          title: '单选',
+          type: 'string',
+          enum: ['a', 'b', 'c'],
+          enumNames: ['早', '中', '晚'],
+          width: '30%',
+        },
+        date: {
+          title: '时间选择',
+          type: 'string',
+          format: 'date',
+          width: '30%',
+        },
+      },
+    },
+  },
+};
+
+const Demo = () => {
+  return (
+    <div>
+      <Form schema={schema} />
+    </div>
+  );
+};
+
+export default Demo;
+```
diff --git a/docs/form-render/api/schema.md b/docs/form-render/api/schema.md
@@ -111,7 +111,7 @@ label 的宽度，数字值单位为 px，也可使用 `'20%'/'2rem'` 等，写
 ### theme
 
 - 类型：`string`
-- 值: `default | card | tile`，详见[这里](/form-render/advanced/display#主题设置)
+- 值: `default | card | tile | flex`，详见[这里](/form-render/advanced/display#主题设置)
 
 设置嵌套表单的主题样式
 

diff --git a/docs/playground/json/simplest.json b/docs/playground/json/simplest.json
@@ -13,12 +13,22 @@
           }
         ]
       },
-      "select": {
-        "title": "单选",
-        "type": "string",
-        "enum": ["a", "b", "c"],
-        "enumNames": ["选项1", "选项2", "选项3"],
-        "widget": "radio"
+      "$void_1": {
+        "type": "object",
+        "title": "void test",
+        "properties": {
+          "input2": {
+            "title": "简单输入框",
+            "type": "string",
+            "min": 6,
+            "rules": [
+              {
+                "pattern": "^[A-Za-z0-9]+$",
+                "message": "只允许填写英文字母和数字"
+              }
+            ]
+          }
+        }
       },
       "listName2": {
         "title": "对象数组",

diff --git a/packages/form-render/CHANGELOG.md b/packages/form-render/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.14.0
+
+- [+] 为 `object` 类型添加 `flex` 主题
+- [+] 优化 `widgets` 下的组件路径
+- [+] 增加 `void` 支持
+- [!] 修复 `object` 宽度设置
+
 ## 1.13.21
 
 - [!] 修复 `tableList` 和 `drawerList` 表头无法正常显示的问题
@@ -8,6 +15,10 @@
 
 - [+] 删除 `formData` 中的 `index`
 
+## 1.13.18
+
+- [!] 修复 `cardList` 组件无法新增的 bug
+
 ## 1.13.17
 
 - [+] `simpleList` 和 `cardList` 支持自定义新增按钮

diff --git a/packages/form-render/src/form-render-core/src/core/RenderField/ExtendedWidget.js b/packages/form-render/src/form-render-core/src/core/RenderField/ExtendedWidget.js
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { memo, Suspense } from 'react';
 import { transformProps } from '../../createWidget';
 import { useStore, useTools } from '../../hooks';
 import { extraSchemaList, getWidgetName } from '../../mapping';
@@ -162,43 +162,41 @@ const ExtendedWidget = ({
   const finalProps = transformProps(widgetProps);
   return (
     <Suspense fallback={<div></div>}>
-      <div className="fr-item-wrapper">
-        <Widget {...finalProps} />
-      </div>
+      <Widget {...finalProps} />
     </Suspense>
   );
 };
 
-// const areEqual = (prev, current) => {
-//   if (prev.schema && current.schema) {
-//     if (prev.schema.$id === '#') {
-//       return false;
-//     }
-//     if (prev.schema.hidden && current.schema.hidden) {
-//       return true;
-//     }
-//   }
-//   if (prev.readOnly !== current.readOnly) {
-//     return false;
-//   }
-//   if (prev.disabled !== current.disabled) {
-//     return false;
-//   }
-//   if (
-//     JSON.stringify(prev.dependValues) !== JSON.stringify(current.dependValues)
-//   ) {
-//     return false;
-//   }
-//   if (isObjType(prev.schema) && isObjType(current.schema)) {
-//     return false;
-//   }
-//   if (
-//     JSON.stringify(prev.value) === JSON.stringify(current.value) &&
-//     JSON.stringify(prev.schema) === JSON.stringify(current.schema)
-//   ) {
-//     return true;
-//   }
-//   return false;
-// };
-
-export default ExtendedWidget;
+const areEqual = (prev, current) => {
+  if (prev.schema && current.schema) {
+    if (prev.schema.$id === '#') {
+      return false;
+    }
+    if (prev.schema.hidden && current.schema.hidden) {
+      return true;
+    }
+  }
+  if (prev.readOnly !== current.readOnly) {
+    return false;
+  }
+  if (prev.disabled !== current.disabled) {
+    return false;
+  }
+  if (
+    JSON.stringify(prev.dependValues) !== JSON.stringify(current.dependValues)
+  ) {
+    return false;
+  }
+  if (isObjType(prev.schema) && isObjType(current.schema)) {
+    return false;
+  }
+  if (
+    JSON.stringify(prev.value) === JSON.stringify(current.value) &&
+    JSON.stringify(prev.schema) === JSON.stringify(current.schema)
+  ) {
+    return true;
+  }
+  return false;
+};
+
+export default memo(ExtendedWidget, areEqual);
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
@@ -232,7 +232,7 @@ const RenderField = props => {
     );
   } else if (isBlockType(_schema)) {
     return (
-      <div datapath={dataPath}>
+      <div className={contentClass} style={contentStyle} datapath={dataPath}>
         <ExtendedWidget {...widgetProps} />
       </div>
     );

diff --git a/packages/form-render/src/form-render-core/src/core/index.js b/packages/form-render/src/form-render-core/src/core/index.js
@@ -207,23 +207,26 @@ const CoreRender = ({
   if (schema.hidden) {
     columnStyle.display = 'none';
   }
-  // if (!isComplex) {
-  // }
-  if (!isObj) {
-    if (width) {
-      columnStyle.width = width;
-      columnStyle.paddingRight = 8;
-    } else if (column > 1) {
-      columnStyle.width = `calc(100% /${column})`;
-      columnStyle.paddingRight = 8;
+
+  if (width) {
+    columnStyle.width = width;
+  } else if (column > 1) {
+    columnStyle.width = `calc(100% /${column})`;
+  }
+
+  // 如果传入自定义样式则覆盖使用，object 外层样式使用 schema.style，内层样式使用 schema.props.style
+  if ('object' === typeof schema?.style) {
+    columnStyle = {
+      ...columnStyle,
+      ...schema.style
     }
   }
 
   const _labelWidth = isLooselyNumber(effectiveLabelWidth)
     ? Number(effectiveLabelWidth)
     : isCssLength(effectiveLabelWidth)
-    ? effectiveLabelWidth
-    : 110; // 默认是 110px 的长度
+      ? effectiveLabelWidth
+      : 110; // 默认是 110px 的长度
 
   let labelStyle = { width: _labelWidth };
   if (isComplex || _displayType === 'column') {
@@ -259,17 +262,15 @@ const CoreRender = ({
   };
 
   const objChildren = (
-    <div className={`flex flex-wrap fr-core-obj`}>
-      <RenderObject
-        dataIndex={dataIndex}
-        errorFields={errorFields}
-        displayType={_displayType}
-        labelAlign={_labelAlign}
-        hideTitle={hideTitle}
-      >
-        {item.children}
-      </RenderObject>
-    </div>
+    <RenderObject
+      dataIndex={dataIndex}
+      errorFields={errorFields}
+      displayType={_displayType}
+      labelAlign={_labelAlign}
+      hideTitle={hideTitle}
+    >
+      {item.children}
+    </RenderObject>
   );
 
   const listChildren = (

diff --git a/packages/form-render/src/form-render-core/src/processData.js b/packages/form-render/src/form-render-core/src/processData.js
@@ -6,13 +6,18 @@ import {
   removeEmptyItemFromList,
   removeHiddenFromResult,
 } from './utils';
+import { removeVoidFromResult } from './void';
 // 提交前需要先处理formData的逻辑
 export const processData = (data, flatten, removeHiddenData) => {
   let _data = clone(data);
   // 1. 去掉 hidden = true 的元素
   if (removeHiddenData) {
     _data = removeHiddenFromResult(data, flatten);
   }
+
+  // 1.5. 去掉 void 元素
+  _data = removeVoidFromResult(_data);
+
   // 2. bind 的处理
   _data = transformDataWithBind(_data, flatten);
 
@@ -21,7 +26,6 @@ export const processData = (data, flatten, removeHiddenData) => {
 
   // 4. 去掉所有的 undefined
   _data = cleanEmpty(_data);
-
   return _data;
 };
 

diff --git a/packages/form-render/src/form-render-core/src/utils.js b/packages/form-render/src/form-render-core/src/utils.js
@@ -1,4 +1,5 @@
 import { cloneDeep, get, isEmpty, set } from 'lodash-es';
+import { getRealDataPath } from './void';
 
 export function getParamByName(name, url = window.location.href) {
   name = name.replace(/[\[\]]/g, '\\$&');
@@ -51,7 +52,8 @@ export function getValueByPath(formData, path) {
   if (path === '#' || !path) {
     return formData || {};
   } else if (typeof path === 'string') {
-    return get(formData, path);
+    const realPath = getRealDataPath(path);
+    return realPath && get(formData, realPath);
   } else {
     console.error('path has to be a string');
   }
@@ -97,7 +99,7 @@ export function getDataPath(id, dataIndex) {
       _id = _id.replace(/\[\]/, `[${item}]`);
     });
   }
-  return removeBrackets(_id);
+  return removeBrackets(getRealDataPath(_id));
 }
 
 export function isObjType(schema) {

diff --git a/packages/form-render/src/form-render-core/src/validator.js b/packages/form-render/src/form-render-core/src/validator.js
@@ -14,6 +14,7 @@ import {
 } from './utils';
 import { defaultValidateMessages } from './validateMessage';
 import { defaultValidateMessagesCN } from './validateMessageCN';
+import { getRealDataFlatten } from './void';
 
 export const parseSchemaExpression = (schema, formData, path) => {
   if (!isObject(schema)) return schema;
@@ -72,6 +73,8 @@ export const validateField = ({
 }) => {
   const paths = getRelatedPaths(path, flatten);
   // console.log('all relevant paths:', paths);
+
+  flatten = getRealDataFlatten(flatten);
   const promiseArray = paths.map(path => {
     const { id, dataIndex } = destructDataPath(path);
     if (flatten[id] || flatten[`${id}[]`]) {