开关/选项卡组件事件 & 动作扩充

examples/components/EventAction/SwitchEvent.jsx

@@ -0,0 +1,35 @@
+export default {
+  type: 'page',
+  title: '开关组件事件',
+  regions: ['body', 'toolbar', 'header'],
+  body: [
+    {
+      type: 'tpl',
+      tpl: 'Switch组件',
+      inline: false,
+      wrapperComponent: 'h2'
+    },
+    {
+      type: 'form',
+      debug: true,
+      body: [
+        {
+          name: "switch",
+          type: "switch",
+          option: "开关事件",
+          onEvent: {
+            change: {
+              actions: [
+                {
+                  actionType: 'toast',
+                  msgType: 'info',
+                  msg: '派发change事件'
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ]
+};

examples/components/EventAction/TabsEvent.jsx

@@ -0,0 +1,95 @@
+export default {
+  type: 'page',
+  title: '标签页组件事件',
+  regions: ['body', 'toolbar', 'header'],
+  body: [
+    {
+      name: 'trigger1',
+      id: 'trigger1',
+      type: 'action',
+      label: '选项卡1',
+      level: 'primary',
+      className: 'mr-3 mb-3',
+      onEvent: {
+        click: {
+          actions: [
+            {
+              actionType: 'changeActiveKey',
+              componentId: 'tabs-change-receiver',
+              activeKey: 0
+            }
+          ]
+        }
+      }
+    },
+    {
+      name: 'trigger2',
+      id: 'trigger2',
+      type: 'action',
+      label: '选项卡2',
+      level: 'primary',
+      className: 'mr-3 mb-3',
+      onEvent: {
+        click: {
+          actions: [
+            {
+              actionType: 'changeActiveKey',
+              componentId: 'tabs-change-receiver',
+              activeKey: 1
+            }
+          ]
+        }
+      }
+    },
+    {
+      name: 'trigger3',
+      id: 'trigger3',
+      type: 'action',
+      label: '选项卡3',
+      level: 'primary',
+      className: 'mr-3 mb-3',
+      onEvent: {
+        click: {
+          actions: [
+            {
+              actionType: 'changeActiveKey',
+              componentId: 'tabs-change-receiver',
+              activeKey: 2
+            }
+          ]
+        }
+      }
+    },
+    {
+      name: 'tabs-change-receiver',
+      id: 'tabs-change-receiver',
+      type: 'tabs',
+      mode: 'line',
+      tabs: [
+        {
+          title: '选项卡1',
+          body: '选项卡内容1'
+        },
+        {
+          title: '选项卡2',
+          body: '选项卡内容2'
+        },
+        {
+          title: '选项卡3',
+          body: '选项卡内容3'
+        }
+      ],
+      onEvent: {
+        change: {
+          actions: [
+            {
+              actionType: 'toast',
+              msgType: 'info',
+              msg: '派发change事件'
+            }
+          ]
+        }
+      }
+    }
+  ]
+};

examples/components/Example.jsx

@@ -75,6 +75,8 @@ import StopEventActionSchema from './EventAction/Stop';
 import DataFlowEventActionSchema from './EventAction/DataFlow';
 import InputEventSchema from './EventAction/InputEvent';
 import DateEventSchema from './EventAction/DateEvent';
+import SwitchEventSchema from './EventAction/SwitchEvent';
+import TabsEventSchema from './EventAction/TabsEvent';
 import UploadEventSchema from './EventAction/UploadEvent';
 import SelectEventActionSchema from './EventAction/SelectEvent';
 import WizardSchema from './Wizard';
@@ -550,6 +552,16 @@ export const examples = [
                 label: '时间类组件',
                 path: 'examples/event/date',
                 component: makeSchemaRenderer(DateEventSchema)
+              },
+              {
+                label: '开关组件',
+                path: 'examples/event/switch',
+                component: makeSchemaRenderer(SwitchEventSchema)
+              },
+              {
+                label: '标签页组件',
+                path: 'examples/event/tabs',
+                component: makeSchemaRenderer(TabsEventSchema)
               }
             ]
           },

src/renderers/Form/Switch.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import Switch from '../../components/Switch';
+import {createObject, autobind} from '../../utils/helper';
 
 /**
  * Switch
@@ -50,6 +51,20 @@ export default class SwitchControl extends React.Component<SwitchProps, any> {
     falseValue: false,
     optionAtLeft: false
   };
+
+  @autobind
+  async handleChange(checked: string | number | boolean) {
+    const {dispatchEvent, data, onChange} = this.props;
+    const rendererEvent = await dispatchEvent('change', createObject(data, {
+      value: checked,
+    }));
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
+    onChange && onChange(checked);
+  }
+
   render() {
     const {
       className,
@@ -80,7 +95,7 @@ export default class SwitchControl extends React.Component<SwitchProps, any> {
           onText={onText}
           offText={offText}
           disabled={disabled}
-          onChange={onChange}
+          onChange={this.handleChange}
         />
 
         {optionAtLeft ? null : (

src/renderers/Tabs.tsx

@@ -28,6 +28,7 @@ import {
 } from '../utils/tpl-builtin';
 import {FormSchemaHorizontal} from './Form/index';
 import {str2AsyncFunction} from '../utils/api';
+import {ScopedContext, IScopedContext} from '../Scoped';
 
 export interface TabSchema extends Omit<BaseSchema, 'type'> {
   /**
@@ -175,12 +176,17 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
     unmountOnExit: false
   };
 
+  static contextType = ScopedContext;
+
   renderTab?: (tab: TabSchema, props: TabsProps, index: number) => JSX.Element;
   activeKey: any;
 
-  constructor(props: TabsProps) {
+  constructor(props: TabsProps, context: IScopedContext) {
     super(props);
 
+    const scoped = context;
+    scoped.registerComponent(this);
+
     const location = props.location || window.location;
     const tabs = props.tabs;
     let activeKey: any = 0;
@@ -230,7 +236,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
     } else {
       const tab = this.resolveTabByKey(this.activeKey);
       if (tab && value !== ((tab as any).value ?? tab.title)) {
-        onChange((tab as any).value ?? tab.title, name);
+        this.handleChange((tab as any).value ?? tab.title, name);
       }
     }
   }
@@ -313,11 +319,16 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
     } else if (this.activeKey !== prevState.activeKey) {
       const tab = this.resolveTabByKey(this.activeKey);
       if (tab && value !== ((tab as any).value ?? tab.title)) {
-        onChange((tab as any).value ?? tab.title, name);
+        this.handleChange((tab as any).value ?? tab.title, name);
       }
     }
   }
 
+  componentWillUnmount() {
+    const scoped = this.context as IScopedContext;
+    scoped.unRegisterComponent(this);
+  }
+
   resolveTabByKey(key: any) {
     const tabs = this.props.tabs;
 
@@ -408,6 +419,30 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
     }
   }
 
+  @autobind
+  async handleChange(key: any, name: any) {
+    const {dispatchEvent, data, onChange} = this.props;
+    const rendererEvent = await dispatchEvent('change', createObject(data, {
+      value: key,
+    }));
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
+    onChange && onChange(key, name);
+  }
+
+  /**
+   * 动作处理
+   */
+  doAction(action: Action, args: any) {
+    const actionType = action?.actionType as string;
+    const activeKey = action?.activeKey as number;
+    if (actionType === 'changeActiveKey') {
+      this.handleSelect(activeKey);
+    }
+  }
+
   @autobind
   switchTo(index: number) {
     const {tabs} = this.props;
@@ -581,6 +616,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
   }
 }
 @Renderer({
-  type: 'tabs'
+  type: 'tabs',
+  isolateScope: true,
 })
 export class TabsRenderer extends Tabs {}