react-dropzone 8.0.3 → 9.0.0

package/README.md

@@ -13,12 +13,6 @@ Simple HTML5-compliant drag'n'drop zone for files built with React.js.
 Documentation and examples: https://react-dropzone.js.org
 Source code: https://github.com/react-dropzone/react-dropzone/
 
----
-
-**Looking for maintainers: https://github.com/react-dropzone/react-dropzone/issues/479**
-
----
-
 ## Installation
 
 Install it from npm and include it in your React build process (using [Webpack](http://webpack.github.io/), [Browserify](http://browserify.org/), etc).

package/dist/es/index.js

@@ -17,8 +17,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 /* eslint prefer-template: 0 */
 
 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 } from './utils';
+import { isDragDataWithFiles, supportMultiple, fileAccepted, allFilesAccepted, fileMatchSize, onDocumentDragOver, isIeOrEdge, composeEventHandlers, isPropagationStopped, isDefaultPrevented } from './utils';
 
 var Dropzone = function (_React$Component) {
   _inherits(Dropzone, _React$Component);
@@ -62,7 +63,7 @@ var Dropzone = function (_React$Component) {
 
       if (isDragDataWithFiles(evt)) {
         Promise.resolve(_this.props.getDataTransferItems(evt)).then(function (draggedFiles) {
-          if (evt.isPropagationStopped()) {
+          if (isPropagationStopped(evt)) {
             return;
           }
 
@@ -82,6 +83,10 @@ var Dropzone = function (_React$Component) {
       evt.preventDefault();
       evt.persist();
 
+      if (evt.dataTransfer) {
+        evt.dataTransfer.dropEffect = 'copy';
+      }
+
       if (_this.props.onDragOver && isDragDataWithFiles(evt)) {
         _this.props.onDragOver.call(_this, evt);
       }
@@ -142,7 +147,7 @@ var Dropzone = function (_React$Component) {
           var acceptedFiles = [];
           var rejectedFiles = [];
 
-          if (evt.isPropagationStopped()) {
+          if (isPropagationStopped(evt)) {
             return;
           }
 
@@ -179,9 +184,7 @@ var Dropzone = function (_React$Component) {
         });
       }
     }, _this.onClick = function (evt) {
-      var _this$props2 = _this.props,
-          onClick = _this$props2.onClick,
-          disableClick = _this$props2.disableClick;
+      var onClick = _this.props.onClick;
 
       // if onClick prop is given, run it first
 
@@ -189,9 +192,9 @@ var Dropzone = function (_React$Component) {
         onClick.call(_this, evt);
       }
 
-      // if disableClick is not set and the event hasn't been default prefented within
+      // If the event hasn't been default prevented from within
       // the onClick listener, open the file dialog
-      if (!disableClick && !evt.isDefaultPrevented()) {
+      if (!isDefaultPrevented(evt)) {
         evt.stopPropagation();
 
         // in IE11/Edge the file-browser dialog is blocking, ensure this is behind setTimeout
@@ -233,7 +236,7 @@ var Dropzone = function (_React$Component) {
       if (onFocus) {
         onFocus.call(_this, evt);
       }
-      if (!evt.isDefaultPrevented()) {
+      if (!isDefaultPrevented(evt)) {
         _this.setState({ isFocused: true });
       }
     }, _this.onBlur = function (evt) {
@@ -242,7 +245,7 @@ var Dropzone = function (_React$Component) {
       if (onBlur) {
         onBlur.call(_this, evt);
       }
-      if (!evt.isDefaultPrevented()) {
+      if (!isDefaultPrevented(evt)) {
         _this.setState({ isFocused: false });
       }
     }, _this.onKeyDown = function (evt) {
@@ -256,7 +259,7 @@ var Dropzone = function (_React$Component) {
         onKeyDown.call(_this, evt);
       }
 
-      if (!evt.isDefaultPrevented() && (evt.keyCode === 32 || evt.keyCode === 13)) {
+      if (!isDefaultPrevented(evt) && (evt.keyCode === 32 || evt.keyCode === 13)) {
         evt.preventDefault();
         _this.open();
       }
@@ -303,10 +306,10 @@ var Dropzone = function (_React$Component) {
           onClick = _ref3.onClick,
           rest = _objectWithoutProperties(_ref3, ['refKey', 'onChange', 'onClick']);
 
-      var _this$props3 = _this.props,
-          accept = _this$props3.accept,
-          multiple = _this$props3.multiple,
-          name = _this$props3.name;
+      var _this$props2 = _this.props,
+          accept = _this$props2.accept,
+          multiple = _this$props2.multiple,
+          name = _this$props2.name;
 
       var inputProps = _defineProperty({
         accept: accept,
@@ -435,11 +438,6 @@ Dropzone.propTypes = {
    */
   children: PropTypes.func,
 
-  /**
-   * Disallow clicking on the dropzone container to open file dialog
-   */
-  disableClick: PropTypes.bool,
-
   /**
    * Enable/disable the dropzone entirely
    */
@@ -568,9 +566,8 @@ Dropzone.propTypes = {
 Dropzone.defaultProps = {
   preventDropOnDocument: true,
   disabled: false,
-  disableClick: false,
   multiple: true,
   maxSize: Infinity,
   minSize: 0,
-  getDataTransferItems: defaultGetDataTransferItem
+  getDataTransferItems: fromEvent
 };

package/dist/es/utils/index.js

@@ -4,28 +4,6 @@ import accepts from 'attr-accept';
 
 export var supportMultiple = typeof document !== 'undefined' && document && document.createElement ? 'multiple' in document.createElement('input') : true;
 
-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
 // that MIME type will always be accepted
 export function fileAccepted(file, accept) {
@@ -42,6 +20,30 @@ export function allFilesAccepted(files, accept) {
   });
 }
 
+// React's synthetic events has evt.isPropagationStopped,
+// but to remain compatibility with other libs (Preact) fall back
+// to check evt.cancelBubble
+export function isPropagationStopped(evt) {
+  if (typeof evt.isPropagationStopped === 'function') {
+    return evt.isPropagationStopped();
+  } else if (typeof evt.cancelBubble !== 'undefined') {
+    return evt.cancelBubble;
+  }
+  return false;
+}
+
+// React's synthetic events has evt.isDefaultPrevented,
+// but to remain compatibility with other libs (Preact) first
+// check evt.defaultPrevented
+export function isDefaultPrevented(evt) {
+  if (typeof evt.defaultPrevented !== 'undefined') {
+    return evt.defaultPrevented;
+  } else if (typeof evt.isDefaultPrevented === 'function') {
+    return evt.isDefaultPrevented();
+  }
+  return false;
+}
+
 export function isDragDataWithFiles(evt) {
   if (!evt.dataTransfer) {
     return true;