react-rnd - npm Package Compare versions

Comparing version 5.1.3 to 6.0.0

lib/index.es5.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
@@ -234,6 +236,16 @@
 
+var TouchEvent2 = function (_TouchEvent) {
+  inherits(TouchEvent2, _TouchEvent);
+
+  function TouchEvent2() {
+    classCallCheck(this, TouchEvent2);
+    return possibleConstructorReturn(this, (TouchEvent2.__proto__ || Object.getPrototypeOf(TouchEvent2)).apply(this, arguments));
+  }
+
+  return TouchEvent2;
+}(TouchEvent);
+
 var boxStyle = {
   width: 'auto',
   height: 'auto',
-  cursor: 'move',
   display: 'inline-block',
@@ -251,10 +263,10 @@ position: 'absolute',
 
-    var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props));
+    var _this2 = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props));
 
-    _this.state = {
+    _this2.state = {
       disableDragging: false,
       z: props.z,
       original: {
-        x: props.default.x || 0,
-        y: props.default.y || 0
+        x: props.x || 0,
+        y: props.y || 0
       },
@@ -268,11 +280,12 @@ bounds: {
       maxWidth: props.maxWidth,
-      maxHeight: props.maxHeight
+      maxHeight: props.maxHeight,
+      isMounted: false
     };
-    _this.onResizeStart = _this.onResizeStart.bind(_this);
-    _this.onResize = _this.onResize.bind(_this);
-    _this.onResizeStop = _this.onResizeStop.bind(_this);
-    _this.onDragStart = _this.onDragStart.bind(_this);
-    _this.onDrag = _this.onDrag.bind(_this);
-    _this.onDragStop = _this.onDragStop.bind(_this);
-    return _this;
+    _this2.onResizeStart = _this2.onResizeStart.bind(_this2);
+    _this2.onResize = _this2.onResize.bind(_this2);
+    _this2.onResizeStop = _this2.onResizeStop.bind(_this2);
+    _this2.onDragStart = _this2.onDragStart.bind(_this2);
+    _this2.onDrag = _this2.onDrag.bind(_this2);
+    _this2.onDragStop = _this2.onDragStop.bind(_this2);
+    return _this2;
   }
@@ -283,23 +296,24 @@
     value: function componentWillReceiveProps(nextProps) {
-      if (this.props.z === nextProps.z) return;
-      this.setState({
-        z: nextProps.z
-      });
+      if (this.props.z !== nextProps.z) {
+        this.setState({ z: nextProps.z });
+      }
+      var draggable = this.draggable && this.draggable.state;
+      if (!draggable) return;
+      if (this.props.x !== draggable.x) {
+        this.draggable.setState({ x: this.props.x });
+      }
+      if (this.props.y !== draggable.y) {
+        this.draggable.setState({ y: this.props.y });
+      }
     }
   }, {
     key: 'componentDidMount',
-    value: function componentDidMount() {}
-  }, {
-    key: 'componentWillUpdate',
-    value: function componentWillUpdate() {
+    value: function componentDidMount() {
       this.setParentPosition();
     }
   }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {}
-  }, {
     key: 'getSelfElement',
     value: function getSelfElement() {
-      if (!this.resizable) return null;
-      return reactDom.findDOMNode(this.resizable);
+      if (!this) return null;
+      return reactDom.findDOMNode(this);
     }
@@ -314,4 +328,8 @@ }, {
         if (!(parent instanceof HTMLElement)) return;
-        if (getComputedStyle(parent).position !== 'static') return;
+        if (getComputedStyle(parent).position !== 'static') {
+          this.setState({ isMounted: true });
+          return;
+        }
         parent.style.position = 'relative';
+        this.setState({ isMounted: true });
       }
@@ -363,4 +381,3 @@ }
     key: 'onResizeStart',
-    value: function onResizeStart(e, dir, refToElement) // React.ElementRef<'div'>,
-    {
+    value: function onResizeStart(e, dir, refToElement) {
       e.stopPropagation();
@@ -474,9 +491,10 @@ this.setState({
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
-      var cursorStyle = this.props.disableDragging ? { cursor: 'normal' } : {};
+      var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
       var innerStyle = _extends({}, boxStyle, {
         zIndex: this.state.z
       }, cursorStyle, this.props.style);
-
+      // HACK: Wait for setting relative to parent element.
+      if (!this.state.isMounted) return React.createElement('div', null);
       return React.createElement(
@@ -486,6 +504,6 @@ Draggable,
           ref: function ref(c) {
-            _this2.draggable = c;
+            _this3.draggable = c;
           },
           handle: this.props.dragHandleClassName,
-          defaultPosition: { x: this.props.default.x, y: this.props.default.y },
+          defaultPosition: { x: this.props.x, y: this.props.y },
           onStart: this.onDragStart,
@@ -504,3 +522,3 @@ onDrag: this.onDrag,
             ref: function ref(c) {
-              _this2.resizable = c;
+              _this3.resizable = c;
             },
@@ -512,4 +530,4 @@ enable: this.props.enableResizing,
             style: innerStyle,
-            width: this.props.default.width,
-            height: this.props.default.height,
+            width: this.props.width,
+            height: this.props.height,
             minWidth: this.props.minWidth,
@@ -543,3 +561,4 @@ minHeight: this.props.minHeight,
 
-module.exports = Rnd;
+exports.TouchEvent2 = TouchEvent2;
+exports['default'] = Rnd;
 //# sourceMappingURL=index.es5.js.map

lib/index.js

@@ -1,49 +0,244 @@
-'use strict';
+import { Component, createElement } from 'react';
+import { findDOMNode } from 'react-dom';
+import Draggable from 'react-draggable';
+import Resizable from 're-resizable';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+var babelHelpers = {};
 
-var _extends2 = require('babel-runtime/helpers/extends');
 
-var _extends3 = _interopRequireDefault(_extends2);
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+var asyncGenerator = function () {
+  function AwaitValue(value) {
+    this.value = value;
+  }
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+  function AsyncGenerator(gen) {
+    var front, back;
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+    function send(key, arg) {
+      return new Promise(function (resolve, reject) {
+        var request = {
+          key: key,
+          arg: arg,
+          resolve: resolve,
+          reject: reject,
+          next: null
+        };
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+        if (back) {
+          back = back.next = request;
+        } else {
+          front = back = request;
+          resume(key, arg);
+        }
+      });
+    }
 
-var _createClass3 = _interopRequireDefault(_createClass2);
+    function resume(key, arg) {
+      try {
+        var result = gen[key](arg);
+        var value = result.value;
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+        if (value instanceof AwaitValue) {
+          Promise.resolve(value.value).then(function (arg) {
+            resume("next", arg);
+          }, function (arg) {
+            resume("throw", arg);
+          });
+        } else {
+          settle(result.done ? "return" : "normal", result.value);
+        }
+      } catch (err) {
+        settle("throw", err);
+      }
+    }
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+    function settle(type, value) {
+      switch (type) {
+        case "return":
+          front.resolve({
+            value: value,
+            done: true
+          });
+          break;
 
-var _inherits2 = require('babel-runtime/helpers/inherits');
+        case "throw":
+          front.reject(value);
+          break;
 
-var _inherits3 = _interopRequireDefault(_inherits2);
+        default:
+          front.resolve({
+            value: value,
+            done: false
+          });
+          break;
+      }
 
-var _react = require('react');
+      front = front.next;
 
-var _react2 = _interopRequireDefault(_react);
+      if (front) {
+        resume(front.key, front.arg);
+      } else {
+        back = null;
+      }
+    }
 
-var _reactDraggable = require('react-draggable');
+    this._invoke = send;
 
-var _reactDraggable2 = _interopRequireDefault(_reactDraggable);
+    if (typeof gen.return !== "function") {
+      this.return = undefined;
+    }
+  }
 
-var _reactResizableBox = require('react-resizable-box');
+  if (typeof Symbol === "function" && Symbol.asyncIterator) {
+    AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
+      return this;
+    };
+  }
 
-var _reactResizableBox2 = _interopRequireDefault(_reactResizableBox);
+  AsyncGenerator.prototype.next = function (arg) {
+    return this._invoke("next", arg);
+  };
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  AsyncGenerator.prototype.throw = function (arg) {
+    return this._invoke("throw", arg);
+  };
 
+  AsyncGenerator.prototype.return = function (arg) {
+    return this._invoke("return", arg);
+  };
+
+  return {
+    wrap: function (fn) {
+      return function () {
+        return new AsyncGenerator(fn.apply(this, arguments));
+      };
+    },
+    await: function (value) {
+      return new AwaitValue(value);
+    }
+  };
+}();
+
+
+
+
+
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+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 _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 inherits = function (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;
+};
+
+
+
+
+
+
+
+
+
+
+
+var possibleConstructorReturn = function (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;
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+babelHelpers;
+
+var TouchEvent2 = function (_TouchEvent) {
+  inherits(TouchEvent2, _TouchEvent);
+
+  function TouchEvent2() {
+    classCallCheck(this, TouchEvent2);
+    return possibleConstructorReturn(this, (TouchEvent2.__proto__ || Object.getPrototypeOf(TouchEvent2)).apply(this, arguments));
+  }
+
+  return TouchEvent2;
+}(TouchEvent);
+
 var boxStyle = {
   width: 'auto',
   height: 'auto',
-  cursor: 'move',
   display: 'inline-block',
@@ -55,16 +250,16 @@ position: 'absolute',
 
-var Rnd = function (_Component) {
-  (0, _inherits3.default)(Rnd, _Component);
+var Rnd = function (_React$Component) {
+  inherits(Rnd, _React$Component);
 
   function Rnd(props) {
-    (0, _classCallCheck3.default)(this, Rnd);
+    classCallCheck(this, Rnd);
 
-    var _this = (0, _possibleConstructorReturn3.default)(this, (Rnd.__proto__ || (0, _getPrototypeOf2.default)(Rnd)).call(this, props));
+    var _this2 = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props));
 
-    _this.state = {
+    _this2.state = {
       disableDragging: false,
       z: props.z,
       original: {
-        x: props.default.x || 0,
-        y: props.default.y || 0
+        x: props.x || 0,
+        y: props.y || 0
       },
@@ -78,20 +273,28 @@ bounds: {
       maxWidth: props.maxWidth,
-      maxHeight: props.maxHeight
+      maxHeight: props.maxHeight,
+      isMounted: false
     };
-    _this.onResizeStart = _this.onResizeStart.bind(_this);
-    _this.onResize = _this.onResize.bind(_this);
-    _this.onResizeStop = _this.onResizeStop.bind(_this);
-    _this.onDragStart = _this.onDragStart.bind(_this);
-    _this.onDrag = _this.onDrag.bind(_this);
-    _this.onDragStop = _this.onDragStop.bind(_this);
-    return _this;
+    _this2.onResizeStart = _this2.onResizeStart.bind(_this2);
+    _this2.onResize = _this2.onResize.bind(_this2);
+    _this2.onResizeStop = _this2.onResizeStop.bind(_this2);
+    _this2.onDragStart = _this2.onDragStart.bind(_this2);
+    _this2.onDrag = _this2.onDrag.bind(_this2);
+    _this2.onDragStop = _this2.onDragStop.bind(_this2);
+    return _this2;
   }
 
-  (0, _createClass3.default)(Rnd, [{
+  createClass(Rnd, [{
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(nextProps) {
-      if (this.props.z === nextProps.z) return;
-      this.setState({
-        z: nextProps.z
-      });
+      if (this.props.z !== nextProps.z) {
+        this.setState({ z: nextProps.z });
+      }
+      var draggable = this.draggable && this.draggable.state;
+      if (!draggable) return;
+      if (this.props.x !== draggable.x) {
+        this.draggable.setState({ x: this.props.x });
+      }
+      if (this.props.y !== draggable.y) {
+        this.draggable.setState({ y: this.props.y });
+      }
     }
@@ -104,5 +307,6 @@ }, {
   }, {
-    key: 'componentWillUpdate',
-    value: function componentWillUpdate() {
-      this.setParentPosition();
+    key: 'getSelfElement',
+    value: function getSelfElement() {
+      if (!this) return null;
+      return findDOMNode(this);
     }
@@ -112,7 +316,14 @@ }, {
     value: function setParentPosition() {
-      var parent = this.wrapper.parentNode;
-      if (!parent || typeof window === 'undefined') return;
-      if (!(parent instanceof HTMLElement)) return;
-      if (getComputedStyle(parent).position !== 'static') return;
-      parent.style.position = 'relative';
+      var element = this.getSelfElement();
+      if (element instanceof Element) {
+        var parent = element.parentNode;
+        if (!parent || typeof window === 'undefined') return;
+        if (!(parent instanceof HTMLElement)) return;
+        if (getComputedStyle(parent).position !== 'static') {
+          this.setState({ isMounted: true });
+          return;
+        }
+        parent.style.position = 'relative';
+        this.setState({ isMounted: true });
+      }
     }
@@ -126,3 +337,3 @@ }, {
       if (!this.props.bounds) return;
-      var parent = this.wrapper && this.wrapper.parentNode;
+      var parent = this.resizable && this.resizable.parentNode;
       var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
@@ -138,2 +349,3 @@ if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) return;
       var top = targetTop - parentTop;
+      if (!this.resizable) return;
       this.setState({
@@ -164,3 +376,3 @@ bounds: {
     key: 'onResizeStart',
-    value: function onResizeStart(e, dir, refToResizableElement) {
+    value: function onResizeStart(e, dir, refToElement) {
       e.stopPropagation();
@@ -172,6 +384,8 @@ this.setState({
       if (this.props.bounds) {
-        var parent = this.wrapper && this.wrapper.parentNode;
+        var parent = this.resizable && this.resizable.parentNode;
         var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
-        var self = this.wrapper;
-        if (target instanceof HTMLElement && parent instanceof HTMLElement) {
+        var self = this.getSelfElement();
+        if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {
+          var _maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;
+          var _maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;
           var selfRect = self.getBoundingClientRect();
@@ -183,21 +397,17 @@ var selfLeft = selfRect.left;
           var targetTop = targetRect.top;
-          if (/left/i.test(dir)) {
+          if (/left/i.test(dir) && this.resizable) {
             var max = selfLeft - targetLeft + this.resizable.size.width;
-            this.setState({ maxWidth: max > this.props.maxWidth ? this.props.maxWidth : max });
+            this.setState({ maxWidth: max > _maxWidth ? _maxWidth : max });
           }
           if (/right/i.test(dir)) {
             var _max = target.offsetWidth + (targetLeft - selfLeft);
-            this.setState({
-              maxWidth: _max > (this.props.maxWidth || Infinity) ? this.props.maxWidth : _max
-            });
+            this.setState({ maxWidth: _max > _maxWidth ? _maxWidth : _max });
           }
-          if (/top/i.test(dir)) {
+          if (/top/i.test(dir) && this.resizable) {
             var _max2 = selfTop - targetTop + this.resizable.size.height;
-            this.setState({ maxHeight: _max2 > this.props.maxHeight ? this.props.maxHeight : _max2 });
+            this.setState({ maxHeight: _max2 > _maxHeight ? _maxHeight : _max2 });
           }
           if (/bottom/i.test(dir)) {
             var _max3 = target.offsetHeight + (targetTop - selfTop);
-            this.setState({
-              maxHeight: _max3 > (this.props.maxHeight || Infinity) ? this.props.maxHeight : _max3
-            });
+            this.setState({ maxHeight: _max3 > _maxHeight ? _maxHeight : _max3 });
           }
@@ -209,3 +419,3 @@ }
       if (this.props.onResizeStart) {
-        this.props.onResizeStart(e, dir, refToResizableElement);
+        this.props.onResizeStart(e, dir, refToElement);
       }
@@ -221,6 +431,6 @@ }
       if (this.props.bounds) {
-        var parent = this.wrapper && this.wrapper.parentNode;
+        var parent = this.resizable && this.resizable.parentNode;
         var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
-        var self = this.wrapper;
-        if (target instanceof HTMLElement && parent instanceof HTMLElement) {
+        var self = this.getSelfElement();
+        if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {
           var selfRect = self.getBoundingClientRect();
@@ -254,6 +464,7 @@ var parentRect = parent.getBoundingClientRect();
       if (this.props.onResizeStop) {
-        this.props.onResizeStop(e, direction, refToResizableElement, delta, {
+        var _position = {
           x: this.draggable.state.x,
           y: this.draggable.state.y
-        });
+        };
+        this.props.onResizeStop(e, direction, refToResizableElement, delta, _position);
       }
@@ -264,2 +475,3 @@ }
     value: function updateSize(size) {
+      if (!this.resizable) return;
       this.resizable.updateSize({ width: size.width, height: size.height });
@@ -280,17 +492,18 @@ }
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
-      var cursorStyle = this.props.disableDragging || this.dragHandlerClassName ? { cursor: 'normal' } : { cursor: 'move' };
-      var innerStyle = (0, _extends3.default)({}, boxStyle, {
+      var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
+      var innerStyle = _extends({}, boxStyle, {
         zIndex: this.state.z
-      }, cursorStyle);
-
-      return _react2.default.createElement(
-        _reactDraggable2.default,
+      }, cursorStyle, this.props.style);
+      // HACK: Wait for setting relative to parent element.
+      if (!this.state.isMounted) return createElement('div', null);
+      return createElement(
+        Draggable,
         {
           ref: function ref(c) {
-            _this2.draggable = c;
+            _this3.draggable = c;
           },
-          handle: this.props.dragHandlerClassName,
-          defaultPosition: { x: this.props.default.x, y: this.props.default.y },
+          handle: this.props.dragHandleClassName,
+          defaultPosition: { x: this.props.x, y: this.props.y },
           onStart: this.onDragStart,
@@ -304,35 +517,26 @@ onDrag: this.onDrag,
         },
-        _react2.default.createElement(
-          'div',
-          (0, _extends3.default)({
+        createElement(
+          Resizable,
+          {
             className: this.props.className,
-            style: innerStyle,
             ref: function ref(c) {
-              _this2.wrapper = c;
-            }
-          }, this.props.extendsProps),
-          _react2.default.createElement(
-            _reactResizableBox2.default,
-            {
-              ref: function ref(c) {
-                _this2.resizable = c;
-              },
-              enable: this.props.enableResizing,
-              onResizeStart: this.onResizeStart,
-              onResize: this.onResize,
-              onResizeStop: this.onResizeStop,
-              style: this.props.style,
-              width: this.props.default.width,
-              height: this.props.default.height,
-              minWidth: this.props.minWidth,
-              minHeight: this.props.minHeight,
-              maxWidth: this.state.maxWidth,
-              maxHeight: this.state.maxHeight,
-              grid: this.props.resizeGrid,
-              lockAspectRatio: this.props.lockAspectRatio,
-              handlerStyles: this.props.resizeHandlerStyles,
-              handlerClasses: this.props.resizeHandlerClasses
+              _this3.resizable = c;
             },
-            this.props.children
-          )
+            enable: this.props.enableResizing,
+            onResizeStart: this.onResizeStart,
+            onResize: this.onResize,
+            onResizeStop: this.onResizeStop,
+            style: innerStyle,
+            width: this.props.width,
+            height: this.props.height,
+            minWidth: this.props.minWidth,
+            minHeight: this.props.minHeight,
+            maxWidth: this.state.maxWidth,
+            maxHeight: this.state.maxHeight,
+            grid: this.props.resizeGrid,
+            lockAspectRatio: this.props.lockAspectRatio,
+            handleStyles: this.props.resizeHandleStyles,
+            handleClasses: this.props.resizeHandleClasses
+          },
+          this.props.children
         )
@@ -343,4 +547,17 @@ );
   return Rnd;
-}(_react.Component);
+}(Component);
 
-exports.default = Rnd;
+Rnd.defaultProps = {
+  maxWidth: Number.MAX_SAFE_INTEGER,
+  maxHeight: Number.MAX_SAFE_INTEGER,
+  onResizeStart: function onResizeStart() {},
+  onResize: function onResize() {},
+  onResizeStop: function onResizeStop() {},
+  onDragStart: function onDragStart() {},
+  onDrag: function onDrag() {},
+  onDragStop: function onDragStop() {}
+};
+
+export { TouchEvent2 };
+export default Rnd;
+//# sourceMappingURL=index.js.map

lib/react-rnd.umd.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('react-dom'), require('react-draggable'), require('re-resizable')) :
-	typeof define === 'function' && define.amd ? define(['react', 'react-dom', 'react-draggable', 're-resizable'], factory) :
-	(global['react-rnd'] = factory(global.React,global.reactDom,global.Draggable,global.Resizable));
-}(this, (function (React,reactDom,Draggable,Resizable) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('react-draggable'), require('re-resizable')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'react-draggable', 're-resizable'], factory) :
+	(factory((global['react-rnd'] = {}),global.React,global.reactDom,global.Draggable,global.Resizable));
+}(this, (function (exports,React,reactDom,Draggable,Resizable) { 'use strict';
 
@@ -234,6 +234,16 @@ Draggable = Draggable && Draggable.hasOwnProperty('default') ? Draggable['default'] : Draggable;
 
+var TouchEvent2 = function (_TouchEvent) {
+  inherits(TouchEvent2, _TouchEvent);
+
+  function TouchEvent2() {
+    classCallCheck(this, TouchEvent2);
+    return possibleConstructorReturn(this, (TouchEvent2.__proto__ || Object.getPrototypeOf(TouchEvent2)).apply(this, arguments));
+  }
+
+  return TouchEvent2;
+}(TouchEvent);
+
 var boxStyle = {
   width: 'auto',
   height: 'auto',
-  cursor: 'move',
   display: 'inline-block',
@@ -251,10 +261,10 @@ position: 'absolute',
 
-    var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props));
+    var _this2 = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props));
 
-    _this.state = {
+    _this2.state = {
       disableDragging: false,
       z: props.z,
       original: {
-        x: props.default.x || 0,
-        y: props.default.y || 0
+        x: props.x || 0,
+        y: props.y || 0
       },
@@ -268,11 +278,12 @@ bounds: {
       maxWidth: props.maxWidth,
-      maxHeight: props.maxHeight
+      maxHeight: props.maxHeight,
+      isMounted: false
     };
-    _this.onResizeStart = _this.onResizeStart.bind(_this);
-    _this.onResize = _this.onResize.bind(_this);
-    _this.onResizeStop = _this.onResizeStop.bind(_this);
-    _this.onDragStart = _this.onDragStart.bind(_this);
-    _this.onDrag = _this.onDrag.bind(_this);
-    _this.onDragStop = _this.onDragStop.bind(_this);
-    return _this;
+    _this2.onResizeStart = _this2.onResizeStart.bind(_this2);
+    _this2.onResize = _this2.onResize.bind(_this2);
+    _this2.onResizeStop = _this2.onResizeStop.bind(_this2);
+    _this2.onDragStart = _this2.onDragStart.bind(_this2);
+    _this2.onDrag = _this2.onDrag.bind(_this2);
+    _this2.onDragStop = _this2.onDragStop.bind(_this2);
+    return _this2;
   }
@@ -283,23 +294,24 @@
     value: function componentWillReceiveProps(nextProps) {
-      if (this.props.z === nextProps.z) return;
-      this.setState({
-        z: nextProps.z
-      });
+      if (this.props.z !== nextProps.z) {
+        this.setState({ z: nextProps.z });
+      }
+      var draggable = this.draggable && this.draggable.state;
+      if (!draggable) return;
+      if (this.props.x !== draggable.x) {
+        this.draggable.setState({ x: this.props.x });
+      }
+      if (this.props.y !== draggable.y) {
+        this.draggable.setState({ y: this.props.y });
+      }
     }
   }, {
     key: 'componentDidMount',
-    value: function componentDidMount() {}
-  }, {
-    key: 'componentWillUpdate',
-    value: function componentWillUpdate() {
+    value: function componentDidMount() {
       this.setParentPosition();
     }
   }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {}
-  }, {
     key: 'getSelfElement',
     value: function getSelfElement() {
-      if (!this.resizable) return null;
-      return reactDom.findDOMNode(this.resizable);
+      if (!this) return null;
+      return reactDom.findDOMNode(this);
     }
@@ -314,4 +326,8 @@ }, {
         if (!(parent instanceof HTMLElement)) return;
-        if (getComputedStyle(parent).position !== 'static') return;
+        if (getComputedStyle(parent).position !== 'static') {
+          this.setState({ isMounted: true });
+          return;
+        }
         parent.style.position = 'relative';
+        this.setState({ isMounted: true });
       }
@@ -363,4 +379,3 @@ }
     key: 'onResizeStart',
-    value: function onResizeStart(e, dir, refToElement) // React.ElementRef<'div'>,
-    {
+    value: function onResizeStart(e, dir, refToElement) {
       e.stopPropagation();
@@ -474,9 +489,10 @@ this.setState({
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
-      var cursorStyle = this.props.disableDragging ? { cursor: 'normal' } : {};
+      var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
       var innerStyle = _extends({}, boxStyle, {
         zIndex: this.state.z
       }, cursorStyle, this.props.style);
-
+      // HACK: Wait for setting relative to parent element.
+      if (!this.state.isMounted) return React.createElement('div', null);
       return React.createElement(
@@ -486,6 +502,6 @@ Draggable,
           ref: function ref(c) {
-            _this2.draggable = c;
+            _this3.draggable = c;
           },
           handle: this.props.dragHandleClassName,
-          defaultPosition: { x: this.props.default.x, y: this.props.default.y },
+          defaultPosition: { x: this.props.x, y: this.props.y },
           onStart: this.onDragStart,
@@ -504,3 +520,3 @@ onDrag: this.onDrag,
             ref: function ref(c) {
-              _this2.resizable = c;
+              _this3.resizable = c;
             },
@@ -512,4 +528,4 @@ enable: this.props.enableResizing,
             style: innerStyle,
-            width: this.props.default.width,
-            height: this.props.default.height,
+            width: this.props.width,
+            height: this.props.height,
             minWidth: this.props.minWidth,
@@ -543,5 +559,8 @@ minHeight: this.props.minHeight,
 
-return Rnd;
+exports.TouchEvent2 = TouchEvent2;
+exports['default'] = Rnd;
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
 //# sourceMappingURL=react-rnd.umd.js.map

package.json

 {
   "name": "react-rnd",
-  "license": "MIT",
-  "version": "5.1.3",
-  "main": "lib/index.js",
-  "scripts": {
-    "start": "webpack-dev-server",
-    "build": "NODE_ENV=production babel -d lib/ src/components/",
-    "build:example": "NODE_ENV=example webpack",
-    "build:example-watch": "NODE_ENV=example webpack  --watch",
-    "flow": "flow",
-    "lint": "eslint src",
-    "test": "npm run flow && NODE_ENV=test karma start",
-    "test:watch": "NODE_ENV=test karma start --single-run false",
-    "guide:server": "styleguidist server",
-    "guide:build": "styleguidist build",
-    "prepublish": "npm run build && flow-copy-source -v src/components lib"
-  },
+  "version": "6.0.0",
+  "description": "",
+  "title": "react-rnd",
+  "main": "./lib/index.es5.js",
+  "module": "./lib/index.js",
+  "jsnext:main": "./lib/index.js",
   "keywords": [
@@ -23,66 +13,87 @@ "react",
     "resizable",
-    "component",
-    "draggable"
+    "draggable",
+    "component"
   ],
+  "scripts": {
+    "lint": "eslint src",
+    "flow": "flow",
+    "build:prod:main": "rollup -c scripts/prod.js",
+    "build:prod:es5": "rollup -c scripts/prod.es5.js",
+    "build:prod:umd": "rollup -c scripts/prod.umd.js",
+    "build": "npm-run-all --parallel build:prod:*",
+    "dev": "rollup -c config/dev.js -w",
+    "browse": "browser-sync start --s --index 'html/index.html' --files 'html/**/*.html, build/**/*.js' --no-notify",
+    "test": "NODE_ENV='test' avaron src/index.test.js --renderer",
+    "test:ci": "npm run flow && npm run build",
+    "flow-copy": "flow-copy-source -v src lib && cp lib/index.js.flow lib/index.es5.js.flow ",
+    "prepublish": "npm run build && npm run flow-copy",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "deploy": "npm run build-storybook && gh-pages -d storybook-static"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bokuweb/react-rnd.git"
+  },
+  "author": "bokuweb",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/bokuweb/react-rnd/issues"
+  },
+  "homepage": "https://github.com/bokuweb/react-rnd",
   "devDependencies": {
-    "ava": "^0.22.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^7.2.2",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-dynamic-import-webpack": "^1.0.1",
-    "babel-plugin-flow-runtime": "^0.11.0",
+    "@storybook/addon-actions": "^3.2.6",
+    "@storybook/addon-links": "^3.2.6",
+    "@storybook/react": "^3.2.8",
+    "avaron": "^0.0.13",
+    "babel-eslint": "^7.2.3",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.0",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react": "^6.24.1",
+    "babel-register": "^6.26.0",
     "enzyme": "^2.9.1",
-    "eslint": "^4.1.0",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-plugin-flowtype": "^2.35.0",
+    "eslint": "^4.2.0",
+    "eslint-config-airbnb": "^15.0.2",
+    "eslint-plugin-flowtype": "^2.34.1",
     "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^6.0.0",
-    "eslint-plugin-react": "^7.3.0",
-    "flow-bin": "^0.54.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.1.0",
+    "flow-bin": "^0.54.1",
     "flow-copy-source": "^1.2.0",
-    "flow-runtime": "^0.14.0",
     "flow-typed": "^2.1.5",
-    "flow-upgrade": "^1.0.3",
-    "http-server": "^0.10.0",
-    "karma": "^1.7.0",
-    "karma-mocha": "^1.3.0",
-    "karma-mocha-reporter": "^2.2.3",
-    "karma-nightmare": "^0.4.10",
-    "karma-webpack": "^2.0.4",
-    "mocha": "^3.5.0",
-    "power-assert": "^1.4.4",
+    "gh-pages": "^1.0.0",
+    "npm-run-all": "^4.1.1",
     "react": "^15.6.1",
-    "react-addons-test-utils": "^15.6.0",
     "react-dom": "^15.6.1",
-    "react-hot-loader": "next",
     "react-test-renderer": "^15.6.1",
-    "sinon": "^3.0.0",
-    "webpack": "^3.0.0",
-    "webpack-async-await": "^1.1.0",
-    "webpack-dev-server": "^2.7.1"
+    "rollup": "^0.49.2",
+    "rollup-plugin-babel": "3.0.2",
+    "rollup-plugin-commonjs": "^8.2.0",
+    "rollup-plugin-node-globals": "1.1.0",
+    "rollup-plugin-node-resolve": "3.0.0",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-watch": "4.3.1",
+    "sinon": "^3.2.1"
   },
-  "ava": {
+  "files": [
+    "lib"
+  ],
+  "avaron": {
     "babel": "inherit",
-    "files": "src/**/*.test.js",
     "require": [
-      "babel-register",
-      "./setup-browser-env.js"
-    ]
+      "babel-polyfill",
+      "babel-register"
+    ],
+    "fixture": "./fixture.html"
   },
   "dependencies": {
-    "react-draggable": "^3.0.2",
-    "react-resizable-box": "^2.0.6"
-  },
-  "files": [
-    "lib"
-  ]
+    "re-resizable": "^3.0.0",
+    "react-draggable": "^3.0.3"
+  }
 }

README.md

@@ -5,4 +5,4 @@ <p align="center"><img src ="https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true" /></p>
 
-<p align="center"><a href="https://travis-ci.org/bokuweb/react-rnd">
-<img src="https://img.shields.io/travis/bokuweb/react-rnd.svg" alt="Build Status" /></a>
+<p align="center"><a href="https://circleci.com/gh/bokuweb/react-rnd/tree/master">
+<img src="https://circleci.com/gh/bokuweb/react-rnd/tree/master.svg?style=svg" alt="Build Status" /></a>
 <a href="https://www.npmjs.com/package/react-rnd">
@@ -30,9 +30,6 @@ <img src="https://img.shields.io/npm/v/react-rnd.svg" alt="Build Status" /></a>
 
-![screenshot](https://raw.githubusercontent.com/bokuweb/react-rnd/master/screenshot.gif)
+<p align="center">
+  <img src="https://raw.githubusercontent.com/bokuweb/react-rnd/master/screenshot.gif" />
+</p>
 
-See demo: [http://bokuweb.github.io/react-rnd/](http://bokuweb.github.io/react-rnd/)  
-demo Code: [https://github.com/bokuweb/react-rnd/blob/master/docs/src/example.js](https://github.com/bokuweb/react-rnd/blob/master/docs/src/example.js)  
-
-background image : <a href="http://www.freepik.com/free-photos-vectors/background">Background vector created by Starline - Freepik.com</a>
-
 ## Install
@@ -58,8 +55,6 @@
 <Rnd
-  default={{
-    x: 0,
-    y: 0,
-    width: 320,
-    height: 200,
-  }}
+  width={200}
+  height={200}
+  x={100}
+  y={100}
 >
@@ -72,18 +67,13 @@ Rnd
 
-#### `default: { x: number; y: number;  width: number | string;  height: number | string; };`
+#### `x: number;`
 
-The `width` and `height` property is used to set the default size of a component.   
-The `x` and `y` property is used to set the default position of the component.   
+The `x` property is used to set position of the component.   
 
-#### `className?: string;`
+#### `y: number;`
 
-The `className` property is used to set the custom `className` of a resizable component.
+The `y` property is used to set position of the component.
 
-#### `style?: any;`
-
-The `style` property is used to set the custom `style` of a resizable component.
-
 #### `width?: (number | string);`
 
-The `width` property is used to set the initial width of a resizable component.   
+The `width` property is used to set width of the component.   
 For example, you can set `300`, `'300px'`, `50%`.     
@@ -94,22 +84,34 @@ If omitted, set `'auto'`.
 
-The `height` property is used to set the initial height of a resizable component.    
+The `height` property is used to set width of the component.   
 For example, you can set `300`, `'300px'`, `50%`.    
 If omitted, set `'auto'`.    
 
-#### `minWidth?: number;`
+#### `className?: string;`
 
-The `minWidth` property is used to set the minimum width of a resizable component.
+The `className` property is used to set the custom `className` of the component.
 
-#### `minHeight?: number;`
+#### `style?: { [key: string]: string };`
 
-The `minHeight` property is used to set the minimum height of a resizable component.
+The `style` property is used to set the custom `style` of the component.
 
-#### `maxWidth?: number;`
+#### `minWidth?: number | string;`
 
-The `maxWidth` property is used to set the maximum width of a resizable component.
+The `minWidth` property is used to set the minimum width of the component.
+For example, you can set `300`, `'300px'`, `50%`.  
 
-#### `maxHeight?: number`;
+#### `minHeight?: number | string;`
 
-The `maxHeight` property is used to set the maximum height of a resizable component.
+The `minHeight` property is used to set the minimum height of the component.
+For example, you can set `300`, `'300px'`, `50%`.  
 
+#### `maxWidth?: number | string;`
+
+The `maxWidth` property is used to set the maximum width of the component.
+For example, you can set `300`, `'300px'`, `50%`.  
+
+#### `maxHeight?: number | string`;
+
+The `maxHeight` property is used to set the maximum height of the component.
+For example, you can set `300`, `'300px'`, `50%`.  
+
 #### `z?: number;`
@@ -132,3 +134,3 @@
 
-#### `dragHandlerClassName?: string;`
+#### `dragHandleClassName?: string;`
 
@@ -138,29 +140,31 @@ Specifies a selector to be used as the handle that initiates drag.
 
-#### `resizeHandlerStyles?: HandlersStyles;`
+#### `resizeHandleStyles?: HandleStyles;`
 
-The `resizeHandleStyles` property is used to override the style of one or more resize handlers.
-Only the axis you specify will have its handler style replaced.
-If you specify a value for `right` it will completely replace the styles for the `right` resize handler,
-but other handler will still use the default styles.
+The `resizeHandleStyles` property is used to override the style of one or more resize handles.
+Only the axis you specify will have its handle style replaced.
+If you specify a value for `right` it will completely replace the styles for the `right` resize handle,
+but other handle will still use the default styles.
 
 ``` javascript
-export type HandlerStyles = {
-  bottom?: any,
-  bottomLeft?: any,
-  bottomRight?: any,
-  left?: any,
-  right?: any,
-  top?: any,
-  topLeft?: any,
-  topRight?: any
+
+type Style = { [key: string]: string };
+
+export type HandleStyles = {
+  bottom?: Style,
+  bottomLeft?: Style,
+  bottomRight?: Style,
+  left?: Style,
+  right?: Style,
+  top?: Style,
+  topLeft?: Style,
+  topRight?: Style
 }
 ```
 
-#### `resizeHandlerClasses?: HandlersClassName;`
+#### `resizeHandleClasses?: HandleClasses;`
 
-The `resizeHandlerClasses` property is used to set the className of one or more resize handlers.
+The `resizeHandleClasses` property is used to set the className of one or more resize handles.
 
-
 ``` javascript
-type HandlerClasses = {
+type HandleClasses = {
   bottom?: string;
@@ -179,3 +183,3 @@ bottomLeft?: string;
 
-The `enableResizing` property is used to set the resizable permission of a resizable component.
+The `enableResizing` property is used to set the resizable permission of the component.
 
@@ -203,3 +207,3 @@ The permission of `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` direction resizing.
 
-#### `extendsProps?: any;`
+#### `extendsProps?: { [key: string]: any };`
 
@@ -232,12 +236,11 @@ This property is used to pass the other props to the component.
 
-#### `onResizeStart?: ResizeStartCallBack;`
+#### `onResizeStart?: RndResizeStartCallback;`
 
-`ResizeStartCallBack` type is below.
+`RndResizeStartCallback` type is below.
 
-
 ``` javascript
-type ResizeStartCallBack = (
-  e: SyntheticMouseEvent | SyntheticTouchEvent,
-  dir: Direction,
-  refToElement: HTMLElement,
+export type RndResizeStartCallback = (
+  e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,
+  dir: ResizeDirection,
+  refToElement: React.ElementRef<'div'>,
 ) => void;
@@ -248,13 +251,13 @@ ```
 
-#### `onResize?: Callback;`
+#### `onResize?: RndResizeCallback;`
 
-`Callback` type is below.
+`RndResizeCallback` type is below.
 
-
 ``` javascript
-type Callback = (
-  event: MouseEvent | TouchEvent,
-  direction: Direction,
-  refToElement: HTMLElement,
-  delta: NumberSize,
+export type RndResizeCallback = (
+  e: MouseEvent | TouchEvent,
+  dir: ResizeDirection,
+  refToElement: React.ElementRef<'div'>,
+  delta: ResizableDelta,
+  position: Position,
 ) => void;
@@ -265,17 +268,17 @@ ```
 
-#### `onResizeStop?: Callback;`
+#### `onResizeStop?: RndResizeCallback;`
 
-`Callback` type is below.
+`RndResizeCallback` type is below.
 
-
 ``` javascript
-type Callback = (
-  event: MouseEvent | TouchEvent,
-  direction: Direction,
-  refToElement: HTMLElement,
-  delta: NumberSize,
+export type RndResizeCallback = (
+  e: MouseEvent | TouchEvent,
+  dir: ResizeDirection,
+  refToElement: React.ElementRef<'div'>,
+  delta: ResizableDelta,
+  position: Position,
 ) => void;
 ```
 
-Calls when resizable component resize startStop.
+Calls when resizable component resize stop.
 
@@ -286,3 +289,2 @@ #### `onDragStart: DraggableEventHandler;`
 
-
 ``` javascript
@@ -339,3 +341,2 @@ type DraggableData = {
 
-
 ## Method
@@ -362,3 +363,3 @@
     return (
-      <Rnd ref={c => { this.rnd = c; }}>
+      <Rnd ref={c => { this.rnd = c; }} ...rest >
         example
@@ -368,3 +369,2 @@ </Rnd>
   }
-
   ...
@@ -392,3 +392,3 @@ }
     return (
-      <Rnd ref={c => { this.rnd = c; }}>
+      <Rnd ref={c => { this.rnd = c; }} ...rest >
         example
@@ -420,3 +420,3 @@ </Rnd>
     return (
-      <Rnd ref={c => { this.rnd = c; }}>
+      <Rnd ref={c => { this.rnd = c; }} ...rest>
         example
@@ -440,2 +440,9 @@ </Rnd>
 
+#### v6.0.0
+
+- Use rollup.
+- Support % min/max size.
+- Change props, remove `default` and add `x`, `y`, `width`, `height`.
+- Rename `dragHandlersXXXX` and `resizeHandlersXXXX` props to `dragHandleXXXX` and `resizeHandleXXXX`.
+
 #### v5.1.3
@@ -442,0 +449,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

38

decreased by-13.64%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

572

increased by1.24%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

178648

decreased by-10.72%

Number of package files

12

decreased by-7.69%

Lines of code

1388

decreased by-26.33%

Dependency changes

• + Addedre-resizable@^3.0.0

• + Addedre-resizable@3.0.0(transitive)

• - Removedreact-resizable-box@^2.0.6

• - Removedreact-resizable-box@2.1.0(transitive)

• Updatedreact-draggable@^3.0.3