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,9 +225,32 @@ setSchemaTpl(
     name?: string;
     value?: string;
     visibleOn?: string;
+    isFlexItem?: boolean;
     pipeIn?: (value: any, data: any) => void;
     pipeOut?: (value: any, data: any) => void;
   }) => {
+    const configOptions = [
+      {
+        label: '块级(默认)',
+        value: 'block'
+      },
+      {
+        label: '弹性布局',
+        value: 'flex'
+      },
+      {
+        label: '行内弹性布局',
+        value: 'inline-flex'
+      },
+      {
+        label: '行内块级',
+        value: 'inline-block'
+      },
+      {
+        label: '行内元素',
+        value: 'inline'
+      }
+    ]
     const configSchema = {
       type: 'select',
       label:
@@ -239,6 +262,7 @@ setSchemaTpl(
       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) => {
@@ -248,28 +272,6 @@ setSchemaTpl(
           form.setValueByName('style.alignItems', undefined);
         }
       },
-      options: [
-        {
-          label: '块级(默认)',
-          value: 'block'
-        },
-        {
-          label: '弹性布局',
-          value: 'flex'
-        },
-        {
-          label: '行内弹性布局',
-          value: 'inline-flex'
-        },
-        {
-          label: '行内块级',
-          value: 'inline-block'
-        },
-        {
-          label: '行内元素',
-          value: 'inline'
-        }
-      ]
     };
 
     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: '开启',
+      onText: config?.onText || '开启',
-      offText: '关闭',
+      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;