Merge pull request #11222 from allenve/feat-globalEvent-eventAction

feat: 全局事件动作事件配置面板

packages/amis-editor-core/scss/control/_event-action.scss

@@ -206,6 +206,9 @@
       clip-path: inset(-5px 0px 0px 0px);
     }
   }
+  &-content-withglobalevent {
+    margin-top: 100px !important;
+  }
   .no-bd-btm {
     border-bottom: none;
   }

packages/amis-editor-core/src/component/Editor.tsx

@@ -6,7 +6,11 @@ import {MainStore, EditorStoreType} from '../store/editor';
 import {EditorManager, EditorManagerConfig, PluginClass} from '../manager';
 import {reaction} from 'mobx';
 import {RenderOptions, closeContextMenus, toast} from 'amis';
-import {PluginEventListener, RendererPluginAction} from '../plugin';
+import {
+  PluginEventListener,
+  RendererPluginAction,
+  IGlobalEvent
+} from '../plugin';
 import {reGenerateID} from '../util';
 import {SubEditor} from './SubEditor';
 import Breadcrumb from './Breadcrumb';
@@ -110,6 +114,8 @@ export interface EditorProps extends PluginEventListener {
     customActionGetter?: (manager: EditorManager) => {
       [propName: string]: RendererPluginAction;
     };
+
+    globalEventGetter?: (manager: EditorManager) => IGlobalEvent[];
   };
 
   /** 上下文变量 */

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

@@ -505,6 +505,15 @@ export interface RendererJSONSchemaResolveEventContext
   data: string;
 }
 
+export interface IGlobalEvent {
+  name: string; // 事件名称，唯一
+  description: string; // 事件描述
+  mapping: Array<{
+    key: string; // 入参名称
+    type: string; // 入参类型
+  }>;
+}
+
 /**
  * 右键菜单事件的上下文。
  */

packages/amis-editor/examples/Editor.tsx

@@ -315,6 +315,33 @@ const editorLanguages = [
   }
 ];
 
+const globalEvents = [
+  {
+    name: 'globalEventA',
+    description: '全局事件动作A',
+    mapping: [
+      {
+        key: 'name',
+        type: 'string'
+      },
+      {
+        key: 'age',
+        type: 'number'
+      }
+    ]
+  },
+  {
+    name: 'globalEventB',
+    description: '全局事件动作A',
+    mapping: [
+      {
+        key: 'name',
+        type: 'string'
+      }
+    ]
+  }
+];
+
 /**
  * 自定义渲染器示例
  */
@@ -645,7 +672,8 @@ export default class AMisSchemaEditor extends React.Component<any, any> {
         plugins={LayoutList} // 存放常见布局组件
         $schemaUrl={`${location.protocol}//${location.host}/schema.json`}
         actionOptions={{
-          showOldEntry: false
+          showOldEntry: false,
+          globalEventGetter: () => globalEvents
         }}
         amisEnv={
           {

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

@@ -2966,6 +2966,8 @@ export const getEventControlConfig = (
   const actionTree = manager?.config.actionOptions?.actionTreeGetter
     ? manager?.config.actionOptions?.actionTreeGetter(ACTION_TYPE_TREE(manager))
     : ACTION_TYPE_TREE(manager);
+  const globalEvents =
+    manager?.config.actionOptions?.globalEventGetter?.(manager);
   const allComponents = manager?.store?.getComponentTreeSource();
   const checkComponent = (node: any, action: RendererPluginAction) => {
     const actionType = action?.actionType;
@@ -3007,6 +3009,7 @@ export const getEventControlConfig = (
     events: manager?.pluginEvents,
     actionTree,
     commonActions,
+    globalEvents,
     owner: '',
     addBroadcast: manager?.addBroadcast,
     removeBroadcast: manager?.removeBroadcast,

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

@@ -43,18 +43,20 @@ import {
   PluginEvents,
   RendererPluginAction,
   RendererPluginEvent,
-  SubRendererPluginAction
+  SubRendererPluginAction,
+  IGlobalEvent
 } from 'amis-editor-core';
 export * from './helper';
 import {i18n as _i18n} from 'i18n-runtime';
-import type {VariableItem} from 'amis-ui/lib/components/formula/CodeEditor';
 import {reaction} from 'mobx';
 import {updateComponentContext} from 'amis-editor-core';
+import type {VariableItem} from 'amis-ui';
 
 interface EventControlProps extends FormControlProps {
   actions: PluginActions; // 组件的动作列表
   events: PluginEvents; // 组件的事件列表
   actionTree: RendererPluginAction[]; // 动作树
+  globalEvents?: IGlobalEvent[]; // 全局事件
   commonActions?: {[propName: string]: RendererPluginAction}; // 公共动作Map
   value: ActionEventConfig; // 事件动作配置
   onChange: (
@@ -277,6 +279,25 @@ export class EventControl extends React.Component<
     onChange && onChange(onEvent);
   }
 
+  addGlobalEvent(event: IGlobalEvent, disabled: boolean) {
+    const {onChange} = this.props;
+    let onEvent = {
+      ...this.state.onEvent
+    };
+    if (disabled) {
+      return;
+    }
+    onEvent[`${event.name}`] = {
+      weight: 0,
+      actions: []
+    };
+    this.setState({
+      onEvent: onEvent
+    });
+
+    onChange && onChange(onEvent);
+  }
+
   activeEventDialog(eventInfo: EventDialogData) {
     eventInfo = cloneDeep(eventInfo);
     if (!eventInfo.debounce) {
@@ -1043,6 +1064,7 @@ export class EventControl extends React.Component<
       getComponents,
       allComponents,
       render,
+      globalEvents,
       subscribeSchemaSubmit
     } = this.props;
     const {
@@ -1135,11 +1157,42 @@ export class EventControl extends React.Component<
               popOverContainer: null // amis 渲染挂载节点会使用 this.target
             }
           )}
+
+          {globalEvents
+            ? render(
+                'dropdown',
+                {
+                  type: 'dropdown-button',
+                  level: 'enhance',
+                  label: '添加全局事件',
+                  disabled: false,
+                  className: 'block w-full add-event-dropdown mt-2',
+                  closeOnClick: true,
+                  buttons: globalEvents.map(item => ({
+                    type: 'button',
+                    disabledTip: '您已添加该事件',
+                    tooltipPlacement: 'left',
+                    disabled: Object.keys(onEvent).includes(item.name),
+                    actionType: '',
+                    label: item.name,
+                    onClick: this.addGlobalEvent.bind(
+                      this,
+                      item,
+                      Object.keys(onEvent).includes(item.name)
+                    )
+                  }))
+                },
+                {
+                  popOverContainer: null // amis 渲染挂载节点会使用 this.target
+                }
+              )
+            : null}
         </header>
         <ul
           className={cx({
             'ae-event-control-content': true,
-            'ae-event-control-content-oldentry': showOldEntry
+            'ae-event-control-content-oldentry': showOldEntry,
+            'ae-event-control-content-withglobalevent': globalEvents?.length
           })}
           ref={this.dragRef}
         >