react-dropzone - npm Package Compare versions

Comparing version 3.4.0 to 3.5.0

CHANGELOG.md

@@ -1,10 +0,15 @@
-# v3.4.0
+# 3.5.0
 
+* Optionally handle onDragStart event [#181](https://github.com/okonet/react-dropzone/pull/181)
+* Added lint-staged and npmpub to improve DX
+
+# 3.4.0
+
 * Added support for React 15.x <Nuno Campos>
 
-# v3.3.4
+# 3.3.4
 
 * fix issue Cannot find module "React" (#159) <Jonathan Sanchez Pando>
 
-# v3.3.3
+# 3.3.3
 
@@ -15,7 +20,7 @@ * More MIME type examples <Matija Marohnić>
 
-# v3.3.2
+# 3.3.2
 
 * Fixed npm build for 3.3.1
 
-# v3.3.1
+# 3.3.1
 
@@ -26,3 +31,3 @@ * Added travis.yml and build badge. Closes #111 <Andrey Okonetchnikov>
 
-# v3.3.0
+# 3.3.0
 
@@ -37,3 +42,3 @@ * Fir for Drag & Drop From Application Non-Functional in OS/X / Chrome (#74) <newsiberian>
 
-# v3.0.0
+# 3.0.0
 
@@ -48,3 +53,3 @@ * Added compatibility with React 0.14
 
-# v2.2.4
+# 2.2.4
 
@@ -51,0 +56,0 @@ * Fixed #83

dist/index.js

@@ -83,3 +83,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	
-	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 _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; } /* eslint prefer-template: 0 */
 	
@@ -97,2 +97,3 @@ var supportMultiple = typeof document !== 'undefined' && document && document.createElement ? 'multiple' in document.createElement('input') : true;
 	    _this.onClick = _this.onClick.bind(_this);
+	    _this.onDragStart = _this.onDragStart.bind(_this);
 	    _this.onDragEnter = _this.onDragEnter.bind(_this);
@@ -115,2 +116,9 @@ _this.onDragLeave = _this.onDragLeave.bind(_this);
 	  }, {
+	    key: 'onDragStart',
+	    value: function onDragStart(e) {
+	      if (this.props.onDragStart) {
+	        this.props.onDragStart.call(this, e);
+	      }
+	    }
+	  }, {
 	    key: 'onDragEnter',
@@ -299,3 +307,3 @@ value: function onDragEnter(e) {
 	          return _this3.fileInputEl = el;
-	        },
+	        }, // eslint-disable-line
 	        onChange: this.onDrop
@@ -315,2 +323,3 @@ };
 	          onClick: this.onClick,
+	          onDragStart: this.onDragStart,
 	          onDragEnter: this.onDragEnter,
@@ -337,23 +346,27 @@ onDragOver: this.onDragOver,
 	Dropzone.propTypes = {
+	  // Overriding drop behavior
 	  onDrop: _react2.default.PropTypes.func,
 	  onDropAccepted: _react2.default.PropTypes.func,
 	  onDropRejected: _react2.default.PropTypes.func,
+	
+	  // Overriding drag behavior
+	  onDragStart: _react2.default.PropTypes.func,
 	  onDragEnter: _react2.default.PropTypes.func,
 	  onDragLeave: _react2.default.PropTypes.func,
 	
-	  children: _react2.default.PropTypes.node,
-	  style: _react2.default.PropTypes.object,
-	  activeStyle: _react2.default.PropTypes.object,
-	  rejectStyle: _react2.default.PropTypes.object,
-	  className: _react2.default.PropTypes.string,
-	  activeClassName: _react2.default.PropTypes.string,
-	  rejectClassName: _react2.default.PropTypes.string,
+	  children: _react2.default.PropTypes.node, // Contents of the dropzone
+	  style: _react2.default.PropTypes.object, // CSS styles to apply
+	  activeStyle: _react2.default.PropTypes.object, // CSS styles to apply when drop will be accepted
+	  rejectStyle: _react2.default.PropTypes.object, // CSS styles to apply when drop will be rejected
+	  className: _react2.default.PropTypes.string, // Optional className
+	  activeClassName: _react2.default.PropTypes.string, // className for accepted state
+	  rejectClassName: _react2.default.PropTypes.string, // className for rejected state
 	
-	  disablePreview: _react2.default.PropTypes.bool,
-	  disableClick: _react2.default.PropTypes.bool,
+	  disablePreview: _react2.default.PropTypes.bool, // Enable/disable preview generation
+	  disableClick: _react2.default.PropTypes.bool, // Disallow clicking on the dropzone container to open file dialog
 	
-	  inputProps: _react2.default.PropTypes.object,
-	  multiple: _react2.default.PropTypes.bool,
-	  accept: _react2.default.PropTypes.string,
-	  name: _react2.default.PropTypes.string
+	  inputProps: _react2.default.PropTypes.object, // Pass additional attributes to the <file type="input"/> tag
+	  multiple: _react2.default.PropTypes.bool, // Allow dropping multiple files
+	  accept: _react2.default.PropTypes.string, // Allow specific types of files. See https://github.com/okonet/attr-accept for more information
+	  name: _react2.default.PropTypes.string // name attribute for the input tag
 	};
@@ -360,0 +373,0 @@

mocha-environment.js

@@ -0,3 +1,6 @@
+/* eslint prefer-template: 0 */
+/* eslint object-shorthand: 0 */
+
 // import es6
-require('babel-core/register');
+require('babel-register');
 
@@ -12,8 +15,5 @@ // jsdom
 global.window.URL = {
-  createObjectURL: function (arg) { // eslint-disable-line
+  createObjectURL: function (arg) {
     return 'data://' + arg.name;
   }
 };
-global.window.addEventListener('load', function () {
-  console.log('JSDOM Loaded'); // eslint-disable-line
-});

package.json

 {
   "name": "react-dropzone",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Simple HTML5 drag-drop zone with React.js",
@@ -9,11 +9,14 @@ "main": "dist/index.js",
     "clean": "rimraf ./dist",
-    "prepublish": "npm run lint && npm run build && npm run test:build",
-    "test": "mocha --require ./mocha-environment.js './src/test.js'",
-    "test:build": "NODE_ENV=production npm run test",
-    "lint": "eslint ./src ./*.js",
-    "lint:fix": "npm run lint -- --fix",
-    "precommit-check": "npm run lint"
+    "prerelease": "npm run eslint && npm run build && npm run test:build",
+    "release": "npmpub",
+    "test": "mocha --require ./mocha-environment.js ./src/test.js",
+    "test:build": "NODE_ENV=production npm run build && npm run test",
+    "eslint": "eslint ./src ./*.js",
+    "eslint:fix": "npm run eslint -- --fix",
+    "eslint-staged": "eslint-staged",
+    "deps": "npm-check -s",
+    "deps:update": "npm-check -u"
   },
   "pre-commit": [
-    "precommit-check"
+    "eslint-staged"
   ],
@@ -48,17 +51,23 @@ "keywords": [
   "devDependencies": {
-    "babel-cli": "^6.4.5",
-    "babel-core": "^6.4.5",
-    "babel-eslint": "^4.1.6",
+    "babel-cli": "^6.9.0",
+    "babel-core": "^6.9.1",
+    "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.2",
-    "babel-plugin-add-module-exports": "^0.1.2",
-    "babel-preset-es2015": "^6.3.13",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
+    "babel-register": "^6.9.0",
     "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",
+    "eslint": "^2.11.0",
+    "eslint-config-airbnb": "^9.0.1",
+    "eslint-plugin-import": "^1.8.1",
+    "eslint-plugin-jsx-a11y": "^1.2.2",
+    "eslint-plugin-react": "^5.1.1",
+    "jsdom": "^9.2.1",
+    "lint-staged": "^0.2.2",
+    "mocha": "^2.5.3",
+    "npm-check": "^5.2.1",
+    "npmpub": "^3.1.0",
+    "pre-commit": "^1.1.3",
     "react": "^15.0.1",
@@ -69,5 +78,5 @@ "react-addons-test-utils": "^15.0.1",
     "rimraf": "^2.5.2",
-    "sinon": "^1.17.2",
-    "webpack": "^1.12.11"
+    "sinon": "^1.17.4",
+    "webpack": "^1.13.1"
   }
 }

src/index.js

@@ -0,1 +1,3 @@
+/* eslint prefer-template: 0 */
+
 import accepts from 'attr-accept';
@@ -12,2 +14,3 @@ import React from 'react';
     this.onClick = this.onClick.bind(this);
+    this.onDragStart = this.onDragStart.bind(this);
     this.onDragEnter = this.onDragEnter.bind(this);
@@ -27,2 +30,8 @@ this.onDragLeave = this.onDragLeave.bind(this);
 
+  onDragStart(e) {
+    if (this.props.onDragStart) {
+      this.props.onDragStart.call(this, e);
+    }
+  }
+
   onDragEnter(e) {
@@ -200,3 +209,3 @@ e.preventDefault();
       multiple: supportMultiple && multiple,
-      ref: el => this.fileInputEl = el,
+      ref: el => this.fileInputEl = el, // eslint-disable-line
       onChange: this.onDrop
@@ -215,2 +224,3 @@ };
         onClick={this.onClick}
+        onDragStart={this.onDragStart}
         onDragEnter={this.onDragEnter}
@@ -238,25 +248,29 @@ onDragOver={this.onDragOver}
 Dropzone.propTypes = {
+  // Overriding drop behavior
   onDrop: React.PropTypes.func,
   onDropAccepted: React.PropTypes.func,
   onDropRejected: React.PropTypes.func,
+
+  // Overriding drag behavior
+  onDragStart: React.PropTypes.func,
   onDragEnter: React.PropTypes.func,
   onDragLeave: React.PropTypes.func,
 
-  children: React.PropTypes.node,
-  style: React.PropTypes.object,
-  activeStyle: React.PropTypes.object,
-  rejectStyle: React.PropTypes.object,
-  className: React.PropTypes.string,
-  activeClassName: React.PropTypes.string,
-  rejectClassName: React.PropTypes.string,
+  children: React.PropTypes.node, // Contents of the dropzone
+  style: React.PropTypes.object, // CSS styles to apply
+  activeStyle: React.PropTypes.object, // CSS styles to apply when drop will be accepted
+  rejectStyle: React.PropTypes.object, // CSS styles to apply when drop will be rejected
+  className: React.PropTypes.string, // Optional className
+  activeClassName: React.PropTypes.string, // className for accepted state
+  rejectClassName: React.PropTypes.string, // className for rejected state
 
-  disablePreview: React.PropTypes.bool,
-  disableClick: React.PropTypes.bool,
+  disablePreview: React.PropTypes.bool, // Enable/disable preview generation
+  disableClick: React.PropTypes.bool, // Disallow clicking on the dropzone container to open file dialog
 
-  inputProps: React.PropTypes.object,
-  multiple: React.PropTypes.bool,
-  accept: React.PropTypes.string,
-  name: React.PropTypes.string
+  inputProps: React.PropTypes.object, // Pass additional attributes to the <file type="input"/> tag
+  multiple: React.PropTypes.bool, // Allow dropping multiple files
+  accept: React.PropTypes.string, // Allow specific types of files. See https://github.com/okonet/attr-accept for more information
+  name: React.PropTypes.string // name attribute for the input tag
 };
 
 export default Dropzone;

src/test.js

@@ -21,4 +21,7 @@ /* eslint no-unused-expressions: 0 */
   it('renders the content', () => {
-    const dropzone = TestUtils.renderIntoDocument(<Dropzone><div className="dropzone-content">some content</div></Dropzone>);
-    //
+    const dropzone = TestUtils.renderIntoDocument(
+      <Dropzone>
+        <div className="dropzone-content">some content</div>
+      </Dropzone>
+    );
     const content = TestUtils.findRenderedDOMComponentWithClass(dropzone, 'dropzone-content');
@@ -29,3 +32,7 @@ expect(content.textContent).to.equal('some content');
   it('renders the input element', () => {
-    const dropzone = TestUtils.renderIntoDocument(<Dropzone><div className="dropzone-content">some content</div></Dropzone>);
+    const dropzone = TestUtils.renderIntoDocument(
+      <Dropzone>
+        <div className="dropzone-content">some content</div>
+      </Dropzone>
+    );
     const input = TestUtils.find(dropzone, 'input');
@@ -37,3 +44,7 @@ expect(input.length).to.equal(1);
     const dropSpy = spy();
-    const dropzone = TestUtils.renderIntoDocument(<Dropzone onDrop={dropSpy}><div className="dropzone-content">some content</div></Dropzone>);
+    const dropzone = TestUtils.renderIntoDocument(
+      <Dropzone onDrop={dropSpy}>
+        <div className="dropzone-content">some content</div>
+      </Dropzone>
+    );
     const content = TestUtils.findRenderedDOMComponentWithClass(dropzone, 'dropzone-content');
@@ -47,3 +58,7 @@
   it('does not throw an error when html is dropped instead of files and multiple is false', () => {
-    const dropzone = TestUtils.renderIntoDocument(<Dropzone multiple={false}><div className="dropzone-content">some content</div></Dropzone>);
+    const dropzone = TestUtils.renderIntoDocument(
+      <Dropzone multiple={false}>
+        <div className="dropzone-content">some content</div>
+      </Dropzone>
+    );
     const content = TestUtils.findRenderedDOMComponentWithClass(dropzone, 'dropzone-content');
@@ -57,3 +72,3 @@
     it('sets ref properly', () => {
-      const dropzone = TestUtils.renderIntoDocument(<Dropzone/>);
+      const dropzone = TestUtils.renderIntoDocument(<Dropzone />);
       const input = TestUtils.find(dropzone, 'input')[0];
@@ -70,3 +85,7 @@
       const dropSpy = spy();
-      const dropzone = TestUtils.renderIntoDocument(<Dropzone disablePreview onDrop={dropSpy}><div className="dropzone-content">some content</div></Dropzone>);
+      const dropzone = TestUtils.renderIntoDocument(
+        <Dropzone disablePreview onDrop={dropSpy}>
+          <div className="dropzone-content">some content</div>
+        </Dropzone>
+      );
       const content = TestUtils.findRenderedDOMComponentWithClass(dropzone, 'dropzone-content');
@@ -80,8 +99,13 @@
     it('renders dynamic props on the root element', () => {
-      const component = TestUtils.renderIntoDocument(<Dropzone hidden aria-hidden="hidden" title="Dropzone" />);
-      expect(TestUtils.find(component, '[hidden][aria-hidden="hidden"][title="Dropzone"]')).to.have.length(1);
+      const component = TestUtils.renderIntoDocument(
+        <Dropzone hidden aria-hidden="hidden" title="Dropzone" />
+      );
+      expect(TestUtils.find(component, '[hidden][aria-hidden="hidden"][title="Dropzone"]'))
+        .to.have.length(1);
     });
 
     it('renders dynamic props on the input element', () => {
-      const component = TestUtils.renderIntoDocument(<Dropzone inputProps={{ id: 'hiddenFileInput' } } />);
+      const component = TestUtils.renderIntoDocument(
+        <Dropzone inputProps={{ id: 'hiddenFileInput' }} />
+      );
       expect(TestUtils.find(component, '#hiddenFileInput')).to.have.length(1);
@@ -91,15 +115,25 @@ });
     it('applies the accept prop to the child input', () => {
-      const component = TestUtils.renderIntoDocument(<Dropzone className="my-dropzone" accept="image/jpeg" />);
-      expect(TestUtils.find(component, 'input[type="file"][accept="image/jpeg"]')).to.have.length(1);
-      expect(TestUtils.find(component, '[class="my-dropzone"][accept="image/jpeg"]')).to.have.length(0);
+      const component = TestUtils.renderIntoDocument(
+        <Dropzone className="my-dropzone" accept="image/jpeg" />
+      );
+      expect(TestUtils.find(component, 'input[type="file"][accept="image/jpeg"]'))
+        .to.have.length(1);
+      expect(TestUtils.find(component, '[class="my-dropzone"][accept="image/jpeg"]'))
+        .to.have.length(0);
     });
 
     it('applies the name prop to the child input', () => {
-      const component = TestUtils.renderIntoDocument(<Dropzone className="my-dropzone" name="test-file-input" />);
-      expect(TestUtils.find(component, 'input[type="file"][name="test-file-input"]')).to.have.length(1);
-      expect(TestUtils.find(component, '[class="my-dropzone"][name="test-file-input"]')).to.have.length(0);
+      const component = TestUtils.renderIntoDocument(
+        <Dropzone className="my-dropzone" name="test-file-input" />
+      );
+      expect(TestUtils.find(component, 'input[type="file"][name="test-file-input"]'))
+        .to.have.length(1);
+      expect(TestUtils.find(component, '[class="my-dropzone"][name="test-file-input"]'))
+        .to.have.length(0);
     });
 
     it('does not apply the name prop if name is falsey', () => {
-      const component = TestUtils.renderIntoDocument(<Dropzone className="my-dropzone" name="" />);
+      const component = TestUtils.renderIntoDocument(
+        <Dropzone className="my-dropzone" name="" />
+      );
       expect(TestUtils.find(component, 'input[type="file"][name]')).to.have.length(0);
@@ -110,3 +144,5 @@ });
       const clickSpy = spy();
-      const component = TestUtils.renderIntoDocument(<Dropzone id="example" onClick={clickSpy} />);
+      const component = TestUtils.renderIntoDocument(
+        <Dropzone id="example" onClick={clickSpy} />
+      );
       const content = TestUtils.find(component, '#example')[0];
@@ -118,4 +154,15 @@
 
+    it('overrides onDragStart', () => {
+      const dragStartSpy = spy();
+      const component = TestUtils.renderIntoDocument(
+        <Dropzone id="drag-example" onDragStart={dragStartSpy} />
+      );
+      const content = TestUtils.find(component, '#drag-example')[0];
+
+      TestUtils.Simulate.dragStart(content);
+      expect(dragStartSpy.callCount).to.equal(1);
+    });
+
   });
 
 });

webpack.config.js

@@ -1,4 +0,6 @@
-var webpack = require('webpack');  // eslint-disable-line
-var path = require('path');  // eslint-disable-line
+/* eslint prefer-template: 0 */
+/* eslint no-var: 0 */
 
+var path = require('path');
+
 module.exports = {
@@ -5,0 +7,0 @@ entry: './src/index.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

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

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

111414

increased by5.67%

Lines of code

750

increased by9.97%

Worsened metrics

Dev dependency count

28

increased by27.27%

Number of package files

27

decreased by-3.57%

Number of medium quality alerts

1

increased byInfinity%

Number of lines in readme file

0

decreased by-100%

No dependency changes