fix(amis-saas-8235/):「布局容器」配置项细节优化

Change-Id: I878ae91705d0eb6629beb60640e313fc15048272

packages/amis-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amis-editor",
-  "version": "5.2.1-beta.15",
+  "version": "5.2.1-beta.16",
   "description": "amis 可视化编辑器",
   "main": "lib/index.js",
   "module": "esm/index.js",

packages/amis-editor/src/plugin/Container.tsx

@@ -86,6 +86,8 @@ export class ContainerPlugin extends BasePlugin {
               isFlexItem
                 ? getSchemaTpl('layout:flex', {
                     isFlexColumnItem,
+                    onText: isFlexColumnItem ? '弹性高度' : '弹性宽度',
+                    offText: isFlexColumnItem ? '固定高度' : '固定宽度',
                     visibleOn:
                       'data.style && (data.style.position === "static" || data.style.position === "relative")'
                   })
@@ -98,8 +100,16 @@ export class ContainerPlugin extends BasePlugin {
                 : null,
               isFlexItem
                 ? getSchemaTpl('layout:flex-basis', {
+                    label: isFlexColumnItem ? '弹性高度' : '弹性宽度',
                     visibleOn:
-                      'data.style && (data.style.position === "static" || data.style.position === "relative")'
+                      'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "1 1 auto"'
+                  })
+                : null,
+              isFlexItem
+                ? getSchemaTpl('layout:flex-basis', {
+                    label: isFlexColumnItem ? '固定高度' : '固定宽度',
+                    visibleOn:
+                      'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "0 0 auto"'
                   })
                 : null,
               getSchemaTpl('layout:position'),

packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx

@@ -90,6 +90,8 @@ export class FlexPluginBase extends BasePlugin {
                   isFlexItem
                     ? getSchemaTpl('layout:flex', {
                         isFlexColumnItem,
+                        onText: isFlexColumnItem ? '弹性高度' : '弹性宽度',
+                        offText: isFlexColumnItem ? '固定高度' : '固定宽度',
                         visibleOn:
                           'data.style && (data.style.position === "static" || data.style.position === "relative")'
                       })
@@ -102,9 +104,16 @@ export class FlexPluginBase extends BasePlugin {
                     : null,
                   isFlexItem
                     ? getSchemaTpl('layout:flex-basis', {
-                        label: isFlexColumnItem ? '默认高度' : '默认宽度',
+                        label: isFlexColumnItem ? '弹性高度' : '弹性宽度',
                         visibleOn:
-                          'data.style && (data.style.position === "static" || data.style.position === "relative")'
+                          'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "1 1 auto"'
+                      })
+                    : null,
+                  isFlexItem
+                    ? getSchemaTpl('layout:flex-basis', {
+                        label: isFlexColumnItem ? '固定高度' : '固定宽度',
+                        visibleOn:
+                          'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "0 0 auto"'
                       })
                     : null,
                   getSchemaTpl('layout:position'),

packages/amis-editor/src/plugin/Wrapper.tsx

@@ -52,6 +52,8 @@ export class WrapperPlugin extends BasePlugin {
                   isFlexItem
                     ? getSchemaTpl('layout:flex', {
                         isFlexColumnItem,
+                        onText: isFlexColumnItem ? '弹性高度' : '弹性宽度',
+                        offText: isFlexColumnItem ? '固定高度' : '固定宽度',
                         visibleOn:
                           'data.style && (data.style.position === "static" || data.style.position === "relative")'
                       })
@@ -64,9 +66,16 @@ export class WrapperPlugin extends BasePlugin {
                     : null,
                   isFlexItem
                     ? getSchemaTpl('layout:flex-basis', {
-                        label: isFlexColumnItem ? '默认高度' : '默认宽度',
+                        label: isFlexColumnItem ? '弹性高度' : '弹性宽度',
                         visibleOn:
-                          'data.style && (data.style.position === "static" || data.style.position === "relative")'
+                          'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "1 1 auto"'
+                      })
+                    : null,
+                  isFlexItem
+                    ? getSchemaTpl('layout:flex-basis', {
+                        label: isFlexColumnItem ? '固定高度' : '固定宽度',
+                        visibleOn:
+                          'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "0 0 auto"'
                       })
                     : null,
                   getSchemaTpl('layout:position'),

packages/amis-editor/src/tpl/layout.tsx

@@ -225,30 +225,11 @@ setSchemaTpl(
     name?: string;
     value?: string;
     visibleOn?: string;
+    isFlexItem?: boolean;
     pipeIn?: (value: any, data: any) => void;
     pipeOut?: (value: any, data: any) => void;
   }) => {
-    const configSchema = {
-      type: 'select',
-      label:
-        config?.label ||
-        tipedLabel(
-          '显示类型',
-          '默认为块级，可设置为弹性布局模式（flex布局容器）'
-        ),
-      name: config?.name || 'style.display',
-      value: config?.value || 'block',
-      visibleOn: config?.visibleOn,
-      pipeIn: config?.pipeIn,
-      pipeOut: config?.pipeOut,
-      onChange: (value: string, oldValue: string, model: any, form: any) => {
-        if (value !== 'flex' && value !== 'inline-flex') {
-          form.setValueByName('style.flexDirection', undefined);
-          form.setValueByName('style.justifyContent', undefined);
-          form.setValueByName('style.alignItems', undefined);
-        }
-      },
-      options: [
+    const configOptions = [
       {
         label: '块级(默认)',
         value: 'block'
@@ -270,6 +251,27 @@ setSchemaTpl(
         value: 'inline'
       }
     ]
+    const configSchema = {
+      type: 'select',
+      label:
+        config?.label ||
+        tipedLabel(
+          '显示类型',
+          '默认为块级，可设置为弹性布局模式（flex布局容器）'
+        ),
+      name: config?.name || 'style.display',
+      value: config?.value || 'block',
+      visibleOn: config?.visibleOn,
+      options: configOptions,
+      pipeIn: config?.pipeIn,
+      pipeOut: config?.pipeOut,
+      onChange: (value: string, oldValue: string, model: any, form: any) => {
+        if (value !== 'flex' && value !== 'inline-flex') {
+          form.setValueByName('style.flexDirection', undefined);
+          form.setValueByName('style.justifyContent', undefined);
+          form.setValueByName('style.alignItems', undefined);
+        }
+      },
     };
 
     if (config?.mode === 'vertical') {
@@ -537,6 +539,8 @@ setSchemaTpl(
     value?: string;
     visibleOn?: string;
     isFlexColumnItem?: boolean;
+    onText?: string;
+    offText?: string;
   }) => {
     return {
       type: 'switch',
@@ -547,8 +551,8 @@ setSchemaTpl(
       value: config?.value || '0 0 auto',
       trueValue: '1 1 auto',
       falseValue: '0 0 auto',
-      onText: '开启',
-      offText: '关闭',
+      onText: config?.onText || '开启',
+      offText: config?.offText || '关闭',
       inputClassName: 'inline-flex justify-between',
       visibleOn: config?.visibleOn,
       onChange: (value: any, oldValue: boolean, model: any, form: any) => {
@@ -595,7 +599,7 @@ setSchemaTpl(
       // pipeOut: config?.pipeOut,
       pipeOut: (value: string) => {
         const curValue = parseInt(value);
-        if (curValue || curValue === 0) {
+        if (value === 'auto' || curValue || curValue === 0) {
           return value;
         } else {
           return undefined;
@@ -696,7 +700,7 @@ setSchemaTpl(
       // pipeOut: config?.pipeOut,
       pipeOut: (value: string) => {
         const curValue = parseInt(value);
-        if (curValue || curValue === 0) {
+        if (value === 'auto' || curValue || curValue === 0) {
           return value;
         } else {
           return undefined;
@@ -735,7 +739,7 @@ setSchemaTpl(
       // pipeOut: config?.pipeOut
       pipeOut: (value: string) => {
         const curValue = parseInt(value);
-        if (curValue || curValue === 0) {
+        if (value === 'auto' || curValue || curValue === 0) {
           return value;
         } else {
           return undefined;
@@ -774,7 +778,7 @@ setSchemaTpl(
       // pipeOut: config?.pipeOut
       pipeOut: (value: string) => {
         const curValue = parseInt(value);
-        if (curValue || curValue === 0) {
+        if (value === 'auto' || curValue || curValue === 0) {
           return value;
         } else {
           return undefined;
@@ -887,7 +891,7 @@ setSchemaTpl(
       // pipeOut: config?.pipeOut
       pipeOut: (value: string) => {
         const curValue = parseInt(value);
-        if (curValue || curValue === 0) {
+        if (value === 'auto' || curValue || curValue === 0) {
           return value;
         } else {
           return undefined;
@@ -926,7 +930,7 @@ setSchemaTpl(
       // pipeOut: config?.pipeOut
       pipeOut: (value: string) => {
         const curValue = parseInt(value);
-        if (curValue || curValue === 0) {
+        if (value === 'auto' || curValue || curValue === 0) {
           return value;
         } else {
           return undefined;
@@ -965,7 +969,7 @@ setSchemaTpl(
       // pipeOut: config?.pipeOut
       pipeOut: (value: string) => {
         const curValue = parseInt(value);
-        if (curValue || curValue === 0) {
+        if (value === 'auto' || curValue || curValue === 0) {
           return value;
         } else {
           return undefined;