chore:组件事件列表支持动态构建

hsm-lv · Jan 2, 2024 · 5385e47 · 5385e47
1 parent d9ace50
commit 5385e47
Show file tree

Hide file tree

Showing 6 changed files with 242 additions and 251 deletions.
diff --git a/packages/amis-editor-core/src/plugin.ts b/packages/amis-editor-core/src/plugin.ts
@@ -802,7 +802,7 @@ export interface PluginInterface
    *
    * 事件定义集合
    */
-  events?: RendererPluginEvent[];
+  events?: RendererPluginEvent[] | ((schema: any) => RendererPluginEvent[]);
 
   /**
    *
@@ -997,7 +997,9 @@ export interface SubRendererPluginAction
   > {}
 
 export interface PluginEvents {
-  [propName: string]: RendererPluginEvent[];
+  [propName: string]:
+    | RendererPluginEvent[]
+    | ((schema: any) => RendererPluginEvent[]);
 }
 
 export interface PluginActions {

diff --git a/packages/amis-editor/src/plugin/Form/InputTree.tsx b/packages/amis-editor/src/plugin/Form/InputTree.tsx
@@ -177,7 +177,8 @@ export class TreeControlPlugin extends BasePlugin {
   panelTitle = '树选择';
 
   // 事件定义
-  events: RendererPluginEvent[] = TREE_BASE_EVENTS;
+  events: (schema: any) => RendererPluginEvent[] = (schema: any) =>
+    TREE_BASE_EVENTS(schema);
 
   // 动作定义
   actions: RendererPluginAction[] = [
@@ -294,35 +295,6 @@ export class TreeControlPlugin extends BasePlugin {
                 name: 'type',
                 label: '模式',
                 pipeIn: defaultValue('input-tree'),
-                onChange: (
-                  value: any,
-                  oldValue: any,
-                  model: any,
-                  form: any
-                ) => {
-                  const activeEvent = cloneDeep(
-                    form.getValueByName('onEvent') || {}
-                  );
-
-                  let eventList = this.events;
-                  if (value === 'tree-select') {
-                    const treeSelectPlugin = this.manager.plugins.find(
-                      item => item.rendererName === 'tree-select'
-                    );
-
-                    eventList = treeSelectPlugin?.events || [];
-                  }
-
-                  for (let key in activeEvent) {
-                    const hasEventKey = eventList.find(
-                      event => event.eventName === key
-                    );
-                    if (!hasEventKey) {
-                      delete activeEvent[key];
-                    }
-                  }
-                  form.setValueByName('onEvent', activeEvent);
-                },
                 options: [
                   {
                     label: '内嵌',

diff --git a/packages/amis-editor/src/plugin/Form/Select.tsx b/packages/amis-editor/src/plugin/Form/Select.tsx
@@ -84,84 +84,86 @@ export class SelectControlPlugin extends BasePlugin {
   };
 
   // 事件定义
-  events: RendererPluginEvent[] = [
-    {
-      eventName: 'change',
-      eventLabel: '值变化',
-      description: '选中值变化时触发',
-      dataSchema: (manager: EditorManager) => {
-        const {value, selectedItems, items} =
-          resolveOptionEventDataSchame(manager);
+  events: (schema: any) => RendererPluginEvent[] = (schema: any) => {
+    return [
+      {
+        eventName: 'change',
+        eventLabel: '值变化',
+        description: '选中值变化时触发',
+        dataSchema: (manager: EditorManager) => {
+          const {value, selectedItems, items} =
+            resolveOptionEventDataSchame(manager);
 
-        return [
-          {
-            type: 'object',
-            properties: {
-              data: {
-                type: 'object',
-                title: '数据',
-                properties: {
-                  value,
-                  selectedItems,
-                  items
+          return [
+            {
+              type: 'object',
+              properties: {
+                data: {
+                  type: 'object',
+                  title: '数据',
+                  properties: {
+                    value,
+                    selectedItems,
+                    items
+                  }
                 }
               }
             }
-          }
-        ];
-      }
-    },
-    {
-      eventName: 'focus',
-      eventLabel: '获取焦点',
-      description: '输入框获取焦点时触发',
-      dataSchema: (manager: EditorManager) => {
-        const {value, items} = resolveOptionEventDataSchame(manager);
+          ];
+        }
+      },
+      {
+        eventName: 'focus',
+        eventLabel: '获取焦点',
+        description: '输入框获取焦点时触发',
+        dataSchema: (manager: EditorManager) => {
+          const {value, items} = resolveOptionEventDataSchame(manager);
 
-        return [
-          {
-            type: 'object',
-            properties: {
-              data: {
-                type: 'object',
-                title: '数据',
-                properties: {
-                  value,
-                  items
+          return [
+            {
+              type: 'object',
+              properties: {
+                data: {
+                  type: 'object',
+                  title: '数据',
+                  properties: {
+                    value,
+                    items
+                  }
                 }
               }
             }
-          }
-        ];
-      }
-    },
-    {
-      eventName: 'blur',
-      eventLabel: '失去焦点',
-      description: '输入框失去焦点时触发',
-      dataSchema: (manager: EditorManager) => {
-        const {value, items} = resolveOptionEventDataSchame(manager);
+          ];
+        }
+      },
+      {
+        eventName: 'blur',
+        eventLabel: '失去焦点',
+        description: '输入框失去焦点时触发',
+        dataSchema: (manager: EditorManager) => {
+          const {value, items} = resolveOptionEventDataSchame(manager);
 
-        return [
-          {
-            type: 'object',
-            properties: {
-              data: {
-                type: 'object',
-                title: '数据',
-                properties: {
-                  value,
-                  items
+          return [
+            {
+              type: 'object',
+              properties: {
+                data: {
+                  type: 'object',
+                  title: '数据',
+                  properties: {
+                    value,
+                    items
+                  }
                 }
               }
             }
-          }
-        ];
-      }
-    },
-    ...OPTION_EDIT_EVENTS,
-    ...OPTION_EDIT_EVENTS_OLD
-  ];
+          ];
+        }
+      },
+      ...OPTION_EDIT_EVENTS,
+      ...OPTION_EDIT_EVENTS_OLD(schema)
+    ];
+  };
 
   // 动作定义
   actions: RendererPluginAction[] = [

diff --git a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx
@@ -83,8 +83,8 @@ export class TreeSelectControlPlugin extends BasePlugin {
   panelTitle = '树选择';
 
   // 事件定义
-  events: RendererPluginEvent[] = [
-    ...TREE_BASE_EVENTS,
+  events: (schema: any) => RendererPluginEvent[] = (schema: any) => [
+    ...TREE_BASE_EVENTS(schema),
     {
       eventName: 'focus',
       eventLabel: '获取焦点',
@@ -221,35 +221,6 @@ export class TreeSelectControlPlugin extends BasePlugin {
                 name: 'type',
                 label: '模式',
                 pipeIn: defaultValue('tree-select'),
-                onChange: (
-                  value: any,
-                  oldValue: any,
-                  model: any,
-                  form: any
-                ) => {
-                  const activeEvent = cloneDeep(
-                    form.getValueByName('onEvent') || {}
-                  );
-
-                  let eventList = this.events;
-                  if (value === 'input-tree') {
-                    const inputTreePlugin = this.manager.plugins.find(
-                      item => item.rendererName === 'input-tree'
-                    );
-
-                    eventList = inputTreePlugin?.events || [];
-                  }
-
-                  for (let key in activeEvent) {
-                    const hasEventKey = eventList.find(
-                      event => event.eventName === key
-                    );
-                    if (!hasEventKey) {
-                      delete activeEvent[key];
-                    }
-                  }
-                  form.setValueByName('onEvent', activeEvent);
-                },
                 options: [
                   {
                     label: '内嵌',

diff --git a/packages/amis-editor/src/renderer/event-control/index.tsx b/packages/amis-editor/src/renderer/event-control/index.tsx
@@ -150,10 +150,12 @@ export class EventControl extends React.Component<
       [prop: string]: boolean;
     } = {};
 
-    const pluginEvents =
+    const tmpEvents =
       events[
         rawType || (!data.type || data.type === 'text' ? 'plain' : data.type)
       ] || [];
+    const pluginEvents =
+      typeof tmpEvents === 'function' ? tmpEvents(data) : [...tmpEvents];
 
     pluginEvents.forEach((event: RendererPluginEvent) => {
       eventPanelActive[event.eventName] = true;
@@ -191,11 +193,35 @@ export class EventControl extends React.Component<
     prevProps: EventControlProps,
     prevState: EventControlState
   ) {
-    const {value} = this.props;
+    const {value, data, events, rawType} = this.props;
 
     if (value !== prevProps.value) {
       this.setState({onEvent: value});
     }
+
+    if (
+      data?.type !== prevProps.data?.type ||
+      data?.onEvent !== prevProps.data?.onEvent
+    ) {
+      const eventPanelActive: {
+        [prop: string]: boolean;
+      } = {};
+      const tmpEvents =
+        events[
+          rawType || (!data.type || data.type === 'text' ? 'plain' : data.type)
+        ] || [];
+      const pluginEvents =
+        typeof tmpEvents === 'function' ? tmpEvents(data) : [...tmpEvents];
+
+      pluginEvents.forEach((event: RendererPluginEvent) => {
+        eventPanelActive[event.eventName] = true;
+      });
+
+      this.setState({
+        events: pluginEvents,
+        eventPanelActive
+      });
+    }
   }
 
   generateEmptyDefault(events: RendererPluginEvent[]) {