Dg 28136 update to react 16 9

.nvmrc

@@ -1 +1 @@
-8.11.2
+10.15.3

build/index.js

@@ -12,6 +12,20 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 
 var _react = require('react');
 
+var _react2 = _interopRequireDefault(_react);
+
+var _createReactClass = require('create-react-class');
+
+var _createReactClass2 = _interopRequireDefault(_createReactClass);
+
+var _reactDomFactories = require('react-dom-factories');
+
+var _reactDomFactories2 = _interopRequireDefault(_reactDomFactories);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _debug = require('debug');
 
 var _debug2 = _interopRequireDefault(_debug);
@@ -82,21 +96,21 @@ var flowToPopoverTranslations = {
   column: 'translateY'
 };
 
-var Popover = (0, _react.createClass)({
+var Popover = (0, _createReactClass2['default'])({
   displayName: 'popover',
   propTypes: {
-    body: _react.PropTypes.node.isRequired,
-    target: _react.PropTypes.object.isRequired,
-    preferPlace: _react.PropTypes.oneOf(Layout.validTypeValues),
-    place: _react.PropTypes.oneOf(Layout.validTypeValues),
-    tipSize: _react.PropTypes.number,
-    offsetX: _react.PropTypes.number,
-    offsetY: _react.PropTypes.number,
-    refreshIntervalMs: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.bool]),
-    isOpen: _react.PropTypes.bool,
-    onOuterAction: _react.PropTypes.func,
-    enterExitTransitionDurationMs: _react.PropTypes.number,
-    align: _react.PropTypes.string
+    body: _propTypes2['default'].node.isRequired,
+    target: _propTypes2['default'].object.isRequired,
+    preferPlace: _propTypes2['default'].oneOf(Layout.validTypeValues),
+    place: _propTypes2['default'].oneOf(Layout.validTypeValues),
+    tipSize: _propTypes2['default'].number,
+    offsetX: _propTypes2['default'].number,
+    offsetY: _propTypes2['default'].number,
+    refreshIntervalMs: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].bool]),
+    isOpen: _propTypes2['default'].bool,
+    onOuterAction: _propTypes2['default'].func,
+    enterExitTransitionDurationMs: _propTypes2['default'].number,
+    align: _propTypes2['default'].string
   },
   getInitialState: function getInitialState() {
     return {
@@ -126,8 +140,6 @@ var Popover = (0, _react.createClass)({
     if (this.measureTargetBounds()) this.resolvePopoverLayout();
   },
   resolvePopoverLayout: function resolvePopoverLayout() {
-    if (!this.isMounted()) return;
-
     /* Find the optimal zone to position self. Measure the size of each zone and use the one with
     the greatest area. */
 
@@ -278,7 +290,7 @@ var Popover = (0, _react.createClass)({
     this.targetEl = this.props.target;
     if (this.props.isOpen) this.enter();
   },
-  componentWillReceiveProps: function componentWillReceiveProps(propsNext) {
+  UNSAFE_componentWillReceiveProps: function UNSAFE_componentWillReceiveProps(propsNext) {
     //log(`Component received props!`, propsNext)
     var willOpen = !this.props.isOpen && propsNext.isOpen;
     var willClose = this.props.isOpen && !propsNext.isOpen;
@@ -290,11 +302,6 @@ var Popover = (0, _react.createClass)({
     this.setState({ toggle: true, exited: false });
   },
   close: function close() {
-    /* TODO?: we currently do not setup any `entering` state flag because
-    nothing would really need to depend on it. Stopping animations is currently nothing
-    more than clearing some timeouts which are safe to clear even if undefined. The
-    primary reason for `exiting` state is for the `layerRender` logic. */
-    this.animateEnterStop();
     this.setState({ toggle: false });
   },
   componentDidUpdate: function componentDidUpdate(propsPrev, statePrev) {
@@ -340,13 +347,7 @@ var Popover = (0, _react.createClass)({
       _this.setState({ exited: true, exiting: false });
     }, this.props.enterExitTransitionDurationMs);
   },
-  animateEnterStop: function animateEnterStop() {
-    clearTimeout(this.enteringAnimationTimer1);
-    clearTimeout(this.enteringAnimationTimer2);
-  },
   animateEnter: function animateEnter() {
-    var _this2 = this;
-
     /* Prepare `entering` style so that we can then animate it toward `entered`. */
 
     this.containerEl.style.transform = flowToPopoverTranslations[this.zone.flow] + '(' + this.zone.order * 50 + 'px)';
@@ -355,18 +356,17 @@ var Popover = (0, _react.createClass)({
 
     /* After initial layout apply transition animations. */
 
-    this.enteringAnimationTimer1 = setTimeout(function () {
-      _this2.tipEl.style.transition = 'transform 150ms ease-in';
-      _this2.tipEl.style[jsprefix('Transition')] = cssprefix('transform') + ' 150ms ease-in';
-      _this2.containerEl.style.transitionProperty = 'top, left, opacity, transform';
-      _this2.containerEl.style.transitionDuration = '500ms';
-      _this2.containerEl.style.transitionTimingFunction = 'cubic-bezier(0.230, 1.000, 0.320, 1.000)';
-      _this2.enteringAnimationTimer2 = setTimeout(function () {
-        _this2.containerEl.style.opacity = '1';
-        _this2.containerEl.style.transform = 'translateY(0)';
-        _this2.containerEl.style[jsprefix('Transform')] = _this2.containerEl.style.transform;
-      }, 0);
-    }, 0);
+    /* Hack: http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes */
+    this.containerEl.offsetHeight;
+
+    this.tipEl.style.transition = 'transform 150ms ease-in';
+    this.tipEl.style[jsprefix('Transition')] = cssprefix('transform') + ' 150ms ease-in';
+    this.containerEl.style.transitionProperty = 'top, left, opacity, transform';
+    this.containerEl.style.transitionDuration = '500ms';
+    this.containerEl.style.transitionTimingFunction = 'cubic-bezier(0.230, 1.000, 0.320, 1.000)';
+    this.containerEl.style.opacity = '1';
+    this.containerEl.style.transform = 'translateY(0)';
+    this.containerEl.style[jsprefix('Transform')] = this.containerEl.style.transform;
   },
   trackPopover: function trackPopover() {
     var minScrollRefreshIntervalMs = 200;
@@ -484,7 +484,7 @@ var Popover = (0, _react.createClass)({
 
     var popoverBody = (0, _utils.arrayify)(this.props.body);
 
-    return _react.DOM.div(popoverProps, _react.DOM.div.apply(_react.DOM, [{ className: 'Popover-body' }].concat(_toConsumableArray(popoverBody))), (0, _react.createElement)(_popoverTip2['default'], tipProps));
+    return _reactDomFactories2['default'].div(popoverProps, _reactDomFactories2['default'].div.apply(_reactDomFactories2['default'], [{ className: 'Popover-body' }].concat(_toConsumableArray(popoverBody))), _react2['default'].createElement(_popoverTip2['default'], tipProps));
   }
 });
 

build/popover-tip.js

@@ -6,11 +6,15 @@ Object.defineProperty(exports, '__esModule', {
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-var _react = require('react');
+var _createReactClass = require('create-react-class');
 
-var _react2 = _interopRequireDefault(_react);
+var _createReactClass2 = _interopRequireDefault(_createReactClass);
 
-var PopoverTip = _react2['default'].createClass({
+var _reactDomFactories = require('react-dom-factories');
+
+var _reactDomFactories2 = _interopRequireDefault(_reactDomFactories);
+
+var PopoverTip = (0, _createReactClass2['default'])({
   name: 'tip',
   render: function render() {
     var direction = this.props.direction;
@@ -25,7 +29,7 @@ var PopoverTip = _react2['default'].createClass({
       width: isPortrait ? crossLength : mainLength,
       height: isPortrait ? mainLength : crossLength
     };
-    var triangle = _react.DOM.svg(props, _react.DOM.polygon({
+    var triangle = _reactDomFactories2['default'].svg(props, _reactDomFactories2['default'].polygon({
       className: 'Popover-tipShape',
       points: points
     }));

build/utils.js

@@ -6,10 +6,6 @@ Object.defineProperty(exports, '__esModule', {
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
 var _reactDom = require('react-dom');
 
 var _reactDom2 = _interopRequireDefault(_reactDom);
@@ -38,9 +34,6 @@ var equalRecords = function equalRecords(o1, o2) {
   }return true;
 };
 
-/* React 12<= / >=13 compatible findDOMNode function. */
-var supportsFindDOMNode = Number(_react2['default'].version.split('.')[1]) >= 13;
-
 var findDOMNode = function findDOMNode(component) {
   return _reactDom2['default'].findDOMNode(component);
 };

lib/index.js

@@ -1,4 +1,7 @@
-import { createElement, createClass, DOM as E, PropTypes as T } from 'react'
+import React from 'react'
+import createReactClass from 'create-react-class'
+import DOM from 'react-dom-factories'
+import PropTypes from 'prop-types'
 import Debug from 'debug'
 import * as resizeEvent from './on-resize'
 import * as Layout from './layout'
@@ -54,21 +57,21 @@ const flowToPopoverTranslations = {
 
 
 
-const Popover = createClass({
+const Popover = createReactClass({
   displayName: `popover`,
   propTypes: {
-    body: T.node.isRequired,
-    target: T.object.isRequired,
-    preferPlace: T.oneOf(Layout.validTypeValues),
-    place: T.oneOf(Layout.validTypeValues),
-    tipSize: T.number,
-    offsetX: T.number,
-    offsetY: T.number,
-    refreshIntervalMs: T.oneOfType([ T.number, T.bool ]),
-    isOpen: T.bool,
-    onOuterAction: T.func,
-    enterExitTransitionDurationMs: T.number,
-    align: T.string,
+    body: PropTypes.node.isRequired,
+    target: PropTypes.object.isRequired,
+    preferPlace: PropTypes.oneOf(Layout.validTypeValues),
+    place: PropTypes.oneOf(Layout.validTypeValues),
+    tipSize: PropTypes.number,
+    offsetX: PropTypes.number,
+    offsetY: PropTypes.number,
+    refreshIntervalMs: PropTypes.oneOfType([PropTypes.number, PropTypes.bool ]),
+    isOpen: PropTypes.bool,
+    onOuterAction: PropTypes.func,
+    enterExitTransitionDurationMs: PropTypes.number,
+    align: PropTypes.string,
   },
   getInitialState () {
     return {
@@ -98,8 +101,6 @@ const Popover = createClass({
     if (this.measureTargetBounds()) this.resolvePopoverLayout()
   },
   resolvePopoverLayout () {
-    if (!this.isMounted()) return;
-
     /* Find the optimal zone to position self. Measure the size of each zone and use the one with
     the greatest area. */
 
@@ -259,7 +260,7 @@ const Popover = createClass({
     this.targetEl = this.props.target
     if (this.props.isOpen) this.enter()
   },
-  componentWillReceiveProps (propsNext) {
+  UNSAFE_componentWillReceiveProps (propsNext) {
     //log(`Component received props!`, propsNext)
     const willOpen = !this.props.isOpen && propsNext.isOpen
     const willClose = this.props.isOpen && !propsNext.isOpen
@@ -273,11 +274,6 @@ const Popover = createClass({
     this.setState({ toggle: true, exited: false })
   },
   close () {
-    /* TODO?: we currently do not setup any `entering` state flag because
-    nothing would really need to depend on it. Stopping animations is currently nothing
-    more than clearing some timeouts which are safe to clear even if undefined. The
-    primary reason for `exiting` state is for the `layerRender` logic. */
-    this.animateEnterStop()
     this.setState({ toggle: false })
   },
   componentDidUpdate (propsPrev, statePrev) {
@@ -322,10 +318,6 @@ const Popover = createClass({
       this.setState({ exited: true, exiting: false })
     }, this.props.enterExitTransitionDurationMs)
   },
-  animateEnterStop () {
-    clearTimeout(this.enteringAnimationTimer1)
-    clearTimeout(this.enteringAnimationTimer2)
-  },
   animateEnter () {
     /* Prepare `entering` style so that we can then animate it toward `entered`. */
 
@@ -335,18 +327,17 @@ const Popover = createClass({
 
     /* After initial layout apply transition animations. */
 
-    this.enteringAnimationTimer1 = setTimeout(() => {
-      this.tipEl.style.transition = `transform 150ms ease-in`
-      this.tipEl.style[jsprefix(`Transition`)] = `${cssprefix(`transform`)} 150ms ease-in`
-      this.containerEl.style.transitionProperty = `top, left, opacity, transform`
-      this.containerEl.style.transitionDuration = `500ms`
-      this.containerEl.style.transitionTimingFunction = `cubic-bezier(0.230, 1.000, 0.320, 1.000)`
-      this.enteringAnimationTimer2 = setTimeout(() => {
-        this.containerEl.style.opacity = `1`
-        this.containerEl.style.transform = `translateY(0)`
-        this.containerEl.style[jsprefix(`Transform`)] = this.containerEl.style.transform
-      }, 0)
-    }, 0)
+    /* Hack: http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes */
+    this.containerEl.offsetHeight
+
+    this.tipEl.style.transition = `transform 150ms ease-in`
+    this.tipEl.style[jsprefix(`Transition`)] = `${cssprefix(`transform`)} 150ms ease-in`
+    this.containerEl.style.transitionProperty = `top, left, opacity, transform`
+    this.containerEl.style.transitionDuration = `500ms`
+    this.containerEl.style.transitionTimingFunction = `cubic-bezier(0.230, 1.000, 0.320, 1.000)`
+    this.containerEl.style.opacity = `1`
+    this.containerEl.style.transform = `translateY(0)`
+    this.containerEl.style[jsprefix(`Transform`)] = this.containerEl.style.transform
   },
   trackPopover () {
     const minScrollRefreshIntervalMs = 200
@@ -464,9 +455,9 @@ const Popover = createClass({
     const popoverBody = arrayify(this.props.body)
 
     return (
-      E.div(popoverProps,
-        E.div({ className: `Popover-body` }, ...popoverBody),
-        createElement(PopoverTip, tipProps)
+      DOM.div(popoverProps,
+        DOM.div({ className: `Popover-body` }, ...popoverBody),
+        React.createElement(PopoverTip, tipProps)
       )
     )
   }

lib/popover-tip.js

@@ -1,8 +1,7 @@
-import R, { DOM as E } from 'react'
+import createReactClass from 'create-react-class'
+import DOM from 'react-dom-factories'
 
-
-
-const PopoverTip = R.createClass({
+const PopoverTip = createReactClass({
   name: `tip`,
   render () {
     const { direction } = this.props
@@ -21,8 +20,8 @@ const PopoverTip = R.createClass({
       width: isPortrait ? crossLength : mainLength,
       height: isPortrait ? mainLength : crossLength,
     }
-    const triangle = E.svg(props,
-      E.polygon({
+    const triangle = DOM.svg(props,
+      DOM.polygon({
         className: `Popover-tipShape`,
         points,
       })

lib/utils.js

@@ -1,4 +1,3 @@
-import R from 'react'
 import ReactDOM from 'react-dom'
 import AssignPolyFill from 'object.assign/polyfill'
 import { isClient } from './platform'
@@ -20,11 +19,6 @@ const equalRecords = (o1, o2) => {
   return true
 }
 
-/* React 12<= / >=13 compatible findDOMNode function. */
-const supportsFindDOMNode = (
-  Number(R.version.split(`.`)[1]) >= 13
-)
-
 const findDOMNode = (component) => ReactDOM.findDOMNode(component)
 
 const noop = () => (