Merge pull request #8663 from zhangtao07/master

优化状态容器配置 & listSelect自定义label value适配

packages/amis-editor-core/src/plugin.ts

@@ -304,7 +304,7 @@ export interface RendererInfo extends RendererScaffoldInfo {
   sharedContext?: Record<string, any>;
   dialogTitle?: string; //弹窗标题用于弹窗大纲的展示
   dialogType?: string; //区分确认对话框类型
-  subEditorVariable?: Array<{label: string; children: any}>; // 传递给子编辑器的组件自定义变量，如listSelect的选项名称和值
+  getSubEditorVariable: (schema?: any) => Array<{label: string; children: any}>; // 传递给子编辑器的组件自定义变量，如listSelect的选项名称和值
 }
 
 export type BasicRendererInfo = Omit<
@@ -1051,7 +1051,7 @@ export abstract class BasePlugin implements PluginInterface {
         isListComponent: plugin.isListComponent,
         rendererName: plugin.rendererName,
         memberImmutable: plugin.memberImmutable,
-        subEditorVariable: plugin.subEditorVariable
+        getSubEditorVariable: plugin.getSubEditorVariable
       };
     }
   }

packages/amis-editor-core/src/util.ts

@@ -1224,7 +1224,10 @@ export async function resolveVariablesFromScope(node: any, manager: any) {
   // 子编辑器内读取的host节点自定义变量，非数据域方式，如listSelect的选项值
   let hostNodeVaraibles = [];
   if (manager?.store?.isSubEditor) {
-    hostNodeVaraibles = manager.config?.hostNode?.info?.subEditorVariable || [];
+    hostNodeVaraibles =
+      manager.config?.hostNode?.info?.getSubEditorVariable?.(
+        manager.config?.hostNode.schema
+      ) || [];
   }
 
   const variables: VariableItem[] =

packages/amis-editor/src/plugin/Form/ListSelect.tsx

@@ -109,21 +109,26 @@ export class ListControlPlugin extends BasePlugin {
     }
   ];
 
-  subEditorVariable: Array<{label: string; children: any}> = [
-    {
-      label: '当前选项',
-      children: [
-        {
-          label: '选项名称',
-          value: 'label'
-        },
-        {
-          label: '选项值',
-          value: 'value'
-        }
-      ]
-    }
-  ];
+  getSubEditorVariable(schema: any): Array<{label: string; children: any}> {
+    let labelField = schema?.labelField || 'label';
+    let valueField = schema?.valueField || 'value';
+
+    return [
+      {
+        label: '当前选项',
+        children: [
+          {
+            label: '选项名称',
+            value: labelField
+          },
+          {
+            label: '选项值',
+            value: valueField
+          }
+        ]
+      }
+    ];
+  }
 
   panelBodyCreator = (context: BaseEventContext) => {
     return formItemControl(
@@ -201,7 +206,7 @@ export class ListControlPlugin extends BasePlugin {
                     body: [
                       {
                         type: 'tpl',
-                        tpl: `\${${this.getDisplayField(value)}}`,
+                        tpl: `\${${this.getDisplayField(data)}}`,
                         wrapperComponent: '',
                         inline: true
                       }
@@ -275,16 +280,7 @@ export class ListControlPlugin extends BasePlugin {
   }
 
   getDisplayField(data: any) {
-    if (
-      data.source ||
-      (data.map &&
-        Array.isArray(data.map) &&
-        data.map[0] &&
-        Object.keys(data.map[0]).length > 1)
-    ) {
-      return data.labelField ?? 'label';
-    }
-    return 'label';
+    return data?.labelField ?? 'label';
   }
 
   editDetail(id: string, field: string) {

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

@@ -321,6 +321,7 @@ export class SwitchContainerPlugin extends LayoutBasePlugin {
                 name: 'items',
                 label: '状态列表',
                 addTip: '新增组件状态',
+                minLength: 1,
                 items: [
                   {
                     type: 'input-text',
@@ -356,6 +357,10 @@ export class SwitchContainerPlugin extends LayoutBasePlugin {
         title: '外观',
         className: 'p-none',
         body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('theme:base', {
+            collapsed: false,
+            extra: []
+          }),
           {
             title: '布局',
             body: [
@@ -460,7 +465,15 @@ export class SwitchContainerPlugin extends LayoutBasePlugin {
               getSchemaTpl('layout:stickyPosition')
             ]
           },
-          ...getSchemaTpl('theme:common', {exclude: ['layout']})
+          {
+            title: '自定义样式',
+            body: [
+              {
+                type: 'theme-cssCode',
+                label: false
+              }
+            ]
+          }
         ])
       },
       {

packages/amis-editor/src/renderer/ListItemControl.tsx

@@ -7,7 +7,7 @@ import {findDOMNode} from 'react-dom';
 import cx from 'classnames';
 import get from 'lodash/get';
 import Sortable from 'sortablejs';
-import {FormItem, Button, Icon, render as amisRender} from 'amis';
+import {FormItem, Button, Icon, render as amisRender, toast} from 'amis';
 import {autobind} from 'amis-editor-core';
 import type {Option} from 'amis';
 import {createObject, FormControlProps} from 'amis-core';
@@ -30,7 +30,6 @@ export type SourceType = 'custom' | 'api' | 'apicenter' | 'variable';
 
 export interface OptionControlState {
   items: Array<PlainObject>;
-  api: SchemaApi;
   labelField: string;
   valueField: string;
 }
@@ -50,7 +49,6 @@ export default class ListItemControl extends React.Component<
 
     this.state = {
       items: this.transformOptions(props),
-      api: props.data.source,
       labelField: props.data.labelField || 'title',
       valueField: props.data.valueField
     };
@@ -173,6 +171,12 @@ export default class ListItemControl extends React.Component<
    */
   handleDelete(index: number) {
     const items = this.state.items.concat();
+    const minLength = this.props.minLength;
+
+    if (minLength > 0 && items.length <= minLength) {
+      toast.warning(`列表项数目不能少于${minLength}`);
+      return;
+    }
 
     items.splice(index, 1);
     this.setState({items}, () => this.onChange());

packages/amis/src/renderers/Each.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import {Renderer, RendererProps, buildStyle, isPureVariable} from 'amis-core';
+import {
+  CustomStyle,
+  Renderer,
+  RendererProps,
+  buildStyle,
+  isPureVariable,
+  setThemeClassName
+} from 'amis-core';
 import {Schema} from 'amis-core';
 import {resolveVariable, resolveVariableAndFilter} from 'amis-core';
 import {createObject, getPropValue, isObject} from 'amis-core';
@@ -96,7 +103,11 @@ export default class Each extends React.Component<EachProps> {
       indexKeyName,
       placeholder,
       classnames: cx,
-      translate: __
+      translate: __,
+      env,
+      id,
+      wrapperCustomStyle,
+      themeCss
     } = this.props;
 
     const value = getPropValue(this.props, props =>
@@ -124,7 +135,14 @@ export default class Each extends React.Component<EachProps> {
     }
 
     return (
-      <div className={cx('Each', className)} style={buildStyle(style, data)}>
+      <div
+        className={cx(
+          'Each',
+          className,
+          setThemeClassName('baseControlClassName', id, themeCss)
+        )}
+        style={buildStyle(style, data)}
+      >
         {Array.isArray(arr) && arr.length && items ? (
           arr.map((item: any, index: number) => (
             <EachItem
@@ -144,6 +162,20 @@ export default class Each extends React.Component<EachProps> {
             {render('placeholder', __(placeholder))}
           </div>
         )}
+
+        <CustomStyle
+          config={{
+            wrapperCustomStyle,
+            id,
+            themeCss,
+            classNames: [
+              {
+                key: 'baseControlClassName'
+              }
+            ]
+          }}
+          env={env}
+        />
       </div>
     );
   }

packages/amis/src/renderers/SwitchContainer.tsx

@@ -80,7 +80,7 @@ export default class SwitchContainer extends React.Component<
 
   componentDidUpdate(preProps: SwitchContainerProps) {
     const items = this.props.items || [];
-    if (this.state.activeIndex >= 0 && !items[this.state.activeIndex]) {
+    if (this.state.activeIndex > 0 && !items[this.state.activeIndex]) {
       this.setState({
         activeIndex: 0
       });