updated react-dropzone to 10.1.9 (#1682)

* updated react-dropzone to 10.1.9

* fixed lint errors

* dropRef without current

* removed debugs

packages/react-components/package.json

@@ -33,7 +33,7 @@
     "react-chartjs-2": "^2.8.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.8.2",
-    "react-dropzone": "^7.0.1",
+    "react-dropzone": "^10.1.9",
     "react-i18next": "^10.13.0",
     "react-markdown": "^4.2.2",
     "react-router": "^5.1.0",

packages/react-components/src/InputFile.tsx

@@ -5,8 +5,8 @@
 import { WithTranslation } from 'react-i18next';
 import { BareProps } from './types';
 
-import React, { useRef, useState } from 'react';
-import Dropzone from 'react-dropzone';
+import React, { useState, createRef } from 'react';
+import Dropzone, { DropzoneRef } from 'react-dropzone';
 import styled from 'styled-components';
 import { formatNumber } from '@polkadot/util';
 
@@ -41,15 +41,15 @@ interface LoadEvent {
 }
 
 function InputFile ({ accept, className, clearContent, help, isDisabled, isError = false, label, onChange, placeholder, t, withEllipsis, withLabel }: Props): React.ReactElement<Props> {
-  const dropRef = useRef<Dropzone | null>(null);
+  const dropRef = createRef<DropzoneRef>();
   const [file, setFile] = useState<FileState | undefined>();
 
   const _onDrop = (files: File[]): void => {
     files.forEach((file): void => {
       const reader = new FileReader();
 
-      reader.onabort = (): void => {};
-      reader.onerror = (): void => {};
+      reader.onabort = (): void => { };
+      reader.onerror = (): void => { };
 
       // ummm... events are not properly specified here?
       (reader as any).onload = ({ target: { result } }: LoadEvent): void => {
@@ -58,7 +58,7 @@ function InputFile ({ accept, className, clearContent, help, isDisabled, isError
 
         onChange && onChange(data, name);
 
-        if (dropRef && dropRef.current) {
+        if (dropRef) {
           setFile({
             name,
             size: data.length
@@ -73,23 +73,28 @@ function InputFile ({ accept, className, clearContent, help, isDisabled, isError
   const dropZone = (
     <Dropzone
       accept={accept}
-      className={classes('ui--InputFile', isError && 'error', className)}
       disabled={isDisabled}
       multiple={false}
       ref={dropRef}
       onDrop={_onDrop}
     >
-      <em className='label'>
-        {!file || clearContent
-          ? placeholder || t('click to select or drag and drop the file here')
-          : placeholder || t('{{name}} ({{size}} bytes)', {
-            replace: {
-              name: file.name,
-              size: formatNumber(file.size)
+      {({ getRootProps, getInputProps }): JSX.Element => (
+        <div {...getRootProps({ className: classes('ui--InputFile', isError ? 'error' : '', className) })} >
+          <input {...getInputProps()} />
+          <em className='label' >
+            {
+              !file || clearContent
+                ? placeholder || t('click to select or drag and drop the file here')
+                : placeholder || t('{{name}} ({{size}} bytes)', {
+                  replace: {
+                    name: file.name,
+                    size: formatNumber(file.size)
+                  }
+                })
             }
-          })
-        }
-      </em>
+          </em>
+        </div>
+      )}
     </Dropzone>
   );
 

yarn.lock

@@ -6694,6 +6694,13 @@ file-saver@^2.0.0:
   resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.2.tgz#06d6e728a9ea2df2cce2f8d9e84dfcdc338ec17a"
   integrity sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==
 
+file-selector@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.12.tgz#fe726547be219a787a9dcc640575a04a032b1fd0"
+  integrity sha512-Kx7RTzxyQipHuiqyZGf+Nz4vY9R1XGxuQl/hLoJwq+J4avk/9wxxgZyHKtbyIPJmbD4A66DWGYfyykWNpcYutQ==
+  dependencies:
+    tslib "^1.9.0"
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -12448,13 +12455,14 @@ react-dom@^16.8.2, react-dom@^16.9.0:
     prop-types "^15.6.2"
     scheduler "^0.15.0"
 
-react-dropzone@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-7.0.1.tgz#bc76bc1686fb47ed0c8301f968fffa6aecdff47b"
-  integrity sha512-J4rbzhFZPVW7k7K9CVb0OcwSOJGLWa0y+0rvtB4rBLVkvq0agH/o3kPJ0DCkd6ZVzL2K1NFqIOvtQkwQKpmJBA==
+react-dropzone@^10.1.9:
+  version "10.1.9"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.1.9.tgz#8093ecd7d2dc4002280eb2dac1d5fa4216c800ee"
+  integrity sha512-7iqALZ0mzk+4g/AsYxEy3QyWPMTVQYKQVkYUe9zIbH18u+pi7EBDg010KEwfIX6jeTDH2qP0E6/eUnXvBYrovA==
   dependencies:
     attr-accept "^1.1.3"
-    prop-types "^15.6.2"
+    file-selector "^0.1.11"
+    prop-types "^15.7.2"
 
 react-hot-loader@^4.12.14:
   version "4.12.14"