dependencies: bump react-dropzone to 11.0.2 (major)

client/src/javascript/components/modals/add-torrents-modal/AddTorrentsByFile.js

@@ -52,21 +52,24 @@ class AddTorrentsByFile extends React.Component {
           <FormattedMessage id="torrents.add.torrents.label" />
         </label>
         {fileContent}
-        <Dropzone
-          activeClassName="dropzone--is-dragging"
-          className="form__dropzone dropzone interactive-list"
-          onDrop={this.handleFileDrop}
-          disablePreview>
-          <div className="dropzone__copy">
-            <div className="dropzone__icon">
-              <Files />
+        <Dropzone onDrop={this.handleFileDrop}>
+          {({getRootProps, getInputProps, isDragActive}) => (
+            <div
+              {...getRootProps()}
+              className={`form__dropzone dropzone interactive-list ${isDragActive ? 'dropzone--is-dragging' : ''}`}>
+              <input {...getInputProps()} />
+              <div className="dropzone__copy">
+                <div className="dropzone__icon">
+                  <Files />
+                </div>
+                <FormattedMessage id="torrents.add.tab.file.drop" />{' '}
+                <span className="dropzone__browse-button">
+                  <FormattedMessage id="torrents.add.tab.file.browse" />
+                </span>
+                .
+              </div>
             </div>
-            <FormattedMessage id="torrents.add.tab.file.drop" />{' '}
-            <span className="dropzone__browse-button">
-              <FormattedMessage id="torrents.add.tab.file.browse" />
-            </span>
-            .
-          </div>
+          )}
         </Dropzone>
       </FormRowItem>
     );

client/src/javascript/components/torrent-list/TorrentList.js

@@ -490,36 +490,39 @@ class TorrentListContainer extends React.Component {
 
     return (
       <Dropzone
-        activeClassName="dropzone--is-dragging"
-        className="dropzone dropzone--with-overlay torrents"
+        onDrop={this.handleFileDrop}
         ref={(ref) => {
           this.listContainer = ref;
-        }}
-        onDrop={this.handleFileDrop}
-        disableClick
-        disablePreview>
-        <CustomScrollbars
-          className="torrent__list__scrollbars--horizontal"
-          onScrollStop={this.handleHorizontalScrollStop}
-          nativeScrollHandler={this.handleHorizontalScroll}
-          ref={(ref) => {
-            this.horizontalScrollRef = ref;
-          }}>
-          <div className="torrent__list__wrapper" style={listWrapperStyle}>
-            <GlobalContextMenuMountPoint id="torrent-list-item" />
-            {torrentListHeading}
-            {content}
-          </div>
-        </CustomScrollbars>
+        }}>
+        {({getRootProps, isDragActive}) => (
+          <div
+            {...getRootProps({onClick: (evt) => evt.preventDefault()})}
+            className={`dropzone dropzone--with-overlay torrents ${isDragActive ? 'dropzone--is-dragging' : ''}`}
+            tabIndex="none">
+            <CustomScrollbars
+              className="torrent__list__scrollbars--horizontal"
+              onScrollStop={this.handleHorizontalScrollStop}
+              nativeScrollHandler={this.handleHorizontalScroll}
+              ref={(ref) => {
+                this.horizontalScrollRef = ref;
+              }}>
+              <div className="torrent__list__wrapper" style={listWrapperStyle}>
+                <GlobalContextMenuMountPoint id="torrent-list-item" />
+                {torrentListHeading}
+                {content}
+              </div>
+            </CustomScrollbars>
 
-        <div className="dropzone__overlay">
-          <div className="dropzone__copy">
-            <div className="dropzone__icon">
-              <Files />
+            <div className="dropzone__overlay">
+              <div className="dropzone__copy">
+                <div className="dropzone__icon">
+                  <Files />
+                </div>
+                <FormattedMessage id="torrents.list.drop" />
+              </div>
             </div>
-            <FormattedMessage id="torrents.list.drop" />
           </div>
-        </div>
+        )}
       </Dropzone>
     );
   }

package-lock.json

@@ -2743,19 +2743,9 @@
       "dev": true
     },
     "attr-accept": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-1.1.3.tgz",
-      "integrity": "sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==",
-      "requires": {
-        "core-js": "^2.5.0"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.6.5",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
-          "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
-        }
-      }
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.1.tgz",
+      "integrity": "sha512-GpefLMsbH5ojNgfTW+OBin2xKzuHfyeNA+qCktzZojBhbA/lPZdCFMWdwk5ajb989Ok7ZT+EADqvW3TAFNMjhA=="
     },
     "autoprefixer": {
       "version": "9.8.6",
@@ -7527,6 +7517,14 @@
         }
       }
     },
+    "file-selector": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.12.tgz",
+      "integrity": "sha512-Kx7RTzxyQipHuiqyZGf+Nz4vY9R1XGxuQl/hLoJwq+J4avk/9wxxgZyHKtbyIPJmbD4A66DWGYfyykWNpcYutQ==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -13373,12 +13371,13 @@
       }
     },
     "react-dropzone": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-4.3.0.tgz",
-      "integrity": "sha512-ULfrLaTSsd8BDa9KVAGCueuq1AN3L14dtMsGGqtP0UwYyjG4Vhf158f/ITSHuSPYkZXbvfcIiOlZsH+e3QWm+Q==",
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.0.2.tgz",
+      "integrity": "sha512-/Wde9Il1aJ1FtWllg3N2taIeJh4aftx6UGUG8R1TmLnZit2RnDcEjcKwEEbKwgLXTTh8QQpiZWQJq45jTy1jCA==",
       "requires": {
-        "attr-accept": "^1.1.3",
-        "prop-types": "^15.5.7"
+        "attr-accept": "^2.0.0",
+        "file-selector": "^0.1.12",
+        "prop-types": "^15.7.2"
       }
     },
     "react-error-overlay": {
@@ -16105,8 +16104,7 @@
     "tslib": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
-      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==",
-      "dev": true
+      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
     },
     "tsutils": {
       "version": "3.17.1",

package.json

@@ -78,7 +78,7 @@
     "react-dnd": "^2.6.0",
     "react-dnd-html5-backend": "^2.6.0",
     "react-dom": "^16.13.1",
-    "react-dropzone": "^4.3.0",
+    "react-dropzone": "^11.0.2",
     "react-intl": "^5.4.7",
     "react-markdown": "^4.3.1",
     "react-measure": "^2.3.0",