Merge pull request #2118 from 2betop/1-2-issues

1.2.x 几个问题修复

scss/layout/_grid.scss

@@ -145,6 +145,7 @@
 @include media-breakpoint-up(sm) {
   .#{$ns}Grid {
     @include make-row;
+    flex: 1;
   }
 
   @include make-grid(sm);

scss/layout/_hbox.scss

@@ -12,32 +12,12 @@
     width: 100%;
     float: none;
   }
-}
-
-.#{$ns}FormHbox {
-  margin-left: calc(var(--gap-md) * -1);
-  margin-right: calc(var(--gap-md) * -1);
-
-  > .#{$ns}Hbox > .#{$ns}Hbox-col {
-    padding-left: var(--gap-md);
-    padding-right: var(--gap-md);
-    vertical-align: top;
-
-    > .#{$ns}Form-group {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    > .#{$ns}Form-group:last-child {
-      margin-bottom: 0;
-    }
-  }
 
   &.#{$ns}Hbox--xs {
     margin-left: -5px;
     margin-right: -5px;
 
-    > .#{$ns}Hbox > .#{$ns}Hbox-col {
+    > .#{$ns}Hbox-col {
       padding-left: 5px;
       padding-right: 5px;
     }
@@ -47,13 +27,33 @@
     margin-left: -10px;
     margin-right: -10px;
 
-    > .#{$ns}Hbox > .#{$ns}Hbox-col {
+    > .#{$ns}Hbox-col {
       padding-left: 10px;
       padding-right: 10px;
     }
   }
 }
 
+// .#{$ns}FormHbox {
+//   margin-left: calc(var(--gap-md) * -1);
+//   margin-right: calc(var(--gap-md) * -1);
+
+//   > .#{$ns}Hbox > .#{$ns}Hbox-col {
+//     padding-left: var(--gap-md);
+//     padding-right: var(--gap-md);
+//     vertical-align: top;
+
+//     > .#{$ns}Form-group {
+//       margin-left: 0;
+//       margin-right: 0;
+//     }
+
+//     > .#{$ns}Form-group:last-child {
+//       margin-bottom: 0;
+//     }
+//   }
+// }
+
 @include media-breakpoint-down(md) {
   .#{$ns}Hbox--autoSm {
     display: block;

src/compat.ts

@@ -398,6 +398,27 @@ function wrapControl(item: any) {
   };
 }
 
+const maybeStatic = [
+  'tpl',
+  'mapping',
+  'progress',
+  'status',
+  'json',
+  'video',
+  'qrcode'
+];
+
+function wrapStatic(item: any) {
+  if (!item || !item.type) {
+    return item;
+  }
+
+  return {
+    ...item,
+    type: `static-${item.type}`
+  };
+}
+
 addSchemaFilter(function (schema: Schema, renderer: any, props: any) {
   // controls 转成 body
   if (schema?.type === 'combo' && Array.isArray(schema.conditions)) {
@@ -443,10 +464,10 @@ addSchemaFilter(function (schema: Schema, renderer: any, props: any) {
     schema = {
       ...schema,
       tabs: schema.tabs.map(tab => {
-        if (Array.isArray(tab.controls)) {
+        if (Array.isArray(tab.controls) && !Array.isArray(tab.body)) {
           tab = {
             ...tab,
-            body: tab?.controls.map(controlToNormalRenderer)
+            body: tab.controls.map(controlToNormalRenderer)
           };
           delete tab.controls;
         }
@@ -490,11 +511,8 @@ addSchemaFilter(function (schema: Schema, renderer: any, props: any) {
 
             body: column?.controls.map(controlToNormalRenderer)
           };
+          delete column.type;
           delete column.controls;
-          if (!column.type) {
-            column.type = 'wrapper';
-            column.size = 'none';
-          }
         }
 
         return column;
@@ -520,6 +538,8 @@ addSchemaFilter(function (schema: Schema, renderer: any, props: any) {
         }
       : ~maybeFormItem.indexOf(item?.type)
       ? wrapControl(item)
+      : ~maybeStatic.indexOf(item?.type)
+      ? wrapStatic(item)
       : item;
   }
 });

src/renderers/Form/index.tsx

@@ -398,7 +398,8 @@ export default class Form extends React.Component<FormProps, object> {
     'formLazyChange',
     'lazyLoad',
     'formInited',
-    'simpleMode'
+    'simpleMode',
+    'inputOnly'
   ];
 
   hooks: {

src/renderers/Form/wrapControl.tsx

@@ -185,7 +185,10 @@ export function wrapControl<
             // 同步 value
             model.changeTmpValue(
               propValue ??
-                store?.getValueByName(model.name, canAccessSuperData) ??
+                store?.getValueByName(
+                  model.name,
+                  canAccessSuperData !== false
+                ) ??
                 value
             );
 

src/renderers/Grid.tsx

@@ -2,7 +2,12 @@ import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {Schema} from '../types';
 import pick from 'lodash/pick';
-import {BaseSchema, SchemaClassName, SchemaObject} from '../Schema';
+import {
+  BaseSchema,
+  SchemaClassName,
+  SchemaCollection,
+  SchemaObject
+} from '../Schema';
 
 export const ColProps = ['lg', 'md', 'sm', 'xs'];
 
@@ -106,6 +111,8 @@ export type GridColumnObject = {
   mode?: string;
   horizontal?: any;
 
+  body?: SchemaCollection;
+
   /**
    * 列类名
    */
@@ -168,7 +175,12 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
   static propsList: Array<string> = ['columns'];
   static defaultProps = {};
 
-  renderChild(region: string, node: Schema, key: number, length: number) {
+  renderChild(
+    region: string,
+    node: SchemaCollection,
+    key: number,
+    length: number
+  ) {
     const {render, itemRender} = this.props;
 
     return itemRender
@@ -206,7 +218,12 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
             )}
           </div>
         ) : (
-          this.renderChild(`column/${key}`, column, key, length)
+          this.renderChild(
+            `column/${key}`,
+            column.type ? column : (column as any).body!,
+            key,
+            length
+          )
         )}
       </div>
     );

src/renderers/HBox.tsx

@@ -56,7 +56,9 @@ export interface HBoxProps extends RendererProps, HBoxSchema {
 export default class HBox extends React.Component<HBoxProps, object> {
   static propsList: Array<string> = ['columns'];
 
-  static defaultProps: Partial<HBoxProps> = {};
+  static defaultProps: Partial<HBoxProps> = {
+    gap: 'xs'
+  };
 
   renderChild(region: string, node: Schema) {
     const {render} = this.props;
@@ -85,7 +87,10 @@ export default class HBox extends React.Component<HBoxProps, object> {
       >
         {itemRender
           ? itemRender(column, key, length, this.props)
-          : this.renderChild(`column/${key}`, column)}
+          : this.renderChild(
+              `column/${key}`,
+              column.type ? column : (column as any).body
+            )}
       </div>
     );
   }
@@ -99,8 +104,12 @@ export default class HBox extends React.Component<HBoxProps, object> {
   }
 
   render() {
-    const {className, classnames: cx} = this.props;
-    return <div className={cx(`Hbox`, className)}>{this.renderColumns()}</div>;
+    const {className, classnames: cx, gap} = this.props;
+    return (
+      <div className={cx(`Hbox`, className, gap ? `Hbox--${gap}` : '')}>
+        {this.renderColumns()}
+      </div>
+    );
   }
 }
 

src/renderers/Tpl.tsx

@@ -45,8 +45,7 @@ export interface TplProps extends RendererProps, TplSchema {
 export class Tpl extends React.Component<TplProps, object> {
   static defaultProps: Partial<TplProps> = {
     inline: true,
-    placeholder: '',
-    value: ''
+    placeholder: ''
   };
 
   dom: any;