react-dropzone 11.2.0 → 11.2.4

package/examples/doka/README.md

@@ -0,0 +1,140 @@
+If you'd like to integrate the dropzone with the [doka](https://pqina.nl/doka/?ref=react-dropzone) image editor, you just need to pass either of the selected images to the `create()` method exported by doka:
+
+```jsx harmony
+import React, {useEffect, useState} from 'react';
+import {useDropzone} from 'react-dropzone';
+
+import {create} from 'doka';
+
+const thumbsContainer = {
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "wrap",
+  marginTop: 16,
+  padding: 20
+};
+
+const thumb = {
+  position: "relative",
+  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%"
+};
+
+const thumbButton = {
+  position: "absolute",
+  right: 10,
+  bottom: 10,
+  background: "rgba(0,0,0,.8)",
+  color: "#fff",
+  border: 0,
+  borderRadius: ".325em",
+  cursor: "pointer"
+};
+
+const editImage = (image, done) => {
+  const imageFile = image.doka ? image.doka.file : image;
+  const imageState = image.doka ? image.doka.data : {};
+  create({
+    // recreate previous state
+    ...imageState,
+
+    // load original image file
+    src: imageFile,
+    outputData: true,
+
+    onconfirm: ({ file, data }) => {
+      Object.assign(file, {
+        doka: { file: imageFile, data }
+      });
+      done(file);
+    }
+  });
+};
+
+function Doka(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, index) => (
+    <div style={thumb} key={file.name}>
+      <div style={thumbInner}>
+        <img src={file.preview} style={img} alt="" />
+      </div>
+      <button
+        style={thumbButton}
+        onClick={() =>
+          editImage(file, (output) => {
+            const updatedFiles = [...files];
+
+            // replace original image with new image
+            updatedFiles[index] = output;
+
+            // revoke preview URL for old image
+            if (file.preview) URL.revokeObjectURL(file.preview);
+
+            // set new preview URL
+            Object.assign(output, {
+              preview: URL.createObjectURL(output)
+            });
+
+            // update view
+            setFiles(updatedFiles);
+          })
+        }
+      >
+        edit
+      </button>
+    </div>
+  ));
+
+  useEffect(
+    () => () => {
+      // Make sure to revoke the data uris to avoid memory leaks
+      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>
+  );
+}
+
+<Doka />
+```

package/package.json

@@ -90,74 +90,75 @@
     "react": ">= 16.8"
   },
   "dependencies": {
-    "attr-accept": "^2.0.0",
-    "file-selector": "^0.1.12",
+    "attr-accept": "^2.2.1",
+    "file-selector": "^0.2.2",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.6.4",
-    "@babel/core": "^7.6.4",
-    "@babel/plugin-external-helpers": "^7.2.0",
-    "@babel/plugin-proposal-export-default-from": "^7.5.2",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
-    "@babel/plugin-proposal-pipeline-operator": "^7.5.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
-    "@babel/plugin-proposal-do-expressions": "^7.6.0",
-    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/preset-react": "^7.6.3",
-    "@babel/register": "^7.6.2",
-    "@commitlint/cli": "^8.2.0",
-    "@commitlint/config-angular": "^8.2.0",
-    "@commitlint/prompt": "^8.2.0",
-    "@commitlint/prompt-cli": "^8.2.0",
-    "@size-limit/preset-small-lib": "^2.1.6",
-    "@testing-library/dom": "^6.5.0",
-    "@testing-library/jest-dom": "^4.1.0",
-    "@testing-library/react": "^9.3.0",
-    "@testing-library/react-hooks": "^2.0.3",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
+    "@babel/plugin-external-helpers": "^7.10.4",
+    "@babel/plugin-proposal-do-expressions": "^7.10.4",
+    "@babel/plugin-proposal-export-default-from": "^7.10.4",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.11.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.10.5",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/register": "^7.11.5",
+    "@commitlint/cli": "^9.1.2",
+    "@commitlint/config-angular": "^9.1.2",
+    "@commitlint/prompt": "^9.1.2",
+    "@commitlint/prompt-cli": "^9.1.2",
+    "@size-limit/preset-small-lib": "^4.5.7",
+    "@testing-library/dom": "^7.24.1",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.0.2",
+    "@testing-library/react-hooks": "^3.4.1",
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
     "babel-eslint": "10.x",
-    "babel-jest": "^24.9.0",
+    "babel-jest": "^26.3.0",
     "babel-plugin-add-module-exports": "^1.0.2",
-    "babel-plugin-dynamic-import-node": "^2.3.0",
-    "commitizen": "^3.1.2",
-    "cross-env": "^6.0.3",
-    "eslint": "6.x",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "commitizen": "^4.2.1",
+    "cross-env": "^7.0.2",
+    "eslint": "7.x",
     "eslint-config-okonet": "^7.0.2",
     "eslint-config-prettier": "6.x",
     "eslint-plugin-import": "2.x",
     "eslint-plugin-jsx-a11y": "6.x",
-    "eslint-plugin-node": "10.x",
+    "eslint-plugin-node": "11.x",
     "eslint-plugin-prettier": "3.x",
     "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "2.x",
-    "husky": "^3.0.8",
-    "imagemin-cli": "^5.0.0",
-    "imagemin-pngquant": "^8.0.0",
-    "jest": "^24.9.0",
-    "lint-staged": "^9.4.2",
-    "markdownlint-cli": "^0.18.0",
+    "eslint-plugin-react-hooks": "4.x",
+    "husky": "^4.2.5",
+    "imagemin-cli": "^6.0.0",
+    "imagemin-pngquant": "^9.0.0",
+    "jest": "^26.4.2",
+    "lint-staged": "^10.3.0",
+    "markdownlint-cli": "^0.23.2",
     "prettier": "*",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-styleguidist": "^9.1.16",
-    "react-test-renderer": "^16.9.0",
-    "rimraf": "^3.0.0",
-    "rollup": "^1.23.1",
-    "rollup-plugin-babel": "^4.3.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-styleguidist": "^11.0.10",
+    "react-test-renderer": "^16.13.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.26.10",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-uglify": "^6.0.3",
-    "styled-components": "^4.4.0",
-    "webpack-blocks": "^2.0.1",
-    "sinon": "^3.2.1",
-    "style-loader": "^1.0.0",
-    "tslint": "^5.20.0",
-    "typescript": "^3.2.4",
-    "webpack": "^4.41.1"
+    "rollup-plugin-uglify": "^6.0.4",
+    "sinon": "^9.0.3",
+    "size-limit": "^4.5.7",
+    "style-loader": "^1.2.1",
+    "styled-components": "^5.2.0",
+    "tslint": "^6.1.3",
+    "typescript": "^4.0.2",
+    "webpack": "^4.44.1",
+    "webpack-blocks": "^2.1.0"
   },
   "typings": "typings/react-dropzone.d.ts",
   "config": {
@@ -165,8 +166,11 @@
       "path": "@commitlint/prompt"
     }
   },
-  "version": "11.2.0",
+  "version": "11.2.4",
   "engines": {
-    "node": ">= 8"
-  }
+    "node": ">= 10"
+  },
+  "browserslist": [
+    "defaults"
+  ]
 }

package/src/index.js

@@ -47,6 +47,24 @@ const Dropzone = forwardRef(({ children, ...params }, ref) => {
 })
 
 Dropzone.displayName = 'Dropzone'
+
+// Add default props for react-docgen
+const defaultProps = {
+  disabled: false,
+  getFilesFromEvent: fromEvent,
+  maxSize: Infinity,
+  minSize: 0,
+  multiple: true,
+  maxFiles: 0,
+  preventDropOnDocument: true,
+  noClick: false,
+  noKeyboard: false,
+  noDrag: false,
+  noDragEventsBubbling: false
+}
+
+Dropzone.defaultProps = defaultProps
+
 Dropzone.propTypes = {
   /**
    * Render function that exposes the dropzone state and prop getter fns
@@ -360,27 +378,32 @@ const initialState = {
  *
  * @returns {DropzoneState}
  */
-export function useDropzone({
-  accept,
-  disabled = false,
-  getFilesFromEvent = fromEvent,
-  maxSize = Infinity,
-  minSize = 0,
-  multiple = true,
-  maxFiles = 0,
-  onDragEnter,
-  onDragLeave,
-  onDragOver,
-  onDrop,
-  onDropAccepted,
-  onDropRejected,
-  onFileDialogCancel,
-  preventDropOnDocument = true,
-  noClick = false,
-  noKeyboard = false,
-  noDrag = false,
-  noDragEventsBubbling = false
-} = {}) {
+export function useDropzone(options = {}) {
+  const {
+    accept,
+    disabled,
+    getFilesFromEvent,
+    maxSize,
+    minSize,
+    multiple,
+    maxFiles,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    onFileDialogCancel,
+    preventDropOnDocument,
+    noClick,
+    noKeyboard,
+    noDrag,
+    noDragEventsBubbling
+  } = {
+    ...defaultProps,
+    ...options
+  }
+
   const rootRef = useRef(null)
   const inputRef = useRef(null)
 
@@ -634,6 +657,7 @@ export function useDropzone({
       accept,
       minSize,
       maxSize,
+      maxFiles,
       getFilesFromEvent,
       onDrop,
       onDropAccepted,
@@ -728,7 +752,7 @@ export function useDropzone({
   )
 
   const fileCount = draggedFiles.length
-  const isDragAccept = fileCount > 0 && allFilesAccepted({ files: draggedFiles, accept, minSize, maxSize, multiple })
+  const isDragAccept = fileCount > 0 && allFilesAccepted({ files: draggedFiles, accept, minSize, maxSize, multiple, maxFiles })
   const isDragReject = fileCount > 0 && !isDragAccept
 
   return {