react-dropzone 8.0.3 → 9.0.0

package/src/index.js

@@ -1,6 +1,7 @@
 /* eslint prefer-template: 0 */
 
 import React from 'react'
+import { fromEvent } from 'file-selector'
 import PropTypes from 'prop-types'
 import {
   isDragDataWithFiles,
@@ -9,9 +10,10 @@ import {
   allFilesAccepted,
   fileMatchSize,
   onDocumentDragOver,
-  getDataTransferItems as defaultGetDataTransferItem,
   isIeOrEdge,
-  composeEventHandlers
+  composeEventHandlers,
+  isPropagationStopped,
+  isDefaultPrevented
 } from './utils'
 
 class Dropzone extends React.Component {
@@ -73,7 +75,7 @@ class Dropzone extends React.Component {
 
     if (isDragDataWithFiles(evt)) {
       Promise.resolve(this.props.getDataTransferItems(evt)).then(draggedFiles => {
-        if (evt.isPropagationStopped()) {
+        if (isPropagationStopped(evt)) {
           return
         }
 
@@ -95,6 +97,10 @@ class Dropzone extends React.Component {
     evt.preventDefault()
     evt.persist()
 
+    if (evt.dataTransfer) {
+      evt.dataTransfer.dropEffect = 'copy'
+    }
+
     if (this.props.onDragOver && isDragDataWithFiles(evt)) {
       this.props.onDragOver.call(this, evt)
     }
@@ -157,7 +163,7 @@ class Dropzone extends React.Component {
         const acceptedFiles = []
         const rejectedFiles = []
 
-        if (evt.isPropagationStopped()) {
+        if (isPropagationStopped(evt)) {
           return
         }
 
@@ -199,16 +205,16 @@ class Dropzone extends React.Component {
   }
 
   onClick = evt => {
-    const { onClick, disableClick } = this.props
+    const { onClick } = this.props
 
     // if onClick prop is given, run it first
     if (onClick) {
       onClick.call(this, evt)
     }
 
-    // if disableClick is not set and the event hasn't been default prefented within
+    // If the event hasn't been default prevented from within
     // the onClick listener, open the file dialog
-    if (!disableClick && !evt.isDefaultPrevented()) {
+    if (!isDefaultPrevented(evt)) {
       evt.stopPropagation()
 
       // in IE11/Edge the file-browser dialog is blocking, ensure this is behind setTimeout
@@ -253,7 +259,7 @@ class Dropzone extends React.Component {
     if (onFocus) {
       onFocus.call(this, evt)
     }
-    if (!evt.isDefaultPrevented()) {
+    if (!isDefaultPrevented(evt)) {
       this.setState({ isFocused: true })
     }
   }
@@ -263,7 +269,7 @@ class Dropzone extends React.Component {
     if (onBlur) {
       onBlur.call(this, evt)
     }
-    if (!evt.isDefaultPrevented()) {
+    if (!isDefaultPrevented(evt)) {
       this.setState({ isFocused: false })
     }
   }
@@ -278,7 +284,7 @@ class Dropzone extends React.Component {
       onKeyDown.call(this, evt)
     }
 
-    if (!evt.isDefaultPrevented() && (evt.keyCode === 32 || evt.keyCode === 13)) {
+    if (!isDefaultPrevented(evt) && (evt.keyCode === 32 || evt.keyCode === 13)) {
       evt.preventDefault()
       this.open()
     }
@@ -428,11 +434,6 @@ Dropzone.propTypes = {
    */
   children: PropTypes.func,
 
-  /**
-   * Disallow clicking on the dropzone container to open file dialog
-   */
-  disableClick: PropTypes.bool,
-
   /**
    * Enable/disable the dropzone entirely
    */
@@ -561,9 +562,8 @@ Dropzone.propTypes = {
 Dropzone.defaultProps = {
   preventDropOnDocument: true,
   disabled: false,
-  disableClick: false,
   multiple: true,
   maxSize: Infinity,
   minSize: 0,
-  getDataTransferItems: defaultGetDataTransferItem
+  getDataTransferItems: fromEvent
 }

package/src/index.spec.js

@@ -30,6 +30,11 @@ const createDtWithFiles = (files = []) => {
   return {
     dataTransfer: {
       files,
+      items: files.map(file => ({
+        kind: 'file',
+        type: file.type,
+        getAsFile: () => file
+      })),
       types: ['Files']
     }
   }
@@ -307,21 +312,6 @@ describe('Dropzone', () => {
       expect(open).toHaveBeenCalled()
     })
 
-    it('should not call `open` if disableClick prop is true', () => {
-      const dropzone = mount(
-        <Dropzone disableClick>
-          {({ getRootProps, getInputProps }) => (
-            <div {...getRootProps()}>
-              <input {...getInputProps()} />
-            </div>
-          )}
-        </Dropzone>
-      )
-      const open = jest.spyOn(dropzone.instance(), 'open')
-      dropzone.simulate('click')
-      expect(open).not.toHaveBeenCalled()
-    })
-
     it('should call `onClick` callback if provided', () => {
       const onClick = jest.fn()
       const dropzone = mount(
@@ -339,23 +329,6 @@ describe('Dropzone', () => {
       expect(onClick).toHaveBeenCalled()
     })
 
-    it('should call `onClick` if provided even if `disableClick` is set', () => {
-      const onClick = jest.fn()
-      const dropzone = mount(
-        <Dropzone onClick={onClick} disableClick>
-          {({ getRootProps, getInputProps }) => (
-            <div {...getRootProps()}>
-              <input {...getInputProps()} />
-            </div>
-          )}
-        </Dropzone>
-      )
-      const open = jest.spyOn(dropzone.instance(), 'open')
-      dropzone.simulate('click')
-      expect(open).toHaveBeenCalledTimes(0)
-      expect(onClick).toHaveBeenCalled()
-    })
-
     it('should not call `open` if event was prevented in `onClick`', () => {
       const onClick = jest.fn(event => event.preventDefault())
       const dropzone = mount(
@@ -447,24 +420,6 @@ describe('Dropzone', () => {
       expect(onClickInner).toHaveBeenCalled()
     })
 
-    it('should invoke onClick on the wrapper if disableClick is set', () => {
-      const onClick = jest.fn()
-      const component = mount(
-        <div onClick={onClick}>
-          <Dropzone disableClick>
-            {({ getRootProps, getInputProps }) => (
-              <div {...getRootProps()}>
-                <input {...getInputProps()} />
-              </div>
-            )}
-          </Dropzone>
-        </div>
-      )
-
-      component.find(Dropzone).simulate('click')
-      expect(onClick).toHaveBeenCalled()
-    })
-
     it('should invoke inputProps onClick if provided', () => {
       const onClick = jest.fn()
       const component = mount(
@@ -516,7 +471,7 @@ describe('Dropzone', () => {
           )}
         </Dropzone>
       )
-      dropzone.simulate('focus', { isDefaultPrevented: () => false })
+      dropzone.simulate('focus', { defaultPrevented: false })
       expect(dropzone.find('.dropzone-focused')).toHaveLength(1)
     })
 
@@ -531,7 +486,7 @@ describe('Dropzone', () => {
           )}
         </Dropzone>
       )
-      dropzone.simulate('focus', { isDefaultPrevented: () => false })
+      dropzone.simulate('focus', { defaultPrevented: false })
       expect(dropzone.state('isFocused')).toBe(true)
       expect(onFocus).toHaveBeenCalled()
     })
@@ -539,7 +494,7 @@ describe('Dropzone', () => {
     it('does not set focus state if user supplied onFocus prevented default', async () => {
       const onFocus = jest.fn().mockImplementationOnce(evt => {
         Object.assign(evt, {
-          isDefaultPrevented: () => true
+          defaultPrevented: true
         })
       })
       const dropzone = mount(
@@ -568,9 +523,9 @@ describe('Dropzone', () => {
           )}
         </Dropzone>
       )
-      dropzone.simulate('focus', { isDefaultPrevented: () => false })
+      dropzone.simulate('focus', { defaultPrevented: false })
       expect(dropzone.find('.dropzone-focused')).toHaveLength(1)
-      dropzone.simulate('blur', { isDefaultPrevented: () => false })
+      dropzone.simulate('blur', { defaultPrevented: false })
       expect(dropzone.find('.dropzone-focused')).toHaveLength(0)
     })
 
@@ -585,14 +540,14 @@ describe('Dropzone', () => {
           )}
         </Dropzone>
       )
-      dropzone.simulate('blur', { isDefaultPrevented: () => false })
+      dropzone.simulate('blur', { defaultPrevented: false })
       expect(onBlur).toHaveBeenCalled()
     })
 
     it('does not unset focus state if user supplied onBlur prevented default', async () => {
       const onBlur = jest.fn().mockImplementationOnce(evt => {
         Object.assign(evt, {
-          isDefaultPrevented: () => true
+          defaultPrevented: true
         })
       })
       const dropzone = mount(
@@ -604,7 +559,7 @@ describe('Dropzone', () => {
           )}
         </Dropzone>
       )
-      dropzone.simulate('focus', { isDefaultPrevented: () => false })
+      dropzone.simulate('focus', { defaultPrevented: false })
       dropzone.simulate('blur', {})
       expect(onBlur).toHaveBeenCalled()
     })
@@ -625,13 +580,13 @@ describe('Dropzone', () => {
 
       dropzone.simulate('keydown', {
         keyCode: 32,
-        isDefaultPrevented: () => false,
+        defaultPrevented: false,
         preventDefault() {}
       })
 
       dropzone.simulate('keydown', {
         keyCode: 13,
-        isDefaultPrevented: () => false,
+        defaultPrevented: false,
         preventDefault() {}
       })
 
@@ -651,7 +606,7 @@ describe('Dropzone', () => {
       const open = jest.spyOn(dropzone.instance(), 'open')
       dropzone.simulate('keydown', {
         keyCode: 32,
-        isDefaultPrevented: () => false,
+        defaultPrevented: false,
         preventDefault() {}
       })
       expect(open).not.toHaveBeenCalled()
@@ -670,7 +625,7 @@ describe('Dropzone', () => {
       const open = jest.spyOn(dropzone.instance(), 'open')
       dropzone.find('input').simulate('keydown', {
         keyCode: 32,
-        isDefaultPrevented: () => false,
+        defaultPrevented: false,
         preventDefault() {}
       })
       expect(open).not.toHaveBeenCalled()
@@ -705,7 +660,7 @@ describe('Dropzone', () => {
       const open = jest.spyOn(dropzone.instance(), 'open')
       dropzone.simulate('keydown', {
         keyCode: 32,
-        isDefaultPrevented: () => false,
+        defaultPrevented: false,
         preventDefault() {}
       })
       expect(onKeyDown).toHaveBeenCalled()
@@ -725,7 +680,7 @@ describe('Dropzone', () => {
       )
       dropzone.find('input').simulate('keydown', {
         keyCode: 32,
-        isDefaultPrevented: () => false,
+        defaultPrevented: false,
         preventDefault() {}
       })
       expect(onKeyDown).not.toHaveBeenCalled()
@@ -734,7 +689,7 @@ describe('Dropzone', () => {
     it('does not react to keydown if user-supplied onKeyDown prevents default', async () => {
       const onKeyDown = jest.fn().mockImplementationOnce(evt => {
         Object.assign(evt, {
-          isDefaultPrevented: () => true
+          defaultPrevented: true
         })
       })
       const dropzone = mount(
@@ -765,7 +720,7 @@ describe('Dropzone', () => {
       const open = jest.spyOn(dropzone.instance(), 'open')
       dropzone.simulate('keydown', {
         keyCode: 100,
-        isDefaultPrevented: () => false,
+        defaultPrevented: false,
         preventDefault() {}
       })
       expect(open).not.toHaveBeenCalled()
@@ -1073,7 +1028,7 @@ describe('Dropzone', () => {
   describe('open() fn', () => {
     it('should be exposed to children', () => {
       const subject = mount(
-        <Dropzone disableClick>
+        <Dropzone>
           {({ getRootProps, getInputProps, open }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
@@ -1127,8 +1082,9 @@ describe('Dropzone', () => {
     )
 
     const input = component.find('input')
+    Object.defineProperty(input, 'files', { value: files })
     const evt = {
-      target: { files },
+      target: input,
       preventDefault() {},
       isPropagationStopped: () => false,
       persist() {}
@@ -1202,6 +1158,7 @@ describe('Dropzone', () => {
         </Dropzone>
       )
       await dropzone.simulate('drop', createDtWithFiles(files))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith([], files, expectedEvent)
     })
 
@@ -1217,6 +1174,7 @@ describe('Dropzone', () => {
       )
 
       await dropzone.simulate('drop', createDtWithFiles([images[0]]))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith([images[0]], [], expectedEvent)
     })
 
@@ -1232,6 +1190,7 @@ describe('Dropzone', () => {
       )
 
       await dropzone.simulate('drop', createDtWithFiles(images))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith([], images, expectedEvent)
     })
 
@@ -1246,6 +1205,7 @@ describe('Dropzone', () => {
         </Dropzone>
       )
       await dropzone.simulate('drop', createDtWithFiles(images))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith(images, [], expectedEvent)
     })
 
@@ -1276,14 +1236,17 @@ describe('Dropzone', () => {
       )
 
       await dropzone.simulate('drop', createDtWithFiles(files))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith([], files, expectedEvent)
       onDrop.mockClear()
 
       await dropzone.simulate('drop', createDtWithFiles(images))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith(images, [], expectedEvent)
       onDrop.mockClear()
 
       await dropzone.simulate('drop', createDtWithFiles(files.concat(images)))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith(images, files, expectedEvent)
     })
 
@@ -1299,14 +1262,17 @@ describe('Dropzone', () => {
       )
 
       await dropzone.simulate('drop', createDtWithFiles(files))
+      await flushPromises(dropzone)
       expect(onDropAccepted).not.toHaveBeenCalled()
       onDropAccepted.mockClear()
 
       await dropzone.simulate('drop', createDtWithFiles(images))
+      await flushPromises(dropzone)
       expect(onDropAccepted).toHaveBeenCalledWith(images, expectedEvent)
       onDropAccepted.mockClear()
 
       await dropzone.simulate('drop', createDtWithFiles(files.concat(images)))
+      await flushPromises(dropzone)
       expect(onDropAccepted).toHaveBeenCalledWith(images, expectedEvent)
     })
 
@@ -1322,14 +1288,17 @@ describe('Dropzone', () => {
       )
 
       await dropzone.simulate('drop', createDtWithFiles(images))
+      await flushPromises(dropzone)
       expect(onDropRejected).not.toHaveBeenCalled()
       onDropRejected.mockClear()
 
       await dropzone.simulate('drop', createDtWithFiles(files))
+      await flushPromises(dropzone)
       expect(onDropRejected).toHaveBeenCalledWith(files, expectedEvent)
       onDropRejected.mockClear()
 
       await dropzone.simulate('drop', createDtWithFiles(files.concat(images)))
+      await flushPromises(dropzone)
       expect(onDropRejected).toHaveBeenCalledWith(files, expectedEvent)
     })
 
@@ -1349,6 +1318,7 @@ describe('Dropzone', () => {
         </Dropzone>
       )
       await dropzone.simulate('drop', createDtWithFiles(files))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith([], files, expectedEvent)
       expect(onDropAccepted).not.toHaveBeenCalled()
       expect(onDropRejected).toHaveBeenCalledWith(files, expectedEvent)
@@ -1371,6 +1341,7 @@ describe('Dropzone', () => {
       )
 
       await dropzone.simulate('drop', createDtWithFiles(images))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith(images, [], expectedEvent)
       expect(onDropAccepted).toHaveBeenCalledWith(images, expectedEvent)
       expect(onDropRejected).not.toHaveBeenCalled()
@@ -1394,6 +1365,7 @@ describe('Dropzone', () => {
       const bogusImages = [createFile('bogus.gif', 1234, 'application/x-moz-file')]
 
       await dropzone.simulate('drop', createDtWithFiles(bogusImages))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith(bogusImages, [], expectedEvent)
       expect(onDropAccepted).toHaveBeenCalledWith(bogusImages, expectedEvent)
       expect(onDropRejected).not.toHaveBeenCalled()
@@ -1410,6 +1382,7 @@ describe('Dropzone', () => {
         </Dropzone>
       )
       await dropzone.simulate('drop', createDtWithFiles(files.concat(images)))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith(files.concat(images), [], expectedEvent)
       expect(onDropAccepted).toHaveBeenCalledWith(files.concat(images), expectedEvent)
       expect(onDropRejected).not.toHaveBeenCalled()
@@ -1432,6 +1405,7 @@ describe('Dropzone', () => {
       )
 
       await dropzone.simulate('drop', createDtWithFiles(files))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith(files, [], expectedEvent)
       expect(onDropAccepted).toHaveBeenCalledWith(files, expectedEvent)
       expect(onDropRejected).not.toHaveBeenCalled()
@@ -1453,6 +1427,7 @@ describe('Dropzone', () => {
         </Dropzone>
       )
       await dropzone.simulate('drop', createDtWithFiles(images))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith([], images, expectedEvent)
       expect(onDropAccepted).not.toHaveBeenCalled()
       expect(onDropRejected).toHaveBeenCalledWith(images, expectedEvent)
@@ -1474,6 +1449,7 @@ describe('Dropzone', () => {
         </Dropzone>
       )
       await dropzone.simulate('drop', createDtWithFiles(files))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith([], files, expectedEvent)
       expect(onDropAccepted).not.toHaveBeenCalled()
       expect(onDropRejected).toHaveBeenCalledWith(files, expectedEvent)
@@ -1495,6 +1471,7 @@ describe('Dropzone', () => {
         </Dropzone>
       )
       await dropzone.simulate('drop', createDtWithFiles(images))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith(images, [], expectedEvent)
       expect(onDropAccepted).toHaveBeenCalledWith(images, expectedEvent)
       expect(onDropRejected).not.toHaveBeenCalled()
@@ -1511,6 +1488,7 @@ describe('Dropzone', () => {
         </Dropzone>
       )
       await dropzone.simulate('drop', createDtWithFiles(files.concat(images)))
+      await flushPromises(dropzone)
       expect(onDrop).toHaveBeenCalledWith(files.concat(images), [], expectedEvent)
       expect(onDropAccepted).toHaveBeenCalledWith(files.concat(images), expectedEvent)
       expect(onDropRejected).not.toHaveBeenCalled()

package/src/utils/index.js

@@ -5,28 +5,6 @@ export const supportMultiple =
     ? 'multiple' in document.createElement('input')
     : true
 
-export function getDataTransferItems(event) {
-  let dataTransferItemsList = []
-  if (event.dataTransfer) {
-    const dt = event.dataTransfer
-
-    // NOTE: Only the 'drop' event has access to DataTransfer.files,
-    // otherwise it will always be empty
-    if (dt.files && dt.files.length) {
-      dataTransferItemsList = dt.files
-    } else if (dt.items && dt.items.length) {
-      // During the drag even the dataTransfer.files is null
-      // but Chrome implements some drag store, which is accesible via dataTransfer.items
-      dataTransferItemsList = dt.items
-    }
-  } else if (event.target && event.target.files) {
-    dataTransferItemsList = event.target.files
-  }
-
-  // Convert from DataTransferItemsList to the native Array
-  return Array.prototype.slice.call(dataTransferItemsList)
-}
-
 // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
 // that MIME type will always be accepted
 export function fileAccepted(file, accept) {
@@ -41,6 +19,30 @@ export function allFilesAccepted(files, accept) {
   return files.every(file => fileAccepted(file, accept))
 }
 
+// React's synthetic events has evt.isPropagationStopped,
+// but to remain compatibility with other libs (Preact) fall back
+// to check evt.cancelBubble
+export function isPropagationStopped(evt) {
+  if (typeof evt.isPropagationStopped === 'function') {
+    return evt.isPropagationStopped()
+  } else if (typeof evt.cancelBubble !== 'undefined') {
+    return evt.cancelBubble
+  }
+  return false
+}
+
+// React's synthetic events has evt.isDefaultPrevented,
+// but to remain compatibility with other libs (Preact) first
+// check evt.defaultPrevented
+export function isDefaultPrevented(evt) {
+  if (typeof evt.defaultPrevented !== 'undefined') {
+    return evt.defaultPrevented
+  } else if (typeof evt.isDefaultPrevented === 'function') {
+    return evt.isDefaultPrevented()
+  }
+  return false
+}
+
 export function isDragDataWithFiles(evt) {
   if (!evt.dataTransfer) {
     return true