react-resizable - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

build/cloneElement.js

 'use strict';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+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 _objectAssign = require('object-assign');
-
-var _objectAssign2 = _interopRequireDefault(_objectAssign);
-
 var _react = require('react');
@@ -13,6 +9,8 @@
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 // React.addons.cloneWithProps look-alike that merges style & className.
 module.exports = function cloneElement(element, props) {
   if (props.style && element.props.style) {
-    props.style = (0, _objectAssign2['default'])({}, element.props.style, props.style);
+    props.style = _extends({}, element.props.style, props.style);
   }
@@ -22,3 +20,3 @@ if (props.className && element.props.className) {
   }
-  return _react2['default'].cloneElement(element, props);
+  return _react2.default.cloneElement(element, props);
 };

build/Resizable.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,12 +9,6 @@ });
 
-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 _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+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; }; }();
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-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; }
-
 var _react = require('react');
@@ -26,6 +20,4 @@
 
-var _objectAssign = require('object-assign');
+var _reactDraggable2 = _interopRequireDefault(_reactDraggable);
 
-var _objectAssign2 = _interopRequireDefault(_objectAssign);
-
 var _cloneElement = require('./cloneElement');
@@ -35,15 +27,31 @@
 
-var Resizable = (function (_React$Component) {
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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 _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; }
+
+var Resizable = function (_React$Component) {
   _inherits(Resizable, _React$Component);
 
   function Resizable() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Resizable);
 
-    _get(Object.getPrototypeOf(Resizable.prototype), 'constructor', this).apply(this, arguments);
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    this.state = {
-      bounds: this.constraintsToBounds(),
-      width: this.props.width,
-      height: this.props.height
-    };
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Resizable)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      aspectRatio: _this.props.width / _this.props.height,
+      bounds: _this.constraintsToBounds(),
+      resizing: false,
+      height: _this.props.height,
+      width: _this.props.width
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
@@ -53,8 +61,7 @@
     key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(props) {
-      if (!this.state.resizing) {
+    value: function componentWillReceiveProps(nextProps) {
+      if (!this.state.resizing && (nextProps.width !== this.props.width || nextProps.height !== this.props.height)) {
         this.setState({
-          width: props.width,
-          height: props.height,
-          bounds: this.constraintsToBounds()
+          width: nextProps.width,
+          height: nextProps.height
         });
@@ -66,12 +73,22 @@ }
     value: function constraintsToBounds() {
-      var p = this.props;
-      var mins = p.minConstraints || p.handleSize;
-      var maxes = p.maxConstraints || [Infinity, Infinity];
+      var _props = this.props;
+      var minConstraints = _props.minConstraints;
+      var maxConstraints = _props.maxConstraints;
+      var height = _props.height;
+      var width = _props.width;
+
       return {
-        left: mins[0] - p.width,
-        top: mins[1] - p.height,
-        right: maxes[0] - p.width,
-        bottom: maxes[1] - p.height
+        left: minConstraints[0] - width,
+        top: minConstraints[1] - height,
+        right: maxConstraints[0] - width,
+        bottom: maxConstraints[1] - height
       };
     }
+  }, {
+    key: 'lockAspectRatio',
+    value: function lockAspectRatio(width, height, aspectRatio) {
+      height = width / this.state.aspectRatio;
+      width = height * this.state.aspectRatio;
+      return [width, height];
+    }
 
@@ -84,22 +101,43 @@ /**
      */
+
   }, {
     key: 'resizeHandler',
     value: function resizeHandler(handlerName) {
-      var _this = this;
+      var _this2 = this;
 
       return function (e, _ref) {
         var node = _ref.node;
-        var position = _ref.position;
+        var deltaX = _ref.deltaX;
+        var deltaY = _ref.deltaY;
 
-        var width = _this.state.width + position.deltaX,
-            height = _this.state.height + position.deltaY;
-        _this.props[handlerName] && _this.props[handlerName](e, { node: node, size: { width: width, height: height } });
+        var width = _this2.state.width + deltaX,
+            height = _this2.state.height + deltaY;
 
+        var widthChanged = width !== _this2.state.width,
+            heightChanged = height !== _this2.state.height;
+        if (!widthChanged && !heightChanged) return;
+
+        if (_this2.props.lockAspectRatio) {
+          var _lockAspectRatio = _this2.lockAspectRatio(width, height, _this2.state.aspectRatio);
+
+          var _lockAspectRatio2 = _slicedToArray(_lockAspectRatio, 2);
+
+          width = _lockAspectRatio2[0];
+          height = _lockAspectRatio2[1];
+        }
+
+        // Set the appropriate state for this handler.
+        var newState = {};
         if (handlerName === 'onResizeStart') {
-          _this.setState({ resizing: true });
+          newState.resizing = true;
         } else if (handlerName === 'onResizeStop') {
-          _this.setState({ resizing: false });
+          newState.resizing = false;
         } else {
-          _this.setState({ width: width, height: height });
+          newState.width = width;
+          newState.height = height;
         }
+
+        _this2.setState(newState, function () {
+          _this2.props[handlerName] && _this2.props[handlerName](e, { node: node, size: { width: width, height: height } });
+        });
       };
@@ -111,2 +149,3 @@ }
       var p = this.props;
+      var className = p.className ? p.className + ' react-resizable' : 'react-resizable';
 
@@ -117,7 +156,9 @@ // What we're doing here is getting the child of this element, and cloning it with this element's props.
       // A draggable handle.
-      return (0, _cloneElement2['default'])(p.children, (0, _objectAssign2['default'])({}, p, {
-        children: [p.children.props.children, _react2['default'].createElement(
-          _reactDraggable.DraggableCore,
+      return (0, _cloneElement2.default)(p.children, _extends({}, p, {
+        className: className,
+        children: [p.children.props.children, _react2.default.createElement(
+          _reactDraggable2.default,
           _extends({}, p.draggableOpts, {
             ref: 'draggable',
+            axis: 'none',
             onStop: this.resizeHandler('onResizeStop'),
@@ -128,52 +169,51 @@ onStart: this.resizeHandler('onResizeStart'),
           }),
-          _react2['default'].createElement('span', { className: 'react-resizable-handle' })
+          _react2.default.createElement('span', { className: 'react-resizable-handle' })
         )]
       }));
     }
-  }], [{
-    key: 'propTypes',
-    value: {
-      //
-      // Required Props
-      //
+  }]);
 
-      // Require that one and only one child be present.
-      children: _react.PropTypes.element.isRequired,
+  return Resizable;
+}(_react2.default.Component);
 
-      // Initial w/h
-      width: _react.PropTypes.number.isRequired,
-      height: _react.PropTypes.number.isRequired,
+Resizable.propTypes = {
+  //
+  // Required Props
+  //
 
-      //
-      // Optional props
-      //
+  // Require that one and only one child be present.
+  children: _react.PropTypes.element.isRequired,
 
-      // If you change this, be sure to update your css
-      handleSize: _react.PropTypes.array,
+  // Initial w/h
+  width: _react.PropTypes.number.isRequired,
+  height: _react.PropTypes.number.isRequired,
 
-      // Min/max size
-      minConstraints: _react.PropTypes.arrayOf(_react.PropTypes.number),
-      maxConstraints: _react.PropTypes.arrayOf(_react.PropTypes.number),
+  //
+  // Optional props
+  //
 
-      // Callbacks
-      onResizeStop: _react.PropTypes.func,
-      onResizeStart: _react.PropTypes.func,
-      onResize: _react.PropTypes.func,
+  // If you change this, be sure to update your css
+  handleSize: _react.PropTypes.array,
 
-      // These will be passed wholesale to react-draggable's DraggableCore
-      draggableOpts: _react.PropTypes.object
-    },
-    enumerable: true
-  }, {
-    key: 'defaultProps',
-    value: {
-      handleSize: [20, 20]
-    },
-    enumerable: true
-  }]);
+  // If true, will only allow width/height to move in lockstep
+  lockAspectRatio: _react.PropTypes.bool,
 
-  return Resizable;
-})(_react2['default'].Component);
+  // Min/max size
+  minConstraints: _react.PropTypes.arrayOf(_react.PropTypes.number),
+  maxConstraints: _react.PropTypes.arrayOf(_react.PropTypes.number),
 
-exports['default'] = Resizable;
-module.exports = exports['default'];
+  // Callbacks
+  onResizeStop: _react.PropTypes.func,
+  onResizeStart: _react.PropTypes.func,
+  onResize: _react.PropTypes.func,
+
+  // These will be passed wholesale to react-draggable's DraggableCore
+  draggableOpts: _react.PropTypes.object
+};
+Resizable.defaultProps = {
+  handleSize: [20, 20],
+  lockAspectRatio: false,
+  minConstraints: [20, 20],
+  maxConstraints: [Infinity, Infinity]
+};
+exports.default = Resizable;

build/ResizableBox.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
+Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,148 +9,100 @@ });
 
-var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
+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 _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 _react = require('react');
 
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _react2 = _interopRequireDefault(_react);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _Resizable = require('./Resizable');
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+var _Resizable2 = _interopRequireDefault(_Resizable);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-var _react = require('react');
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _react2 = _interopRequireDefault(_react);
+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; }
 
-var _Resizable = require('./Resizable');
+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; }
 
-var _Resizable2 = _interopRequireDefault(_Resizable);
-
 // An example use of Resizable.
 
-var ResizableBox = (function (_React$Component) {
+var ResizableBox = function (_React$Component) {
   _inherits(ResizableBox, _React$Component);
 
   function ResizableBox() {
-    var _this = this;
+    var _Object$getPrototypeO;
 
+    var _temp, _this, _ret;
+
     _classCallCheck(this, ResizableBox);
 
-    _get(Object.getPrototypeOf(ResizableBox.prototype), 'constructor', this).apply(this, arguments);
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    this.state = {
-      width: this.props.width,
-      height: this.props.height,
-      aspectRatio: this.props.width / this.props.height
-    };
-
-    this.onResize = function (event, data) {
-      var element = data.element;
-      var size = data.size;
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ResizableBox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      width: _this.props.width,
+      height: _this.props.height
+    }, _this.onResize = function (event, _ref) {
+      var element = _ref.element;
+      var size = _ref.size;
       var width = size.width;
       var height = size.height;
 
-      var widthChanged = width !== _this.state.width,
-          heightChanged = height !== _this.state.height;
-      if (!widthChanged && !heightChanged) return;
 
-      var _runConstraints = _this.runConstraints(width, height);
-
-      var _runConstraints2 = _slicedToArray(_runConstraints, 2);
-
-      width = _runConstraints2[0];
-      height = _runConstraints2[1];
-
-      _this.setState({ width: width, height: height }, function () {
-        if (_this.props.onResize) {
-          _this.props.onResize(event, { element: element, size: { width: width, height: height } });
-        }
+      _this.setState(size, function () {
+        _this.props.onResize && _this.props.onResize(event, { element: element, size: size });
       });
-    };
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(ResizableBox, [{
-    key: 'runConstraints',
-
-    // If you do this, be careful of constraints
-    value: function runConstraints(width, height) {
-      var min = this.props.minConstraints;
-      var max = this.props.maxConstraints;
-
-      if (this.props.lockAspectRatio) {
-        height = width / this.state.aspectRatio;
-        width = height * this.state.aspectRatio;
-      }
-
-      if (min) {
-        width = Math.max(min[0], width);
-        height = Math.max(min[1], height);
-      }
-      if (max) {
-        width = Math.min(max[0], width);
-        height = Math.min(max[1], height);
-      }
-      return [width, height];
-    }
-  }, {
     key: 'render',
     value: function render() {
       // Basic wrapper around a Resizable instance.
-      // If you use Resizable directly, you are responsible for updating the component
+      // If you use Resizable directly, you are responsible for updating the child component
       // with a new width and height.
       var _props = this.props;
       var handleSize = _props.handleSize;
+      var onResizeStart = _props.onResizeStart;
+      var onResizeStop = _props.onResizeStop;
+      var draggableOpts = _props.draggableOpts;
       var minConstraints = _props.minConstraints;
       var maxConstraints = _props.maxConstraints;
+      var lockAspectRatio = _props.lockAspectRatio;
 
-      var props = _objectWithoutProperties(_props, ['handleSize', 'minConstraints', 'maxConstraints']);
+      var props = _objectWithoutProperties(_props, ['handleSize', 'onResizeStart', 'onResizeStop', 'draggableOpts', 'minConstraints', 'maxConstraints', 'lockAspectRatio']);
 
-      return _react2['default'].createElement(
-        _Resizable2['default'],
+      return _react2.default.createElement(
+        _Resizable2.default,
         {
-          minConstraints: minConstraints,
-          maxConstraints: maxConstraints,
           handleSize: handleSize,
           width: this.state.width,
           height: this.state.height,
-          onResizeStart: this.props.onResizeStart,
+          onResizeStart: onResizeStart,
           onResize: this.onResize,
-          onResizeStop: this.props.onResizeStop,
-          draggableOpts: this.props.draggableOpts
+          onResizeStop: onResizeStop,
+          draggableOpts: draggableOpts,
+          minConstraints: minConstraints,
+          maxConstraints: maxConstraints,
+          lockAspectRatio: lockAspectRatio
         },
-        _react2['default'].createElement(
-          'div',
-          _extends({ style: { width: this.state.width + 'px', height: this.state.height + 'px' } }, props),
-          this.props.children
-        )
+        _react2.default.createElement('div', _extends({ style: { width: this.state.width + 'px', height: this.state.height + 'px' } }, props))
       );
     }
-  }], [{
-    key: 'propTypes',
-    value: {
-      lockAspectRatio: _react.PropTypes.bool,
-      minConstraints: _react.PropTypes.arrayOf(_react.PropTypes.number),
-      maxConstraints: _react.PropTypes.arrayOf(_react.PropTypes.number),
-      height: _react.PropTypes.number,
-      width: _react.PropTypes.number
-    },
-    enumerable: true
-  }, {
-    key: 'defaultProps',
-    value: {
-      lockAspectRatio: false,
-      handleSize: [20, 20]
-    },
-    enumerable: true
   }]);
 
   return ResizableBox;
-})(_react2['default'].Component);
+}(_react2.default.Component);
 
-exports['default'] = ResizableBox;
-module.exports = exports['default'];
-
-// TODO data is ResizeData type, but that doesn't work in babel-typecheck pre-babel6
+ResizableBox.propTypes = {
+  height: _react.PropTypes.number,
+  width: _react.PropTypes.number
+};
+ResizableBox.defaultProps = {
+  handleSize: [20, 20]
+};
+exports.default = ResizableBox;

index.js

@@ -6,3 +6,3 @@ 'use strict';
 
-module.exports.Resizable = require('./build/Resizable');
-module.exports.ResizableBox = require('./build/ResizableBox');
+module.exports.Resizable = require('./build/Resizable').default;
+module.exports.ResizableBox = require('./build/ResizableBox').default;

package.json

 {
   "name": "react-resizable",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A component that is resizable with handles.",
   "main": "index.js",
+  "browser": "dist/bundle.js",
   "scripts": {
-    "lint": "eslint lib/ test/",
+    "lint": "eslint --ext .js,.jsx lib/ test/; flow",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "bash build.sh",
     "build-example": "webpack",
-    "dev": "echo 'Open http://localhost:4002/examples/1.html'; NODE_ENV=test webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base .",
+    "dev": "echo 'Open http://localhost:4003/examples/1.html' && cross-env NODE_ENV=test webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4003 --content-base .",
     "prepublish": "npm run build",
@@ -31,22 +32,28 @@ "validate": "npm ls"
   "devDependencies": {
-    "babel": "^5.8.29",
-    "babel-core": "^5.8.29",
-    "babel-eslint": "^4.1.3",
-    "babel-loader": "^5.3.2",
-    "babel-plugin-typecheck": "^1.3.0",
-    "css-loader": "^0.23.0",
-    "eslint": "^1.9.0",
-    "eslint-plugin-react": "^3.8.0",
-    "lodash": "^3.10.1",
+    "babel-cli": "^6.5.1",
+    "babel-core": "^6.5.1",
+    "babel-eslint": "^4.1.8",
+    "babel-loader": "^6.2.2",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-1": "^6.5.0",
+    "cross-env": "^1.0.7",
+    "css-loader": "^0.23.1",
+    "eslint": "^1.10.3",
+    "eslint-plugin-react": "^3.16.1",
+    "lodash": "^4.3.0",
     "pre-commit": "^1.1.2",
-    "react": "^0.14.2",
-    "react-dom": "^0.14.2",
     "style-loader": "^0.13.0",
-    "webpack": "^1.12.6",
-    "webpack-dev-server": "^1.12.1"
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
-    "object-assign": "^4.0.1",
-    "react-draggable": "^1.1.0"
+    "react-draggable": "^1.3.1"
   },
+  "peerDependencies": {
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7"
+  },
   "publishConfig": {
@@ -53,0 +60,0 @@ "registry": "https://registry.npmjs.org"

README.md

@@ -36,3 +36,3 @@ ### React-Resizable
 
-### <Resizable> Options
+### `<Resizable>` Options
 
@@ -55,3 +55,3 @@ ```js
 
-### <ResizableBox> Options
+### `<ResizableBox>` Options
 
@@ -58,0 +58,0 @@ ```js

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

Improved metrics

Total package byte prevSize

779703

increased by0.05%

Number of package files

12

increased by9.09%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

18

increased by20%

Lines of code

19389

decreased by-0.08%

Dependency changes

• + Addedacorn@5.7.4(transitive)

• + Addedamdefine@1.0.1(transitive)

• + Addedasap@2.0.6(transitive)

• + Addedast-types@0.9.6(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbase62@1.2.8(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedcommander@2.20.3(transitive)

• + Addedcommoner@0.10.8(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addeddefined@1.0.1(transitive)

• + Addeddetective@4.7.1(transitive)

• + Addedenvify@3.4.1(transitive)

• + Addedesprima@3.1.3(transitive)

• + Addedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• + Addedfbjs@0.6.1(transitive)

• + Addedglob@5.0.15(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addediconv-lite@0.4.24(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjstransform@11.0.3(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp@0.5.6(transitive)

• + Addedobject-assign@2.1.1(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedprivate@0.1.8(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedq@1.5.1(transitive)

• + Addedreact@0.14.10(transitive)

• + Addedreact-dom@0.14.10(transitive)

• + Addedrecast@0.11.23(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsource-map@0.4.40.5.7(transitive)

• + Addedthrough@2.3.8(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@0.9.0(transitive)

• + Addedwrappy@1.0.2(transitive)

• - Removedobject-assign@^4.0.1

• - Removedobject-assign@4.1.1(transitive)

• Updatedreact-draggable@^1.3.1