Merge pull request websdotcom#4 from websdotcom/fix-react-warnings

Fix warnings in @vpdigital/react-popover

Author: Greg Douglas

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. */
 
@@ -484,7 +496,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. */
 
@@ -464,9 +465,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 = () => (

package.json

@@ -11,17 +11,20 @@
     "postversion": "git push && git push --tags && npm publish"
   },
   "dependencies": {
+    "create-react-class": "^15.6.3",
     "css-vendor": "^0.2.5",
     "debug": "^2.1.3",
     "lodash.throttle": "^3.0.3",
-    "object.assign": "^4.0.1"
+    "object.assign": "^4.0.1",
+    "prop-types": "^15.7.1",
+    "react-dom-factories": "^1.0.2"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/littlebits/react-popover.git"
   },
   "author": "Jason Kuhrt <[email protected]> (http://jasonkuhrt.com/)",
-  "name": "react-popover",
+  "name": "@vpdigital/react-popover",
   "homepage": "https://github.com/littlebits/react-popover",
   "version": "0.3.6",
   "main": "build/index.js",