Layer: Reintroduce Portals with Event Blocking (#6211)

* Move <Layer> to use React portals when available (#4724) * Use Portals when available for Callout * Update shrinkwrap * Set virtual parent for initial render * Only wait for target when required * Update shrinkwrap * update * Prevent markdown-to-jsx from upgrading * Add patch file for example app base change * Update Layer.tsx * Add event blocking to maintain traditional behavior that can be disabled by new prop. * Remove old LayerBase implementation. * Add portal utility helper and use in Tooltip. * Revert incorrect typing. * Change files. * Update users-cschleid-portalLayers_2018-05-03-15-52.json * Update snapshots for merge. * Add utility unit tests. * List dependency info for CI builds. * Fix test break due to change in enzyme-adapter-react-16. * Add Layer event boundary unit tests. * Allow Tooltip to appear within portal when target is in same portal. * PR feedback. * Clarifying comments.
microsoft · Sep 6, 2018 · a0d0b91 · a0d0b91
1 parent 7c75774
commit a0d0b91
Show file tree

Hide file tree

Showing 27 changed files with 1,704 additions and 510 deletions.
diff --git a/common/changes/@uifabric/utilities/jg-portals-part-deux_2018-09-04-17-20.json b/common/changes/@uifabric/utilities/jg-portals-part-deux_2018-09-04-17-20.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Add helpers for setting and detecting portals",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "[email protected]"
+}
diff --git a/common/changes/office-ui-fabric-react/jg-portals-part-deux_2018-09-04-17-20.json b/common/changes/office-ui-fabric-react/jg-portals-part-deux_2018-09-04-17-20.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Layer: Add optional event blocking. Tooltip: Detect targets in portals.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
diff --git a/common/changes/office-ui-fabric-react/users-cschleid-portalLayers_2018-05-03-15-52.json b/common/changes/office-ui-fabric-react/users-cschleid-portalLayers_2018-05-03-15-52.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Layer: Now use React Portals.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
diff --git a/packages/office-ui-fabric-react/jest.config.js b/packages/office-ui-fabric-react/jest.config.js
@@ -6,6 +6,7 @@ const config = createConfig({
 
   moduleNameMapper: {
     // These mappings allow Jest to run snapshot tests against Example files.
+    'office-ui-fabric-react/lib/codepen/(.*)$': '<rootDir>/lib/codepen/$1',
     'office-ui-fabric-react/lib/(.*)$': '<rootDir>/src/$1'
   },
 

diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
@@ -321,11 +321,18 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
   }
 
   private _updatePosition(): void {
+    // Try to update the target, page might have changed
+    this._setTargetWindowAndElement(this._getTarget());
+
     const { positions } = this.state;
     const hostElement: HTMLElement | null = this._hostElement.current;
     const calloutElement: HTMLElement | null = this._calloutElement.current;
 
-    if (hostElement && calloutElement) {
+    // If we expect a target element to position against, we need to wait until `this._target` is resolved. Otherwise
+    // we can try to position.
+    const expectsTarget = !!this.props.target;
+
+    if (hostElement && calloutElement && (!expectsTarget || this._target)) {
       let currentProps: IPositionProps | undefined;
       currentProps = assign(currentProps, this.props);
       currentProps!.bounds = this._getBounds();

diff --git a/packages/office-ui-fabric-react/src/components/ComponentExamples.test.tsx b/packages/office-ui-fabric-react/src/components/ComponentExamples.test.tsx
@@ -6,6 +6,8 @@ import { resetIds } from '../Utilities';
 import * as DataUtil from '../utilities/exampleData';
 import * as mergeStylesSerializer from '@uifabric/jest-serializer-merge-styles';
 
+const ReactDOM = require('react-dom');
+
 // Extend Jest Expect to allow us to map each component example to its own snapshot file.
 const snapshotsStateMap = new Map();
 const jestSnapshot = require('jest-snapshot');
@@ -100,10 +102,16 @@ describe('Component Examples', () => {
   const realToLocaleString = global.Date.prototype.toLocaleString;
   const realToLocaleTimeString = global.Date.prototype.toLocaleTimeString;
   const realToLocaleDateString = global.Date.prototype.toLocaleDateString;
-  const constantDate = new Date(Date.UTC(2017, 13, 6, 4, 41, 20));
+  const constantDate = new Date(Date.UTC(2017, 0, 6, 4, 41, 20));
   const files: string[] = glob.sync(path.resolve(process.cwd(), 'src/components/**/examples/*Example*.tsx'));
+  const createPortal = ReactDOM.createPortal;
 
   beforeAll(() => {
+    // Mock createPortal to capture its component hierarchy in snapshot output.
+    ReactDOM.createPortal = jest.fn(element => {
+      return element;
+    });
+
     // Ensure test output is consistent across machine locale and time zone config.
     const mockToLocaleString = () => {
       return constantDate.toUTCString();
@@ -134,6 +142,9 @@ describe('Component Examples', () => {
 
   afterAll(() => {
     jest.restoreAllMocks();
+
+    ReactDOM.createPortal = createPortal;
+
     global.Date = realDate;
     global.Date.prototype.toLocaleString = realToLocaleString;
     global.Date.prototype.toLocaleTimeString = realToLocaleTimeString;

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
@@ -9,7 +9,6 @@ import { ContextualMenu } from './ContextualMenu';
 import { canAnyMenuItemsCheck } from './ContextualMenu.base';
 import { IContextualMenuItem, ContextualMenuItemType } from './ContextualMenu.types';
 import { IContextualMenuRenderItem, IContextualMenuItemStyles } from './ContextualMenuItem.types';
-import { LayerBase as Layer } from '../Layer/Layer.base';
 
 describe('ContextualMenu', () => {
   afterEach(() => {
@@ -842,58 +841,6 @@ describe('ContextualMenu', () => {
     }).catch(done());
   });
 
-  it('ContextualMenu menuOpened callback is called only when menu is available', () => {
-    let layerMounted = false;
-    let menuMounted = false;
-    let menuMountedFirst = false;
-    let layerMountedFirst = false;
-
-    // Alter the Layer's prototype so that we can confirm that it mounts before the contextualmenu mounts.
-    /* tslint:disable:no-function-expression */
-    Layer.prototype.componentDidMount = (function(componentDidMount): () => void {
-      return function(): void {
-        if (menuMounted) {
-          menuMountedFirst = true;
-        }
-        layerMounted = true;
-        return componentDidMount.call(this);
-      };
-    })(Layer.prototype.componentDidMount);
-    /* tslint:enable:no-function-expression */
-
-    const items: IContextualMenuItem[] = [
-      {
-        name: 'TestText 1',
-        key: 'TestKey1',
-        className: 'testkey1'
-      },
-      {
-        name: 'TestText 2',
-        key: 'TestKey2'
-      }
-    ];
-
-    const onMenuOpened = (): void => {
-      if (layerMounted) {
-        layerMountedFirst = true;
-      }
-      menuMounted = true;
-    };
-
-    ReactTestUtils.renderIntoDocument<HTMLDivElement>(
-      <div>
-        <button id="target" style={{ top: '10px', left: '10px', height: '0', width: '0px' }}>
-          {' '}
-          target{' '}
-        </button>
-        <ContextualMenu target="#target" items={items} onMenuOpened={onMenuOpened} />
-      </div>
-    );
-    expect(menuMounted).toEqual(true);
-    expect(layerMountedFirst).toEqual(true);
-    expect(menuMountedFirst).toEqual(false);
-  });
-
   it('merges callout classNames', () => {
     ReactTestUtils.renderIntoDocument<IContextualMenuProps>(
       <ContextualMenu