弹框支持选择外部组件

Change-Id: Ib8f64cedad9502f3c35169e782dc4df25450366d

packages/amis-editor/src/renderer/event-control/action-config-dialog.tsx

@@ -116,7 +116,6 @@ export default class ActionDialog extends React.Component<ActionDialogProp> {
         }
 
         const actionNode = findActionNode(actionTree, value);
-
         form.setValues({
           ...removeKeys,
           __keywords: form.data.__keywords,
@@ -158,7 +157,6 @@ export default class ActionDialog extends React.Component<ActionDialogProp> {
       commonActions,
       onClose
     } = this.props;
-
     return amisRender(
       {
         type: 'dialog',

packages/amis-editor/src/renderer/event-control/actions.tsx

@@ -192,6 +192,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                     manager.openSubEditor({
                       title: '配置弹框内容',
                       value: {type: 'dialog', ...value},
+                      data,
                       onChange: (value: any) => onChange(value)
                     })
                   }

packages/amis-editor/src/renderer/event-control/helper.tsx

@@ -17,6 +17,7 @@ import {DataSchema, filterTree, findTree, mapTree, normalizeApi} from 'amis-core
 import CmptActionSelect from './comp-action-select';
 import {Button} from 'amis';
 import ACTION_TYPE_TREE from './actions';
+import { stores } from 'amis-core/lib/factory';
 
 // 数据容器范围
 export const DATA_CONTAINER = [
@@ -948,6 +949,7 @@ export const getEventControlConfig = (
   manager: EditorManager,
   context: BaseEventContext
 ) => {
+  const isSubEditor = manager.store.isSubEditor;
   // 通用动作配置
   const commonActions =
     manager?.config.actionOptions?.customActionGetter?.(manager);
@@ -955,7 +957,49 @@ export const getEventControlConfig = (
   const actionTree = manager?.config.actionOptions?.actionTreeGetter
     ? manager?.config.actionOptions?.actionTreeGetter(ACTION_TYPE_TREE(manager))
     : ACTION_TYPE_TREE(manager);
-
+  const allComponents = mapTree(
+    manager?.store?.outline ?? [],
+    (item: any) => {
+      const schema = manager?.store?.getSchema(item.id);
+      return {
+        id: item.id,
+        label: item.label,
+        value: schema?.id ?? item.id,
+        type: schema?.type ?? item.type,
+        schema,
+        disabled: !!item.region,
+        children: item?.children
+      };
+    },
+    1,
+    true
+  );
+  const checkComponent = (node: any, action: RendererPluginAction) => {
+    const actionType = action.actionType;
+    const actions = manager?.pluginActions[node.type];
+    const haveChild = !!node.children?.length;
+    let isSupport = false;
+    if (typeof action.supportComponents === 'string') {
+      isSupport =
+        action.supportComponents === '*' ||
+        action.supportComponents === node.type;
+    } else if (Array.isArray(action.supportComponents)) {
+      isSupport = action.supportComponents.includes(node.type);
+    }
+    if (['reload', 'setValue'].includes(actionType)) {
+      isSupport = hasActionType(actionType, actions);
+    }
+    if (actionType === 'component' && !actions?.length) {
+      node.disabled = true;
+    }
+    if (isSupport) {
+      return true;
+    } else if (haveChild) {
+      node.disabled = true;
+      return true;
+    }
+    return false;
+  }
   return {
     showOldEntry: manager?.config.actionOptions?.showOldEntry !== false &&
     (!!context.schema.actionType ||
@@ -967,6 +1011,7 @@ export const getEventControlConfig = (
     owner: '',
     addBroadcast: manager?.addBroadcast,
     removeBroadcast: manager?.removeBroadcast,
+    allComponents: allComponents,
     getContextSchemas: async (id?: string, withoutSuper?: boolean) => {
       const dataSchema = await manager.getContextSchemas(
         id ?? context!.id,
@@ -979,56 +1024,23 @@ export const getEventControlConfig = (
       return manager.dataSchema;
     },
     getComponents: (action: RendererPluginAction) => {
-      const actionType = action.actionType!;
-      const components = filterTree(
-        mapTree(
-          manager?.store?.outline ?? [],
-          (item: any) => {
-            const schema = manager?.store?.getSchema(item.id);
-            return {
-              id: item.id,
-              label: item.label,
-              value: schema?.id ?? item.id,
-              type: schema?.type ?? item.type,
-              schema,
-              disabled: !!item.region,
-              children: item?.children
-            };
-          },
-          1,
-          true
-        ),
-        node => {
-          const actions = manager?.pluginActions[node.type];
-          let isSupport = false;
-          if (typeof action.supportComponents === 'string') {
-            isSupport =
-              action.supportComponents === '*' ||
-              action.supportComponents === node.type;
-          } else if (Array.isArray(action.supportComponents)) {
-            isSupport = action.supportComponents.includes(node.type);
+      let components = allComponents;
+      if (isSubEditor) {
+        let superTree = manager.store.getSuperEditorData;
+        while(superTree) {
+          if (superTree.__superCmptTreeSource) {
+            components = components.concat(superTree.__superCmptTreeSource);
           }
-          if (['reload', 'setValue'].includes(actionType)) {
-            isSupport = hasActionType(actionType, actions);
-          }
-
-          if (actionType === 'component' && !actions?.length) {
-            node.disabled = true;
-          }
-
-          if (isSupport) {
-            return true;
-          } else if (!isSupport && !!node.children?.length) {
-            node.disabled = true;
-            return true;
-          }
-          return false;
-        },
+          superTree = superTree.__super;
+        }
+      }
+      const result = filterTree(
+        components,
+        (node) => checkComponent(node, action),
         1,
         true
       );
-
-      return components;
+      return result;
     },
     actionConfigInitFormatter: (action: ActionConfig) => {
       let config = {...action};

packages/amis-editor/src/renderer/event-control/index.tsx

@@ -73,6 +73,7 @@ interface EventControlState {
         groupType?: string;
         __actionDesc?: string;
         __cmptTreeSource?: ComponentInfo[];
+        __superCmptTreeSource?: ComponentInfo[];
         __actionSchema?: any;
         __subActions?: SubRendererPluginAction[];
         __setValueDs?: any[];
@@ -492,13 +493,13 @@ export class EventControl extends React.Component<
       getContextSchemas,
       actionConfigInitFormatter,
       getComponents,
-      actionTree
+      actionTree,
+      allComponents
     } = this.props;
     const {rawVariables} = this.state;
     // 收集事件变量
     const eventVariables = this.getEventVariables(data);
     const variables = [...eventVariables, ...rawVariables];
-
     // 编辑操作，需要格式化动作配置
     if (data.type === 'update') {
       const action = data.actionData!.action!;
@@ -521,7 +522,7 @@ export class EventControl extends React.Component<
             item => item.value !== '$$id'
           );
         }
-      }
+      };
       data.actionData = {
         eventKey: data.actionData!.eventKey,
         actionIndex: data.actionData!.actionIndex,
@@ -537,6 +538,8 @@ export class EventControl extends React.Component<
         __cmptTreeSource: actionConfig?.componentId
           ? getComponents?.(actionNode!) ?? []
           : [],
+        __superCmptTreeSource: allComponents,
+        // __supersCmptTreeSource: '',
         __setValueDs: setValueDs
         // broadcastId: action.actionType === 'broadcast' ? action.eventName : ''
       };
@@ -554,10 +557,10 @@ export class EventControl extends React.Component<
         variables,
         pluginActions,
         getContextSchemas,
-        rawVariables
+        rawVariables,
+        __superCmptTreeSource: allComponents
       };
     }
-
     this.setState(data);
   }