react-dropzone 15.0.0 → 17.0.0

package/styleguide.config.js

@@ -1,107 +0,0 @@
-/* eslint import/no-extraneous-dependencies: 0 */
-const path = require("path");
-const { createConfig, babel, css, devServer } = require("webpack-blocks");
-
-// https://react-styleguidist.js.org/docs/configuration.html
-module.exports = {
-  title: "react-dropzone",
-  styleguideDir: path.join(__dirname, "styleguide"),
-  template: {
-    favicon:
-      "https://github.com/react-dropzone/react-dropzone/raw/master/logo/logo.png",
-  },
-  webpackConfig: createConfig([
-    babel(),
-    css(),
-    devServer({
-      disableHostCheck: true,
-      host: "0.0.0.0",
-    }),
-  ]),
-  exampleMode: "expand",
-  usageMode: "expand",
-  showSidebar: true,
-  serverPort: 8080,
-  moduleAliases: {
-    "react-dropzone": path.resolve(__dirname, "./src"),
-  },
-  require: [path.join(__dirname, "examples/theme.css")],
-  sections: [
-    {
-      name: "",
-      content: "README.md",
-    },
-    // TODO: Figure out how to document the hook
-    // See https://github.com/reactjs/react-docgen/issues/332
-    {
-      name: "Components",
-      components: "./src/index.js",
-    },
-    {
-      name: "Examples",
-      sections: [
-        {
-          name: "Basic example",
-          content: "examples/basic/README.md",
-        },
-        {
-          name: "Event Propagation",
-          content: "examples/events/README.md",
-        },
-        {
-          name: "Forms",
-          content: "examples/forms/README.md",
-        },
-        {
-          name: "Styling Dropzone",
-          content: "examples/styling/README.md",
-        },
-        {
-          name: "Drag Overlay",
-          content: "examples/drag-overlay/README.md",
-        },
-        {
-          name: "Accepting specific file types",
-          content: "examples/accept/README.md",
-        },
-        {
-          name: "Accepting specific number of files",
-          content: "examples/maxFiles/README.md",
-        },
-        {
-          name: "Custom validation",
-          content: "examples/validator/README.md",
-        },
-        {
-          name: "Opening File Dialog Programmatically",
-          content: "examples/file-dialog/README.md",
-        },
-        {
-          name: "Previews",
-          content: "examples/previews/README.md",
-        },
-        {
-          name: "Class Components",
-          content: "examples/class-component/README.md",
-        },
-        {
-          name: "No JSX",
-          content: "examples/no-jsx/README.md",
-        },
-        {
-          name: "Extending Dropzone",
-          content: "examples/plugins/README.md",
-        },
-      ],
-    },
-    {
-      name: "Integrations",
-      sections: [
-        {
-          name: "Pintura",
-          content: "examples/pintura/README.md",
-        },
-      ],
-    },
-  ],
-};

package/testSetup.js

@@ -1,8 +0,0 @@
-// https://www.npmjs.com/package/jest-dom
-require("@testing-library/jest-dom/extend-expect");
-
-Object.defineProperty(global, "isSecureContext", {
-  value: true,
-  writable: true,
-  enumerable: true,
-});

package/typings/.eslintrc

@@ -1,28 +0,0 @@
-{
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "env": {
-    "es6": true,
-    "browser": true
-  },
-  "plugins": [
-    "import",
-    "prettier",
-    "react",
-    "react-hooks",
-    "@typescript-eslint"
-  ],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
-  ],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "rules": {
-    "@typescript-eslint/no-explicit-any": "off"
-  }
-}

package/typings/react-dropzone.d.ts

@@ -1,102 +0,0 @@
-import * as React from "react";
-
-import { FileWithPath } from "file-selector";
-export { FileWithPath };
-export default function Dropzone(
-  props: DropzoneProps & React.RefAttributes<DropzoneRef>
-): React.ReactElement;
-export function useDropzone(options?: DropzoneOptions): DropzoneState;
-
-export interface DropzoneProps extends DropzoneOptions {
-  children?(state: DropzoneState): React.ReactElement;
-}
-
-export enum ErrorCode {
-  FileInvalidType = "file-invalid-type",
-  FileTooLarge = "file-too-large",
-  FileTooSmall = "file-too-small",
-  TooManyFiles = "too-many-files",
-}
-
-export interface FileError {
-  message: string;
-  code: ErrorCode | string;
-}
-
-export interface FileRejection {
-  file: FileWithPath;
-  errors: readonly FileError[];
-}
-
-export type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
-  accept?: Accept;
-  minSize?: number;
-  maxSize?: number;
-  maxFiles?: number;
-  preventDropOnDocument?: boolean;
-  noClick?: boolean;
-  noKeyboard?: boolean;
-  noDrag?: boolean;
-  noDragEventsBubbling?: boolean;
-  disabled?: boolean;
-  onDrop?: <T extends File>(
-    acceptedFiles: T[],
-    fileRejections: FileRejection[],
-    event: DropEvent
-  ) => void;
-  onDropAccepted?: <T extends File>(files: T[], event: DropEvent) => void;
-  onDropRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
-  getFilesFromEvent?: (
-    event: DropEvent
-  ) => Promise<Array<File | DataTransferItem>>;
-  onFileDialogCancel?: () => void;
-  onFileDialogOpen?: () => void;
-  onError?: (err: Error) => void;
-  validator?: <T extends File>(
-    file: T
-  ) => FileError | readonly FileError[] | null;
-  useFsAccessApi?: boolean;
-  autoFocus?: boolean;
-};
-
-export type DropEvent =
-  | React.DragEvent<HTMLElement>
-  | React.ChangeEvent<HTMLInputElement>
-  | DragEvent
-  | Event
-  | Array<FileSystemFileHandle>;
-
-export type DropzoneState = DropzoneRef & {
-  isFocused: boolean;
-  isDragActive: boolean;
-  isDragAccept: boolean;
-  isDragReject: boolean;
-  isDragGlobal: boolean;
-  isFileDialogActive: boolean;
-  acceptedFiles: readonly FileWithPath[];
-  fileRejections: readonly FileRejection[];
-  rootRef: React.RefObject<HTMLElement>;
-  inputRef: React.RefObject<HTMLInputElement>;
-  getRootProps: <T extends DropzoneRootProps>(props?: T) => T;
-  getInputProps: <T extends DropzoneInputProps>(props?: T) => T;
-};
-
-export interface DropzoneRef {
-  open: () => void;
-}
-
-export interface DropzoneRootProps extends React.HTMLAttributes<HTMLElement> {
-  refKey?: string;
-  [key: string]: any;
-}
-
-export interface DropzoneInputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  refKey?: string;
-}
-
-type PropTypes = "multiple" | "onDragEnter" | "onDragOver" | "onDragLeave";
-
-export interface Accept {
-  [key: string]: readonly string[];
-}

package/typings/tests/accept.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import Dropzone from "../../";
-
-export default class Accept extends React.Component {
-  state = {
-    accepted: [],
-    rejected: [],
-  };
-
-  render() {
-    return (
-      <section>
-        <div className="dropzone">
-          <Dropzone
-            accept={{
-              "image/*": [".jpeg", ".png"],
-            }}
-            onDrop={(accepted, rejected) => {
-              this.setState({ accepted, rejected });
-            }}
-          >
-            {({ 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>
-          <h2>Accepted files</h2>
-          <ul>
-            {this.state.accepted.map((f) => (
-              <li key={f.name}>
-                {f.name} - {f.size} bytes
-              </li>
-            ))}
-          </ul>
-          <h2>Rejected files</h2>
-          <ul>
-            {this.state.rejected.map((f) => (
-              <li key={f.name}>
-                {f.name} - {f.size} bytes
-              </li>
-            ))}
-          </ul>
-        </aside>
-      </section>
-    );
-  }
-}

package/typings/tests/all.tsx

@@ -1,46 +0,0 @@
-import React from "react";
-import Dropzone from "../../";
-
-export default class Test extends React.Component {
-  render() {
-    return (
-      <div>
-        <Dropzone
-          onDrop={(acceptedFiles, fileRejections, event) =>
-            console.log(acceptedFiles, fileRejections, event)
-          }
-          onDragEnter={(event) => console.log(event)}
-          onDragOver={(event) => console.log(event)}
-          onDragLeave={(event) => console.log(event)}
-          onDropAccepted={(files, event) => console.log(files, event)}
-          onDropRejected={(files, event) => console.log(files, event)}
-          onFileDialogCancel={() => console.log("onFileDialogCancel invoked")}
-          onFileDialogOpen={() => console.log("onFileDialogOpen invoked")}
-          onError={(e) => console.log(e)}
-          validator={(f) => ({ message: f.name, code: "" })}
-          minSize={2000}
-          maxSize={Infinity}
-          maxFiles={100}
-          preventDropOnDocument
-          noClick={false}
-          noKeyboard={false}
-          noDrag={false}
-          noDragEventsBubbling={false}
-          disabled
-          multiple={false}
-          accept={{
-            "image/*": [".png"],
-          }}
-          useFsAccessApi={false}
-          autoFocus
-        >
-          {({ getRootProps, getInputProps }) => (
-            <div {...getRootProps()}>
-              <input {...getInputProps()} />
-            </div>
-          )}
-        </Dropzone>
-      </div>
-    );
-  }
-}

package/typings/tests/basic.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import Dropzone from "../../";
-import { FileWithPath } from "file-selector";
-
-export default class Basic extends React.Component {
-  state = { files: [] };
-
-  onDrop = (files: FileWithPath[]) => {
-    this.setState({
-      files,
-    });
-  };
-
-  render() {
-    return (
-      <section>
-        <div className="dropzone">
-          <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>
-          <h2>Dropped files</h2>
-          <ul>
-            {this.state.files.map((f) => (
-              <li key={f.name}>
-                {f.name} - {f.size} bytes
-              </li>
-            ))}
-          </ul>
-        </aside>
-      </section>
-    );
-  }
-}
-
-export const optional = (
-  <Dropzone>
-    {({ getRootProps, getInputProps }) => (
-      <div {...getRootProps()}>
-        <input {...getInputProps()} />
-      </div>
-    )}
-  </Dropzone>
-);

package/typings/tests/events.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import Dropzone from "../../";
-
-export class Events extends React.Component {
-  render() {
-    return (
-      <section>
-        <div className="dropzone">
-          <Dropzone
-            onDrop={(acceptedFiles, fileRejections, event) =>
-              console.log(acceptedFiles, fileRejections, event)
-            }
-            onDragEnter={(event) => console.log(event)}
-            onDragOver={(event) => console.log(event)}
-            onDragLeave={(event) => console.log(event)}
-          >
-            {({ 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,20 +0,0 @@
-import React from "react";
-import Dropzone from "../../";
-
-export const dropzone = (
-  <Dropzone
-    onDrop={(files) => console.log(files)}
-    onFileDialogCancel={() => console.log("onFileDialogCancel invoked")}
-    onFileDialogOpen={() => console.log("onFileDialogOpen invoked")}
-  >
-    {({ 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/hook.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { useDropzone, DropzoneProps } from "../../";
-
-export const Dropzone = ({ children, ...opts }: DropzoneProps) => {
-  const { ...state } = useDropzone(opts);
-  return children(state);
-};
-
-<Dropzone>
-  {({ getRootProps, getInputProps }) => (
-    <div {...getRootProps()}>
-      <input {...getInputProps()} />
-    </div>
-  )}
-</Dropzone>;

package/typings/tests/plugin.tsx

@@ -1,87 +0,0 @@
-import React, { Component } from "react";
-import Dropzone from "../../";
-
-export class TestReactDragEvt extends Component {
-  getFiles = async (event: React.DragEvent<HTMLDivElement>) => {
-    const files = Array.from(event.dataTransfer.files);
-    return files;
-  };
-
-  render() {
-    return (
-      <div>
-        <Dropzone getFilesFromEvent={this.getFiles}>
-          {({ getRootProps }) => <div {...getRootProps()} />}
-        </Dropzone>
-      </div>
-    );
-  }
-}
-
-export class TestDataTransferItems extends Component {
-  getFiles = async (event: React.DragEvent<HTMLDivElement>) => {
-    const items = Array.from(event.dataTransfer.items);
-    return items;
-  };
-
-  render() {
-    return (
-      <div>
-        <Dropzone getFilesFromEvent={this.getFiles}>
-          {({ getRootProps }) => <div {...getRootProps()} />}
-        </Dropzone>
-      </div>
-    );
-  }
-}
-
-export class TestNativeDragEventEvt extends Component {
-  getFiles = async (event: DragEvent) => {
-    const files = Array.from(event.dataTransfer.files);
-    return files;
-  };
-
-  render() {
-    return (
-      <div>
-        <Dropzone getFilesFromEvent={this.getFiles}>
-          {({ getRootProps }) => <div {...getRootProps()} />}
-        </Dropzone>
-      </div>
-    );
-  }
-}
-
-export class TestChangeEvt extends Component {
-  getFiles = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(event.target.files);
-    return files;
-  };
-
-  render() {
-    return (
-      <div>
-        <Dropzone getFilesFromEvent={this.getFiles}>
-          {({ getRootProps }) => <div {...getRootProps()} />}
-        </Dropzone>
-      </div>
-    );
-  }
-}
-
-export class TestNativeEvt extends Component {
-  getFiles = async (event: Event) => {
-    const files = Array.from((event.target as HTMLInputElement).files);
-    return files;
-  };
-
-  render() {
-    return (
-      <div>
-        <Dropzone getFilesFromEvent={this.getFiles}>
-          {({ getRootProps }) => <div {...getRootProps()} />}
-        </Dropzone>
-      </div>
-    );
-  }
-}

package/typings/tests/refs.tsx

@@ -1,18 +0,0 @@
-import React, { createRef } from "react";
-import Dropzone, { DropzoneRef } from "../../";
-
-const ref = createRef<DropzoneRef>();
-
-export const dropzone = (
-  <Dropzone ref={ref}>
-    {({ getRootProps, getInputProps }) => (
-      <div {...getRootProps()}>
-        <input {...getInputProps()} />
-        <p>Drop some files here.</p>
-        <button type="button" onClick={ref.current.open}>
-          Open file dialog
-        </button>
-      </div>
-    )}
-  </Dropzone>
-);

package/typings/tests/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "allowSyntheticDefaultImports": true,
-    "declaration": true,
-    "noEmit": true,
-    "jsx": "react",
-    "moduleResolution": "node",
-    "module": "es2015",
-    "target": "esnext",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2015",
-      "dom"
-    ]
-  },
-  "include": [
-    "./*.tsx"
-  ]
-}