chore: hbox 配置格式统一,旧格式通过 compat 兼容 (#2347)

src/compat.ts

@@ -16,6 +16,7 @@ import {ImageControlRenderer} from './renderers/Form/InputImage';
 import {RichTextControlRenderer} from './renderers/Form/InputRichText';
 import isPlainObject from 'lodash/isPlainObject';
 import {GridRenderer} from './renderers/Grid';
+import {HBoxRenderer} from './renderers/HBox';
 
 // 兼容老的用法，老用法 label 用在 checkbox 的右侧内容，新用法用 option 来代替。
 addSchemaFilter(function CheckboxPropsFilter(schema: Schema, renderer) {
@@ -311,7 +312,17 @@ addSchemaFilter(function (scheam: Schema, renderer) {
             ]
           };
         } else if (item.type) {
-          let {xs, sm, md, lg, body, ...rest} = item;
+          let {
+            xs,
+            sm,
+            md,
+            lg,
+            body,
+            columnClassName,
+            mode,
+            horizontal,
+            ...rest
+          } = item;
           body = Array.isArray(body) ? body.concat() : body ? [body] : [];
           body.push(rest);
           item = {
@@ -319,6 +330,55 @@ addSchemaFilter(function (scheam: Schema, renderer) {
             sm,
             md,
             lg,
+            columnClassName,
+            mode,
+            horizontal,
+            body
+          };
+        }
+
+        return item;
+      })
+    };
+  }
+
+  return scheam;
+});
+
+// Hbox 一些旧格式的兼容
+addSchemaFilter(function (scheam: Schema, renderer) {
+  if (renderer.component !== HBoxRenderer) {
+    return scheam;
+  }
+
+  if (Array.isArray(scheam.columns) && scheam.columns.some(item => item.type)) {
+    scheam = {
+      ...scheam,
+      columns: scheam.columns.map(item => {
+        let {
+          width,
+          height,
+          style,
+          columnClassName,
+          mode,
+          horizontal,
+          visible,
+          visibleOn,
+          body,
+          ...rest
+        } = item;
+        if (item.type) {
+          body = Array.isArray(body) ? body.concat() : body ? [body] : [];
+          body.push(rest);
+          item = {
+            width,
+            height,
+            style,
+            columnClassName,
+            mode,
+            horizontal,
+            visible,
+            visibleOn,
             body
           };
         }

src/renderers/HBox.tsx

@@ -3,7 +3,12 @@ import {Renderer, RendererProps} from '../factory';
 import {Api, SchemaNode, Schema, Action} from '../types';
 import cx from 'classnames';
 import {isVisible} from '../utils/helper';
-import {BaseSchema, SchemaObject} from '../Schema';
+import {
+  BaseSchema,
+  SchemaCollection,
+  SchemaExpression,
+  SchemaObject
+} from '../Schema';
 import {FormSchemaHorizontal} from './Form/index';
 
 export type HBoxColumnObject = {
@@ -37,9 +42,25 @@ export type HBoxColumnObject = {
    * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
    */
   horizontal?: FormSchemaHorizontal;
+
+  /**
+   * 内容区
+   */
+  body?: SchemaCollection;
+
+  /**
+   * 是否显示
+   */
+
+  visible?: boolean;
+
+  /**
+   * 是否显示表达式
+   */
+  visibleOn?: SchemaExpression;
 };
 
-export type HBoxColumn = HBoxColumnObject & SchemaObject; // 不能用 SchemaObject 呢，会报错
+export type HBoxColumn = HBoxColumnObject;
 
 /**
  * Hbox 水平布局渲染器。
@@ -96,7 +117,7 @@ export default class HBox extends React.Component<HBoxProps, object> {
       formHorizontal
     } = this.props;
 
-    if (!isVisible(column, data)) {
+    if (!isVisible(column, data) || !column) {
       return null;
     }
 
@@ -114,15 +135,11 @@ export default class HBox extends React.Component<HBoxProps, object> {
       >
         {itemRender
           ? itemRender(column, key, length, this.props)
-          : this.renderChild(
-              `column/${key}`,
-              column.type ? column : (column as any).body,
-              {
-                formMode: column.mode || subFormMode || formMode,
-                formHorizontal:
-                  column.horizontal || subFormHorizontal || formHorizontal
-              }
-            )}
+          : this.renderChild(`column/${key}`, (column as any).body, {
+              formMode: column.mode || subFormMode || formMode,
+              formHorizontal:
+                column.horizontal || subFormHorizontal || formHorizontal
+            })}
       </div>
     );
   }