feature: migrate to react 16, closes #135

lib/index.js

@@ -1,13 +1,12 @@
 import React from "react"
 import { PropTypes as T } from "prop-types"
 import createReactClass from "create-react-class"
-import { findDOMNode } from "react-dom"
+import ReactDOM from "react-dom"
 import Debug from "debug"
 import throttle from "lodash.throttle"
 import * as cssVendor from "css-vendor"
 import resizeEvent from "./on-resize"
 import Layout from "./layout"
-import ReactLayerMixin from "./react-layer-mixin"
 import { isServer, window, document } from "./platform"
 import { arrayify, clientOnly } from "./utils"
 import Tip from "./tip"
@@ -59,7 +58,6 @@ const flowToPopoverTranslations = {
 
 
 const Popover = createReactClass({
-  displayName: "popover",
   propTypes: {
     body: T.node.isRequired,
     children: T.element.isRequired,
@@ -75,7 +73,6 @@ const Popover = createReactClass({
     tipSize: T.number,
     onOuterAction: T.func,
   },
-  mixins: [ReactLayerMixin()],
   getDefaultProps () {
     return {
       tipSize: 7,
@@ -98,7 +95,6 @@ const Popover = createReactClass({
     }
   },
   componentDidMount () {
-    this.targetEl = findDOMNode(this)
     if (this.props.isOpen) this.enter()
   },
   componentWillReceiveProps (propsNext) {
@@ -353,7 +349,6 @@ const Popover = createReactClass({
 
     /* Get references to DOM elements. */
 
-    this.containerEl = findDOMNode(this.layerReactComponent)
     this.bodyEl = this.containerEl.querySelector(".Popover-body")
     this.tipEl = this.containerEl.querySelector(".Popover-tip")
 
@@ -438,38 +433,37 @@ const Popover = createReactClass({
   measureFrameBounds () {
     this.frameBounds = Layout.El.calcBounds(this.frameEl)
   },
-  renderLayer () {
-    if (this.state.exited) return null
-
-    const { className = "", style = {}} = this.props
-    const { standing } = this.state;
+  getTargetNodeRef (targetWrapperEl) {
+    Object.assign(this, {
+      targetEl: targetWrapperEl ? targetWrapperEl.firstElementChild : null
+    })
+  },
+  getContainerNodeRef (containerEl) {
+    Object.assign(this, { containerEl })
+  },
+  render () {
+    const { className = "", style = {}, tipSize } = this.props
+    const { standing } = this.state
 
     const popoverProps = {
       className: `Popover Popover-${standing} ${className}`,
       style: { ...coreStyle, ...style }
     }
 
-    const tipProps = {
-      direction: faces[standing],
-      size: this.props.tipSize,
-    }
-
-    /* If we pass array of nodes to component children React will complain that each
-    item should have a key prop. This is not a valid requirement in our case. Users
-    should be able to give an array of elements applied as if they were just normal
-    children of the body component (note solution is to spread array items as args). */
-
-    const popoverBody = arrayify(this.props.body)
-
-    return (
-      <div {...popoverProps}>
-        <div className="Popover-body" children={popoverBody} />
-        <Tip {...tipProps} />
+    const popover = this.state.exited ? null : (
+      <div ref={this.getContainerNodeRef} {...popoverProps}>
+        <div className="Popover-body" children={this.props.body} />
+        <Tip
+          direction={faces[standing]}
+          size={tipSize}
+        />
       </div>
     )
-  },
-  render () {
-    return this.props.children
+    return [
+      <div key="1" ref={this.getTargetNodeRef}>{this.props.children}</div>,
+      // TODO do not hardcode document.body
+      ReactDOM.createPortal(popover, document.body)
+    ]
   },
 })
 

stories/playground/main.js

@@ -87,10 +87,10 @@ class Main extends React.Component {
       isOpen: this.state.popoverIsOpen,
       preferPlace: this.state.preferPlace,
       place: this.state.place,
-      onOuterAction: this.togglePopover.bind(null, false),
+      onOuterAction: this.togglePopover.bind(this, false),
       body: [
-        <h1>Popover Title</h1>,
-        <div>Popover contents</div>
+        <h1 key="a">Popover Title</h1>,
+        <div key="b">Popover contents</div>
       ]
     }