react-dropzone - npm Package Compare versions

Comparing version 2.2.4 to 3.0.0

index.js

 var React = require('react');
 var accept = require('attr-accept');
 
-var Dropzone = React.createClass({
+class Dropzone extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.onClick = this.onClick.bind(this);
+    this.onDragEnter = this.onDragEnter.bind(this);
+    this.onDragLeave = this.onDragLeave.bind(this);
+    this.onDragOver = this.onDragOver.bind(this);
+    this.onDrop = this.onDrop.bind(this);
 
-  getDefaultProps: function() {
-    return {
-      disableClick: false,
-      multiple: true
-    };
-  },
-
-  getInitialState: function() {
-    return {
+    this.state = {
       isDragActive: false
     };
-  },
+  }
 
-  propTypes: {
-    onDrop: React.PropTypes.func,
-    onDropAccepted: React.PropTypes.func,
-    onDropRejected: React.PropTypes.func,
-    onDragEnter: React.PropTypes.func,
-    onDragLeave: React.PropTypes.func,
-
-    style: React.PropTypes.object,
-    activeStyle: React.PropTypes.object,
-    className: React.PropTypes.string,
-    activeClassName: React.PropTypes.string,
-    rejectClassName: React.PropTypes.string,
-
-    disableClick: React.PropTypes.bool,
-    multiple: React.PropTypes.bool,
-    accept: React.PropTypes.string,
-  },
-
-  componentDidMount: function() {
+  componentDidMount() {
     this.enterCounter = 0;
-  },
+  }
 
-  allFilesAccepted: function(files) {
+  allFilesAccepted(files) {
     return files.every(file => accept(file, this.props.accept))
-  },
+  }
 
-  onDragEnter: function(e) {
+  onDragEnter(e) {
     e.preventDefault();
@@ -67,9 +48,9 @@
     }
-  },
+  }
 
-  onDragOver: function (e) {
+  onDragOver(e) {
     e.preventDefault();
-  },
+  }
 
-  onDragLeave: function(e) {
+  onDragLeave(e) {
     e.preventDefault();
@@ -90,5 +71,5 @@
     }
-  },
+  }
 
-  onDrop: function(e) {
+  onDrop(e) {
     e.preventDefault();
@@ -110,3 +91,3 @@
       var file = droppedFiles[i];
-      file.preview = URL.createObjectURL(file);
+      file.preview = window.URL.createObjectURL(file);
       files.push(file);
@@ -128,19 +109,19 @@ }
     }
-  },
+  }
 
-  onClick: function () {
+  onClick() {
     if (!this.props.disableClick) {
       this.open();
     }
-  },
+  }
 
-  open: function() {
-    var fileInput = React.findDOMNode(this.refs.fileInput);
+  open() {
+    var fileInput = this.refs.fileInput;
     fileInput.value = null;
     fileInput.click();
-  },
+  }
 
-  render: function() {
+  render() {
+    var className, style, activeStyle;
 
-    var className;
     if (this.props.className) {
@@ -150,9 +131,8 @@ className = this.props.className;
         className += ' ' + this.props.activeClassName;
-      };
+      }
       if (this.state.isDragReject && this.props.rejectClassName) {
         className += ' ' + this.props.rejectClassName;
-      };
-    };
+      }
+    }
 
-    var style, activeStyle;
     if (this.props.style || this.props.activeStyle) {
@@ -172,3 +152,3 @@ if (this.props.style) {
         borderStyle: 'dashed',
-        borderRadius: 5,
+        borderRadius: 5
       };
@@ -191,3 +171,3 @@ activeStyle = {
       };
-    };
+    }
 
@@ -216,5 +196,27 @@ return (
   }
+}
 
-});
+Dropzone.defaultProps = {
+  disableClick: false,
+  multiple: true
+};
 
+Dropzone.propTypes = {
+  onDrop: React.PropTypes.func,
+  onDropAccepted: React.PropTypes.func,
+  onDropRejected: React.PropTypes.func,
+  onDragEnter: React.PropTypes.func,
+  onDragLeave: React.PropTypes.func,
+
+  style: React.PropTypes.object,
+  activeStyle: React.PropTypes.object,
+  className: React.PropTypes.string,
+  activeClassName: React.PropTypes.string,
+  rejectClassName: React.PropTypes.string,
+
+  disableClick: React.PropTypes.bool,
+  multiple: React.PropTypes.bool,
+  accept: React.PropTypes.string
+};
+
 module.exports = Dropzone;

lib/index.js

@@ -5,44 +5,32 @@ 'use strict';
 
+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');
 var accept = require('attr-accept');
 
-var Dropzone = React.createClass({
-  displayName: 'Dropzone',
+var Dropzone = (function (_React$Component) {
+  _inherits(Dropzone, _React$Component);
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      disableClick: false,
-      multiple: true
-    };
-  },
+  function Dropzone(props, context) {
+    _classCallCheck(this, Dropzone);
 
-  getInitialState: function getInitialState() {
-    return {
+    _React$Component.call(this, props, context);
+    this.onClick = this.onClick.bind(this);
+    this.onDragEnter = this.onDragEnter.bind(this);
+    this.onDragLeave = this.onDragLeave.bind(this);
+    this.onDragOver = this.onDragOver.bind(this);
+    this.onDrop = this.onDrop.bind(this);
+
+    this.state = {
       isDragActive: false
     };
-  },
+  }
 
-  propTypes: {
-    onDrop: React.PropTypes.func,
-    onDropAccepted: React.PropTypes.func,
-    onDropRejected: React.PropTypes.func,
-    onDragEnter: React.PropTypes.func,
-    onDragLeave: React.PropTypes.func,
-
-    style: React.PropTypes.object,
-    activeStyle: React.PropTypes.object,
-    className: React.PropTypes.string,
-    activeClassName: React.PropTypes.string,
-    rejectClassName: React.PropTypes.string,
-
-    disableClick: React.PropTypes.bool,
-    multiple: React.PropTypes.bool,
-    accept: React.PropTypes.string
-  },
-
-  componentDidMount: function componentDidMount() {
+  Dropzone.prototype.componentDidMount = function componentDidMount() {
     this.enterCounter = 0;
-  },
+  };
 
-  allFilesAccepted: function allFilesAccepted(files) {
+  Dropzone.prototype.allFilesAccepted = function allFilesAccepted(files) {
     var _this = this;
@@ -53,5 +41,5 @@
     });
-  },
+  };
 
-  onDragEnter: function onDragEnter(e) {
+  Dropzone.prototype.onDragEnter = function onDragEnter(e) {
     e.preventDefault();
@@ -78,9 +66,9 @@
     }
-  },
+  };
 
-  onDragOver: function onDragOver(e) {
+  Dropzone.prototype.onDragOver = function onDragOver(e) {
     e.preventDefault();
-  },
+  };
 
-  onDragLeave: function onDragLeave(e) {
+  Dropzone.prototype.onDragLeave = function onDragLeave(e) {
     e.preventDefault();
@@ -101,5 +89,5 @@
     }
-  },
+  };
 
-  onDrop: function onDrop(e) {
+  Dropzone.prototype.onDrop = function onDrop(e) {
     e.preventDefault();
@@ -121,3 +109,3 @@
       var file = droppedFiles[i];
-      file.preview = URL.createObjectURL(file);
+      file.preview = window.URL.createObjectURL(file);
       files.push(file);
@@ -139,19 +127,19 @@ }
     }
-  },
+  };
 
-  onClick: function onClick() {
+  Dropzone.prototype.onClick = function onClick() {
     if (!this.props.disableClick) {
       this.open();
     }
-  },
+  };
 
-  open: function open() {
-    var fileInput = React.findDOMNode(this.refs.fileInput);
+  Dropzone.prototype.open = function open() {
+    var fileInput = this.refs.fileInput;
     fileInput.value = null;
     fileInput.click();
-  },
+  };
 
-  render: function render() {
+  Dropzone.prototype.render = function render() {
+    var className, style, activeStyle;
 
-    var className;
     if (this.props.className) {
@@ -161,9 +149,8 @@ className = this.props.className;
         className += ' ' + this.props.activeClassName;
-      };
+      }
       if (this.state.isDragReject && this.props.rejectClassName) {
         className += ' ' + this.props.rejectClassName;
-      };
-    };
+      }
+    }
 
-    var style, activeStyle;
     if (this.props.style || this.props.activeStyle) {
@@ -196,3 +183,3 @@ if (this.props.style) {
       appliedStyle = _extends({}, style);
-    };
+    }
 
@@ -220,6 +207,30 @@ return React.createElement(
     );
-  }
+  };
 
-});
+  return Dropzone;
+})(React.Component);
 
+Dropzone.defaultProps = {
+  disableClick: false,
+  multiple: true
+};
+
+Dropzone.propTypes = {
+  onDrop: React.PropTypes.func,
+  onDropAccepted: React.PropTypes.func,
+  onDropRejected: React.PropTypes.func,
+  onDragEnter: React.PropTypes.func,
+  onDragLeave: React.PropTypes.func,
+
+  style: React.PropTypes.object,
+  activeStyle: React.PropTypes.object,
+  className: React.PropTypes.string,
+  activeClassName: React.PropTypes.string,
+  rejectClassName: React.PropTypes.string,
+
+  disableClick: React.PropTypes.bool,
+  multiple: React.PropTypes.bool,
+  accept: React.PropTypes.string
+};
+
 module.exports = Dropzone;

package.json

 {
   "name": "react-dropzone",
-  "version": "2.2.4",
+  "version": "3.0.0",
   "description": "Simple HTML5 drag-drop zone with React.js",
@@ -8,3 +8,3 @@ "main": "lib/index.js",
     "build": "babel index.js --out-file lib/index.js",
-    "prepublish": "babel index.js --out-file lib/index.js"
+    "prepublish": "npm run build"
   },
@@ -29,3 +29,3 @@ "keywords": [
   "peerDependencies": {
-    "react": ">=0.13"
+    "react": "^0.14.0"
   },
@@ -32,0 +32,0 @@ "dependencies": {

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

Lines of code

380

increased by2.98%

Worsened metrics

Total package byte prevSize

41084

decreased by-0.52%

No dependency changes