Support React 16

Author: yesmeck

package.json

@@ -43,14 +43,15 @@
   },
   "devDependencies": {
     "async": "~1.5.0",
+    "core-js": "^2.5.1",
     "expect.js": "0.3.x",
     "jquery": "~1.11.3",
     "object-assign": "~4.0.1",
     "pre-commit": "1.x",
-    "rc-tools": "6.x",
     "rc-test": "6.x",
-    "react": "15.x",
-    "react-dom": "15.x"
+    "rc-tools": "6.x",
+    "react": "^16.0.0-rc.3",
+    "react-dom": "^16.0.0-rc.3"
   },
   "pre-commit": [
     "lint"

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
+import { findDOMNode, createPortal } from 'react-dom';
 import createReactClass from 'create-react-class';
 import contains from 'rc-util/lib/Dom/contains';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
@@ -22,6 +22,39 @@ function returnDocument() {
 const ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter',
   'onMouseLeave', 'onFocus', 'onBlur'];
 
+const IS_REACT_16 = !!createPortal;
+
+const mixins = [];
+
+function getContainer(instance) {
+  const { props } = instance;
+  const popupContainer = document.createElement('div');
+  // Make sure default popup container will never cause scrollbar appearing
+  // https://github.com/react-component/trigger/issues/41
+  popupContainer.style.position = 'absolute';
+  popupContainer.style.top = '0';
+  popupContainer.style.left = '0';
+  popupContainer.style.width = '100%';
+  const mountNode = props.getPopupContainer ?
+    props.getPopupContainer(findDOMNode(instance)) : props.getDocument().body;
+  mountNode.appendChild(popupContainer);
+  return popupContainer;
+}
+
+if (!IS_REACT_16) {
+  mixins.push(
+    getContainerRenderMixin({
+      autoMount: false,
+
+      isVisible(instance) {
+        return instance.state.popupVisible;
+      },
+
+      getContainer,
+    })
+  );
+}
+
 const Trigger = createReactClass({
   displayName: 'Trigger',
   propTypes: {
@@ -66,30 +99,7 @@ const Trigger = createReactClass({
     maskAnimation: PropTypes.string,
   },
 
-  mixins: [
-    getContainerRenderMixin({
-      autoMount: false,
-
-      isVisible(instance) {
-        return instance.state.popupVisible;
-      },
-
-      getContainer(instance) {
-        const { props } = instance;
-        const popupContainer = document.createElement('div');
-        // Make sure default popup container will never cause scrollbar appearing
-        // https://github.com/react-component/trigger/issues/41
-        popupContainer.style.position = 'absolute';
-        popupContainer.style.top = '0';
-        popupContainer.style.left = '0';
-        popupContainer.style.width = '100%';
-        const mountNode = props.getPopupContainer ?
-          props.getPopupContainer(findDOMNode(instance)) : props.getDocument().body;
-        mountNode.appendChild(popupContainer);
-        return popupContainer;
-      },
-    }),
-  ],
+  mixins,
 
   getDefaultProps() {
     return {
@@ -154,11 +164,16 @@ const Trigger = createReactClass({
   componentDidUpdate(_, prevState) {
     const props = this.props;
     const state = this.state;
-    this.renderComponent(null, () => {
+    const triggerAfterPopupVisibleChange = () => {
       if (prevState.popupVisible !== state.popupVisible) {
         props.afterPopupVisibleChange(state.popupVisible);
       }
-    });
+    };
+    if (!IS_REACT_16) {
+      this.renderComponent(null, triggerAfterPopupVisibleChange);
+    } else {
+      triggerAfterPopupVisibleChange();
+    }
 
     // We must listen to `mousedown` or `touchstart`, edge case:
     // https://github.com/ant-design/ant-design/issues/5804
@@ -186,6 +201,9 @@ const Trigger = createReactClass({
   componentWillUnmount() {
     this.clearDelayTimer();
     this.clearOutsideHandler();
+    if (IS_REACT_16) {
+      this.removeContainer();
+    }
   },
 
   onMouseEnter(e) {
@@ -341,6 +359,7 @@ const Trigger = createReactClass({
         transitionName={props.popupTransitionName}
         maskAnimation={props.maskAnimation}
         maskTransitionName={props.maskTransitionName}
+        ref={this.savePopup}
       >
         {typeof props.popup === 'function' ? props.popup() : props.popup}
       </Popup>
@@ -391,6 +410,12 @@ const Trigger = createReactClass({
     }
   },
 
+  removeContainer() {
+    if (this._container) {
+      this._container.parentNode.removeChild(this._container);
+    }
+  },
+
   createTwoChains(event) {
     const childPros = this.props.children.props;
     const props = this.props;
@@ -450,11 +475,18 @@ const Trigger = createReactClass({
     this.setPopupVisible(false);
   },
 
+  savePopup(node) {
+    if (IS_REACT_16) {
+      this._component = node;
+    }
+  },
+
   render() {
+    const { popupVisible } = this.state;
     const props = this.props;
     const children = props.children;
     const child = React.Children.only(children);
-    const newChildProps = {};
+    const newChildProps = { key: 'target' };
     if (this.isClickToHide() || this.isClickToShow()) {
       newChildProps.onClick = this.onClick;
       newChildProps.onMouseDown = this.onMouseDown;
@@ -482,7 +514,21 @@ const Trigger = createReactClass({
       newChildProps.onBlur = this.createTwoChains('onBlur');
     }
 
-    return React.cloneElement(child, newChildProps);
+    if (!IS_REACT_16) {
+      return React.cloneElement(child, newChildProps);
+    }
+
+    let portal;
+    // prevent unmounting when visible change to false
+    if (popupVisible || this._component) {
+      this._container = this._container || getContainer(this);
+      portal = createPortal(this.getComponent(), this._container);
+    }
+
+    return [
+      React.cloneElement(child, newChildProps),
+      portal,
+    ];
   },
 });
 

tests/index.js

@@ -1,5 +1,7 @@
 /* eslint no-console:0 */
 
+import 'core-js/es6/map';
+import 'core-js/es6/set';
 import expect from 'expect.js';
 import React from 'react';
 import ReactDOM from 'react-dom';