react-dropzone 5.0.0 → 5.1.1

package/package.json

@@ -7,21 +7,20 @@
     "ci": "git-cz",
     "clean": "rimraf ./dist",
     "build": "npm run clean && npm run build:umd && npm run build:es",
-    "build:umd": "cross-env NODE_ENV=production webpack -p",
+    "build:umd": "cross-env NODE_ENV=es rollup -c",
     "build:es": "cross-env BABEL_ENV=es babel ./src --out-dir ./dist/es --ignore spec.js",
     "start": "styleguidist server",
     "styleguide": "styleguidist build",
-    "test": "npm run eslint:src && jest --coverage && npm run size",
-    "test:es": "cross-env JEST_TARGET=../dist/es/index jest --coverage",
-    "test:umd": "cross-env JEST_TARGET=../dist/index jest --coverage",
-    "eslint:src": "eslint ./src ./examples ./*.js",
+    "test": "npm run eslint:src && jest --coverage",
+    "eslint:src": "eslint .",
     "commitmsg": "commitlint -e",
     "precommit": "lint-staged",
-    "prepublish": "npm run build && npm run test:umd && npm run test:es",
+    "prepublish": "npm run build && npm run size",
     "logo": "cd logo && sketchtool export artboards logo.sketch",
     "imagemin": "imagemin --out-dir=logo --plugin=pngquant --plugin=svgo",
     "size": "size-limit",
-    "size:why": "size-limit --why"
+    "size:why": "size-limit --why",
+    "typescript": "tsc --project ./typings/tests"
   },
   "size-limit": [
     {
@@ -30,7 +29,7 @@
     },
     {
       "path": "dist/es/index.js",
-      "limit": "4 KB"
+      "limit": "6 KB"
     }
   ],
   "lint-staged": {
@@ -38,13 +37,17 @@
       "eslint --fix",
       "git add"
     ],
+    "*.ts": [
+      "tslint"
+    ],
     "*.{svg,png}": [
       "imagemin",
       "git add"
     ]
   },
   "jest": {
-    "setupTestFrameworkScriptFile": "<rootDir>/testSetup.js"
+    "setupTestFrameworkScriptFile": "<rootDir>/testSetup.js",
+    "clearMocks": true
   },
   "keywords": [
     "react-component",
@@ -75,53 +78,72 @@
   },
   "dependencies": {
     "attr-accept": "^1.1.3",
-    "prop-types": "^15.5.7"
+    "prop-types": "^15.6.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^3.2.0",
-    "@commitlint/config-angular": "^3.0.3",
-    "@commitlint/prompt": "^3.2.0",
-    "@commitlint/prompt-cli": "^3.2.0",
+    "@commitlint/cli": "^7.0.0",
+    "@commitlint/config-angular": "^7.0.1",
+    "@commitlint/prompt": "^7.0.0",
+    "@commitlint/prompt-cli": "^7.0.0",
+    "@types/react": "^16.3.2",
+    "@types/react-dom": "^16.0.4",
     "babel-cli": "^6.9.0",
-    "babel-core": "^6.9.1",
-    "babel-eslint": "^7.1.1",
-    "babel-jest": "^21.0.0",
-    "babel-loader": "^7.1.2",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "*",
+    "babel-jest": "^23.4.2",
     "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-preset-env": "^1.6.0",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-1": "^6.24.1",
     "babel-register": "^6.9.0",
-    "commitizen": "^2.9.6",
-    "cross-env": "^5.1.3",
-    "css-loader": "^0.28.7",
-    "enzyme": "^2.6.0",
-    "eslint": "^4.6.1",
-    "eslint-config-okonet": "^5.0.1",
-    "eslint-config-prettier": "^2.4.0",
-    "eslint-plugin-prettier": "^2.2.0",
+    "commitizen": "^2.10.1",
+    "cross-env": "^5.2.0",
+    "enzyme": "^3.4.4",
+    "enzyme-adapter-react-16": "^1.2.0",
+    "eslint": "4.x",
+    "eslint-config-okonet": "^7.0.2",
+    "eslint-config-prettier": "2.x",
+    "eslint-plugin-flowtype": "2.x",
+    "eslint-plugin-import": "2.x",
+    "eslint-plugin-jsx-a11y": "5.x",
+    "eslint-plugin-node": "5.x",
+    "eslint-plugin-prettier": "2.x",
+    "eslint-plugin-react": "7.x",
     "husky": "^0.14.3",
     "imagemin-cli": "^3.0.0",
-    "imagemin-pngquant": "^5.0.0",
-    "jest": "^21.0.1",
-    "jest-enzyme": "^3.8.2",
-    "lint-staged": "^4.1.0",
-    "markdownlint-cli": "^0.3.1",
-    "prettier": "^1.6.1",
-    "react": "^15.4.1",
-    "react-dom": "^15.4.1",
-    "react-styleguidist": "^6.0.23",
-    "react-test-renderer": "^15.6.1",
+    "imagemin-pngquant": "^6.0.0",
+    "jest": "^23.5.0",
+    "jest-enzyme": "^6.0.3",
+    "lint-staged": "^7.2.2",
+    "markdownlint-cli": "^0.13.0",
+    "prettier": "*",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "react-styleguidist": "^7.2.3",
+    "react-test-renderer": "^16.4.2",
     "rimraf": "^2.5.2",
+    "rollup": "^0.58.2",
+    "rollup-plugin-babel": "^3.0.4",
+    "rollup-plugin-commonjs": "^9.1.3",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-uglify": "^3.0.0",
+    "size-limit": "^0.19.2",
+    "webpack-blocks": "^1.0.0",
     "sinon": "^3.2.1",
-    "size-limit": "^0.11.0",
     "style-loader": "^0.18.2",
+    "tslint": "^5.9.1",
+    "typescript": "^2.8.1",
     "webpack": "^3.5.5"
   },
+  "typings": "typings/react-dropzone.d.ts",
   "config": {
     "commitizen": {
       "path": "@commitlint/prompt"
     }
   },
-  "version": "5.0.0"
+  "version": "5.1.1",
+  "engines": {
+    "node": ">= 6"
+  }
 }

package/rollup.config.js

@@ -0,0 +1,29 @@
+const nodeResolve = require('rollup-plugin-node-resolve')
+const commonjs = require('rollup-plugin-commonjs')
+const babel = require('rollup-plugin-babel')
+const uglify = require('rollup-plugin-uglify')
+
+const umdGlobals = {
+  react: 'React',
+  'prop-types': 'PropTypes'
+}
+
+module.exports = [
+  {
+    input: './src/index.js',
+    output: {
+      file: 'dist/index.js',
+      format: 'umd',
+      name: 'Dropzone',
+      globals: umdGlobals,
+      sourcemap: 'inline'
+    },
+    external: Object.keys(umdGlobals),
+    plugins: [
+      nodeResolve(),
+      commonjs({ include: '**/node_modules/**' }),
+      babel({ exclude: '**/node_modules/**', plugins: ['external-helpers'] }),
+      uglify()
+    ]
+  }
+]

package/src/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "root": true,
+  "extends": ["okonet/react"],
+  "rules": {
+    "react/require-default-props": 0,
+    "react/forbid-prop-types": 0
+  }
+}

package/src/__snapshots__/index.spec.js.snap

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dropzone basics should render children 1`] = `"<div class=\\"\\" aria-disabled=\\"false\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\"><p>some content</p><input type=\\"file\\" multiple=\\"\\" autocomplete=\\"off\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\"></div>"`;
-
-exports[`Dropzone document drop protection does not prevent stray drops when preventDropOnDocument is false 1`] = `"<div class=\\"\\" aria-disabled=\\"false\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\"><input type=\\"file\\" multiple=\\"\\" autocomplete=\\"off\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\"></div>"`;
-
-exports[`Dropzone document drop protection installs hooks to prevent stray drops from taking over the browser window 1`] = `"<div class=\\"\\" aria-disabled=\\"false\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\"><p>Content</p><input type=\\"file\\" multiple=\\"\\" autocomplete=\\"off\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\"></div>"`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropzone basics should render children 1`] = `"<div class=\\"\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\" aria-disabled=\\"false\\"><p>some content</p><input type=\\"file\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\" multiple=\\"\\" autocomplete=\\"off\\"></div>"`;
+
+exports[`Dropzone document drop protection does not prevent stray drops when preventDropOnDocument is false 1`] = `"<div class=\\"\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\" aria-disabled=\\"false\\"><input type=\\"file\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\" multiple=\\"\\" autocomplete=\\"off\\"></div>"`;
+
+exports[`Dropzone document drop protection installs hooks to prevent stray drops from taking over the browser window 1`] = `"<div class=\\"\\" style=\\"position: relative; width: 200px; height: 200px; border-width: 2px; border-color: #666; border-style: dashed; border-radius: 5px;\\" aria-disabled=\\"false\\"><p>Content</p><input type=\\"file\\" style=\\"position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;\\" multiple=\\"\\" autocomplete=\\"off\\"></div>"`;

package/src/index.js

@@ -1,3 +1,4 @@
+/* global process */
 /* eslint prefer-template: 0 */
 
 import React from 'react'
@@ -47,7 +48,9 @@ class Dropzone extends React.Component {
       document.addEventListener('dragover', onDocumentDragOver, false)
       document.addEventListener('drop', this.onDocumentDrop, false)
     }
-    this.fileInputEl.addEventListener('click', this.onInputElementClick, false)
+    if (this.fileInputEl != null) {
+      this.fileInputEl.addEventListener('click', this.onInputElementClick, false)
+    }
     window.addEventListener('focus', this.onFileDialogCancel, false)
   }
 
@@ -94,6 +97,8 @@ class Dropzone extends React.Component {
       this.dragTargets.push(evt.target)
     }
 
+    evt.persist()
+
     Promise.resolve(this.props.getDataTransferItems(evt)).then(draggedFiles => {
       this.setState({
         isDragActive: true, // Do not rely on files for the drag state. It doesn't work in Safari.
@@ -158,6 +163,9 @@ class Dropzone extends React.Component {
     // Stop default browser behavior
     evt.preventDefault()
 
+    // Persist event for later usage
+    evt.persist()
+
     // Reset the counter along with the drag on a drop.
     this.dragTargets = []
     this.isFileDialogActive = false
@@ -213,6 +221,11 @@ class Dropzone extends React.Component {
       if (acceptedFiles.length > 0 && onDropAccepted) {
         onDropAccepted.call(this, acceptedFiles, evt)
       }
+
+      // Update `acceptedFiles` and `rejectedFiles` state
+      // This will make children render functions receive the appropriate
+      // values
+      this.setState({ acceptedFiles, rejectedFiles })
     })
   }
 
@@ -400,6 +413,7 @@ class Dropzone extends React.Component {
     }
 
     // Destructure custom props away from props used for the div element
+    /* eslint-disable no-unused-vars */
     const {
       acceptedFiles,
       preventDropOnDocument,
@@ -413,12 +427,17 @@ class Dropzone extends React.Component {
       getDataTransferItems,
       ...divProps
     } = props
+    /* eslint-enable no-unused-vars */
 
+    /* eslint-disable jsx-a11y/no-static-element-interactions */
+    /* eslint-disable jsx-a11y/click-events-have-key-events */
     return (
       <div
         className={className}
         style={appliedStyle}
-        {...divProps /* expand user provided props first so event handlers are never overridden */}
+        {
+          ...divProps /* expand user provided props first so event handlers are never overridden */
+        }
         onClick={this.composeHandlers(this.onClick)}
         onDragStart={this.composeHandlers(this.onDragStart)}
         onDragEnter={this.composeHandlers(this.onDragEnter)}
@@ -430,7 +449,9 @@ class Dropzone extends React.Component {
       >
         {this.renderChildren(children, isDragActive, isDragAccept, isDragReject)}
         <input
-          {...inputProps /* expand user provided inputProps first so inputAttributes override them */}
+          {
+            ...inputProps /* expand user provided inputProps first so inputAttributes override them */
+          }
           {...inputAttributes}
         />
       </div>