react-dropzone 7.0.1 → 8.0.3

package/src/utils/index.js

@@ -47,7 +47,7 @@ export function isDragDataWithFiles(evt) {
   }
   // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types
   // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file
-  return Array.prototype.every.call(
+  return Array.prototype.some.call(
     evt.dataTransfer.types,
     type => type === 'Files' || type === 'application/x-moz-file'
   )
@@ -73,3 +73,18 @@ function isEdge(userAgent) {
 export function isIeOrEdge(userAgent = window.navigator.userAgent) {
   return isIe(userAgent) || isEdge(userAgent)
 }
+
+/**
+ * This is intended to be used to compose event handlers
+ * They are executed in order until one of them calls `event.preventDefault()`.
+ * Not sure this is the best way to do this, but it seems legit.
+ * @param {Function} fns the event hanlder functions
+ * @return {Function} the event handler to add to an element
+ */
+export function composeEventHandlers(...fns) {
+  return (event, ...args) =>
+    fns.some(fn => {
+      fn && fn(event, ...args)
+      return event.defaultPrevented
+    })
+}

package/src/utils/index.spec.js

@@ -1,4 +1,10 @@
-import { getDataTransferItems, isIeOrEdge, isKindFile, isDragDataWithFiles } from './'
+import {
+  getDataTransferItems,
+  isIeOrEdge,
+  isKindFile,
+  isDragDataWithFiles,
+  composeEventHandlers
+} from './'
 
 const files = [
   {
@@ -144,15 +150,48 @@ describe('isDragDataWithFiles()', () => {
     ).toBe(true)
     expect(isDragDataWithFiles({ dataTransfer: { types: ['text/plain'] } })).toBe(false)
     expect(isDragDataWithFiles({ dataTransfer: { types: ['text/html'] } })).toBe(false)
-    expect(isDragDataWithFiles({ dataTransfer: { types: ['Files', 'text/html'] } })).toBe(false)
+    expect(isDragDataWithFiles({ dataTransfer: { types: ['Files', 'application/test'] } })).toBe(
+      true
+    )
     expect(
       isDragDataWithFiles({
-        dataTransfer: { types: ['application/x-moz-file', 'text/html'] }
+        dataTransfer: { types: ['application/x-moz-file', 'application/test'] }
       })
-    ).toBe(false)
+    ).toBe(true)
   })
 
   it('should return true if {dataTransfer} is not defined', () => {
     expect(isDragDataWithFiles({})).toBe(true)
   })
 })
+
+describe('composeEventHandlers', () => {
+  it('returns a fn', () => {
+    const fn = composeEventHandlers(() => {})
+    expect(typeof fn).toBe('function')
+  })
+
+  it('runs every passed fn in order', () => {
+    const fn1 = jest.fn()
+    const fn2 = jest.fn()
+    const fn = composeEventHandlers(fn1, fn2)
+    const evt = { type: 'click' }
+    const data = { ping: true }
+    fn(evt, data)
+    expect(fn1).toHaveBeenCalledWith(evt, data)
+    expect(fn2).toHaveBeenCalledWith(evt, data)
+  })
+
+  it('stops after first fn that calls preventDefault()', () => {
+    const fn1 = jest.fn().mockImplementation(evt => {
+      Object.defineProperty(evt, 'defaultPrevented', { value: true })
+      return evt
+    })
+    const fn2 = jest.fn()
+    const fn = composeEventHandlers(fn1, fn2)
+    const evt = new MouseEvent('click')
+    fn(evt)
+    expect(fn1).toHaveBeenCalledWith(evt)
+    expect(fn2).not.toHaveBeenCalled()
+  })
+})

package/styleguide.config.js

@@ -10,6 +10,10 @@ module.exports = {
   usageMode: 'expand',
   showSidebar: false,
   serverPort: 8080,
+  compilerConfig: {
+    transforms: { dangerousTaggedTemplateString: true },
+    objectAssign: 'Object.assign'
+  },
   sections: [
     {
       name: '',

package/typings/react-dropzone.d.ts

@@ -1,54 +1,68 @@
 import * as React from "react";
-import {func} from "prop-types";
+// import {func} from "prop-types";
+
+export default class Dropzone extends React.Component<DropzoneProps> {
+  open: () => void;
+}
+
+export type DropzoneProps = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
+  children?: DropzoneRenderFunction;
+  getDataTransferItems?(event: React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | DragEvent | Event): Promise<Array<File | DataTransferItem>>;
+  onFileDialogCancel?(): void;
+  onDrop?: DropFilesEventHandler;
+  onDropAccepted?: DropFileEventHandler;
+  onDropRejected?: DropFileEventHandler;
+  maxSize?: number;
+  minSize?: number;
+  preventDropOnDocument?: boolean;
+  disableClick?: boolean;
+  disabled?: boolean;
+};
+
+export interface DropzoneRootProps extends React.HTMLAttributes<HTMLElement> {
+  refKey?: string;
+  [key: string]: any;
+}
+
+export interface DropzoneInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  refKey?: string;
+}
+
+export type DropzoneRenderFunction = (x: DropzoneRenderArgs) => JSX.Element;
+export type GetRootPropsFn = (props?: DropzoneRootProps) => DropzoneRootProps;
+export type GetInputPropsFn = (props?: DropzoneInputProps) => DropzoneInputProps;
 
 export type DropFileEventHandler = (
   acceptedOrRejected: File[],
-  event: React.DragEvent<HTMLDivElement>
+  event: React.DragEvent<HTMLElement>
 ) => void;
+
 export type DropFilesEventHandler = (
   accepted: File[],
   rejected: File[],
-  event: React.DragEvent<HTMLDivElement>
+  event: React.DragEvent<HTMLElement>
 ) => void;
 
-type DropzoneRenderArgs = {
+export type DropzoneRenderArgs = {
   draggedFiles: File[];
   acceptedFiles: File[];
   rejectedFiles: File[];
   isDragActive: boolean;
   isDragAccept: boolean;
   isDragReject: boolean;
+  getRootProps: GetRootPropsFn;
+  getInputProps: GetInputPropsFn;
   open: () => void;
 };
 
-export type DropzoneRenderFunction = (x: DropzoneRenderArgs) => JSX.Element;
-
-type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
-
-export type DropzoneProps = Omit<React.HTMLProps<HTMLDivElement>, "onDrop" | "ref"> & {
-  disableClick?: boolean;
-  disabled?: boolean;
-  preventDropOnDocument?: boolean;
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-  maxSize?: number;
-  minSize?: number;
-  activeClassName?: string;
-  acceptClassName?: string;
-  rejectClassName?: string;
-  disabledClassName?: string;
-  activeStyle?: React.CSSProperties;
-  acceptStyle?: React.CSSProperties;
-  rejectStyle?: React.CSSProperties;
-  disabledStyle?: React.CSSProperties;
-  onDrop?: DropFilesEventHandler;
-  onDropAccepted?: DropFileEventHandler;
-  onDropRejected?: DropFileEventHandler;
-  onFileDialogCancel?(): void;
-  getDataTransferItems?(event: React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement> | DragEvent | Event): Promise<Array<File | DataTransferItem>>;
-  children?: React.ReactNode | DropzoneRenderFunction;
-  ref?: React.Ref<Dropzone>;
-};
-
-export default class Dropzone extends React.Component<DropzoneProps> {
-  open: () => void;
-}
+type PropTypes = "accept"
+  | "multiple"
+  | "name"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+  | "onKeyDown"
+  | "onDragStart"
+  | "onDragEnter"
+  | "onDragOver"
+  | "onDragLeave";

package/typings/tests/accept.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Dropzone from "../../";
 
-class Accept extends React.Component {
+export default class Accept extends React.Component {
   state = {
     accepted: [],
     rejected: []
@@ -17,10 +17,14 @@ class Accept extends React.Component {
               this.setState({ accepted, rejected });
             }}
           >
-            <p>
-              Try dropping some files here, or click to select files to upload.
-            </p>
-            <p>Only *.jpeg and *.png images will be accepted</p>
+            {({getRootProps}) => (
+              <div {...getRootProps()}>
+                <p>
+                  Try dropping some files here, or click to select files to upload.
+                </p>
+                <p>Only *.jpeg and *.png images will be accepted</p>
+              </div>
+            )}
           </Dropzone>
         </div>
         <aside>
@@ -46,30 +50,26 @@ class Accept extends React.Component {
   }
 }
 
-const a = (
+export const acceptExt = (
   <Dropzone accept=".jpeg,.png">
-    {({ isDragActive, isDragReject }) => {
-      if (isDragActive) {
-        return "All files will be accepted";
-      }
-      if (isDragReject) {
-        return "Some files will be rejected";
-      }
-      return "Dropping some files here...";
-    }}
+    {({getRootProps, isDragActive, isDragAccept, isDragReject}) => (
+      <div {...getRootProps()}>
+        {isDragAccept && "All files will be accepted"}
+        {isDragReject && "Some files will be rejected"}
+        {isDragActive && "Drop some files here ..."}
+      </div>
+    )}
   </Dropzone>
 );
 
-const b = (
+export const acceptMime = (
   <Dropzone accept="image/jpeg, image/png">
-    {({ isDragActive, isDragReject }) => {
-      if (isDragActive) {
-        return "All files will be accepted";
-      }
-      if (isDragReject) {
-        return "Some files will be rejected";
-      }
-      return "Dropping some files here...";
-    }}
+    {({getRootProps, isDragActive, isDragAccept, isDragReject}) => (
+      <div {...getRootProps()}>
+        {isDragAccept && "All files will be accepted"}
+        {isDragReject && "Some files will be rejected"}
+        {isDragActive && "Drop some files here ..."}
+      </div>
+    )}
   </Dropzone>
 );

package/typings/tests/all.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Dropzone from "../../";
 
-class Test extends React.Component {
+export default class Test extends React.Component {
   dz: Dropzone;
 
   open() {
@@ -14,10 +14,6 @@ class Test extends React.Component {
     return (
       <div>
         <Dropzone
-          ref={node => {
-            this.dz = node;
-          }}
-          onClick={event => console.log(event)}
           onDrop={(acceptedFiles, rejectedFiles, event) =>
             console.log(acceptedFiles, rejectedFiles, event)}
           onDragStart={event => console.log(event)}
@@ -27,16 +23,6 @@ class Test extends React.Component {
           onDropAccepted={event => console.log(event)}
           onDropRejected={event => console.log(event)}
           onFileDialogCancel={() => console.log("abc")}
-          style={{ borderStyle: "dashed" }}
-          activeStyle={{ borderStyle: "dotted" }}
-          acceptStyle={{ borderStyle: "dotted" }}
-          rejectStyle={{ borderStyle: "dotted" }}
-          disabledStyle={{ borderStyle: "dotted" }}
-          className="regular"
-          activeClassName="active"
-          acceptClassName="accept"
-          rejectClassName="reject"
-          disabledClassName="disabled"
           minSize={2000}
           maxSize={Infinity}
           preventDropOnDocument
@@ -45,13 +31,14 @@ class Test extends React.Component {
           multiple={false}
           accept="*.png"
           name="dropzone"
-          inputProps={{ id: "dropzone" }}
         >
-          Hi
+          {({getRootProps, getInputProps}) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+            </div>
+          )}
         </Dropzone>
       </div>
     );
   }
 }
-
-export default Test;

package/typings/tests/basic.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import Dropzone from "../../";
 
-class Basic extends React.Component {
+export default class Basic extends React.Component {
   state = { files: [] };
 
-  onDrop(files) {
+  onDrop = files => {
     this.setState({
       files
     });
@@ -14,10 +14,15 @@ class Basic extends React.Component {
     return (
       <section>
         <div className="dropzone">
-          <Dropzone onDrop={this.onDrop.bind(this)}>
-            <p>
-              Try dropping some files here, or click to select files to upload.
-            </p>
+          <Dropzone onDrop={this.onDrop}>
+            {({getRootProps, getInputProps}) => (
+              <div {...getRootProps()}>
+                <input {...getInputProps()} />
+                <p>
+                  Try dropping some files here, or click to select files to upload.
+                </p>
+              </div>
+            )}
           </Dropzone>
         </div>
         <aside>
@@ -35,50 +40,12 @@ class Basic extends React.Component {
   }
 }
 
-class Basic2 extends React.Component {
-  state = { disabled: true, files: [] };
-
-  onDrop(files) {
-    this.setState({
-      files
-    });
-  }
-
-  render() {
-    return (
-      <section>
-        <aside>
-          <button
-            type="button"
-            onClick={() => this.setState({ disabled: !this.state.disabled })}
-          >
-            Toggle disabled
-          </button>
-        </aside>
-        <div className="dropzone">
-          <Dropzone
-            onDrop={this.onDrop.bind(this)}
-            disabled={this.state.disabled}
-          >
-            <p>
-              Try dropping some files here, or click to select files to upload.
-            </p>
-          </Dropzone>
-        </div>
-        <aside>
-          <h2>Dropped files</h2>
-          <ul>
-            {this.state.files.map(f => (
-              <li>
-                {f.name} - {f.size} bytes
-              </li>
-            ))}
-          </ul>
-        </aside>
-      </section>
-    );
-  }
-}
-
-// verify that all props are optional
-const allPropsOptional = <Dropzone/>
+export const optional = (
+  <Dropzone>
+    {({getRootProps, getInputProps}) => (
+      <div {...getRootProps()}>
+        <input {...getInputProps()} />
+      </div>
+    )}
+  </Dropzone>
+)

package/typings/tests/events.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Dropzone from "../../";
 
-class Events extends React.Component {
+export class Events extends React.Component {
   render() {
     return (
       <section>
@@ -14,9 +14,14 @@ class Events extends React.Component {
             onDragOver={event => console.log(event)}
             onDragLeave={event => console.log(event)}
           >
-            <p>
-              Try dropping some files here, or click to select files to upload.
-            </p>
+            {({getRootProps, getInputProps}) => (
+              <div {...getRootProps()}>
+                <input {...getInputProps()} />
+                <p>
+                  Try dropping some files here, or click to select files to upload.
+                </p>
+              </div>
+            )}
           </Dropzone>
         </div>
       </section>

package/typings/tests/file-dialog.tsx

@@ -1,27 +1,16 @@
 import React from "react";
 import Dropzone from "../../";
 
-let dropzoneRef;
-
-const x = (
-  <div>
-    <Dropzone
-      ref={node => {
-        dropzoneRef = node;
-      }}
-      onDrop={(accepted, rejected) => {
-        alert(accepted);
-      }}
-    >
-      <p>Drop files here.</p>
-    </Dropzone>
-    <button
-      type="button"
-      onClick={() => {
-        dropzoneRef.open();
-      }}
-    >
-      Open File Dialog
-    </button>
-  </div>
+export const dropzone = (
+  <Dropzone onDrop={files => console.log(files)}>
+    {({getRootProps, getInputProps, open}) => (
+      <div {...getRootProps()}>
+        <input {...getInputProps()} />
+        <p>Drop some files here.</p>
+        <button type="button" onClick={open}>
+          Open file dialog
+        </button>
+      </div>
+    )}
+  </Dropzone>
 );

package/typings/tests/plugin.tsx

@@ -11,7 +11,9 @@ export class TestReactDragEvt extends Component {
     return (
       <div>
         <Dropzone getDataTransferItems={this.getFiles}>
-          Hi
+          {({getRootProps}) => (
+            <div {...getRootProps()} />
+          )}
         </Dropzone>
       </div>
     );
@@ -28,7 +30,9 @@ export class TestDataTransferItems extends Component {
     return (
       <div>
         <Dropzone getDataTransferItems={this.getFiles}>
-          Hi
+          {({getRootProps}) => (
+            <div {...getRootProps()} />
+          )}
         </Dropzone>
       </div>
     );
@@ -45,7 +49,9 @@ export class TestNativeDragEventEvt extends Component {
     return (
       <div>
         <Dropzone getDataTransferItems={this.getFiles}>
-          Hi
+          {({getRootProps}) => (
+            <div {...getRootProps()} />
+          )}
         </Dropzone>
       </div>
     );
@@ -62,7 +68,9 @@ export class TestChangeEvt extends Component {
     return (
       <div>
         <Dropzone getDataTransferItems={this.getFiles}>
-          Hi
+          {({getRootProps}) => (
+            <div {...getRootProps()} />
+          )}
         </Dropzone>
       </div>
     );
@@ -80,7 +88,9 @@ export class TestNativeEvt extends Component {
     return (
       <div>
         <Dropzone getDataTransferItems={this.getFiles}>
-          Hi
+          {({getRootProps}) => (
+            <div {...getRootProps()} />
+          )}
         </Dropzone>
       </div>
     );

package/typings/tests/fullscreen.tsx

@@ -1,88 +0,0 @@
-import React from "react";
-import Dropzone from "../../";
-
-class FullScreen extends React.Component {
-  state = {
-    accept: "",
-    files: [],
-    dropzoneActive: false
-  };
-
-  onDragEnter() {
-    this.setState({
-      dropzoneActive: true
-    });
-  }
-
-  onDragLeave() {
-    this.setState({
-      dropzoneActive: false
-    });
-  }
-
-  onDrop(files) {
-    this.setState({
-      files,
-      dropzoneActive: false
-    });
-  }
-
-  applyMimeTypes(event) {
-    this.setState({
-      accept: event.target.value
-    });
-  }
-
-  render() {
-    const { accept, files, dropzoneActive } = this.state;
-
-    return (
-      <Dropzone
-        disableClick
-        style={{ position: "relative" }}
-        accept={accept}
-        onDrop={this.onDrop.bind(this)}
-        onDragEnter={this.onDragEnter.bind(this)}
-        onDragLeave={this.onDragLeave.bind(this)}
-      >
-        {dropzoneActive && (
-          <div
-            style={{
-              position: "absolute",
-              top: 0,
-              right: 0,
-              bottom: 0,
-              left: 0,
-              padding: "2.5em 0",
-              background: "rgba(0,0,0,0.5)",
-              textAlign: "center",
-              color: "#fff"
-            }}
-          >
-            Drop files...
-          </div>
-        )}
-        <div>
-          <h1>My awesome app</h1>
-          <label htmlFor="mimetypes">
-            Enter mime types you want to accept:{" "}
-          </label>
-          <input
-            type="text"
-            id="mimetypes"
-            onChange={this.applyMimeTypes.bind(this)}
-          />
-
-          <h2>Dropped files</h2>
-          <ul>
-            {files.map(f => (
-              <li>
-                {f.name} - {f.size} bytes
-              </li>
-            ))}
-          </ul>
-        </div>
-      </Dropzone>
-    );
-  }
-}

package/typings/tests/ref-object.tsx

@@ -1,27 +0,0 @@
-import React, {
-  Component,
-  createRef,
-  RefObject
-} from "react";
-import Dropzone from "../../";
-
-export default class Test extends Component {
-  ref: RefObject<Dropzone> = createRef();
-
-  open() {
-    const dz = this.ref.current;
-    if (dz) {
-      dz.open();
-    }
-  }
-
-  render() {
-    return (
-      <div>
-        <Dropzone ref={this.ref}>
-          Hi
-        </Dropzone>
-      </div>
-    );
-  }
-}

package/typings/tests/styling.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import Dropzone from "../../";
-
-const x = (
-  <Dropzone accept="image/png">
-    {({ isDragActive, isDragReject, acceptedFiles, rejectedFiles }) => {
-      if (isDragActive) {
-        return "This file is authorized";
-      }
-      if (isDragReject) {
-        return "This file is not authorized";
-      }
-      return acceptedFiles.length || rejectedFiles.length
-        ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files`
-        : "Try dropping some files.";
-    }}
-  </Dropzone>
-);