react-input-position - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

dist/constants.js

@@ -6,3 +6,4 @@ "use strict";
 });
-var MOUSE_ACTIVATION = exports.MOUSE_ACTIVATION = {
+exports.TOUCH_ACTIVATION = exports.MOUSE_ACTIVATION = void 0;
+var MOUSE_ACTIVATION = {
   CLICK: "click",
@@ -13,4 +14,4 @@ DOUBLE_CLICK: "doubleClick",
 };
-
-var TOUCH_ACTIVATION = exports.TOUCH_ACTIVATION = {
+exports.MOUSE_ACTIVATION = MOUSE_ACTIVATION;
+var TOUCH_ACTIVATION = {
   DOUBLE_TAP: "doubleTap",
@@ -20,2 +21,3 @@ LONG_TOUCH: "longTouch",
   TOUCH: "touch"
-};
+};
+exports.TOUCH_ACTIVATION = TOUCH_ACTIVATION;

dist/index.js

@@ -6,67 +6,142 @@ "use strict";
 });
-exports.TOUCH_ACTIVATION = exports.MOUSE_ACTIVATION = undefined;
+Object.defineProperty(exports, "MOUSE_ACTIVATION", {
+  enumerable: true,
+  get: function get() {
+    return _constants.MOUSE_ACTIVATION;
+  }
+});
+Object.defineProperty(exports, "TOUCH_ACTIVATION", {
+  enumerable: true,
+  get: function get() {
+    return _constants.TOUCH_ACTIVATION;
+  }
+});
+exports.default = void 0;
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _react = _interopRequireWildcard(require("react"));
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = require("react");
+var _mouseActivation = _interopRequireDefault(require("./mouseActivation"));
 
-var _react2 = _interopRequireDefault(_react);
+var _touchActivation = _interopRequireDefault(require("./touchActivation"));
 
-var _propTypes = require("prop-types");
+var _constants = require("./constants");
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _utils = _interopRequireDefault(require("./utils"));
 
-var _mouseActivation = require("./mouseActivation");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _mouseActivation2 = _interopRequireDefault(_mouseActivation);
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
-var _touchActivation = require("./touchActivation");
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _touchActivation2 = _interopRequireDefault(_touchActivation);
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
-var _constants = require("./constants");
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _utils = require("./utils");
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-var _utils2 = _interopRequireDefault(_utils);
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-var ReactInputPosition = function (_Component) {
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var ReactInputPosition =
+/*#__PURE__*/
+function (_Component) {
   _inherits(ReactInputPosition, _Component);
 
   function ReactInputPosition() {
-    var _ref;
+    var _getPrototypeOf2;
 
-    var _temp, _this, _ret;
+    var _this;
 
     _classCallCheck(this, ReactInputPosition);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ReactInputPosition.__proto__ || Object.getPrototypeOf(ReactInputPosition)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ReactInputPosition)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
       active: false,
-      activePosition: { x: 0, y: 0 },
-      prevActivePosition: { x: 0, y: 0 },
-      passivePosition: { x: 0, y: 0 },
-      elementDimensions: { width: 0, height: 0 },
-      elementOffset: { left: 0, top: 0 },
-      itemPosition: { x: 0, y: 0 },
-      itemDimensions: { width: 0, height: 0 },
+      activePosition: {
+        x: 0,
+        y: 0
+      },
+      prevActivePosition: {
+        x: 0,
+        y: 0
+      },
+      passivePosition: {
+        x: 0,
+        y: 0
+      },
+      elementDimensions: {
+        width: 0,
+        height: 0
+      },
+      elementOffset: {
+        left: 0,
+        top: 0
+      },
+      itemPosition: {
+        x: 0,
+        y: 0
+      },
+      itemDimensions: {
+        width: 0,
+        height: 0
+      },
       refreshToggle: false
-    }, _this.containerRef = _react2.default.createRef(), _this.itemRef = _react2.default.createRef(), _this.mouseDown = false, _this.mouseJustDown = false, _this.touched = false, _this.justTouched = false, _this.tapped = false, _this.tapTimer = null, _this.tapTimedOut = false, _this.doubleTapTimer = null, _this.doubleTapTimedOut = false, _this.longTouchTimer = null, _this.longTouchTimedOut = false, _this.refresh = true, _this.onLoadRefresh = function () {
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "containerRef", _react.default.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "itemRef", _react.default.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "mouseDown", false);
+
+    _defineProperty(_assertThisInitialized(_this), "mouseJustDown", false);
+
+    _defineProperty(_assertThisInitialized(_this), "touched", false);
+
+    _defineProperty(_assertThisInitialized(_this), "justTouched", false);
+
+    _defineProperty(_assertThisInitialized(_this), "tapped", false);
+
+    _defineProperty(_assertThisInitialized(_this), "tapTimer", null);
+
+    _defineProperty(_assertThisInitialized(_this), "tapTimedOut", false);
+
+    _defineProperty(_assertThisInitialized(_this), "doubleTapTimer", null);
+
+    _defineProperty(_assertThisInitialized(_this), "doubleTapTimedOut", false);
+
+    _defineProperty(_assertThisInitialized(_this), "longTouchTimer", null);
+
+    _defineProperty(_assertThisInitialized(_this), "longTouchTimedOut", false);
+
+    _defineProperty(_assertThisInitialized(_this), "refresh", true);
+
+    _defineProperty(_assertThisInitialized(_this), "onLoadRefresh", function () {
       _this.refreshPosition();
-    }, _this.handleResize = function () {
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
       _this.refreshPosition();
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    });
+
+    return _this;
   }
@@ -95,2 +170,3 @@
       }
+
       if (prevProps.touchActivationMethod !== this.props.touchActivationMethod) {
@@ -113,8 +189,9 @@ this.removeTouchEventListeners();
     value: function refreshPosition() {
-      var _props = this.props,
-          trackItemPosition = _props.trackItemPosition,
-          centerItemOnLoad = _props.centerItemOnLoad;
-
-
-      this.setPosition({ x: 0, y: 0 }, trackItemPosition, false, centerItemOnLoad);
+      var _this$props = this.props,
+          trackItemPosition = _this$props.trackItemPosition,
+          centerItemOnLoad = _this$props.centerItemOnLoad;
+      this.setPosition({
+        x: 0,
+        y: 0
+      }, trackItemPosition, false, centerItemOnLoad);
     }
@@ -130,3 +207,3 @@ }, {
     value: function setMouseInteractionMethods() {
-      var mouseInteractionMethods = _mouseActivation2.default[this.props.mouseActivationMethod];
+      var mouseInteractionMethods = _mouseActivation.default[this.props.mouseActivationMethod];
       this.mouseHandlers = [];
@@ -144,3 +221,3 @@
     value: function setTouchInteractionMethods() {
-      var touchInteractionMethods = _touchActivation2.default[this.props.touchActivationMethod];
+      var touchInteractionMethods = _touchActivation.default[this.props.touchActivationMethod];
       this.touchHandlers = [];
@@ -161,22 +238,33 @@
 
-      var _containerRef$current = this.containerRef.current.getBoundingClientRect(),
-          left = _containerRef$current.left,
-          top = _containerRef$current.top,
-          width = _containerRef$current.width,
-          height = _containerRef$current.height;
+      var _this$containerRef$cu = this.containerRef.current.getBoundingClientRect(),
+          left = _this$containerRef$cu.left,
+          top = _this$containerRef$cu.top,
+          width = _this$containerRef$cu.width,
+          height = _this$containerRef$cu.height;
 
-      var _props2 = this.props,
-          trackItemPosition = _props2.trackItemPosition,
-          trackPassivePosition = _props2.trackPassivePosition,
-          trackPreviousPosition = _props2.trackPreviousPosition,
-          centerItemOnActivate = _props2.centerItemOnActivate,
-          centerItemOnActivatePos = _props2.centerItemOnActivatePos,
-          linkItemToActive = _props2.linkItemToActive,
-          itemMovementMultiplier = _props2.itemMovementMultiplier,
-          alignItemOnActivePos = _props2.alignItemOnActivePos;
+      var _this$props2 = this.props,
+          trackItemPosition = _this$props2.trackItemPosition,
+          trackPassivePosition = _this$props2.trackPassivePosition,
+          trackPreviousPosition = _this$props2.trackPreviousPosition,
+          centerItemOnActivate = _this$props2.centerItemOnActivate,
+          centerItemOnActivatePos = _this$props2.centerItemOnActivatePos,
+          linkItemToActive = _this$props2.linkItemToActive,
+          itemMovementMultiplier = _this$props2.itemMovementMultiplier,
+          alignItemOnActivePos = _this$props2.alignItemOnActivePos,
+          itemPositionMinX = _this$props2.itemPositionMinX,
+          itemPositionMaxX = _this$props2.itemPositionMaxX,
+          itemPositionMinY = _this$props2.itemPositionMinY,
+          itemPositionMaxY = _this$props2.itemPositionMaxY,
+          itemPositionLimitBySize = _this$props2.itemPositionLimitBySize,
+          itemPositionLimitInternal = _this$props2.itemPositionLimitInternal; // Set container div info and active position
 
-
       var stateUpdate = {
-        elementDimensions: { width: width, height: height },
-        elementOffset: { left: left, top: top },
+        elementDimensions: {
+          width: width,
+          height: height
+        },
+        elementOffset: {
+          left: left,
+          top: top
+        },
         activePosition: {
@@ -186,7 +274,8 @@ x: Math.min(Math.max(0, position.x - left), width),
         }
-      };
+      }; // Activate if necessary
 
+      if (activate) stateUpdate.active = true; // Set item dimensions
+
       if (this.itemRef.current) {
         var itemSize = this.itemRef.current.getBoundingClientRect();
-
         stateUpdate.itemDimensions = {
@@ -196,4 +285,5 @@ width: itemSize.width,
         };
-      }
+      } // Set previous active position
 
+
       if (trackPreviousPosition || trackItemPosition) {
@@ -204,4 +294,5 @@ stateUpdate.prevActivePosition = {
         };
-      }
+      } // Set passive position
 
+
       if (trackPassivePosition) {
@@ -212,42 +303,39 @@ stateUpdate.passivePosition = {
         };
-      }
+      } // Create adjusted limits
 
-      var shouldLimitItem = false;
 
-      if (trackItemPosition && linkItemToActive) {
-        stateUpdate.itemPosition = _extends({}, stateUpdate.activePosition);
-        shouldLimitItem = true;
-      } else if (trackItemPosition && updateItemPosition) {
-        stateUpdate.itemPosition = _extends({}, this.state.itemPosition);
+      var limits = _utils.default.createAdjustedLimits(itemPositionMinX, itemPositionMaxX, itemPositionMinY, itemPositionMaxY, stateUpdate.elementDimensions, stateUpdate.itemDimensions, itemPositionLimitBySize, itemPositionLimitInternal); // Center item
 
-        var moveX = (stateUpdate.activePosition.x - stateUpdate.prevActivePosition.x) * itemMovementMultiplier;
-        var moveY = (stateUpdate.activePosition.y - stateUpdate.prevActivePosition.y) * itemMovementMultiplier;
 
-        stateUpdate.itemPosition.x += moveX;
-        stateUpdate.itemPosition.y += moveY;
-        shouldLimitItem = true;
-      } else if (trackItemPosition && activate && centerItemOnActivate) {
-        shouldLimitItem = true;
-      } else if (trackItemPosition && activate && centerItemOnActivatePos) {
+      if (centerItem || activate && centerItemOnActivate) {
+        var centerX = (limits.maxX + limits.minX) / 2;
+        var centerY = (limits.maxY + limits.minY) / 2;
         stateUpdate.itemPosition = {
-          x: _utils2.default.convertRange(0, width, 0, -(stateUpdate.itemDimensions.width || 0) + width, stateUpdate.activePosition.x) + (width / 2 - stateUpdate.activePosition.x),
-          y: _utils2.default.convertRange(0, height, 0, -(stateUpdate.itemDimensions.height || 0) + height, stateUpdate.activePosition.y) + (height / 2 - stateUpdate.activePosition.y)
+          x: centerX || 0,
+          y: centerY || 0
         };
-        shouldLimitItem = true;
+        return this.setState(function () {
+          return stateUpdate;
+        }, this.startRefreshTimer);
       }
 
-      if (trackItemPosition && alignItemOnActivePos) {
-        stateUpdate.itemPosition = {
-          x: _utils2.default.convertRange(0, Math.ceil(width) - 1, 0, -(stateUpdate.itemDimensions.width || 0) + width, stateUpdate.activePosition.x),
-          y: _utils2.default.convertRange(0, Math.ceil(height) - 1, 0, -(stateUpdate.itemDimensions.height || 0) + height, stateUpdate.activePosition.y)
-        };
-        shouldLimitItem = true;
-      }
+      var shouldLimitItem = true; // Set item position
 
-      if (shouldLimitItem || centerItem) {
-        stateUpdate.itemPosition = this.limitItemPosition(stateUpdate.itemPosition, activate && centerItemOnActivate || centerItem, stateUpdate.elementDimensions.width, stateUpdate.elementDimensions.height, stateUpdate.itemDimensions && stateUpdate.itemDimensions.width, stateUpdate.itemDimensions && stateUpdate.itemDimensions.height);
+      if (trackItemPosition && linkItemToActive) {
+        stateUpdate.itemPosition = _objectSpread({}, stateUpdate.activePosition);
+      } else if (trackItemPosition && alignItemOnActivePos) {
+        stateUpdate.itemPosition = _utils.default.alignItemOnPosition(stateUpdate.elementDimensions, stateUpdate.itemDimensions, stateUpdate.activePosition);
+      } else if (trackItemPosition && activate && centerItemOnActivatePos) {
+        stateUpdate.itemPosition = _utils.default.centerItemOnPosition(stateUpdate.elementDimensions, stateUpdate.itemDimensions, stateUpdate.activePosition);
+      } else if (trackItemPosition && updateItemPosition) {
+        stateUpdate.itemPosition = _utils.default.calculateItemPosition(this.state.itemPosition, stateUpdate.prevActivePosition, stateUpdate.activePosition, itemMovementMultiplier);
+      } else {
+        shouldLimitItem = false;
+      } // Apply position limits
+
+
+      if (shouldLimitItem) {
+        stateUpdate.itemPosition = _utils.default.limitPosition(limits.minX, limits.maxX, limits.minY, limits.maxY, stateUpdate.itemPosition);
       }
 
-      if (activate) stateUpdate.active = true;
-
       this.setState(function () {
@@ -262,5 +350,5 @@ return stateUpdate;
 
-      var _containerRef$current2 = this.containerRef.current.getBoundingClientRect(),
-          left = _containerRef$current2.left,
-          top = _containerRef$current2.top;
+      var _this$containerRef$cu2 = this.containerRef.current.getBoundingClientRect(),
+          left = _this$containerRef$cu2.left,
+          top = _this$containerRef$cu2.top;
 
@@ -277,74 +365,8 @@ this.setState(function () {
   }, {
-    key: "limitItemPosition",
-    value: function limitItemPosition(itemPosition, center, elemWidth, elemHeight, itemWidth, itemHeight) {
-      var _props3 = this.props,
-          itemPositionMinX = _props3.itemPositionMinX,
-          itemPositionMaxX = _props3.itemPositionMaxX,
-          itemPositionMinY = _props3.itemPositionMinY,
-          itemPositionMaxY = _props3.itemPositionMaxY,
-          itemPositionLimitBySize = _props3.itemPositionLimitBySize,
-          itemPositionLimitInternal = _props3.itemPositionLimitInternal;
-
-
-      if (itemPositionMaxX < 0) {
-        itemPositionMaxX = elemWidth + itemPositionMaxX;
-      }
-
-      if (itemPositionMaxY < 0) {
-        itemPositionMaxY = elemHeight + itemPositionMaxY;
-      }
-
-      if (itemPositionLimitBySize) {
-        var offsetX = this.state.elementDimensions.width;
-        var offsetY = this.state.elementDimensions.height;
-
-        if (itemPositionLimitInternal) {
-          itemPositionMinX = 0;
-          itemPositionMinY = 0;
-          itemPositionMaxX = offsetX - itemWidth;
-          itemPositionMaxY = offsetY - itemHeight;
-
-          if (itemWidth > offsetX || itemHeight > offsetY) {
-            itemPositionMaxX = 0;
-            itemPositionMaxY = 0;
-          }
-        } else if (itemWidth || itemHeight) {
-          itemPositionMaxX = 0;
-          itemPositionMaxY = 0;
-          itemPositionMinX = -itemWidth + offsetX;
-          itemPositionMinY = -itemHeight + offsetY;
-
-          if (itemWidth < offsetX || itemHeight < offsetY) {
-            itemPositionMinX = 0;
-            itemPositionMinY = 0;
-          }
-        }
-      }
-
-      var position = _extends({}, itemPosition);
-
-      if (center) {
-        var centerX = (itemPositionMaxX + itemPositionMinX) / 2;
-        var centerY = (itemPositionMaxY + itemPositionMinY) / 2;
-        position.x = centerX || 0;
-        position.y = centerY || 0;
-      }
-
-      if (itemPositionMinX !== undefined && position.x < itemPositionMinX) {
-        position.x = itemPositionMinX;
-      } else if (itemPositionMaxX !== undefined && position.x > itemPositionMaxX) {
-        position.x = itemPositionMaxX;
-      }
-      if (itemPositionMinY !== undefined && position.y < itemPositionMinY) {
-        position.y = itemPositionMinY;
-      } else if (itemPositionMaxY !== undefined && position.y > itemPositionMaxY) {
-        position.y = itemPositionMaxY;
-      }
-
-      return position;
-    }
-  }, {
     key: "toggleActive",
     value: function toggleActive() {
-      var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { x: 0, y: 0 };
+      var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+        x: 0,
+        y: 0
+      };
 
@@ -360,4 +382,6 @@ if (!this.state.active) {
     value: function activate() {
-      var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { x: 0, y: 0 };
-
+      var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+        x: 0,
+        y: 0
+      };
       this.setPosition(position, false, true);
@@ -369,3 +393,5 @@ }
       this.setState(function () {
-        return { active: false };
+        return {
+          active: false
+        };
       });
@@ -379,3 +405,2 @@ }
       if (!this.props.minUpdateSpeedInMs) return;
-
       setTimeout(function () {
@@ -465,12 +490,11 @@ _this2.refresh = true;
     value: function render() {
-      var _props4 = this.props,
-          style = _props4.style,
-          className = _props4.className,
-          children = _props4.children,
-          cursorStyle = _props4.cursorStyle,
-          cursorStyleActive = _props4.cursorStyleActive;
+      var _this$props3 = this.props,
+          style = _this$props3.style,
+          className = _this$props3.className,
+          children = _this$props3.children,
+          cursorStyle = _this$props3.cursorStyle,
+          cursorStyleActive = _this$props3.cursorStyleActive;
       var active = this.state.active;
 
-
-      var combinedStyle = _extends({}, style, {
+      var combinedStyle = _objectSpread({}, style, {
         WebkitUserSelect: "none",
@@ -483,10 +507,10 @@ MozUserSelect: "none",
 
-      return _react2.default.createElement(
-        "div",
-        { style: combinedStyle, className: className, ref: this.containerRef },
-        _utils2.default.decorateChildren(children, _extends({}, this.state, {
-          itemRef: this.itemRef,
-          onLoadRefresh: this.onLoadRefresh
-        }))
-      );
+      return _react.default.createElement("div", {
+        style: combinedStyle,
+        className: className,
+        ref: this.containerRef
+      }, _utils.default.decorateChildren(children, _objectSpread({}, this.state, {
+        itemRef: this.itemRef,
+        onLoadRefresh: this.onLoadRefresh
+      })));
     }
@@ -498,32 +522,33 @@ }]);
 
-ReactInputPosition.propTypes = {
-  mouseActivationMethod: _propTypes2.default.oneOf([_constants.MOUSE_ACTIVATION.CLICK, _constants.MOUSE_ACTIVATION.DOUBLE_CLICK, _constants.MOUSE_ACTIVATION.HOVER, _constants.MOUSE_ACTIVATION.MOUSE_DOWN]).isRequired,
-  touchActivationMethod: _propTypes2.default.oneOf([_constants.TOUCH_ACTIVATION.DOUBLE_TAP, _constants.TOUCH_ACTIVATION.LONG_TOUCH, _constants.TOUCH_ACTIVATION.TAP, _constants.TOUCH_ACTIVATION.TOUCH]).isRequired,
-  tapDurationInMs: _propTypes2.default.number,
-  doubleTapDurationInMs: _propTypes2.default.number,
-  longTouchDurationInMs: _propTypes2.default.number,
-  longTouchMoveLimit: _propTypes2.default.number,
-  clickMoveLimit: _propTypes2.default.number,
-  itemPositionMinX: _propTypes2.default.number,
-  itemPositionMaxX: _propTypes2.default.number,
-  itemPositionMinY: _propTypes2.default.number,
-  itemPositionMaxY: _propTypes2.default.number,
-  itemPositionLimitBySize: _propTypes2.default.bool,
-  itemPositionLimitInternal: _propTypes2.default.bool,
-  linkItemToActive: _propTypes2.default.bool,
-  className: _propTypes2.default.string,
-  style: _propTypes2.default.object,
-  minUpdateSpeedInMs: _propTypes2.default.number,
-  trackPassivePosition: _propTypes2.default.bool,
-  trackItemPosition: _propTypes2.default.bool,
-  trackPreviousPosition: _propTypes2.default.bool,
-  centerItemOnActivate: _propTypes2.default.bool,
-  centerItemOnActivatePos: _propTypes2.default.bool,
-  centerItemOnLoad: _propTypes2.default.bool,
-  alignItemOnActivePos: _propTypes2.default.bool,
-  itemMovementMultiplier: _propTypes2.default.number,
-  cursorStyle: _propTypes2.default.string,
-  cursorStyleActive: _propTypes2.default.string
-};
-ReactInputPosition.defaultProps = {
+_defineProperty(ReactInputPosition, "propTypes", {
+  mouseActivationMethod: _propTypes.default.oneOf([_constants.MOUSE_ACTIVATION.CLICK, _constants.MOUSE_ACTIVATION.DOUBLE_CLICK, _constants.MOUSE_ACTIVATION.HOVER, _constants.MOUSE_ACTIVATION.MOUSE_DOWN]).isRequired,
+  touchActivationMethod: _propTypes.default.oneOf([_constants.TOUCH_ACTIVATION.DOUBLE_TAP, _constants.TOUCH_ACTIVATION.LONG_TOUCH, _constants.TOUCH_ACTIVATION.TAP, _constants.TOUCH_ACTIVATION.TOUCH]).isRequired,
+  tapDurationInMs: _propTypes.default.number,
+  doubleTapDurationInMs: _propTypes.default.number,
+  longTouchDurationInMs: _propTypes.default.number,
+  longTouchMoveLimit: _propTypes.default.number,
+  clickMoveLimit: _propTypes.default.number,
+  itemPositionMinX: _propTypes.default.number,
+  itemPositionMaxX: _propTypes.default.number,
+  itemPositionMinY: _propTypes.default.number,
+  itemPositionMaxY: _propTypes.default.number,
+  itemPositionLimitBySize: _propTypes.default.bool,
+  itemPositionLimitInternal: _propTypes.default.bool,
+  linkItemToActive: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  minUpdateSpeedInMs: _propTypes.default.number,
+  trackPassivePosition: _propTypes.default.bool,
+  trackItemPosition: _propTypes.default.bool,
+  trackPreviousPosition: _propTypes.default.bool,
+  centerItemOnActivate: _propTypes.default.bool,
+  centerItemOnActivatePos: _propTypes.default.bool,
+  centerItemOnLoad: _propTypes.default.bool,
+  alignItemOnActivePos: _propTypes.default.bool,
+  itemMovementMultiplier: _propTypes.default.number,
+  cursorStyle: _propTypes.default.string,
+  cursorStyleActive: _propTypes.default.string
+});
+
+_defineProperty(ReactInputPosition, "defaultProps", {
   tapDurationInMs: 180,
@@ -540,5 +565,5 @@ doubleTapDurationInMs: 400,
   touchActivationMethod: _constants.TOUCH_ACTIVATION.TAP
-};
-exports.MOUSE_ACTIVATION = _constants.MOUSE_ACTIVATION;
-exports.TOUCH_ACTIVATION = _constants.TOUCH_ACTIVATION;
-exports.default = ReactInputPosition;
+});
+
+var _default = ReactInputPosition;
+exports.default = _default;

dist/mouseActivation/click.js

@@ -6,7 +6,6 @@ "use strict";
 });
+exports.default = void 0;
 
-var _utils = require("../utils");
+var _utils = _interopRequireDefault(require("../utils"));
 
-var _utils2 = _interopRequireDefault(_utils);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,3 +16,2 @@
   this.mouseJustDown = false;
-
   this.clickMoveStartRef = e.clientX + e.clientY;
@@ -24,8 +22,8 @@ }
   if (!this.mouseDown) return;
-
   this.mouseDown = false;
   this.mouseJustDown = false;
-
-  var position = { x: e.clientX, y: e.clientY };
-
+  var position = {
+    x: e.clientX,
+    y: e.clientY
+  };
   var clickMoveEnd = position.x + position.y;
@@ -40,3 +38,6 @@ var diff = Math.abs(this.clickMoveStartRef - clickMoveEnd);
 function mouseMove(e) {
-  var position = { x: e.clientX, y: e.clientY };
+  var position = {
+    x: e.clientX,
+    y: e.clientY
+  };
 
@@ -48,3 +49,2 @@ if (!this.state.active) {
   this.setPosition(position, this.mouseDown && !this.mouseJustDown);
-
   this.mouseJustDown = false;
@@ -58,3 +58,3 @@ }
 
-exports.default = {
+var _default = {
   mouseDown: mouseDown,
@@ -64,3 +64,4 @@ mouseUp: mouseUp,
   mouseLeave: mouseLeave,
-  dragStart: _utils2.default.preventDefault
-};
+  dragStart: _utils.default.preventDefault
+};
+exports.default = _default;

dist/mouseActivation/doubleClick.js

@@ -6,7 +6,6 @@ "use strict";
 });
+exports.default = void 0;
 
-var _utils = require("../utils");
+var _utils = _interopRequireDefault(require("../utils"));
 
-var _utils2 = _interopRequireDefault(_utils);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,4 +24,6 @@
 function dblClick(e) {
-  var position = { x: e.clientX, y: e.clientY };
-
+  var position = {
+    x: e.clientX,
+    y: e.clientY
+  };
   this.toggleActive(position);
@@ -32,3 +33,6 @@ }
 function mouseMove(e) {
-  var position = { x: e.clientX, y: e.clientY };
+  var position = {
+    x: e.clientX,
+    y: e.clientY
+  };
 
@@ -48,3 +52,3 @@ if (!this.state.active) {
 
-exports.default = {
+var _default = {
   mouseDown: mouseDown,
@@ -55,3 +59,4 @@ mouseUp: mouseUp,
   mouseLeave: mouseLeave,
-  dragStart: _utils2.default.preventDefault
-};
+  dragStart: _utils.default.preventDefault
+};
+exports.default = _default;

dist/mouseActivation/hover.js

@@ -6,7 +6,6 @@ "use strict";
 });
+exports.default = void 0;
 
-var _utils = require("../utils");
+var _utils = _interopRequireDefault(require("../utils"));
 
-var _utils2 = _interopRequireDefault(_utils);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,3 +24,6 @@
 function mouseMove(e) {
-  var position = { x: e.clientX, y: e.clientY };
+  var position = {
+    x: e.clientX,
+    y: e.clientY
+  };
 
@@ -37,3 +39,6 @@ if (!this.state.active) {
 function mouseEnter(e) {
-  var position = { x: e.clientX, y: e.clientY };
+  var position = {
+    x: e.clientX,
+    y: e.clientY
+  };
   this.activate(position);
@@ -48,3 +53,3 @@ }
 
-exports.default = {
+var _default = {
   mouseDown: mouseDown,
@@ -55,3 +60,4 @@ mouseUp: mouseUp,
   mouseLeave: mouseLeave,
-  dragStart: _utils2.default.preventDefault
-};
+  dragStart: _utils.default.preventDefault
+};
+exports.default = _default;

dist/mouseActivation/index.js

@@ -6,26 +6,20 @@ "use strict";
 });
+exports.default = void 0;
 
-var _click = require("./click");
+var _click = _interopRequireDefault(require("./click"));
 
-var _click2 = _interopRequireDefault(_click);
+var _doubleClick = _interopRequireDefault(require("./doubleClick"));
 
-var _doubleClick = require("./doubleClick");
+var _hover = _interopRequireDefault(require("./hover"));
 
-var _doubleClick2 = _interopRequireDefault(_doubleClick);
+var _mouseDown = _interopRequireDefault(require("./mouseDown"));
 
-var _hover = require("./hover");
-
-var _hover2 = _interopRequireDefault(_hover);
-
-var _mouseDown = require("./mouseDown");
-
-var _mouseDown2 = _interopRequireDefault(_mouseDown);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = {
-  click: _click2.default,
-  doubleClick: _doubleClick2.default,
-  hover: _hover2.default,
-  mouseDown: _mouseDown2.default
-};
+var _default = {
+  click: _click.default,
+  doubleClick: _doubleClick.default,
+  hover: _hover.default,
+  mouseDown: _mouseDown.default
+};
+exports.default = _default;

dist/mouseActivation/mouseDown.js

@@ -6,7 +6,6 @@ "use strict";
 });
+exports.default = void 0;
 
-var _utils = require("../utils");
+var _utils = _interopRequireDefault(require("../utils"));
 
-var _utils2 = _interopRequireDefault(_utils);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -16,3 +15,6 @@
   this.mouseJustDown = true;
-  var position = { x: e.clientX, y: e.clientY };
+  var position = {
+    x: e.clientX,
+    y: e.clientY
+  };
   this.activate(position);
@@ -27,3 +29,6 @@ }
 function mouseMove(e) {
-  var position = { x: e.clientX, y: e.clientY };
+  var position = {
+    x: e.clientX,
+    y: e.clientY
+  };
 
@@ -42,6 +47,7 @@ if (!this.state.active) {
   }
+
   this.mouseJustDown = false;
 }
 
-exports.default = {
+var _default = {
   mouseDown: mouseDown,
@@ -51,3 +57,4 @@ mouseUp: mouseUp,
   mouseLeave: mouseLeave,
-  dragStart: _utils2.default.preventDefault
-};
+  dragStart: _utils.default.preventDefault
+};
+exports.default = _default;

dist/touchActivation/doubleTap.js

@@ -6,2 +6,4 @@ "use strict";
 });
+exports.default = void 0;
+
 function touchStart() {
@@ -15,3 +17,2 @@ this.touched = true;
   if (e.cancelable) e.preventDefault();
-
   this.touched = false;
@@ -24,2 +25,3 @@ this.justTouched = false;
   }
+
   clearTimeout(this.tapTimer);
@@ -29,7 +31,8 @@
     clearTimeout(this.doubleTapTimer);
-
     var touch = e.changedTouches[0];
-    var position = { x: touch.clientX, y: touch.clientY };
+    var position = {
+      x: touch.clientX,
+      y: touch.clientY
+    };
     this.toggleActive(position);
-
     this.tapped = false;
@@ -48,5 +51,7 @@ return;
   e.preventDefault();
-
   var touch = e.touches[0];
-  var position = { x: touch.clientX, y: touch.clientY };
+  var position = {
+    x: touch.clientX,
+    y: touch.clientY
+  };
   this.setPosition(position, this.touched && !this.justTouched);
@@ -60,3 +65,3 @@ this.justTouched = false;
 
-exports.default = {
+var _default = {
   touchStart: touchStart,
@@ -66,2 +71,3 @@ touchEnd: touchEnd,
   touchCancel: touchCancel
-};
+};
+exports.default = _default;

dist/touchActivation/index.js

@@ -6,26 +6,20 @@ "use strict";
 });
+exports.default = void 0;
 
-var _doubleTap = require("./doubleTap");
+var _doubleTap = _interopRequireDefault(require("./doubleTap"));
 
-var _doubleTap2 = _interopRequireDefault(_doubleTap);
+var _longTouch = _interopRequireDefault(require("./longTouch"));
 
-var _longTouch = require("./longTouch");
+var _tap = _interopRequireDefault(require("./tap"));
 
-var _longTouch2 = _interopRequireDefault(_longTouch);
+var _touch = _interopRequireDefault(require("./touch"));
 
-var _tap = require("./tap");
-
-var _tap2 = _interopRequireDefault(_tap);
-
-var _touch = require("./touch");
-
-var _touch2 = _interopRequireDefault(_touch);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = {
-  doubleTap: _doubleTap2.default,
-  longTouch: _longTouch2.default,
-  tap: _tap2.default,
-  touch: _touch2.default
-};
+var _default = {
+  doubleTap: _doubleTap.default,
+  longTouch: _longTouch.default,
+  tap: _tap.default,
+  touch: _touch.default
+};
+exports.default = _default;

dist/touchActivation/longTouch.js

@@ -6,10 +6,13 @@ "use strict";
 });
+exports.default = void 0;
+
 function touchStart(e) {
   this.touched = true;
   this.justTouched = true;
-
   clearTimeout(this.longTouchTimer);
-
   var touch = e.touches[0];
-  var position = { x: touch.clientX, y: touch.clientY };
+  var position = {
+    x: touch.clientX,
+    y: touch.clientY
+  };
   this.longTouchStartRef = position.x + position.y;
@@ -21,3 +24,2 @@ this.startLongTouchTimer(position);
   if (e.cancelable) e.preventDefault();
-
   this.touched = false;
@@ -29,3 +31,6 @@ this.justTouched = false;
   var touch = e.touches[0];
-  var position = { x: touch.clientX, y: touch.clientY };
+  var position = {
+    x: touch.clientX,
+    y: touch.clientY
+  };
   var end = position.x + position.y;
@@ -40,3 +45,2 @@ var diff = Math.abs(this.longTouchStartRef - end);
   if (e.cancelable) e.preventDefault();
-
   this.setPosition(position, this.touched && !this.justTouched);
@@ -50,3 +54,3 @@ this.justTouched = false;
 
-exports.default = {
+var _default = {
   touchStart: touchStart,
@@ -56,2 +60,3 @@ touchEnd: touchEnd,
   touchCancel: touchCancel
-};
+};
+exports.default = _default;

dist/touchActivation/tap.js

@@ -6,2 +6,4 @@ "use strict";
 });
+exports.default = void 0;
+
 function touchStart() {
@@ -15,3 +17,2 @@ this.touched = true;
   if (e.cancelable) e.preventDefault();
-
   this.touched = false;
@@ -24,8 +25,10 @@ this.justTouched = false;
   }
+
   clearTimeout(this.tapTimer);
-
   var touch = e.changedTouches[0];
-  var position = { x: touch.clientX, y: touch.clientY };
+  var position = {
+    x: touch.clientX,
+    y: touch.clientY
+  };
   this.toggleActive(position);
-
   this.tapTimedOut = false;
@@ -37,5 +40,7 @@ }
   if (e.cancelable) e.preventDefault();
-
   var touch = e.touches[0];
-  var position = { x: touch.clientX, y: touch.clientY };
+  var position = {
+    x: touch.clientX,
+    y: touch.clientY
+  };
   this.setPosition(position, this.touched && !this.justTouched);
@@ -49,3 +54,3 @@ this.justTouched = false;
 
-exports.default = {
+var _default = {
   touchStart: touchStart,
@@ -55,2 +60,3 @@ touchEnd: touchEnd,
   touchCancel: touchCancel
-};
+};
+exports.default = _default;

dist/touchActivation/touch.js

@@ -6,8 +6,12 @@ "use strict";
 });
+exports.default = void 0;
+
 function touchStart(e) {
   this.touched = true;
   this.justTouched = true;
-
   var touch = e.touches[0];
-  var position = { x: touch.clientX, y: touch.clientY };
+  var position = {
+    x: touch.clientX,
+    y: touch.clientY
+  };
   this.activate(position);
@@ -18,6 +22,4 @@ }
   if (e.cancelable) e.preventDefault();
-
   this.touched = false;
   this.justTouched = false;
-
   this.deactivate();
@@ -29,5 +31,7 @@ }
   if (e.cancelable) e.preventDefault();
-
   var touch = e.touches[0];
-  var position = { x: touch.clientX, y: touch.clientY };
+  var position = {
+    x: touch.clientX,
+    y: touch.clientY
+  };
   this.setPosition(position, this.touched && !this.justTouched);
@@ -41,3 +45,3 @@ this.justTouched = false;
 
-exports.default = {
+var _default = {
   touchStart: touchStart,
@@ -47,2 +51,3 @@ touchEnd: touchEnd,
   touchCancel: touchCancel
-};
+};
+exports.default = _default;

dist/utils.js

@@ -6,5 +6,10 @@ "use strict";
 });
+exports.default = void 0;
 
 var _react = require("react");
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function isReactComponent(element) {
@@ -30,3 +35,3 @@ return typeof element.type === "function";
   e.preventDefault();
-};
+}
 
@@ -38,6 +43,103 @@ function convertRange(oldMin, oldMax, newMin, newMax, oldValue) {
 
-exports.default = {
+function limitPosition(minX, maxX, minY, maxY, itemPosition) {
+  var position = _objectSpread({}, itemPosition);
+
+  if (minX !== undefined && position.x < minX) {
+    position.x = minX;
+  } else if (maxX !== undefined && position.x > maxX) {
+    position.x = maxX;
+  }
+
+  if (minY !== undefined && position.y < minY) {
+    position.y = minY;
+  } else if (maxY !== undefined && position.y > maxY) {
+    position.y = maxY;
+  }
+
+  return position;
+}
+
+function createAdjustedLimits(minX, maxX, minY, maxY, elemDimensions, itemDimensions, limitBySize, internal) {
+  var limits = {
+    minX: minX,
+    maxX: maxX,
+    minY: minY,
+    maxY: maxY
+  };
+
+  if (limits.maxX < 0) {
+    limits.maxX = elemWidth + limits.maxX;
+  }
+
+  if (limits.maxY < 0) {
+    limits.maxY = elemHeight + limits.maxY;
+  }
+
+  if (!limitBySize) {
+    return limits;
+  }
+
+  if (internal) {
+    limits.minX = 0;
+    limits.minY = 0;
+    limits.maxX = elemDimensions.width - itemDimensions.width;
+    limits.maxY = elemDimensions.height - itemDimensions.height;
+
+    if (itemDimensions.width > elemDimensions.width || itemDimensions.height > elemDimensions.height) {
+      limits.maxX = 0;
+      limits.maxY = 0;
+    }
+  } else if (itemDimensions.width || itemDimensions.height) {
+    limits.maxX = 0;
+    limits.maxY = 0;
+    limits.minX = -itemDimensions.width + elemDimensions.width;
+    limits.minY = -itemDimensions.height + elemDimensions.height;
+
+    if (itemDimensions.width < elemDimensions.width || itemDimensions.height < elemDimensions.height) {
+      limits.minX = 0;
+      limits.minY = 0;
+    }
+  }
+
+  return limits;
+}
+
+function calculateItemPosition(itemPosition, prevActivePosition, activePosition, multiplier) {
+  var newItemPosition = _objectSpread({}, itemPosition);
+
+  var moveX = (activePosition.x - prevActivePosition.x) * multiplier;
+  var moveY = (activePosition.y - prevActivePosition.y) * multiplier;
+  newItemPosition.x += moveX;
+  newItemPosition.y += moveY;
+  return newItemPosition;
+}
+
+function alignItemOnPosition(elemDimensions, itemDimensions, position) {
+  var oldMaxX = Math.ceil(elemDimensions.width) - 1;
+  var newMaxX = -(itemDimensions.width || 0) + elemDimensions.width;
+  var oldMaxY = Math.ceil(elemDimensions.height) - 1;
+  var newMaxY = -(itemDimensions.height || 0) + elemDimensions.height;
+  return {
+    x: convertRange(0, oldMaxX, 0, newMaxX, position.x),
+    y: convertRange(0, oldMaxY, 0, newMaxY, position.y)
+  };
+}
+
+function centerItemOnPosition(elemDimensions, itemDimensions, position) {
+  var itemPosition = alignItemOnPosition(elemDimensions, itemDimensions, position);
+  itemPosition.x += elemDimensions.width / 2 - position.x;
+  itemPosition.y += elemDimensions.height / 2 - position.y;
+  return itemPosition;
+}
+
+var _default = {
   decorateChildren: decorateChildren,
   preventDefault: preventDefault,
-  convertRange: convertRange
-};
+  convertRange: convertRange,
+  limitPosition: limitPosition,
+  createAdjustedLimits: createAdjustedLimits,
+  calculateItemPosition: calculateItemPosition,
+  alignItemOnPosition: alignItemOnPosition,
+  centerItemOnPosition: centerItemOnPosition
+};
+exports.default = _default;

package.json

 {
   "name": "react-input-position",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A React component that decorates it's children with mouse/touch position tracking, a status toggle fired by click/gesture events, and more.",
@@ -41,9 +41,8 @@ "keywords": [
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.3.4",
+    "@babel/plugin-proposal-class-properties": "^7.3.4",
+    "@babel/preset-env": "^7.3.4",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
     "css-loader": "^2.1.0",
@@ -50,0 +49,0 @@ "file-loader": "^3.0.1",

No alert changes

Improved metrics

Total package byte prevSize

48355

increased by10.72%

Dev dependency count

17

decreased by-5.56%

Lines of code

1008

increased by19.01%

No dependency changes