Allow specifying arbitrary event handlers to any ReactWrapperComponent

apps/demo/src/app/app.component.html

@@ -3,63 +3,114 @@ <h1>Angular-React Demo</h1>
   <h2>Getting up and running...</h2>
 
   <ol>
-    <li>Add
-      <i>AngularReactBrowserModule</i> to
-      <i>app.module.ts</i> in place of the default
-      <i>BrowserModule</i>.</li>
-    <li>Add
-      <i>Fab[component]Module</i> or
-      <i>Mat[component]Module</i> to
-      <i>app.module.ts</i> imports.</li>
+    <li>Add <i>AngularReactBrowserModule</i> to <i>app.module.ts</i> in place of the default <i>BrowserModule</i>.</li>
+    <li>Add <i>Fab[component]Module</i> or <i>Mat[component]Module</i> to <i>app.module.ts</i> imports.</li>
     <li>Add Fabric or Material components to your views.</li>
   </ol>
 </div>
 
+<fab-icon iconName="Add" (onClick)="onClickEventHandler($event)" (onMouseOver)="onMouseOverEventHandler($event)">
+</fab-icon>
+
 <div>
   <fab-pivot>
-    <fab-pivot-item headerText="Tab 1">
-      <div>Tab 1's content</div>
-    </fab-pivot-item>
-    <fab-pivot-item headerText="Tab 2">
-      <div>Tab 2's content</div>
-    </fab-pivot-item>
-    <fab-pivot-item headerText="Tab 3">
-      <div>Tab 3's content</div>
-    </fab-pivot-item>
+    <fab-pivot-item headerText="Tab 1"> <div>Tab 1's content</div> </fab-pivot-item>
+    <fab-pivot-item headerText="Tab 2"> <div>Tab 2's content</div> </fab-pivot-item>
+    <fab-pivot-item headerText="Tab 3"> <div>Tab 3's content</div> </fab-pivot-item>
   </fab-pivot>
 
   <fab-command-bar>
     <items>
-      <fab-command-bar-item key="run" text="Run" [iconProps]="{ iconName: 'CaretRight' }" [disabled]="runDisabled"></fab-command-bar-item>
-      <fab-command-bar-item key="new" text="New" [iconProps]="{ iconName: 'Add' }" (click)="onNewClicked()"></fab-command-bar-item>
-      <fab-command-bar-item key="copy1" text="Copy1" [iconProps]="{ iconName: 'Copy' }" (click)="onCopyClicked()"></fab-command-bar-item>
-      <fab-command-bar-item key="copy2" text="Copy2" [iconProps]="{ iconName: 'Copy' }" (click)="onCopyClicked()"></fab-command-bar-item>
-      <fab-command-bar-item key="copy3" text="Copy3" [iconProps]="{ iconName: 'Copy' }" (click)="onCopyClicked()"></fab-command-bar-item>
-      <fab-command-bar-item key="copy4" text="Copy4" [iconProps]="{ iconName: 'Copy' }" (click)="onCopyClicked()"></fab-command-bar-item>
-      <fab-command-bar-item key="copy5" text="Copy5" [iconProps]="{ iconName: 'Copy' }" (click)="onCopyClicked()"></fab-command-bar-item>
-      <fab-command-bar-item key="copy6" text="Copy6" [iconProps]="{ iconName: 'Copy' }" (click)="onCopyClicked()"></fab-command-bar-item>
-      <fab-command-bar-item key="copy7" text="Copy7" [iconProps]="{ iconName: 'Copy' }" (click)="onCopyClicked()"></fab-command-bar-item>
-      <fab-command-bar-item key="copy8" text="Copy8" [iconProps]="{ iconName: 'Copy' }" (click)="onCopyClicked()"></fab-command-bar-item>
-      <fab-command-bar-item key="copy9" text="Copy9" [iconProps]="{ iconName: 'Copy' }" (click)="onCopyClicked()"></fab-command-bar-item>
+      <fab-command-bar-item
+        key="run"
+        text="Run"
+        [iconProps]="{ iconName: 'CaretRight' }"
+        [disabled]="runDisabled"
+      ></fab-command-bar-item>
+      <fab-command-bar-item
+        key="new"
+        text="New"
+        [iconProps]="{ iconName: 'Add' }"
+        (click)="onNewClicked()"
+      ></fab-command-bar-item>
+      <fab-command-bar-item
+        key="copy1"
+        text="Copy1"
+        [iconProps]="{ iconName: 'Copy' }"
+        (click)="onCopyClicked()"
+      ></fab-command-bar-item>
+      <fab-command-bar-item
+        key="copy2"
+        text="Copy2"
+        [iconProps]="{ iconName: 'Copy' }"
+        (click)="onCopyClicked()"
+      ></fab-command-bar-item>
+      <fab-command-bar-item
+        key="copy3"
+        text="Copy3"
+        [iconProps]="{ iconName: 'Copy' }"
+        (click)="onCopyClicked()"
+      ></fab-command-bar-item>
+      <fab-command-bar-item
+        key="copy4"
+        text="Copy4"
+        [iconProps]="{ iconName: 'Copy' }"
+        (click)="onCopyClicked()"
+      ></fab-command-bar-item>
+      <fab-command-bar-item
+        key="copy5"
+        text="Copy5"
+        [iconProps]="{ iconName: 'Copy' }"
+        (click)="onCopyClicked()"
+      ></fab-command-bar-item>
+      <fab-command-bar-item
+        key="copy6"
+        text="Copy6"
+        [iconProps]="{ iconName: 'Copy' }"
+        (click)="onCopyClicked()"
+      ></fab-command-bar-item>
+      <fab-command-bar-item
+        key="copy7"
+        text="Copy7"
+        [iconProps]="{ iconName: 'Copy' }"
+        (click)="onCopyClicked()"
+      ></fab-command-bar-item>
+      <fab-command-bar-item
+        key="copy8"
+        text="Copy8"
+        [iconProps]="{ iconName: 'Copy' }"
+        (click)="onCopyClicked()"
+      ></fab-command-bar-item>
+      <fab-command-bar-item
+        key="copy9"
+        text="Copy9"
+        [iconProps]="{ iconName: 'Copy' }"
+        (click)="onCopyClicked()"
+      ></fab-command-bar-item>
       <fab-command-bar-item key="custom" text="custom text" (click)="onCopyClicked()">
         <render>
-          <ng-template let-item="item">
-            <counter></counter>
-          </ng-template>
+          <ng-template let-item="item"> <counter></counter> </ng-template>
         </render>
 
-        <!-- <render-icon>
+        <!--
+          <render-icon>
             <ng-template let-contextualMenuItemProps="contextualMenuItemProps">
               <div>custom icon</div>
             </ng-template>
-          </render-icon> -->
+          </render-icon>
+        -->
       </fab-command-bar-item>
       <fab-command-bar-item *ngIf="runDisabled" key="sometimesVisible" text="woosh"></fab-command-bar-item>
     </items>
 
     <far-items>
       <fab-command-bar-item key="help" text="Help" [iconProps]="{ iconName: 'Help' }"></fab-command-bar-item>
-      <fab-command-bar-item key="full-screen" [iconOnly]="true" [iconProps]="{ iconName: fullScreenIcon }" (click)="toggleFullScreen()"></fab-command-bar-item>
+      <fab-command-bar-item
+        key="full-screen"
+        [iconOnly]="true"
+        [iconProps]="{ iconName: fullScreenIcon }"
+        (click)="toggleFullScreen()"
+      ></fab-command-bar-item>
     </far-items>
   </fab-command-bar>
 

apps/demo/src/app/app.component.ts

@@ -11,6 +11,14 @@ export class AppComponent {
   @ViewChild('customRange')
   customRangeTemplate: TemplateRef<{ item: any; dismissMenu: (ev?: any, dismissAll?: boolean) => void }>;
 
+  onClickEventHandler(ev) {
+    console.log('onClick', { ev });
+  }
+
+  onMouseOverEventHandler(ev) {
+    console.log('onMouseOver', { ev });
+  }
+
   marqueeEnabled: boolean;
   runDisabled: boolean;
   selection: ISelection;

libs/core/package.json

@@ -8,7 +8,8 @@
       "tslib",
       "css-to-style",
       "classnames",
-      "stylenames"
+      "stylenames",
+      "geteventlisteners"
     ],
     "lib": {
       "languageLevel": [
@@ -60,11 +61,13 @@
   "dependencies": {
     "css-to-style": "^1.2.0",
     "classnames": "^2.2.6",
-    "stylenames": "^1.1.6"
+    "stylenames": "^1.1.6",
+    "geteventlisteners": "^1.0.6"
   },
   "bundledDependencies": [
     "css-to-style",
     "classnames",
-    "stylenames"
+    "stylenames",
+    "geteventlisteners"
   ]
 }

libs/core/src/lib/@types/geteventlisteners.d.ts

@@ -0,0 +1,23 @@
+interface EventListener<K extends keyof ElementEventMap> {
+  type: K;
+  listener: (ev: ElementEventMap[K]) => void;
+  options?: boolean | EventListenerOptions;
+}
+
+type EventListenerArray<K extends keyof ElementEventMap> = EventListener<K>[];
+
+type EventListenersMap<K extends keyof ElementEventMap> = Record<K, EventListenerArray<K>>;
+
+// declare global {
+interface Element {
+  /**
+   * Gets all the event listeners of the element.
+   */
+  getEventListeners<K extends keyof ElementEventMap>(): EventListenersMap<K>;
+
+  /**
+   * Gets all the event listeners of a type of the element.
+   */
+  getEventListeners<K extends keyof ElementEventMap>(type?: K): EventListenerArray<K>;
+}
+// }

libs/core/src/lib/angular-react-browser.module.ts

@@ -3,7 +3,7 @@
 
 import { NgModule } from '@angular/core';
 import { BrowserModule, ɵDomRendererFactory2 } from '@angular/platform-browser';
-
+import 'geteventlisteners';
 import { AngularReactRendererFactory } from './renderer/renderer';
 
 @NgModule({

libs/core/src/lib/components/wrapper-component.ts

@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+/// <reference path="../@types/geteventlisteners.d.ts" />
 
 import {
   AfterViewInit,
@@ -24,6 +25,7 @@ import { ReactContentProps } from '../renderer/react-content';
 import { isReactNode } from '../renderer/react-node';
 import { isReactRendererData } from '../renderer/renderer';
 import { createComponentRenderer, createHtmlRenderer, createTemplateRenderer } from '../renderer/renderprop-helpers';
+import { toObject } from '../utils/object/to-object';
 import { afterRenderFinished } from '../utils/render/render-delay';
 import { unreachable } from '../utils/types/unreachable';
 
@@ -278,7 +280,20 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
       {}
     );
 
-    this.reactNodeRef.nativeElement.setProperties(props);
+    const eventListeners = this.elementRef.nativeElement.getEventListeners();
+    const eventHandlersProps =
+      eventListeners && Object.keys(eventListeners).length
+        ? toObject(
+            Object.values(eventListeners).map<[string, React.EventHandler<React.SyntheticEvent>]>(([eventListener]) => [
+              eventListener.type,
+              (ev: React.SyntheticEvent) => eventListener.listener(ev && ev.nativeEvent),
+            ])
+          )
+        : {};
+    {
+    }
+
+    this.reactNodeRef.nativeElement.setProperties({ ...props, ...eventHandlersProps });
   }
 
   private _setHostDisplay() {

libs/core/src/lib/utils/object/to-object.ts

@@ -0,0 +1,12 @@
+/**
+ * Transforms an array of [key, value] tuples to an object
+ */
+export function toObject<T extends [string, any][]>(pairs: T): object {
+  return pairs.reduce(
+    (acc, [key, value]) =>
+      Object.assign(acc, {
+        [key]: value,
+      }),
+    {}
+  );
+}

libs/core/tsconfig.lib.json

@@ -12,10 +12,8 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "types": [],
-    "lib": [
-      "dom",
-      "es2015"
-    ]
+    "typeRoots": ["./src/lib/@types"],
+    "lib": ["dom", "es2015"]
   },
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
@@ -26,8 +24,5 @@
     "flatModuleId": "AUTOGENERATED",
     "flatModuleOutFile": "AUTOGENERATED"
   },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
+  "exclude": ["src/test.ts", "**/*.spec.ts"]
 }