react-dropzone - npm Package Compare versions

Comparing version 8.1.0 to 8.2.0

dist/es/index.js

@@ -20,4 +20,6 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 import React from 'react';
+import { fromEvent } from 'file-selector';
 import PropTypes from 'prop-types';
-import { isDragDataWithFiles, supportMultiple, fileAccepted, allFilesAccepted, fileMatchSize, onDocumentDragOver, getDataTransferItems as defaultGetDataTransferItem, isIeOrEdge, composeEventHandlers, isPropagationStopped, isDefaultPrevented } from './utils';
+import deprecated from 'prop-types-extra/lib/deprecated';
+import { isDragDataWithFiles, supportMultiple, fileAccepted, allFilesAccepted, fileMatchSize, onDocumentDragOver, isIeOrEdge, composeEventHandlers, isPropagationStopped, isDefaultPrevented } from './utils';
 
@@ -445,4 +447,6 @@ var Dropzone = function (_React$Component) {
    * Disallow clicking on the dropzone container to open file dialog
+   * @deprecated Use onClick={evt => evt.preventDefault()} to prevent the default behaviour (open the file select dialog).
+   * This prop will be removed in the next major version.
    */
-  disableClick: PropTypes.bool,
+  disableClick: deprecated(PropTypes.bool, 'Use onClick={evt => evt.preventDefault()} instead. This prop will be removed in the next major version'),
 
@@ -581,3 +585,3 @@ /**
   minSize: 0,
-  getDataTransferItems: defaultGetDataTransferItem
+  getDataTransferItems: fromEvent
 };

dist/es/utils/index.js

@@ -7,24 +7,2 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
-export function getDataTransferItems(event) {
-  var dataTransferItemsList = [];
-  if (event.dataTransfer) {
-    var dt = event.dataTransfer;
-
-    // NOTE: Only the 'drop' event has access to DataTransfer.files,
-    // otherwise it will always be empty
-    if (dt.files && dt.files.length) {
-      dataTransferItemsList = dt.files;
-    } else if (dt.items && dt.items.length) {
-      // During the drag even the dataTransfer.files is null
-      // but Chrome implements some drag store, which is accesible via dataTransfer.items
-      dataTransferItemsList = dt.items;
-    }
-  } else if (event.target && event.target.files) {
-    dataTransferItemsList = event.target.files;
-  }
-
-  // Convert from DataTransferItemsList to the native Array
-  return Array.prototype.slice.call(dataTransferItemsList);
-}
-
 // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
@@ -31,0 +9,0 @@ // that MIME type will always be accepted

examples/Basic/Readme.md

@@ -1,4 +0,6 @@
-By default, Dropzone just renders provided children without applying any styles.  
+By default, Dropzone just renders provided children without applying any styles.
 
+Furthermore, Dropzone supports folders drag 'n' drop. See [file-selector](https://github.com/react-dropzone/file-selector) for more info about supported browsers.
 
+
 ```jsx harmony
@@ -5,0 +7,0 @@ class Basic extends React.Component {

package.json

@@ -28,7 +28,7 @@ {
       "path": "dist/index.js",
-      "limit": "6 KB"
+      "limit": "7 KB"
     },
     {
       "path": "dist/es/index.js",
-      "limit": "6 KB"
+      "limit": "7 KB"
     }
@@ -86,3 +86,5 @@ ],
     "attr-accept": "^1.1.3",
-    "prop-types": "^15.6.2"
+    "file-selector": "^0.1.8",
+    "prop-types": "^15.6.2",
+    "prop-types-extra": "^1.1.0"
   },
@@ -119,3 +121,2 @@ "devDependencies": {
     "eslint-plugin-react": "7.x",
-    "file-selector": "^0.1.3",
     "husky": "^0.14.3",
@@ -154,3 +155,3 @@ "imagemin-cli": "^3.0.0",
   },
-  "version": "8.1.0",
+  "version": "8.2.0",
   "engines": {
@@ -157,0 +158,0 @@ "node": ">= 6"

src/index.js

 /* eslint prefer-template: 0 */
 
 import React from 'react'
+import { fromEvent } from 'file-selector'
 import PropTypes from 'prop-types'
+import deprecated from 'prop-types-extra/lib/deprecated'
 import {
@@ -12,3 +14,2 @@ isDragDataWithFiles,
   onDocumentDragOver,
-  getDataTransferItems as defaultGetDataTransferItem,
   isIeOrEdge,
@@ -440,4 +441,9 @@ composeEventHandlers,
    * Disallow clicking on the dropzone container to open file dialog
+   * @deprecated Use onClick={evt => evt.preventDefault()} to prevent the default behaviour (open the file select dialog).
+   * This prop will be removed in the next major version.
    */
-  disableClick: PropTypes.bool,
+  disableClick: deprecated(
+    PropTypes.bool,
+    'Use onClick={evt => evt.preventDefault()} instead. This prop will be removed in the next major version'
+  ),
 
@@ -576,3 +582,3 @@ /**
   minSize: 0,
-  getDataTransferItems: defaultGetDataTransferItem
+  getDataTransferItems: fromEvent
 }

src/utils/index.js

@@ -8,24 +8,2 @@ import accepts from 'attr-accept'
 
-export function getDataTransferItems(event) {
-  let dataTransferItemsList = []
-  if (event.dataTransfer) {
-    const dt = event.dataTransfer
-
-    // NOTE: Only the 'drop' event has access to DataTransfer.files,
-    // otherwise it will always be empty
-    if (dt.files && dt.files.length) {
-      dataTransferItemsList = dt.files
-    } else if (dt.items && dt.items.length) {
-      // During the drag even the dataTransfer.files is null
-      // but Chrome implements some drag store, which is accesible via dataTransfer.items
-      dataTransferItemsList = dt.items
-    }
-  } else if (event.target && event.target.files) {
-    dataTransferItemsList = event.target.files
-  }
-
-  // Convert from DataTransferItemsList to the native Array
-  return Array.prototype.slice.call(dataTransferItemsList)
-}
-
 // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
@@ -32,0 +10,0 @@ // that MIME type will always be accepted

src/utils/index.spec.js

 import {
-  getDataTransferItems,
   isIeOrEdge,
@@ -11,97 +10,2 @@ isKindFile,
 
-const files = [
-  {
-    name: 'file1.pdf',
-    size: 1111,
-    type: 'application/pdf'
-  },
-  {
-    name: 'cats.gif',
-    size: 1234,
-    type: 'image/gif'
-  },
-  {
-    name: 'dogs.jpg',
-    size: 2345,
-    type: 'image/jpeg'
-  }
-]
-
-const fileItems = [
-  {
-    kind: 'file',
-    type: 'application/json'
-  }
-]
-
-describe('getDataTransferItems', () => {
-  it('should return an array', () => {
-    const res = getDataTransferItems({})
-    expect(res).toBeInstanceOf(Array)
-    expect(res).toHaveLength(0)
-  })
-
-  it('should get dataTransfer before using target', () => {
-    const event = {
-      target: {
-        files
-      },
-      dataTransfer: {
-        files
-      }
-    }
-    const res = getDataTransferItems(event)
-    expect(res).toBeInstanceOf(Array)
-    expect(res).toHaveLength(3)
-  })
-
-  it('should use dataTransfer.items if files is not defined', () => {
-    const event = {
-      target: {
-        files: [{}]
-      },
-      dataTransfer: {
-        items: fileItems
-      }
-    }
-    const res = getDataTransferItems(event)
-    expect(res).toBeInstanceOf(Array)
-    expect(res).toHaveLength(1)
-  })
-
-  it('should use event.target if dataTransfer is not defined', () => {
-    const event = {
-      target: {
-        files
-      }
-    }
-    const res = getDataTransferItems(event)
-    expect(res).toBeInstanceOf(Array)
-    expect(res).toHaveLength(3)
-  })
-
-  it('should prioritize dataTransfer.files over .items', () => {
-    const event = {
-      dataTransfer: {
-        files: [{}, {}],
-        items: [{}, {}, {}]
-      }
-    }
-    const res = getDataTransferItems(event)
-    expect(res).toBeInstanceOf(Array)
-    expect(res).toHaveLength(2)
-  })
-
-  it('should not mutate data', () => {
-    const event = {
-      dataTransfer: {
-        files
-      }
-    }
-    expect(Object.keys(files[2])).toHaveLength(3)
-    getDataTransferItems(event, true)
-    expect(Object.keys(files[2])).toHaveLength(3)
-  })
-})
-
 describe('isIeOrEdge', () => {
@@ -108,0 +12,0 @@ it('should return true for IE10', () => {

styleguide.config.js

@@ -37,2 +37,6 @@ /* eslint import/no-extraneous-dependencies: 0 */
         {
+          name: 'Events',
+          content: 'examples/Events/README.md'
+        },
+        {
           name: 'Styling Dropzone',
@@ -70,6 +74,2 @@ content: 'examples/Styling/Readme.md'
               content: 'examples/PluginArchitecture/Readme.md'
-            },
-            {
-              name: 'Dropzone for folders',
-              content: 'examples/Folders/Readme.md'
             }
@@ -76,0 +76,0 @@ ]

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

290594

increased by15.43%

Dev dependency count

55

decreased by-1.79%

Lines of code

4163

increased by0.53%

Worsened metrics

Dependency count

5

increased by66.67%

Number of package files

41

decreased by-4.65%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedfile-selector@^0.1.8

• + Addedprop-types-extra@^1.1.0

• + Addedfile-selector@0.1.19(transitive)

• + Addedprop-types-extra@1.1.1(transitive)

• + Addedtslib@2.8.1(transitive)

• + Addedwarning@4.0.3(transitive)