react-dropzone 14.4.1 → 16.0.0

package/examples/plugins/README.md

@@ -1,55 +0,0 @@
-The hook accepts a `getFilesFromEvent` prop that enhances the handling of dropped file system objects and allows more flexible use of them e.g. passing a function that accepts drop event of a folder and resolves it to an array of files adds plug-in functionality of folders drag-and-drop.
-
-Though, note that the provided `getFilesFromEvent` fn must return a `Promise` with a list of `File` objects (or `DataTransferItem` of `{kind: 'file'}` when data cannot be accessed).
-Otherwise, the results will be discarded and none of the drag events callbacks will be invoked.
-
-In case you need to extend the `File` with some additional properties, you should use [Object.defineProperty()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) so that the result will still pass through our filter:
-
-```jsx harmony
-import React from 'react';
-import {useDropzone} from 'react-dropzone';
-
-function Plugin(props) {
-  const {acceptedFiles, getRootProps, getInputProps} = useDropzone({
-    getFilesFromEvent: event => myCustomFileGetter(event)
-  });
-
-  const files = acceptedFiles.map(f => (
-    <li key={f.name}>
-      {f.name} has <strong>myProps</strong>: {f.myProp === true ? 'YES' : ''}
-    </li>
-  ));
-
-  return (
-    <section className="container">
-      <div {...getRootProps({className: 'dropzone'})}>
-        <input {...getInputProps()} />
-        <p>Drag 'n' drop some files here, or click to select files</p>
-      </div>
-      <aside>
-        <h4>Files</h4>
-        <ul>{files}</ul>
-      </aside>
-    </section>
-  );
-}
-
-async function myCustomFileGetter(event) {
-  const files = [];
-  const fileList = event.dataTransfer ? event.dataTransfer.files : event.target.files;
-
-  for (var i = 0; i < fileList.length; i++) {
-    const file = fileList.item(i);
-    
-    Object.defineProperty(file, 'myProp', {
-      value: true
-    });
-
-    files.push(file);
-  }
-
-  return files;
-}
-
-<Plugin />
-```

package/examples/previews/README.md

@@ -1,86 +0,0 @@
-Starting with version 7.0.0, the `{preview}` property generation on the [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects and the `{disablePreview}` property on the `<Dropzone>` have been removed.
-
-If you need the `{preview}`, it can be easily achieved in the `onDrop()` callback:
-
-```jsx harmony
-import React, {useEffect, useState} from 'react';
-import {useDropzone} from 'react-dropzone';
-
-const thumbsContainer = {
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
-  marginTop: 16
-};
-
-const thumb = {
-  display: 'inline-flex',
-  borderRadius: 2,
-  border: '1px solid #eaeaea',
-  marginBottom: 8,
-  marginRight: 8,
-  width: 100,
-  height: 100,
-  padding: 4,
-  boxSizing: 'border-box'
-};
-
-const thumbInner = {
-  display: 'flex',
-  minWidth: 0,
-  overflow: 'hidden'
-};
-
-const img = {
-  display: 'block',
-  width: 'auto',
-  height: '100%'
-};
-
-
-function Previews(props) {
-  const [files, setFiles] = useState([]);
-  const {getRootProps, getInputProps} = useDropzone({
-    accept: {
-      'image/*': []
-    },
-    onDrop: acceptedFiles => {
-      setFiles(acceptedFiles.map(file => Object.assign(file, {
-        preview: URL.createObjectURL(file)
-      })));
-    }
-  });
-  
-  const thumbs = files.map(file => (
-    <div style={thumb} key={file.name}>
-      <div style={thumbInner}>
-        <img
-          src={file.preview}
-          style={img}
-          // Revoke data uri after image is loaded
-          onLoad={() => { URL.revokeObjectURL(file.preview) }}
-        />
-      </div>
-    </div>
-  ));
-
-  useEffect(() => {
-    // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
-    return () => files.forEach(file => URL.revokeObjectURL(file.preview));
-  }, [files]);
-
-  return (
-    <section className="container">
-      <div {...getRootProps({className: 'dropzone'})}>
-        <input {...getInputProps()} />
-        <p>Drag 'n' drop some files here, or click to select files</p>
-      </div>
-      <aside style={thumbsContainer}>
-        {thumbs}
-      </aside>
-    </section>
-  );
-}
-
-<Previews />
-```

package/examples/styling/README.md

@@ -1,126 +0,0 @@
-The hook fn doesn't set any styles on either of the prop fns (`getRootProps()`/`getInputProps()`).
-
-### Using inline styles
-
-```jsx harmony
-import React, {useMemo} from 'react';
-import {useDropzone} from 'react-dropzone';
-
-const baseStyle = {
-  flex: 1,
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  padding: '20px',
-  borderWidth: 2,
-  borderRadius: 2,
-  borderColor: '#eeeeee',
-  borderStyle: 'dashed',
-  backgroundColor: '#fafafa',
-  color: '#bdbdbd',
-  outline: 'none',
-  transition: 'border .24s ease-in-out'
-};
-
-const focusedStyle = {
-  borderColor: '#2196f3'
-};
-
-const acceptStyle = {
-  borderColor: '#00e676'
-};
-
-const rejectStyle = {
-  borderColor: '#ff1744'
-};
-
-function StyledDropzone(props) {
-  const {
-    getRootProps,
-    getInputProps,
-    isFocused,
-    isDragAccept,
-    isDragReject
-  } = useDropzone({accept: {'image/*': []}});
-
-  const style = useMemo(() => ({
-    ...baseStyle,
-    ...(isFocused ? focusedStyle : {}),
-    ...(isDragAccept ? acceptStyle : {}),
-    ...(isDragReject ? rejectStyle : {})
-  }), [
-    isFocused,
-    isDragAccept,
-    isDragReject
-  ]);
-
-  return (
-    <div className="container">
-      <div {...getRootProps({style})}>
-        <input {...getInputProps()} />
-        <p>Drag 'n' drop some files here, or click to select files</p>
-      </div>
-    </div>
-  );
-}
-
-<StyledDropzone />
-```
-
-### Using styled-components
-
-```jsx harmony
-import React from 'react';
-import {useDropzone} from 'react-dropzone';
-import styled from 'styled-components';
-
-const getColor = (props) => {
-  if (props.isDragAccept) {
-      return '#00e676';
-  }
-  if (props.isDragReject) {
-      return '#ff1744';
-  }
-  if (props.isFocused) {
-      return '#2196f3';
-  }
-  return '#eeeeee';
-}
-
-const Container = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
-  border-width: 2px;
-  border-radius: 2px;
-  border-color: ${props => getColor(props)};
-  border-style: dashed;
-  background-color: #fafafa;
-  color: #bdbdbd;
-  outline: none;
-  transition: border .24s ease-in-out;
-`;
-
-function StyledDropzone(props) {
-  const {
-    getRootProps,
-    getInputProps,
-    isFocused,
-    isDragAccept,
-    isDragReject
-  } = useDropzone({accept: {'image/*': []}});
-  
-  return (
-    <div className="container">
-      <Container {...getRootProps({isFocused, isDragAccept, isDragReject})}>
-        <input {...getInputProps()} />
-        <p>Drag 'n' drop some files here, or click to select files</p>
-      </Container>
-    </div>
-  );
-}
-
-<StyledDropzone />
-```

package/examples/theme.css

@@ -1,37 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  font-family: sans-serif;
-}
-
-.container > p {
-  font-size: 1rem;
-}
-
-.container > em {
-  font-size: .8rem;
-}
-
-.dropzone {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
-  border-width: 2px;
-  border-radius: 2px;
-  border-color: #eeeeee;
-  border-style: dashed;
-  background-color: #fafafa;
-  color: #bdbdbd;
-  outline: none;
-  transition: border .24s ease-in-out;
-}
-
-.dropzone:focus {
-  border-color: #2196f3;
-}
-
-.dropzone.disabled {
-  opacity: 0.6;
-}

package/examples/validator/README.md

@@ -1,68 +0,0 @@
-By providing `validator` prop you can specify custom validation for files.
-
-The value must be a function that accepts File object and returns null if file should be accepted or error object/array of error objects if file should be rejected.
-
-```jsx harmony
-import React from 'react';
-import {useDropzone} from 'react-dropzone';
-
-const maxLength = 20;
-
-function nameLengthValidator(file) {
-  if (file.name.length > maxLength) {
-    return {
-      code: "name-too-large",
-      message: `Name is larger than ${maxLength} characters`
-    };
-  }
-
-  return null
-}
-
-function CustomValidation(props) {
-  const {
-    acceptedFiles,
-    fileRejections,
-    getRootProps,
-    getInputProps
-  } = useDropzone({
-    validator: nameLengthValidator
-  });
-
-  const acceptedFileItems = acceptedFiles.map(file => (
-    <li key={file.path}>
-      {file.path} - {file.size} bytes
-    </li>
-  ));
-
-  const fileRejectionItems = fileRejections.map(({ file, errors }) => (
-    <li key={file.path}>
-      {file.path} - {file.size} bytes
-      <ul>
-        {errors.map(e => (
-          <li key={e.code}>{e.message}</li>
-        ))}
-      </ul>
-    </li>
-  ));
-
-  return (
-    <section className="container">
-      <div {...getRootProps({ className: 'dropzone' })}>
-        <input {...getInputProps()} />
-        <p>Drag 'n' drop some files here, or click to select files</p>
-        <em>(Only files with name less than 20 characters will be accepted)</em>
-      </div>
-      <aside>
-        <h4>Accepted files</h4>
-        <ul>{acceptedFileItems}</ul>
-        <h4>Rejected files</h4>
-        <ul>{fileRejectionItems}</ul>
-      </aside>
-    </section>
-  );
-}
-
-<CustomValidation />
-```
-

package/rollup.config.js

@@ -1,33 +0,0 @@
-const { nodeResolve } = require("@rollup/plugin-node-resolve");
-const commonjs = require("@rollup/plugin-commonjs");
-const { babel } = require("@rollup/plugin-babel");
-const { terser } = require("rollup-plugin-terser");
-
-const umdGlobals = {
-  react: "React",
-  "prop-types": "PropTypes",
-};
-
-module.exports = [
-  {
-    input: "./src/index.js",
-    output: {
-      file: "dist/index.js",
-      format: "umd",
-      name: "reactDropzone",
-      globals: umdGlobals,
-      sourcemap: "inline",
-      exports: "named",
-    },
-    external: Object.keys(umdGlobals),
-    plugins: [
-      nodeResolve(),
-      commonjs({ include: "**/node_modules/**" }),
-      babel({
-        exclude: "**/node_modules/**",
-        babelHelpers: "bundled",
-      }),
-      terser(),
-    ],
-  },
-];

package/src/.eslintrc

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

package/src/__snapshots__/index.spec.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`useDropzone() hook behavior renders the root and input nodes with the necessary props 1`] = `"<div role=\\"presentation\\" tabindex=\\"0\\"><input multiple=\\"\\" type=\\"file\\" style=\\"border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;\\" tabindex=\\"-1\\"></div>"`;