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 <gradle@qq.com>
Co-authored-by: siyi98 <zhusijia1998@gmail.com>
Co-authored-by: 糠帅傅 <53564781+jaw52@users.noreply.github.com>

* feat(fr): update changelog

Co-authored-by: zhanbo.lh <zhanbo.lh@alibaba-inc.com>
Co-authored-by: yanxi <blogbbs@gmail.com>
Co-authored-by: Liuchang <Lchang0724@163.com>
Co-authored-by: zhichaosong <494303515@qq.com>
Co-authored-by: Johny.Li <gradle@qq.com>
Co-authored-by: 糠帅傅 <53564781+jaw52@users.noreply.github.com>

Author: 7 people

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;
+```

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#主题设置)
 
 设置嵌套表单的主题样式
 

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": "对象数组",

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` 支持自定义新增按钮

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);

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>
     );

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 = (

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;
 };
 

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) {

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}[]`]) {