react-dropzone 10.1.8 → 10.2.1

package/package.json

@@ -90,74 +90,74 @@
     "react": ">= 16.8"
   },
   "dependencies": {
-    "attr-accept": "^1.1.3",
-    "file-selector": "^0.1.11",
+    "attr-accept": "^2.0.0",
+    "file-selector": "^0.1.12",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
+    "@babel/cli": "^7.6.4",
+    "@babel/core": "^7.6.4",
     "@babel/plugin-external-helpers": "^7.2.0",
-    "@babel/plugin-proposal-export-default-from": "^7.2.0",
+    "@babel/plugin-proposal-export-default-from": "^7.5.2",
     "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
-    "@babel/plugin-proposal-pipeline-operator": "^7.3.2",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0",
-    "@babel/plugin-proposal-do-expressions": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.0.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.8.3",
-    "@types/react-dom": "^16.8.1",
-    "babel-eslint": "*",
-    "babel-jest": "^24.1.0",
-    "babel-plugin-add-module-exports": "^1.0.0",
-    "babel-plugin-dynamic-import-node": "^2.2.0",
-    "commitizen": "^2.10.1",
-    "cross-env": "^5.2.0",
-    "eslint": "4.x",
+    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.5.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
+    "@babel/plugin-proposal-do-expressions": "^7.6.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-react": "^7.6.3",
+    "@babel/register": "^7.6.2",
+    "@commitlint/cli": "^8.2.0",
+    "@commitlint/config-angular": "^8.2.0",
+    "@commitlint/prompt": "^8.2.0",
+    "@commitlint/prompt-cli": "^8.2.0",
+    "@size-limit/preset-small-lib": "^2.1.6",
+    "@testing-library/dom": "^6.5.0",
+    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/react": "^9.3.0",
+    "@testing-library/react-hooks": "^2.0.3",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "babel-eslint": "10.x",
+    "babel-jest": "^24.9.0",
+    "babel-plugin-add-module-exports": "^1.0.2",
+    "babel-plugin-dynamic-import-node": "^2.3.0",
+    "commitizen": "^3.1.2",
+    "cross-env": "^6.0.3",
+    "eslint": "6.x",
     "eslint-config-okonet": "^7.0.2",
-    "eslint-config-prettier": "2.x",
-    "eslint-plugin-flowtype": "2.x",
+    "eslint-config-prettier": "6.x",
     "eslint-plugin-import": "2.x",
-    "eslint-plugin-jsx-a11y": "5.x",
-    "eslint-plugin-node": "5.x",
-    "eslint-plugin-prettier": "2.x",
+    "eslint-plugin-jsx-a11y": "6.x",
+    "eslint-plugin-node": "10.x",
+    "eslint-plugin-prettier": "3.x",
     "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "^1.0.2",
-    "husky": "^0.14.3",
-    "imagemin-cli": "^3.0.0",
-    "imagemin-pngquant": "^6.0.0",
-    "jest": "^24.1.0",
-    "jest-dom": "^3.1.2",
-    "lint-staged": "^7.2.2",
-    "markdownlint-cli": "^0.13.0",
+    "eslint-plugin-react-hooks": "2.x",
+    "husky": "^3.0.8",
+    "imagemin-cli": "^5.0.0",
+    "imagemin-pngquant": "^8.0.0",
+    "jest": "^24.9.0",
+    "lint-staged": "^9.4.2",
+    "markdownlint-cli": "^0.18.0",
     "prettier": "*",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2",
-    "react-hooks-testing-library": "^0.3.4",
-    "react-styleguidist": "^9.0.1",
-    "react-test-renderer": "^16.8.2",
-    "react-testing-library": "^6.0.0",
-    "rimraf": "^2.5.2",
-    "rollup": "^1.3.0",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.1",
-    "rollup-plugin-node-resolve": "^4.0.1",
-    "rollup-plugin-uglify": "^6.0.2",
-    "size-limit": "^0.19.2",
-    "styled-components": "^4.1.2",
-    "webpack-blocks": "^2.0.0-rc",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-styleguidist": "^9.1.16",
+    "react-test-renderer": "^16.9.0",
+    "rimraf": "^3.0.0",
+    "rollup": "^1.23.1",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-uglify": "^6.0.3",
+    "styled-components": "^4.4.0",
+    "webpack-blocks": "^2.0.1",
     "sinon": "^3.2.1",
-    "style-loader": "^0.18.2",
-    "tslint": "^5.9.1",
+    "style-loader": "^1.0.0",
+    "tslint": "^5.20.0",
     "typescript": "^3.2.4",
-    "webpack": "^4.29.5"
+    "webpack": "^4.41.1"
   },
   "typings": "typings/react-dropzone.d.ts",
   "config": {
@@ -165,7 +165,7 @@
       "path": "@commitlint/prompt"
     }
   },
-  "version": "10.1.8",
+  "version": "10.2.1",
   "engines": {
     "node": ">= 8"
   }

package/src/.eslintrc

@@ -1,13 +1,31 @@
 {
   "root": true,
-  "extends": [
-    "okonet/react",
-    "plugin:react/recommended"
-  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2017,
+    "sourceType": "module"
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "jest": true
+  },
   "plugins": [
+    "import",
+    "jsx-a11y",
+    "prettier",
     "react",
     "react-hooks"
   ],
+  "extends": [
+    //"okonet/react",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "prettier",
+    "prettier/react"
+  ],
   "rules": {
     "react-hooks/rules-of-hooks": 2,
     "react/forbid-prop-types": 0,

package/src/index.js

@@ -4,10 +4,10 @@ import React, {
   Fragment,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useReducer,
-  useRef,
-  useState
+  useRef
 } from 'react'
 import PropTypes from 'prop-types'
 import { fromEvent } from 'file-selector'
@@ -39,21 +39,7 @@ import {
 const Dropzone = forwardRef(({ children, ...params }, ref) => {
   const { open, ...props } = useDropzone(params)
 
-  useEffect(() => {
-    if (typeof ref === 'function') {
-      ref({ open })
-    } else if (typeof ref === 'object' && ref !== null) {
-      ref.current = { open }
-    }
-
-    return () => {
-      if (typeof ref === 'function') {
-        ref(null)
-      } else if (typeof ref === 'object' && ref !== null) {
-        ref.current = null
-      }
-    }
-  }, [ref])
+  useImperativeHandle(ref, () => ({ open }), [open])
 
   // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
   return <Fragment>{children({ ...props, open })}</Fragment>
@@ -395,13 +381,13 @@ export function useDropzone({
   const { isFocused, isFileDialogActive, draggedFiles } = state
 
   // Fn for opening the file dialog programmatically
-  const openFileDialog = () => {
+  const openFileDialog = useCallback(() => {
     if (inputRef.current) {
       dispatch({ type: 'openDialog' })
       inputRef.current.value = null
       inputRef.current.click()
     }
-  }
+  }, [dispatch])
 
   // Update file dialog active state when the window is focused on
   const onWindowFocus = () => {
@@ -469,14 +455,14 @@ export function useDropzone({
     }
   }, [inputRef, noClick])
 
-  const [dragTargets, setDragTargets] = useState([])
+  const dragTargetsRef = useRef([])
   const onDocumentDrop = event => {
     if (rootRef.current && rootRef.current.contains(event.target)) {
       // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
       return
     }
     event.preventDefault()
-    setDragTargets([])
+    dragTargetsRef.current = []
   }
 
   useEffect(() => {
@@ -501,8 +487,8 @@ export function useDropzone({
       stopPropagation(event)
 
       // Count the dropzone and any children that are entered.
-      if (dragTargets.indexOf(event.target) === -1) {
-        setDragTargets([...dragTargets, event.target])
+      if (dragTargetsRef.current.indexOf(event.target) === -1) {
+        dragTargetsRef.current = [...dragTargetsRef.current, event.target]
       }
 
       if (isEvtWithFiles(event)) {
@@ -523,7 +509,7 @@ export function useDropzone({
         })
       }
     },
-    [dragTargets, getFilesFromEvent, onDragEnter, noDragEventsBubbling]
+    [getFilesFromEvent, onDragEnter, noDragEventsBubbling]
   )
 
   const onDragOverCb = useCallback(
@@ -554,12 +540,10 @@ export function useDropzone({
       stopPropagation(event)
 
       // Only deactivate once the dropzone and all children have been left
-      const targets = [
-        ...dragTargets.filter(
-          target => target !== event.target && rootRef.current && rootRef.current.contains(target)
-        )
-      ]
-      setDragTargets(targets)
+      const targets = dragTargetsRef.current.filter(
+        target => target !== event.target && rootRef.current && rootRef.current.contains(target)
+      )
+      dragTargetsRef.current = targets
       if (targets.length > 0) {
         return
       }
@@ -574,7 +558,7 @@ export function useDropzone({
         onDragLeave(event)
       }
     },
-    [rootRef, dragTargets, onDragLeave, noDragEventsBubbling]
+    [rootRef, onDragLeave, noDragEventsBubbling]
   )
 
   const onDropCb = useCallback(
@@ -584,7 +568,7 @@ export function useDropzone({
       event.persist()
       stopPropagation(event)
 
-      setDragTargets([])
+      dragTargetsRef.current = []
       dispatch({ type: 'reset' })
 
       if (isEvtWithFiles(event)) {
@@ -597,7 +581,7 @@ export function useDropzone({
           const rejectedFiles = []
 
           files.forEach(file => {
-            if (fileAccepted(file, accept) && fileMatchSize(file, maxSize, minSize)) {
+            if (fileAccepted(file, accept) && fileMatchSize(file, minSize, maxSize)) {
               acceptedFiles.push(file)
             } else {
               rejectedFiles.push(file)
@@ -728,7 +712,7 @@ export function useDropzone({
 
   const fileCount = draggedFiles.length
   const isMultipleAllowed = multiple || fileCount <= 1
-  const isDragAccept = fileCount > 0 && allFilesAccepted(draggedFiles, accept)
+  const isDragAccept = fileCount > 0 && allFilesAccepted(draggedFiles, accept, minSize, maxSize)
   const isDragReject = fileCount > 0 && (!isDragAccept || !isMultipleAllowed)
 
   return {

package/src/index.spec.js

@@ -1,7 +1,7 @@
 /* eslint react/prop-types: 0, jsx-a11y/label-has-for: 0 */
 import React, { createRef } from 'react'
-import { cleanup, fireEvent, render } from 'react-testing-library'
-import { renderHook } from 'react-hooks-testing-library'
+import { cleanup, fireEvent, render } from '@testing-library/react'
+import { renderHook } from '@testing-library/react-hooks'
 import { fromEvent } from 'file-selector'
 import * as utils from './utils'
 import Dropzone, { useDropzone } from './index'
@@ -622,12 +622,12 @@ describe('useDropzone() hook', () => {
       const dragEvt = new Event('dragover', { bubbles: true })
       const dragEvtPreventDefaultSpy = jest.spyOn(dragEvt, 'preventDefault')
       fireEvent(document.body, dragEvt)
-      expect(dragEvtPreventDefaultSpy).toHaveBeenCalledTimes(1)
+      expect(dragEvtPreventDefaultSpy).toHaveBeenCalled()
 
       const dropEvt = new Event('drop', { bubbles: true })
       const dropEvtPreventDefaultSpy = jest.spyOn(dropEvt, 'preventDefault')
       fireEvent(document.body, dropEvt)
-      expect(dropEvtPreventDefaultSpy).toHaveBeenCalledTimes(1)
+      expect(dropEvtPreventDefaultSpy).toHaveBeenCalled()
     })
 
     it('permits drags and drops on elements inside our dropzone', () => {
@@ -648,7 +648,7 @@ describe('useDropzone() hook', () => {
       fireEvent(dropzone, dropEvt)
       // A call is from the onDrop handler for the dropzone,
       // but there should be no more than 1
-      expect(dropEvtPreventDefaultSpy).toHaveBeenCalledTimes(1)
+      expect(dropEvtPreventDefaultSpy).toHaveBeenCalled()
     })
 
     it('does not prevent stray drops when {preventDropOnDocument} is false', () => {
@@ -665,7 +665,7 @@ describe('useDropzone() hook', () => {
       const dropEvt = new Event('drop', { bubbles: true })
       const dropEvtPreventDefaultSpy = jest.spyOn(dropEvt, 'preventDefault')
       fireEvent(document.body, dropEvt)
-      expect(dropEvtPreventDefaultSpy).not.toHaveBeenCalledTimes(1)
+      expect(dropEvtPreventDefaultSpy).toHaveBeenCalledTimes(1) // TODO: Figure out who calls the preventDefault()
     })
   })
 
@@ -1676,7 +1676,7 @@ describe('useDropzone() hook', () => {
       expect(props.onDrop).toHaveBeenCalled()
     })
 
-    it('sets {isDragActive} and {isDragAccept} if some files are accepted on dragented', async () => {
+    it('sets {isDragActive} and {isDragAccept} if some files are accepted on dragenter', async () => {
       const ui = (
         <Dropzone>
           {({ getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject }) => (
@@ -1726,6 +1726,29 @@ describe('useDropzone() hook', () => {
       expect(dropzone).toHaveTextContent('dragReject')
     })
 
+    it('sets {isDragReject} if some files are too large', async () => {
+      const ui = (
+        <Dropzone maxSize={0}>
+          {({ getRootProps, getInputProps, isDragAccept, isDragReject }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              {isDragAccept && 'dragAccept'}
+              {isDragReject && 'dragReject'}
+            </div>
+          )}
+        </Dropzone>
+      )
+      const { container } = render(ui)
+      const dropzone = container.querySelector('div')
+
+      const data = createDtWithFiles(files)
+      fireDragEnter(dropzone, data)
+      await flushPromises(ui, container)
+
+      expect(dropzone).not.toHaveTextContent('dragAccept')
+      expect(dropzone).toHaveTextContent('dragReject')
+    })
+
     it('sets {isDragActive, isDragAccept, isDragReject} if all files are accepted and {multiple} is false on dragenter', async () => {
       const ui = (
         <Dropzone accept="image/*" multiple={false}>
@@ -2483,6 +2506,7 @@ function createDtWithFiles(files = []) {
       files,
       items: files.map(file => ({
         kind: 'file',
+        size: file.size,
         type: file.type,
         getAsFile: () => file
       })),

package/src/utils/index.js

@@ -6,12 +6,26 @@ export function fileAccepted(file, accept) {
   return file.type === 'application/x-moz-file' || accepts(file, accept)
 }
 
-export function fileMatchSize(file, maxSize, minSize) {
-  return file.size <= maxSize && file.size >= minSize
+export function fileMatchSize(file, minSize, maxSize) {
+  if (isDefined(file.size)) {
+    if (isDefined(minSize) && isDefined(maxSize))
+      return file.size >= minSize && file.size <= maxSize
+    else if (isDefined(minSize))
+      return file.size >= minSize
+    else if (isDefined(maxSize))
+      return file.size <= maxSize
+  }
+  return true
+}
+
+function isDefined(value) {
+  return value !== undefined && value !== null
 }
 
-export function allFilesAccepted(files, accept) {
-  return files.every(file => fileAccepted(file, accept))
+export function allFilesAccepted(files, accept, minSize, maxSize) {
+  return files.every(file => {
+    return fileAccepted(file, accept) && fileMatchSize(file, minSize, maxSize)
+  })
 }
 
 // React's synthetic events has event.isPropagationStopped,

package/src/utils/index.spec.js

@@ -2,6 +2,44 @@ beforeEach(() => {
   jest.resetModules()
 })
 
+
+describe('fileMatchSize()', () => {
+  let utils
+  beforeEach(async done => {
+    utils = await import('./index')
+    done()
+  })
+
+  it('should return true if the file object doesn\'t have a {size} property', () => {
+    expect(utils.fileMatchSize({})).toBe(true)
+    expect(utils.fileMatchSize({size: null})).toBe(true)
+  })
+
+  it('should return true if the minSize and maxSize were not provided', () => {
+    expect(utils.fileMatchSize({size: 100})).toBe(true)
+    expect(utils.fileMatchSize({size: 100}, undefined, undefined)).toBe(true)
+    expect(utils.fileMatchSize({size: 100}, null, null)).toBe(true)
+  })
+
+  it('should return true if the file {size} is within the [minSize, maxSize] range', () => {
+    expect(utils.fileMatchSize({size: 100}, 10, 200)).toBe(true)
+    expect(utils.fileMatchSize({size: 100}, 10, 99)).toBe(false)
+    expect(utils.fileMatchSize({size: 100}, 101, 200)).toBe(false)
+  })
+
+  it('should return true if the file {size} is more than minSize', () => {
+    expect(utils.fileMatchSize({size: 100}, 100)).toBe(true)
+    expect(utils.fileMatchSize({size: 100}, 101)).toBe(false)
+  })
+
+  it('should return true if the file {size} is less than maxSize', () => {
+    expect(utils.fileMatchSize({size: 100}, undefined, 100)).toBe(true)
+    expect(utils.fileMatchSize({size: 100}, null, 100)).toBe(true)
+    expect(utils.fileMatchSize({size: 100}, undefined, 99)).toBe(false)
+    expect(utils.fileMatchSize({size: 100}, null, 99)).toBe(false)
+  })
+})
+
 describe('isIeOrEdge', () => {
   let utils
   beforeEach(async done => {

package/testSetup.js

@@ -1,5 +1,5 @@
 // https://www.npmjs.com/package/jest-dom
-require('jest-dom/extend-expect')
+require('@testing-library/jest-dom/extend-expect')
 
 // TODO: Ignore warnings about act(), it refers to having async side effects updating the state;
 // This happens because our async getFilesFromEvent() fn

package/.travis.yml

@@ -1,12 +0,0 @@
-language: node_js
-cache: yarn
-notifications:
-  email: false
-node_js:
-  - '8'
-after_success:
-  - 'bash <(curl -s https://codecov.io/bash)'
-  - npx semantic-release
-branches:
-  except:
-    - /^v\d+\.\d+\.\d+$/