react-dropzone 11.5.0 → 11.6.0

package/src/utils/index.js

@@ -26,14 +26,14 @@ export const getInvalidTypeRejectionErr = accept => {
 export const getTooLargeRejectionErr = maxSize => {
   return {
     code: FILE_TOO_LARGE,
-    message: `File is larger than ${maxSize} bytes`
+    message: `File is larger than ${maxSize} ${maxSize === 1 ? 'byte' : 'bytes'}`
   }
 }
 
 export const getTooSmallRejectionErr = minSize => {
   return {
     code: FILE_TOO_SMALL,
-    message: `File is smaller than ${minSize} bytes`
+    message: `File is smaller than ${minSize} ${minSize === 1 ? 'byte' : 'bytes'}`
   }
 }
 
@@ -66,8 +66,8 @@ function isDefined(value) {
   return value !== undefined && value !== null
 }
 
-export function allFilesAccepted({ files, accept, minSize, maxSize, multiple, maxFiles }) {
-  if ((!multiple && files.length > 1) || (multiple && maxFiles >= 1 &&  files.length > maxFiles) ) {
+export function allFilesAccepted({files, accept, minSize, maxSize, multiple, maxFiles}) {
+  if ((!multiple && files.length > 1) || (multiple && maxFiles >= 1 && files.length > maxFiles)) {
     return false;
   }
 
@@ -142,3 +142,37 @@ export function composeEventHandlers(...fns) {
       return isPropagationStopped(event)
     })
 }
+
+/**
+ * canUseFileSystemAccessAPI checks if the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)
+ * is supported by the browser.
+ * @returns {boolean}
+ */
+export function canUseFileSystemAccessAPI() {
+  return 'showOpenFilePicker' in window;
+}
+
+/**
+ * filePickerOptionsTypes returns the {types} option for https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
+ * based on the accept attr (see https://github.com/react-dropzone/attr-accept)
+ * E.g: converts ['image/*', 'text/*'] to {'image/*': [], 'text/*': []}
+ * @param {string|string[]} accept
+ */
+export function filePickerOptionsTypes(accept) {
+  accept = typeof accept === 'string' ? accept.split(',') : accept
+  return [{
+    description: 'everything',
+    // TODO: Need to handle filtering more elegantly than this!
+    accept: Array.isArray(accept)
+      // Accept just MIME types as per spec
+      // NOTE: accept can be https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
+      ? accept.filter(item =>
+        item === 'audio/*' ||
+        item === 'video/*' ||
+        item === 'image/*' ||
+        item === 'text/*' ||
+        /\w+\/[-+.\w]+/g.test(item)
+      ).reduce((a, b) => ({...a, [b]: []}), {})
+      : {},
+  }];
+}

package/src/utils/index.spec.js

@@ -2,12 +2,10 @@ beforeEach(() => {
   jest.resetModules()
 })
 
-
 describe('fileMatchSize()', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('should return true if the file object doesn\'t have a {size} property', () => {
@@ -42,9 +40,8 @@ describe('fileMatchSize()', () => {
 
 describe('isIeOrEdge', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('should return true for IE10', () => {
@@ -89,9 +86,8 @@ describe('isPropagationStopped()', () => {
   const trueFn = jest.fn(() => true)
 
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('should return result of isPropagationStopped() if isPropagationStopped exists', () => {
@@ -109,9 +105,8 @@ describe('isPropagationStopped()', () => {
 
 describe('isEvtWithFiles()', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('should return true if some dragged types are files', () => {
@@ -145,9 +140,8 @@ describe('isEvtWithFiles()', () => {
 
 describe('composeEventHandlers', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('returns a fn', () => {
@@ -193,9 +187,8 @@ describe('composeEventHandlers', () => {
 
 describe('fileAccepted', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('accepts bogus firefox file', () => {
@@ -232,9 +225,8 @@ it('rejects file when single accept criteria as array', () => {
 
 describe('allFilesAccepted()', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
   it('rejects file when multiple accept criteria', () => {
     const files = [createFile('hamster.pdf', 100, 'application/pdf'),createFile('fish.pdf', 100, 'application/pdf')];
@@ -242,29 +234,18 @@ describe('allFilesAccepted()', () => {
     expect(utils.allFilesAccepted({ files, multiple: true})).toEqual(true)
     expect(utils.allFilesAccepted({ files, multiple: true, maxFiles: 10 })).toEqual(true)
     expect(utils.allFilesAccepted({ files, multiple: false, maxFiles: 10 })).toEqual(false)
-    expect(utils.allFilesAccepted({ files, multiple: true, accept:'image/jpeg' })).toEqual(false) 
-    expect(utils.allFilesAccepted({ files: images, multiple: true,accept:'image/*' })).toEqual(true) 
+    expect(utils.allFilesAccepted({ files, multiple: true, accept:'image/jpeg' })).toEqual(false)
+    expect(utils.allFilesAccepted({ files: images, multiple: true,accept:'image/*' })).toEqual(true)
     expect(utils.allFilesAccepted({ files, multiple: true, minSize: 110 })).toEqual(false)
     expect(utils.allFilesAccepted({ files, multiple: true, maxSize: 99 })).toEqual(false)
     expect(utils.allFilesAccepted({ files, multiple: true, maxFiles: 1 })).toEqual(false)
   })
 })
 
-function createFile(name, size, type) {
-  const file = new File([], name, { type })
-  Object.defineProperty(file, 'size', {
-    get() {
-      return size
-    }
-  })
-  return file
-}
-
 describe('ErrorCode', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('should exist and have known error code properties', () => {
@@ -275,3 +256,85 @@ describe('ErrorCode', () => {
   })
 })
 
+describe('canUseFileSystemAccessAPI()', () => {
+  let utils
+  beforeEach(async () => {
+    utils = await import('./index')
+  })
+
+  it('should return false if not', () => {
+    expect(utils.canUseFileSystemAccessAPI()).toBe(false)
+  })
+
+  it('should return true if yes', () => {
+    // TODO: If we use these in other tests, restore once test is done
+    window.showOpenFilePicker = jest.fn()
+    expect(utils.canUseFileSystemAccessAPI()).toBe(true)
+  })
+})
+
+describe('filePickerOptionsTypes()', () => {
+  let utils
+  beforeEach(async () => {
+    utils = await import('./index')
+  })
+
+  it('should return proper types when the arg is a MIME type', () => {
+    expect(utils.filePickerOptionsTypes('application/zip')).toEqual([{
+      description: 'everything',
+      accept: {'application/zip': []}
+    }])
+  })
+
+  it('should return proper types when the arg is an array of MIME types', () => {
+    expect(utils.filePickerOptionsTypes(['application/zip', 'application/json'])).toEqual([{
+      description: 'everything',
+      accept: {
+        'application/zip': [],
+        'application/json': []
+      }
+    }])
+  })
+
+  it("should exclude anything that's not a MIME type", () => {
+    expect(utils.filePickerOptionsTypes(['audio/*', 'video/*', 'image/*', '.txt', 'text/*'])).toEqual([{
+      description: 'everything',
+      accept: {
+        'audio/*': [],
+        'video/*': [],
+        'image/*': [],
+        'text/*': [],
+      }
+    }])
+  })
+
+  it("should work with comma separated string of MIME types", () => {
+    expect(utils.filePickerOptionsTypes('audio/*,video/*,image/*,.txt,text/*,application/zip')).toEqual([{
+      description: 'everything',
+      accept: {
+        'audio/*': [],
+        'video/*': [],
+        'image/*': [],
+        'text/*': [],
+        'application/zip': []
+      }
+    }])
+  })
+
+  it('should return empty otherwise', () => {
+    expect(utils.filePickerOptionsTypes('')).toEqual([{
+      description: 'everything',
+      accept: {}
+    }])
+  })
+})
+
+function createFile(name, size, type) {
+  const file = new File([], name, { type })
+  Object.defineProperty(file, 'size', {
+    get() {
+      return size
+    }
+  })
+  return file
+}

package/styleguide.config.js

@@ -19,11 +19,9 @@ module.exports = {
   serverPort: 8080,
   moduleAliases: {
     'react-dropzone': path.resolve(__dirname, './src'),
-    'doka': path.resolve(__dirname, './vendor/doka/doka.esm.min.js')
   },
   require: [
     path.join(__dirname, 'examples/theme.css'),
-    path.join(__dirname, 'vendor/doka/doka.min.css'),
   ],
   sections: [
     {
@@ -85,8 +83,8 @@ module.exports = {
       name: 'Integrations',
       sections: [
         {
-          name: 'Doka',
-          content: 'examples/doka/README.md'
+          name: 'Pintura',
+          content: 'examples/pintura/README.md'
         }
       ]
     }

package/typings/.eslintrc

@@ -0,0 +1,28 @@
+{
+  "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",
+    "prettier"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off"
+  }
+}

package/examples/doka/README.md

@@ -1,140 +0,0 @@
-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/tslint.json

@@ -1,101 +0,0 @@
-{
-  "jsRules": {
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
-    ],
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "no-duplicate-variable": true,
-    "no-eval": true,
-    "no-trailing-whitespace": true,
-    "no-unsafe-finally": true,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "double"
-    ],
-    "semicolon": [
-      true,
-      "always"
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "variable-name": [
-      true,
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator",
-      "check-type"
-    ]
-  },
-  "rules": {
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
-    ],
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "no-eval": true,
-    "no-internal-module": true,
-    "no-trailing-whitespace": true,
-    "no-unsafe-finally": true,
-    "no-var-keyword": true,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "double"
-    ],
-    "semicolon": [
-      true,
-      "always"
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "variable-name": [
-      true,
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator",
-      "check-type"
-    ]
-  }
-}