react-resizable - npm Package Compare versions

Comparing version 0.2.3 to 0.3.1

build/Resizable.js

@@ -1,11 +0,10 @@
-"use strict";
-var React = require("react");
-var Draggable = require("react-draggable");
-var assign = require("object-assign");
-var PureRenderMixin = require("react/lib/ReactComponentWithPureRenderMixin");
-var cloneWithProps = require("react/lib/cloneWithProps");
+'use strict';
 
+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 = require('react');
+var Draggable = require('react-draggable');
+
 var Resizable = module.exports = React.createClass({
-  displayName: "Resizable",
-  mixins: [PureRenderMixin],
+  displayName: 'Resizable',
 
@@ -27,3 +26,3 @@ propTypes: {
 
-  getDefaultProps: function () {
+  getDefaultProps: function getDefaultProps() {
     return {
@@ -34,18 +33,17 @@ handleSize: [20, 20]
 
-  minConstraints: function () {
+  minConstraints: function minConstraints() {
     return parseConstraints(this.props.minConstraints, this.props.handleSize[0]) || this.props.handleSize;
   },
 
-  maxConstraints: function () {
+  maxConstraints: function maxConstraints() {
     return parseConstraints(this.props.maxConstraints, this.props.handleSize[1]);
   },
 
-
   /**
    * Wrapper around drag events to provide more useful data.
-   * 
+   *
    * @param  {String} handlerName Handler name to wrap.
    * @return {Function}           Handler function.
    */
-  resizeHandler: function (handlerName) {
+  resizeHandler: function resizeHandler(handlerName) {
     var me = this;
@@ -55,2 +53,3 @@ return function (e, _ref) {
       var position = _ref.position;
+
       me.props[handlerName] && me.props[handlerName](e, { element: element, size: calcWH(position, me.props.handleSize) });
@@ -60,4 +59,5 @@ };
 
-  render: function () {
+  render: function render() {
     var p = this.props;
+
     // What we're doing here is getting the child of this element, and cloning it with this element's props.
@@ -67,16 +67,16 @@ // We are then defining its children as:
     // A draggable handle.
-
-    return cloneWithProps(p.children, assign({}, p, {
-      children: [p.children.props.children, React.createElement(Draggable, React.__spread({}, p.draggableOpts, {
+    return React.cloneElement(p.children, p, [p.children.props.children, React.createElement(
+      Draggable,
+      _extends({}, p.draggableOpts, {
         start: { x: p.width - 20, y: p.height - 20 },
         moveOnStartChange: true,
-        onStop: this.resizeHandler("onResizeStop"),
-        onStart: this.resizeHandler("onResizeStart"),
-        onDrag: this.resizeHandler("onResize"),
+        onStop: this.resizeHandler('onResizeStop'),
+        onStart: this.resizeHandler('onResizeStart'),
+        onDrag: this.resizeHandler('onResize'),
         minConstraints: this.minConstraints(),
-        maxConstraints: this.maxConstraints()
-      }), React.createElement("span", {
-        className: "react-resizable-handle"
-      }))]
-    }));
+        maxConstraints: this.maxConstraints(),
+        key: 'draggable'
+      }),
+      React.createElement('span', { className: 'react-resizable-handle' })
+    )]);
   }
@@ -92,5 +92,6 @@ });
  */
-function calcWH(_ref2, handleSize) {
-  var left = _ref2.left;
-  var top = _ref2.top;
+function calcWH(_ref, handleSize) {
+  var left = _ref.left;
+  var top = _ref.top;
+
   return { width: left + handleSize[0], height: top + handleSize[1] };
@@ -108,6 +109,7 @@ }
 function parseConstraints(constraints, handleSize) {
-  if (!constraints) return;
-  return constraints.map(function (c) {
+  if (!constraints) {
+    return;
+  }return constraints.map(function (c) {
     return c - handleSize;
   });
 }

build/ResizableBox.js

@@ -1,27 +0,17 @@
-"use strict";
+'use strict';
 
-var _objectWithoutProperties = function (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];
-  }
+var _objectWithoutProperties = function (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; };
 
-  return target;
-};
+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; };
 
-"use strict";
-var React = require("react");
-var PureRenderMixin = require("react/lib/ReactComponentWithPureRenderMixin");
-var Resizable = require("./Resizable");
+var React = require('react');
+var Resizable = require('./Resizable');
 
 // An example use of Resizable.
 var ResizableBox = module.exports = React.createClass({
-  displayName: "ResizableBox",
-  mixins: [PureRenderMixin],
+  displayName: 'ResizableBox',
 
   propTypes: {},
 
-  getInitialState: function () {
+  getInitialState: function getInitialState() {
     return {
@@ -33,5 +23,6 @@ width: this.props.width,
 
-  onResize: function (event, _ref) {
+  onResize: function onResize(event, _ref) {
     var element = _ref.element;
     var size = _ref.size;
+
     if (size.width !== this.state.width || size.height !== this.state.height) {
@@ -45,23 +36,31 @@ this.setState({
 
-  render: function () {
+  render: function render() {
     // Basic wrapper around a Resizable instance.
     // If you use Resizable directly, you are responsible for updating the component
     // with a new width and height.
-    var handleSize = this.props.handleSize;
-    var minConstraints = this.props.minConstraints;
-    var maxConstraints = this.props.maxConstraints;
-    var props = _objectWithoutProperties(this.props, ["handleSize", "minConstraints", "maxConstraints"]);
+    var _props = this.props;
+    var handleSize = _props.handleSize;
+    var minConstraints = _props.minConstraints;
+    var maxConstraints = _props.maxConstraints;
 
-    return React.createElement(Resizable, {
-      minConstraints: minConstraints,
-      maxConstraints: maxConstraints,
-      handleSize: handleSize,
-      width: this.state.width,
-      height: this.state.height,
-      onResize: this.onResize,
-      draggableOpts: this.props.draggableOpts
-    }, React.createElement("div", React.__spread({
-      style: { width: this.state.width + "px", height: this.state.height + "px" }
-    }, props), this.props.children));
+    var props = _objectWithoutProperties(_props, ['handleSize', 'minConstraints', 'maxConstraints']);
+
+    return React.createElement(
+      Resizable,
+      {
+        minConstraints: minConstraints,
+        maxConstraints: maxConstraints,
+        handleSize: handleSize,
+        width: this.state.width,
+        height: this.state.height,
+        onResize: this.onResize,
+        draggableOpts: this.props.draggableOpts
+      },
+      React.createElement(
+        'div',
+        _extends({ style: { width: this.state.width + 'px', height: this.state.height + 'px' } }, props),
+        this.props.children
+      )
+    );
   }
 });

index.js

@@ -0,1 +1,2 @@
+'use strict';
 module.exports = function() {
@@ -2,0 +3,0 @@ throw new Error("Don't instantiate Resizable directly! Use require('react-resizable').Resizable");

package.json

 {
   "name": "react-resizable",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "description": "A component that is resizable with handles.",
@@ -9,6 +9,6 @@ "main": "index.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "make js",
+    "build": "bash build.sh",
     "build-example": "webpack",
-    "check-build": "make check-build",
-    "dev": "echo 'Open http://localhost:4002/examples/1.html'; webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base ."
+    "dev": "echo 'Open http://localhost:4002/examples/1.html'; webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base .",
+    "prepublish": "npm run build"
   },
@@ -31,16 +31,20 @@ "repository": {
   "devDependencies": {
-    "6to5": "^2.2.0",
-    "6to5-loader": "^1.0.0",
-    "css-loader": "^0.9.0",
-    "jshint": "^2.5.11",
-    "lodash": "^2.4.1",
-    "precommit-hook": "^1.0.7",
-    "react": "^0.12.2",
-    "react-hot-loader": "^1.0.4",
-    "style-loader": "^0.8.2",
-    "webpack": "^1.4.14",
-    "webpack-dev-server": "^1.7.0"
+    "babel": "^5.0.1",
+    "babel-core": "^5.0.1",
+    "babel-loader": "^5.0.0",
+    "css-loader": "^0.9.1",
+    "jshint": "^2.6.3",
+    "lodash": "^3.6.0",
+    "pre-commit": "^1.0.6",
+    "precommit-hook": "^2.0.1",
+    "react": "^0.13.1",
+    "react-hot-loader": "^1.2.4",
+    "style-loader": "^0.9.0",
+    "webpack": "^1.7.3",
+    "webpack-dev-server": "^1.8.0"
   },
+  "peerDependencies": {
+    "react": "^0.13"
+  },
   "dependencies": {
-    "object-assign": "^2.0.0",
     "react-draggable": "strml/react-draggable"
@@ -52,5 +56,4 @@ },
   "precommit": [
-    "check-build",
     "lint"
   ]
 }

README.md

@@ -9,3 +9,3 @@ ### React-Resizable
 
-See the example and associated code in [TestLayout](/test/TestLayout.jsx) and 
+See the example and associated code in [TestLayout](/test/TestLayout.jsx) and
 [ResizableBox](/lib/ResizableBox.jsx) for more details.
@@ -16,3 +16,3 @@
 
-This module depends on a fork of [mzabriskie's react-draggable](https://github.com/mzabriskie/react-draggable), 
+This module depends on a fork of [mzabriskie's react-draggable](https://github.com/mzabriskie/react-draggable),
 hosted [here](https://github.com/strml/react-draggable). You can pass options directly to the underlying `Draggable`
@@ -19,0 +19,0 @@ instance by using the prop `draggableOpts`. See the demo for more on this.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Worsened metrics

Total package byte prevSize

10985

decreased by-44.66%

Dev dependency count

13

increased by18.18%

Number of package files

9

decreased by-50%

Lines of code

175

decreased by-55.81%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedacorn@5.7.4(transitive)

• + Addedamdefine@1.0.1(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)

• + 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)

• + 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)

• + Addedjstransform@11.0.3(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp@0.5.6(transitive)

• + Addedonce@1.4.0(transitive)

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

• + Addedprivate@0.1.8(transitive)

• + Addedq@1.5.1(transitive)

• + Addedreact@0.13.3(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)

• + Addedwrappy@1.0.2(transitive)

• - Removedobject-assign@^2.0.0