react-dropzone - npm Package Compare versions

Comparing version 3.2.3 to 3.3.0

lib/index.js

@@ -9,2 +9,4 @@ 'use strict';
 
+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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -46,10 +48,2 @@
 
-  Dropzone.prototype.allFilesAccepted = function allFilesAccepted(files) {
-    var _this = this;
-
-    return files.every(function (file) {
-      return _attrAccept2['default'](file, _this.props.accept);
-    });
-  };
-
   Dropzone.prototype.onDragEnter = function onDragEnter(e) {
@@ -80,2 +74,4 @@ e.preventDefault();
     e.preventDefault();
+    e.stopPropagation();
+    return false;
   };
@@ -146,34 +142,50 @@
 
+  Dropzone.prototype.allFilesAccepted = function allFilesAccepted(files) {
+    var _this = this;
+
+    return files.every(function (file) {
+      return _attrAccept2['default'](file, _this.props.accept);
+    });
+  };
+
   Dropzone.prototype.open = function open() {
-    var fileInput = this.refs.fileInput;
-    fileInput.value = null;
-    fileInput.click();
+    this.fileInputEl.value = null;
+    this.fileInputEl.click();
   };
 
   Dropzone.prototype.render = function render() {
-    var className = undefined,
-        style = undefined,
-        activeStyle = undefined,
-        rejectStyle = undefined;
+    var _this2 = this;
 
-    className = this.props.className || '';
+    var _props = this.props;
+    var accept = _props.accept;
+    var activeClassName = _props.activeClassName;
+    var inputProps = _props.inputProps;
+    var multiple = _props.multiple;
+    var name = _props.name;
+    var rejectClassName = _props.rejectClassName;
 
-    if (this.state.isDragActive && this.props.activeClassName) {
-      className += ' ' + this.props.activeClassName;
+    var rest = _objectWithoutProperties(_props, ['accept', 'activeClassName', 'inputProps', 'multiple', 'name', 'rejectClassName']);
+
+    var activeStyle = // eslint-disable-line prefer-const
+    rest.activeStyle;
+    var className = rest.className;
+    var rejectStyle = rest.rejectStyle;
+    var style = rest.style;
+
+    var props = _objectWithoutProperties(rest, ['activeStyle', 'className', 'rejectStyle', 'style']);
+
+    var _state = this.state;
+    var isDragActive = _state.isDragActive;
+    var isDragReject = _state.isDragReject;
+
+    className = className || '';
+
+    if (isDragActive && activeClassName) {
+      className += ' ' + activeClassName;
     }
-    if (this.state.isDragReject && this.props.rejectClassName) {
-      className += ' ' + this.props.rejectClassName;
+    if (isDragReject && rejectClassName) {
+      className += ' ' + rejectClassName;
     }
 
-    if (this.props.style || this.props.activeStyle || this.props.rejectStyle) {
-      if (this.props.style) {
-        style = this.props.style;
-      }
-      if (this.props.activeStyle) {
-        activeStyle = this.props.activeStyle;
-      }
-      if (this.props.rejectStyle) {
-        rejectStyle = this.props.rejectStyle;
-      }
-    } else if (!className) {
+    if (!className && !style && !activeStyle && !rejectStyle) {
       style = {
@@ -198,5 +210,5 @@ width: 200,
     var appliedStyle = undefined;
-    if (activeStyle && this.state.isDragActive) {
+    if (activeStyle && isDragActive) {
       appliedStyle = _extends({}, style, activeStyle);
-    } else if (rejectStyle && this.state.isDragReject) {
+    } else if (rejectStyle && isDragReject) {
       appliedStyle = _extends({}, style, rejectStyle);
@@ -208,17 +220,22 @@ } else {
     var inputAttributes = {
+      accept: accept,
       type: 'file',
       style: { display: 'none' },
-      ref: 'fileInput',
-      accept: this.props.accept,
+      multiple: supportMultiple && multiple,
+      ref: function ref(el) {
+        return _this2.fileInputEl = el;
+      },
       onChange: this.onDrop
     };
 
-    supportMultiple && (inputAttributes.multiple = this.props.multiple);
-    this.props.name && (inputAttributes.name = this.props.name);
+    if (name && name.length) {
+      inputAttributes.name = name;
+    }
 
     return _react2['default'].createElement(
       'div',
-      {
+      _extends({
         className: className,
-        style: appliedStyle,
+        style: appliedStyle
+      }, props, /* expand user provided props first so event handlers are never overridden */{
         onClick: this.onClick,
@@ -229,5 +246,5 @@ onDragEnter: this.onDragEnter,
         onDrop: this.onDrop
-      },
+      }),
       this.props.children,
-      _react2['default'].createElement('input', inputAttributes)
+      _react2['default'].createElement('input', _extends({}, inputProps, /* expand user provided inputProps first so inputAttributes override them */inputAttributes))
     );
@@ -252,2 +269,3 @@ };
 
+  children: _react2['default'].PropTypes.element,
   style: _react2['default'].PropTypes.object,
@@ -262,2 +280,4 @@ activeStyle: _react2['default'].PropTypes.object,
   disableClick: _react2['default'].PropTypes.bool,
+
+  inputProps: _react2['default'].PropTypes.object,
   multiple: _react2['default'].PropTypes.bool,
@@ -269,2 +289,2 @@ accept: _react2['default'].PropTypes.string,
 exports['default'] = Dropzone;
-module.exports = exports['default'];
+module.exports = exports['default'];

mocha-environment.js

 // import es6
-require('babel-core/register');
+require('babel/register');
 
@@ -4,0 +4,0 @@ // jsdom

package.json

 {
   "name": "react-dropzone",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "Simple HTML5 drag-drop zone with React.js",
   "main": "lib/index.js",
   "scripts": {
-    "build": "babel index.js --out-dir ./lib",
-    "prepublish": "npm test && npm run build",
-    "test": "./node_modules/.bin/mocha --require ./mocha-environment.js './test.js'"
+    "build": "babel ./src/index.js --out-file ./lib/index.js",
+    "prepublish": "npm run lint && npm test && npm run build",
+    "test": "./node_modules/.bin/mocha --require ./mocha-environment.js './src/test.js'",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint --fix ./src",
+    "precommit-check": "npm run lint"
   },
+  "pre-commit": [
+    "precommit-check"
+  ],
   "keywords": [
@@ -43,9 +49,16 @@ "react-component",
     "babel": "^5.8.29",
+    "babel-eslint": "^4.1.6",
     "chai": "^3.4.1",
+    "eslint": "^1.10.3",
+    "eslint-config-airbnb": "^2.1.1",
+    "eslint-plugin-react": "^3.11.3",
     "jsdom": "^7.2.0",
     "mocha": "^2.3.4",
+    "pre-commit": "^1.1.2",
     "react": "^0.14.3",
     "react-addons-test-utils": "^0.14.3",
+    "react-dom": "^0.14.3",
+    "react-testutils-additions": "^0.2.0",
     "sinon": "^1.17.2"
   }
 }

README.md

@@ -72,2 +72,3 @@ react-dropzone
 - `multiple` - To accept only a single file, set this to `false`.
+- `accept` - Filters the file types that are valid. It should have a valid MIME type according to [input element](http://www.w3.org/TR/html-markup/input.file.html), e.g. accept="application/pdf".
 
@@ -74,0 +75,0 @@ To show a preview of the dropped file while it uploads, use the `file.preview` property. Use `<img src={file.preview} />` to display a preview of the image dropped.

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

Improved metrics

Total package byte prevSize

63692

increased by27.75%

Number of package files

24

increased by4.35%

Lines of code

549

increased by15.34%

Number of lines in readme file

143

increased by0.7%

Worsened metrics

Dev dependency count

14

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes