react-dropzone 8.0.3 → 9.0.0

package/src/utils/index.spec.js

@@ -1,106 +1,12 @@
 import {
-  getDataTransferItems,
   isIeOrEdge,
   isKindFile,
   isDragDataWithFiles,
-  composeEventHandlers
+  composeEventHandlers,
+  isPropagationStopped,
+  isDefaultPrevented
 } from './'
 
-const files = [
-  {
-    name: 'file1.pdf',
-    size: 1111,
-    type: 'application/pdf'
-  },
-  {
-    name: 'cats.gif',
-    size: 1234,
-    type: 'image/gif'
-  },
-  {
-    name: 'dogs.jpg',
-    size: 2345,
-    type: 'image/jpeg'
-  }
-]
-
-const fileItems = [
-  {
-    kind: 'file',
-    type: 'application/json'
-  }
-]
-
-describe('getDataTransferItems', () => {
-  it('should return an array', () => {
-    const res = getDataTransferItems({})
-    expect(res).toBeInstanceOf(Array)
-    expect(res).toHaveLength(0)
-  })
-
-  it('should get dataTransfer before using target', () => {
-    const event = {
-      target: {
-        files
-      },
-      dataTransfer: {
-        files
-      }
-    }
-    const res = getDataTransferItems(event)
-    expect(res).toBeInstanceOf(Array)
-    expect(res).toHaveLength(3)
-  })
-
-  it('should use dataTransfer.items if files is not defined', () => {
-    const event = {
-      target: {
-        files: [{}]
-      },
-      dataTransfer: {
-        items: fileItems
-      }
-    }
-    const res = getDataTransferItems(event)
-    expect(res).toBeInstanceOf(Array)
-    expect(res).toHaveLength(1)
-  })
-
-  it('should use event.target if dataTransfer is not defined', () => {
-    const event = {
-      target: {
-        files
-      }
-    }
-    const res = getDataTransferItems(event)
-    expect(res).toBeInstanceOf(Array)
-    expect(res).toHaveLength(3)
-  })
-
-  it('should prioritize dataTransfer.files over .items', () => {
-    const event = {
-      dataTransfer: {
-        files: [{}, {}],
-        items: [{}, {}, {}]
-      }
-    }
-    const res = getDataTransferItems(event)
-    expect(res).toBeInstanceOf(Array)
-    expect(res).toHaveLength(2)
-  })
-
-  it('should not mutate data', () => {
-    const event = {
-      dataTransfer: {
-        files
-      }
-    }
-    expect(Object.keys(files[2])).toHaveLength(3)
-    getDataTransferItems(event, true)
-    expect(Object.keys(files[2])).toHaveLength(3)
-  })
-})
-
 describe('isIeOrEdge', () => {
   it('should return true for IE10', () => {
     const userAgent =
@@ -139,6 +45,38 @@ describe('isKindFile()', () => {
   })
 })
 
+describe('isPropagationStopped()', () => {
+  const trueFn = jest.fn(() => true)
+
+  it('should return result of isPropagationStopped() if isPropagationStopped exists', () => {
+    expect(isPropagationStopped({ isPropagationStopped: trueFn })).toBe(true)
+  })
+
+  it('should return value of cancelBubble if isPropagationStopped doesnt exist and cancelBubble exists', () => {
+    expect(isPropagationStopped({ cancelBubble: true })).toBe(true)
+  })
+
+  it('should return false if isPropagationStopped and cancelBubble are missing', () => {
+    expect(isPropagationStopped({})).toBe(false)
+  })
+})
+
+describe('isDefaultPrevented()', () => {
+  const trueFn = jest.fn(() => true)
+
+  it('should return value of defaultPrevented if defaultPrevented exists', () => {
+    expect(isDefaultPrevented({ defaultPrevented: true })).toBe(true)
+  })
+
+  it('should return result of isDefaultPrevented() if isDefaultPrevented exists and defaultPrevented is missing', () => {
+    expect(isDefaultPrevented({ isDefaultPrevented: trueFn })).toBe(true)
+  })
+
+  it('should return false if isDefaultPrevented and defaultPrevented are missing', () => {
+    expect(isDefaultPrevented({})).toBe(false)
+  })
+})
+
 describe('isDragDataWithFiles()', () => {
   it('should return true if every dragged type is a file', () => {
     expect(isDragDataWithFiles({ dataTransfer: { types: ['Files'] } })).toBe(true)

package/styleguide.config.js

@@ -33,6 +33,10 @@ module.exports = {
           name: 'Basic example',
           content: 'examples/Basic/Readme.md'
         },
+        {
+          name: 'Events',
+          content: 'examples/Events/README.md'
+        },
         {
           name: 'Styling Dropzone',
           content: 'examples/Styling/Readme.md'
@@ -66,10 +70,6 @@ module.exports = {
             {
               name: 'Using third-party plugins',
               content: 'examples/PluginArchitecture/Readme.md'
-            },
-            {
-              name: 'Dropzone for folders',
-              content: 'examples/Folders/Readme.md'
             }
           ]
         }

package/typings/react-dropzone.d.ts

@@ -15,7 +15,6 @@ export type DropzoneProps = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
   maxSize?: number;
   minSize?: number;
   preventDropOnDocument?: boolean;
-  disableClick?: boolean;
   disabled?: boolean;
 };
 

package/typings/tests/all.tsx

@@ -26,7 +26,6 @@ export default class Test extends React.Component {
           minSize={2000}
           maxSize={Infinity}
           preventDropOnDocument
-          disableClick
           disabled
           multiple={false}
           accept="*.png"

package/dist/es/utils/styles.js

@@ -1,27 +0,0 @@
-export default {
-  active: {
-    borderStyle: 'solid',
-    backgroundColor: '#eee'
-  },
-  accepted: {
-    borderStyle: 'solid',
-    borderColor: '#6c6',
-    backgroundColor: '#eee'
-  },
-  rejected: {
-    borderStyle: 'solid',
-    borderColor: '#c66',
-    backgroundColor: '#eee'
-  },
-  default: {
-    width: 200,
-    height: 200,
-    borderWidth: 2,
-    borderColor: '#666',
-    borderStyle: 'dashed',
-    borderRadius: 5
-  },
-  disabled: {
-    opacity: 0.5
-  }
-};

package/examples/Folders/Readme.md

@@ -1,49 +0,0 @@
-Dropzone that accepts folders as drag-and-drop. Supports multiple folders and subfolders.
-
-```jsx harmony
-const {fromEvent} = require('file-selector')
-
-class Folders extends React.Component {
-  constructor() {
-    super()
-    this.state = {
-      files: []
-    }
-  }
-
-  onDrop(files) {
-    this.setState({files})
-  }
-
-  render() {
-    const files = this.state.files.map(f => (
-      <li key={f.name}>
-        {f.path} - {f.size} bytes
-      </li>
-    ))
-    return (
-      <section>
-        <div>
-          <Dropzone
-            getDataTransferItems={evt => fromEvent(evt)}
-            onDrop={this.onDrop.bind(this)}
-          >
-            {({getRootProps, getInputProps}) => (
-              <div {...getRootProps()}>
-                <input {...getInputProps()} />
-                  <p>Drop a folder with files here</p>
-              </div>
-            )}
-          </Dropzone>
-        </div>
-        <aside>
-          <h4>Files</h4>
-          <ul>{files}</ul>
-        </aside>
-      </section>
-    )
-  }
-}
-
-<Folders />
-```

package/src/utils/styles.js

@@ -1,27 +0,0 @@
-export default {
-  active: {
-    borderStyle: 'solid',
-    backgroundColor: '#eee'
-  },
-  accepted: {
-    borderStyle: 'solid',
-    borderColor: '#6c6',
-    backgroundColor: '#eee'
-  },
-  rejected: {
-    borderStyle: 'solid',
-    borderColor: '#c66',
-    backgroundColor: '#eee'
-  },
-  default: {
-    width: 200,
-    height: 200,
-    borderWidth: 2,
-    borderColor: '#666',
-    borderStyle: 'dashed',
-    borderRadius: 5
-  },
-  disabled: {
-    opacity: 0.5
-  }
-}