chore: flex切换纵向时清除子容器为0的flexBasis

lhtuling · Jan 30, 2024 · a27ab0c · a27ab0c
1 parent 5042c82
commit a27ab0c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx
@@ -1,6 +1,7 @@
 /**
  * @file Flex 常见布局 1:3
  */
+import {PlainObject} from 'amis-core';
 import {LayoutBasePlugin, PluginEvent} from 'amis-editor-core';
 import {getSchemaTpl, tipedLabel} from 'amis-editor-core';
 import type {
@@ -87,6 +88,26 @@ export class FlexPluginBase extends LayoutBasePlugin {
 
   panelJustify = true; // 右侧配置项默认左右展示
 
+  resetFlexBasis = (node: EditorNodeType, flexSetting: PlainObject = {}) => {
+    let schema = node.schema;
+
+    if (
+      String(flexSetting.flexDirection).includes('column') &&
+      !schema?.style?.height
+    ) {
+      (node.children || []).forEach(child => {
+        if (
+          !child.schema?.style?.height ||
+          /^0/.test(child.schema?.style?.flexBasis)
+        ) {
+          child.updateSchemaStyle({
+            flexBasis: undefined
+          });
+        }
+      });
+    }
+  };
+
   panelBodyCreator = (context: BaseEventContext) => {
     const curRendererSchema = context?.schema || {};
     const isRowContent =
@@ -127,7 +148,12 @@ export class FlexPluginBase extends LayoutBasePlugin {
                     label: '弹性布局设置',
                     direction: curRendererSchema.direction,
                     justify: curRendererSchema.justify || 'center',
-                    alignItems: curRendererSchema.alignItems
+                    alignItems: curRendererSchema.alignItems,
+                    pipeOut: (value: any) => {
+                      // 纵向排列的非固定高度flex容器子元素去掉为0的flexBasis
+                      this.resetFlexBasis(context.node, value);
+                      return value;
+                    }
                   }),
 
                   getSchemaTpl('layout:flex-wrap'),

diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx
@@ -1498,6 +1498,8 @@ setSchemaTpl(
     direction?: string;
     justify?: string;
     alignItems?: string;
+    pipeIn?: (value: any, data: any) => void;
+    pipeOut?: (value: any, data: any) => void;
   }) => {
     return {
       type: 'flex-layout-setting',
@@ -1507,7 +1509,9 @@ setSchemaTpl(
       visibleOn: config?.visibleOn,
       direction: config?.direction,
       justify: config?.justify,
-      alignItems: config?.alignItems
+      alignItems: config?.alignItems,
+      pipeIn: config?.pipeIn,
+      pipeOut: config?.pipeOut
     };
   }
 );