react-draggable - npm Package Compare versions

Comparing version 3.3.2 to 4.0.1

CHANGELOG.md

 # Changelog
 
+### 4.0.1 (Sep 7, 2019)
+
+- Republish of 4.0.0 to fix a mistake where webpack working files were erroneously included in the package. Use this release instead as it is much smaller.
+
+### 4.0.0 (Aug 26, 2019)
+
+> This is a major release due to a React compatibility change. If you are already on React >= 16.3, this upgrade is non-breaking.
+
+- *Requires React 16.3+ due to use of `getDerivedStateFromProps`.
+  - See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html for why this was done.
+- Upgraded build environment to Babel 7.
+- Switched build from rollup to webpack@4 to simplify.
+- Added CJS build that does not bundle `classNames` & `prop-types` into the build. This should result in marginally smaller bundle sizes for applications that use bundlers.
+- Removed Bower build.
+
 ### 3.3.2 (Aug 16, 2019)
@@ -4,0 +19,0 @@

index.js

@@ -1,2 +0,2 @@
-var Draggable = require('./lib/Draggable').default;
+var Draggable = require('./build/Draggable').default;
 
@@ -9,2 +9,2 @@ // Previous versions of this lib exported <Draggable> as the root export. As to not break
 module.exports.default = Draggable;
-module.exports.DraggableCore = require('./lib/DraggableCore').default;
+module.exports.DraggableCore = require('./build/DraggableCore').default;

lib/Draggable.js

@@ -20,3 +20,4 @@ // @flow
   slackX: number, slackY: number,
-  isElementSVG: boolean
+  isElementSVG: boolean,
+  prevPropsPosition: ?ControlPosition,
 };
@@ -176,2 +177,22 @@
 
+  // React 16.3+
+  // Arity (props, state)
+  static getDerivedStateFromProps({position}: DraggableProps, {prevPropsPosition}: DraggableState) {
+    // Set x/y if a new position is provided in props that is different than the previous.
+    if (
+      position &&
+      (!prevPropsPosition || 
+        position.x !== prevPropsPosition.x || position.y !== prevPropsPosition.y
+      )
+    ) {
+      log('Draggable: getDerivedStateFromProps %j', {position, prevPropsPosition});
+      return {
+        x: position.x, 
+        y: position.y, 
+        prevPropsPosition: {...position}
+      };
+    }
+    return null;
+  }
+
   constructor(props: DraggableProps) {
@@ -191,2 +212,4 @@ super(props);
 
+      prevPropsPosition: {...props.position},
+
       // Used for compensating for out-of-bounds drags
@@ -210,18 +233,6 @@ slackX: 0, slackY: 0,
     if(typeof window.SVGElement !== 'undefined' && ReactDOM.findDOMNode(this) instanceof window.SVGElement) {
-      this.setState({ isElementSVG: true });
+      this.setState({isElementSVG: true});
     }
   }
 
-  componentWillReceiveProps(nextProps: Object) {
-    // Set x/y if position has changed
-    if (nextProps.position &&
-        (!this.props.position ||
-          nextProps.position.x !== this.props.position.x ||
-          nextProps.position.y !== this.props.position.y
-        )
-      ) {
-      this.setState({ x: nextProps.position.x, y: nextProps.position.y });
-    }
-  }
-
   componentWillUnmount() {
@@ -315,9 +326,24 @@ this.setState({dragging: false}); // prevents invariant if unmounted while dragging
   render(): ReactElement<any> {
-    let style = {}, svgTransform = null;
+    const {
+      axis,
+      bounds,
+      children,
+      defaultPosition,
+      defaultClassName,
+      defaultClassNameDragging,
+      defaultClassNameDragged,
+      position,
+      positionOffset,
+      scale,
+      ...draggableCoreProps
+    } = this.props;
 
+    let style = {};
+    let svgTransform = null;
+
     // If this is controlled, we don't want to move it - unless it's dragging.
-    const controlled = Boolean(this.props.position);
+    const controlled = Boolean(position);
     const draggable = !controlled || this.state.dragging;
 
-    const position = this.props.position || this.props.defaultPosition;
+    const validPosition = position || defaultPosition;
     const transformOpts = {
@@ -327,3 +353,3 @@ // Set left if horizontal drag is enabled
         this.state.x :
-        position.x,
+        validPosition.x,
 
@@ -333,3 +359,3 @@ // Set top if vertical drag is enabled
         this.state.y :
-        position.y
+        validPosition.y
     };
@@ -339,3 +365,3 @@
     if (this.state.isElementSVG) {
-      svgTransform = createSVGTransform(transformOpts, this.props.positionOffset);
+      svgTransform = createSVGTransform(transformOpts, positionOffset);
     } else {
@@ -346,13 +372,5 @@ // Add a CSS transform to move the element around. This allows us to move the element around
       // has a clean slate.
-      style = createCSSTransform(transformOpts, this.props.positionOffset);
+      style = createCSSTransform(transformOpts, positionOffset);
     }
 
-    const {
-      defaultClassName,
-      defaultClassNameDragging,
-      defaultClassNameDragged
-    } = this.props;
-
-    const children = React.Children.only(this.props.children);
-
     // Mark with class while dragging
@@ -367,4 +385,4 @@ const className = classNames((children.props.className || ''), defaultClassName, {
     return (
-      <DraggableCore {...this.props} onStart={this.onDragStart} onDrag={this.onDrag} onStop={this.onDragStop}>
-        {React.cloneElement(children, {
+      <DraggableCore {...draggableCoreProps} onStart={this.onDragStart} onDrag={this.onDrag} onStop={this.onDragStop}>
+        {React.cloneElement(React.Children.only(children), {
           className: className,
@@ -371,0 +389,0 @@ style: {...children.props.style, ...style},

lib/DraggableCore.js

@@ -121,8 +121,2 @@ // @flow
     /**
-     * `scale` specifies the scale of the area you are dragging inside of. It allows
-     * the drag deltas to scale correctly with how far zoomed in/out you are.
-     */
-    scale: PropTypes.number,
-
-    /**
      * `handle` specifies a selector to be used as the handle that initiates drag.
@@ -215,3 +209,3 @@ *
     onStop: function(){},
-    onMouseDown: function(){}
+    onMouseDown: function(){},
   };
@@ -218,0 +212,0 @@

package.json

 {
   "name": "react-draggable",
-  "version": "3.3.2",
+  "version": "4.0.1",
   "description": "React draggable component",
-  "main": "dist/react-draggable.js",
-  "browser": "dist/react-draggable.js",
+  "main": "index.js",
+  "browser": "web/react-draggable.js",
   "scripts": {
@@ -16,2 +16,5 @@ "test": "make test",
   },
+  "files": [
+    "/lib"
+  ],
   "typings": "./typings/index.d.ts",
@@ -35,52 +38,44 @@ "types": "./typings/index.d.ts",
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-transform-flow-comments": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
     "@types/react": "^16.0.25",
     "@types/react-dom": "^16.0.3",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.2",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-espower": "^2.3.2",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-flow-comments": "^6.22.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "core-js": "^2.5.1",
-    "eslint": "^4.12.0",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-espower": "^3.0.1",
+    "eslint": "^6.2.2",
     "eslint-plugin-react": "^7.5.1",
     "flow-bin": "^0.69.0",
-    "jasmine-core": "^2.8.0",
-    "json-loader": "^0.5.7",
-    "karma": "^1.7.1",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-cli": "1.0.1",
+    "jasmine-core": "^3.4.0",
+    "karma": "^4.2.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-cli": "2.0.0",
     "karma-firefox-launcher": "^1.0.1",
     "karma-ie-launcher": "^1.0.0",
-    "karma-jasmine": "^1.1.0",
+    "karma-jasmine": "^2.0.1",
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-phantomjs-shim": "^1.5.0",
-    "karma-webpack": "^2.0.6",
+    "karma-webpack": "^4.0.2",
     "lodash": "^4.17.4",
-    "open": "0.0.5",
     "phantomjs-prebuilt": "^2.1.16",
     "power-assert": "^1.4.4",
     "pre-commit": "^1.2.2",
-    "puppeteer": "^0.13.0",
-    "react": "^16.1.1",
-    "react-dom": "^16.1.1",
+    "puppeteer": "^1.19.0",
+    "react": "^16.3",
+    "react-dom": "^16.3",
     "react-frame-component": "^2.0.0",
     "react-test-renderer": "^16.1.1",
-    "rollup": "^0.57.1",
-    "rollup-plugin-babel": "^3.0.3",
-    "rollup-plugin-commonjs": "^9.1.0",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-size-snapshot": "^0.2.1",
-    "rollup-plugin-uglify": "^3.0.0",
-    "semver": "^5.4.1",
+    "semver": "^6.3.0",
     "static-server": "^3.0.0",
-    "typescript": "^2.6.1",
+    "terser-webpack-plugin": "^1.4.1",
+    "typescript": "^3.5.3",
     "uglify-js": "^3.2.0",
-    "webpack": "^3.8.1",
-    "webpack-dev-server": "^2.9.5"
+    "webpack": "^4.39.2",
+    "webpack-cli": "^3.3.7",
+    "webpack-dev-server": "^3.8.0"
   },
@@ -87,0 +82,0 @@ "precommit": [

README.md

@@ -20,2 +20,11 @@ # React-Draggable
 
+
+|Version     | Compatibility|
+|------------|--------------|
+|4.x         | React 16.3+  |
+|3.x         | React 15-16  |
+|2.x         | React 0.14 - 15   |
+|1.x         | React 0.13 - 0.14 |
+|0.x         | React 0.10 - 0.13 |
+
 ------
@@ -22,0 +31,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

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

42

decreased by-16%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

329

increased by2.81%

Worsened metrics

Total package byte prevSize

73583

decreased by-79.75%

Number of package files

14

decreased by-41.67%

Lines of code

1086

decreased by-67.13%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes