move back to controlling DOM updates through React

Author: souporserious

src/Popper.jsx

@@ -63,14 +63,26 @@ class Popper extends Component {
     return this.context.popperManager.getTargetNode()
   }
 
+  _getOffsets = data => {
+    return Object.keys(data.offsets).map(key => data.offsets[key])
+  }
+
+  _isDataDirty = data => {
+    if (this.state.data) {
+      return (
+        JSON.stringify(this._getOffsets(this.state.data)) !==
+        JSON.stringify(this._getOffsets(data))
+      )
+    } else {
+      return true
+    }
+  }
+
   _updateStateModifier = {
     enabled: true,
     order: 900,
     fn: data => {
-      if (
-        data.placement !== this.state.placement ||
-        data.hide !== this.state.hide
-      ) {
+      if (this._isDataDirty(data)) {
         this.setState({ data })
       }
       return data
@@ -81,6 +93,7 @@ class Popper extends Component {
     const { placement, eventsEnabled } = this.props
     const modifiers = {
       ...this.props.modifiers,
+      applyStyle: { enabled: false },
       updateState: this._updateStateModifier,
     }
     if (this._arrowNode) {
@@ -93,7 +106,9 @@ class Popper extends Component {
       eventsEnabled,
       modifiers,
     })
-    this._scheduleUpdate()
+
+    // TODO: look into setTimeout scheduleUpdate call, without it, the popper will not position properly on creation
+    setTimeout(() => this._scheduleUpdate())
   }
 
   _destroyPopper() {
@@ -102,6 +117,23 @@ class Popper extends Component {
     }
   }
 
+  _getPopperStyle = () => {
+    const { data } = this.state
+
+    if (!this._popper || !data) {
+      return {
+        position: 'absolute',
+        pointerEvents: 'none',
+        opacity: 0,
+      }
+    }
+
+    return {
+      position: data.offsets.popper.position,
+      ...data.styles,
+    }
+  }
+
   _getPopperPlacement = () => {
     return this.state.data ? this.state.data.placement : undefined
   }
@@ -145,12 +177,14 @@ class Popper extends Component {
       children,
       ...restProps
     } = this.props
+    const popperStyle = this._getPopperStyle()
     const popperPlacement = this._getPopperPlacement()
     const popperHide = this._getPopperHide()
 
     if (typeof children === 'function') {
       const popperProps = {
         ref: this._handlePopperRef,
+        style: popperStyle,
         'data-placement': popperPlacement,
         'data-x-out-of-boundaries': popperHide,
       }
@@ -163,6 +197,10 @@ class Popper extends Component {
 
     const componentProps = {
       ...restProps,
+      style: {
+        ...restProps.style,
+        ...popperStyle,
+      },
       'data-placement': popperPlacement,
       'data-x-out-of-boundaries': popperHide,
     }