diff --git a/libs/core/src/lib/angular-react-browser.module.ts b/libs/core/src/lib/angular-react-browser.module.ts index 18f362c3..1b578f26 100644 --- a/libs/core/src/lib/angular-react-browser.module.ts +++ b/libs/core/src/lib/angular-react-browser.module.ts @@ -3,7 +3,6 @@ import { NgModule } from '@angular/core'; import { BrowserModule, ɵDomRendererFactory2 } from '@angular/platform-browser'; -import './external/geteventlisteners'; import { AngularReactRendererFactory } from './renderer/renderer'; @NgModule({ diff --git a/libs/core/src/lib/external/geteventlisteners.ts b/libs/core/src/lib/renderer/geteventlisteners.ts similarity index 89% rename from libs/core/src/lib/external/geteventlisteners.ts rename to libs/core/src/lib/renderer/geteventlisteners.ts index a56d44e3..9527f51d 100644 --- a/libs/core/src/lib/external/geteventlisteners.ts +++ b/libs/core/src/lib/renderer/geteventlisteners.ts @@ -1,8 +1,13 @@ // Taken and modified from https://github.com/colxi/getEventListeners to be compiled into ES5, allowing running in older browsers -(function() { - 'use strict'; - +/** + * Monkey-patches `Element`'s `addEventListener` & `removeEventListener` and adds `getEventListeners`. + * This later allows the renderer to emit any event handlers attached to React-wrapped components as Angular Outputs: +```html + +``` + */ +export function initHooks() { // save the original methods before overwriting them Element.prototype['_addEventListener'] = Element.prototype.addEventListener; Element.prototype['_removeEventListener'] = Element.prototype.removeEventListener; @@ -83,4 +88,4 @@ } }; */ -})(); +} diff --git a/libs/core/src/lib/renderer/renderer.ts b/libs/core/src/lib/renderer/renderer.ts index bb7595f5..da19ee90 100644 --- a/libs/core/src/lib/renderer/renderer.ts +++ b/libs/core/src/lib/renderer/renderer.ts @@ -8,6 +8,7 @@ import { Disguise } from './components/Disguise'; import { ReactContent } from './react-content'; import { isReactNode, ReactNode } from './react-node'; import { registerElement } from './registry'; +import { initHooks as initGetEventListeners } from './geteventlisteners'; const DEBUG = false; @@ -83,6 +84,9 @@ export class ReactRenderer implements Renderer2 { }; constructor(public readonly rootRenderer: AngularReactRendererFactory) { + // Attach hooks to event handlers so we can intercept and re-emit any event handlers passed to React-wrapper components + initGetEventListeners(); + // These two elements are essential for the whole experience to be smooth for the user - register them from the get-go. registerElement('ReactContent', () => ReactContent); registerElement('Disguise', () => Disguise); diff --git a/libs/fabric/package.json b/libs/fabric/package.json index 01823e10..93a6ed9c 100644 --- a/libs/fabric/package.json +++ b/libs/fabric/package.json @@ -11,31 +11,34 @@ "@angular-react/core": "ɵa", "office-ui-fabric-react/lib/Breadcrumb": "Breadcrumb", "office-ui-fabric-react/lib/Button": "Button", - "office-ui-fabric-react/lib/Image": "Image", - "office-ui-fabric-react/lib/Icon": "Icon", - "office-ui-fabric-react/lib/Dialog": "Dialog", - "office-ui-fabric-react/lib/Fabric": "Fabric", + "office-ui-fabric-react/lib/Calendar": "Calendar", "office-ui-fabric-react/lib/Callout": "Callout", "office-ui-fabric-react/lib/Checkbox": "Checkbox", "office-ui-fabric-react/lib/ChoiceGroup": "ChoiceGroup", "office-ui-fabric-react/lib/ComboBox": "ComboBox", "office-ui-fabric-react/lib/CommandBar": "CommandBar", "office-ui-fabric-react/lib/DatePicker": "DatePicker", + "office-ui-fabric-react/lib/DetailsList": "DetailsList", + "office-ui-fabric-react/lib/Dialog": "Dialog", "office-ui-fabric-react/lib/Divider": "Divider", + "office-ui-fabric-react/lib/Fabric": "Fabric", "office-ui-fabric-react/lib/GroupedList": "GroupedList", + "office-ui-fabric-react/lib/HoverCard": "HoverCard", + "office-ui-fabric-react/lib/Icon": "Icon", + "office-ui-fabric-react/lib/Image": "Image", + "office-ui-fabric-react/lib/Link": "Link", + "office-ui-fabric-react/lib/MarqueeSelection": "MarqueeSelection", + "office-ui-fabric-react/lib/MessageBar": "MessageBar", + "office-ui-fabric-react/lib/Modal": "Modal", "office-ui-fabric-react/lib/Panel": "Panel", "office-ui-fabric-react/lib/Persona": "Persona", - "office-ui-fabric-react/lib/Spinner": "Spinner", - "office-ui-fabric-react/lib/MessageBar": "MessageBar", - "office-ui-fabric-react/lib/Link": "Link", "office-ui-fabric-react/lib/Pivot": "Pivot", - "office-ui-fabric-react/lib/Toggle": "Toggle", - "office-ui-fabric-react/lib/HoverCard": "HoverCard", - "office-ui-fabric-react/lib/Tooltip": "Tooltip", - "office-ui-fabric-react/lib/Modal": "Modal", + "office-ui-fabric-react/lib/SearchBox": "SearchBox", "office-ui-fabric-react/lib/Shimmer": "Shimmer", "office-ui-fabric-react/lib/Slider": "Slider", - "office-ui-fabric-react/lib/SearchBox": "SearchBox" + "office-ui-fabric-react/lib/Spinner": "Spinner", + "office-ui-fabric-react/lib/Toggle": "Toggle", + "office-ui-fabric-react/lib/Tooltip": "Tooltip" }, "comments": "none" },