feat(FloatingMenu): support for specifying target container

This change makes `<FloatingMenu>` support an element to put the menu into, which is, the ancestor of the trigger button with `data-floating-menu-container` attribute. This change also removes code for React15-, which we dropped the support from 9.x codebase. Refs carbon-design-system/carbon#910. Refs carbon-design-system/carbon#911.
asudoh · Jun 28, 2018 · 08d0a1b · 08d0a1b
1 parent 1eb620d
commit 08d0a1b
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 68 deletions.
diff --git a/.storybook/Container.js b/.storybook/Container.js
@@ -9,6 +9,7 @@ export default class Container extends Component {
     return (
       <React.StrictMode>
         <div
+          data-floating-menu-container
           role="main"
           style={{
             padding: '3em',
@@ -18,6 +19,11 @@ export default class Container extends Component {
           }}>
           {story()}
         </div>
+        <input
+          aria-label="inpute-text-offleft"
+          type="text"
+          class="bx--visually-hidden"
+        />
       </React.StrictMode>
     );
   }

diff --git a/src/components/OverflowMenu/OverflowMenu.js b/src/components/OverflowMenu/OverflowMenu.js
@@ -32,6 +32,26 @@ const on = (element, ...args) => {
   };
 };
 
+/**
+ * @param {Element} elem An element.
+ * @param {string} selector An query selector.
+ * @returns {Element} The ancestor of the given element matching the given selector.
+ * @private
+ */
+const closest = (elem, selector) => {
+  const doc = elem.ownerDocument;
+  for (
+    let traverse = elem;
+    traverse && traverse !== doc;
+    traverse = traverse.parentNode
+  ) {
+    if (traverse.matches(selector)) {
+      return traverse;
+    }
+  }
+  return null;
+};
+
 /**
  * @param {Element} menuBody The menu body with the menu arrow.
  * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
@@ -352,6 +372,13 @@ export default class OverflowMenu extends Component {
     }
   };
 
+  /**
+   * @returns {Element} The DOM element where the floating menu is placed in.
+   */
+  _getTarget = () =>
+    (this.menuEl && closest(this.menuEl, '[data-floating-menu-container]')) ||
+    document.body;
+
   render() {
     const {
       id,
@@ -415,6 +442,7 @@ export default class OverflowMenu extends Component {
           menuPosition={this.state.menuPosition}
           menuOffset={flipped ? menuOffsetFlip : menuOffset}
           menuRef={this._bindMenuBody}
+          target={this._getTarget}
           onPlace={this._handlePlace}>
           {menuBody}
         </FloatingMenu>

diff --git a/src/components/Tooltip/Tooltip.js b/src/components/Tooltip/Tooltip.js
@@ -11,6 +11,26 @@ import FloatingMenu, {
 } from '../../internal/FloatingMenu';
 import ClickListener from '../../internal/ClickListener';
 
+/**
+ * @param {Element} elem An element.
+ * @param {string} selector An query selector.
+ * @returns {Element} The ancestor of the given element matching the given selector.
+ * @private
+ */
+const closest = (elem, selector) => {
+  const doc = elem.ownerDocument;
+  for (
+    let traverse = elem;
+    traverse && traverse !== doc;
+    traverse = traverse.parentNode
+  ) {
+    if (traverse.matches(selector)) {
+      return traverse;
+    }
+  }
+  return null;
+};
+
 /**
  * @param {Element} menuBody The menu body with the menu arrow.
  * @param {string} menuDirection Where the floating menu menu should be placed relative to the trigger button.
@@ -214,6 +234,14 @@ export default class Tooltip extends Component {
    */
   _debouncedHandleHover = debounce(this._handleHover, 200);
 
+  /**
+   * @returns {Element} The DOM element where the floating menu is placed in.
+   */
+  _getTarget = () =>
+    (this.triggerEl &&
+      closest(this.triggerEl, '[data-floating-menu-container]')) ||
+    document.body;
+
   handleMouse = evt => {
     const state =
       typeof evt === 'string'
@@ -345,9 +373,13 @@ export default class Tooltip extends Component {
         </ClickListener>
         {open && (
           <FloatingMenu
+            target={this._getTarget}
             menuPosition={this.state.triggerPosition}
             menuDirection={direction}
-            menuOffset={menuOffset}>
+            menuOffset={menuOffset}
+            menuRef={node => {
+              this._tooltipEl = node;
+            }}>
             <div
               id={tooltipId}
               className={tooltipClasses}
@@ -358,10 +390,7 @@ export default class Tooltip extends Component {
               onMouseOut={evt => this.handleMouse(evt)}
               onFocus={evt => this.handleMouse(evt)}
               onBlur={evt => this.handleMouse(evt)}
-              onContextMenu={evt => this.handleMouse(evt)}
-              ref={node => {
-                this._tooltipEl = node;
-              }}>
+              onContextMenu={evt => this.handleMouse(evt)}>
               <span className="bx--tooltip__caret" />
               {children}
             </div>

diff --git a/src/internal/FloatingMenu.js b/src/internal/FloatingMenu.js
@@ -1,6 +1,6 @@
 import warning from 'warning';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { createRef } from 'react';
 import ReactDOM from 'react-dom';
 import window from 'window-or-global';
 
@@ -32,8 +32,6 @@ export const DIRECTION_TOP = 'top';
 export const DIRECTION_RIGHT = 'right';
 export const DIRECTION_BOTTOM = 'bottom';
 
-const hasCreatePortal = typeof ReactDOM.createPortal === 'function';
-
 /**
  * @param {FloatingMenu~offset} [oldMenuOffset={}] The old value.
  * @param {FloatingMenu~offset} [menuOffset={}] The new value.
@@ -115,6 +113,11 @@ class FloatingMenu extends React.Component {
      */
     children: PropTypes.object,
 
+    /**
+     * The query selector indicating where the floating menu body should be placed.
+     */
+    target: PropTypes.func,
+
     /**
      * The position in the viewport of the trigger button.
      */
@@ -189,17 +192,10 @@ class FloatingMenu extends React.Component {
 
   /**
    * The cached refernce to the menu body.
-   * @type {Element}
+   * @type {React.RefObject}
    * @private
    */
-  _menuBody = null;
-
-  constructor(props) {
-    super(props);
-    if (typeof document !== 'undefined' && hasCreatePortal) {
-      this.el = document.createElement('div');
-    }
-  }
+  _menuBody = createRef();
 
   /**
    * Calculates the position in the viewport of floating menu,
@@ -212,7 +208,7 @@ class FloatingMenu extends React.Component {
    * @private
    */
   _updateMenuSize = (prevProps = {}) => {
-    const menuBody = this._menuBody;
+    const menuBody = this._menuBody.current;
     warning(
       menuBody,
       'The DOM node for menu body for calculating its position is not available. Skipping...'
@@ -263,72 +259,29 @@ class FloatingMenu extends React.Component {
   };
 
   componentDidUpdate(prevProps) {
-    if (!hasCreatePortal) {
-      ReactDOM.render(this._getChildrenWithProps(), this._menuContainer);
-    } else {
-      this._updateMenuSize(prevProps);
-    }
+    this._updateMenuSize(prevProps);
     const { onPlace } = this.props;
     if (
       this._placeInProgress &&
       this.state.floatingPosition &&
       typeof onPlace === 'function'
     ) {
-      onPlace(this._menuBody);
+      onPlace(this._menuBody.current);
       this._placeInProgress = false;
     }
   }
 
   componentDidMount() {
     const { menuRef } = this.props;
-    if (!hasCreatePortal) {
-      this._menuContainer = document.createElement('div');
-      document.body.appendChild(this._menuContainer);
-      const style = {
-        display: 'block',
-        opacity: 0,
-      };
-      const childrenWithProps = React.cloneElement(this.props.children, {
-        style,
-      });
-      ReactDOM.render(childrenWithProps, this._menuContainer, () => {
-        this._menuBody = this._menuContainer.firstChild;
-        this._updateMenuSize();
-        ReactDOM.render(
-          this._getChildrenWithProps(),
-          this._menuContainer,
-          () => {
-            this._placeInProgress = true;
-            menuRef && menuRef(this._menuBody);
-          }
-        );
-      });
-    } else {
-      if (this.el && this.el.firstChild) {
-        this._menuBody = this.el.firstChild;
-        document.body.appendChild(this._menuBody);
-        this._placeInProgress = true;
-        menuRef && menuRef(this._menuBody);
-      }
-      this._updateMenuSize();
-    }
+    this._placeInProgress = true;
+    menuRef && menuRef(this._menuBody.current);
+    this._updateMenuSize();
   }
 
   componentWillUnmount() {
     const { menuRef } = this.props;
     menuRef && menuRef(null);
     this._placeInProgress = false;
-    if (!hasCreatePortal) {
-      const menuContainer = this._menuContainer;
-      ReactDOM.unmountComponentAtNode(menuContainer);
-      if (menuContainer && menuContainer.parentNode) {
-        menuContainer.parentNode.removeChild(menuContainer);
-      }
-      this._menuContainer = null;
-    } else if (this._menuBody) {
-      // Moves the menu body back to the portal container so that React unmount code does not crash
-      this.el.appendChild(this._menuBody);
-    }
   }
 
   /**
@@ -351,6 +304,7 @@ class FloatingMenu extends React.Component {
           top: '0px',
         };
     return React.cloneElement(children, {
+      ref: this._menuBody,
       style: {
         ...styles,
         ...positioningStyle,
@@ -362,8 +316,12 @@ class FloatingMenu extends React.Component {
   };
 
   render() {
-    if (typeof document !== 'undefined' && hasCreatePortal) {
-      return ReactDOM.createPortal(this._getChildrenWithProps(), this.el);
+    if (typeof document !== 'undefined') {
+      const { target } = this.props;
+      return ReactDOM.createPortal(
+        this._getChildrenWithProps(),
+        !target ? document.body : target()
+      );
     }
     return null;
   }