chore: React-Dropzone version bump (#1699)

* update dropzone to new version

* remove global styles import

* change bg on active item on drag as well

* add back background

app/components/DropToImport.js

@@ -5,7 +5,7 @@ import { observer, inject } from "mobx-react";
 import * as React from "react";
 import Dropzone from "react-dropzone";
 import { withRouter, type RouterHistory, type Match } from "react-router-dom";
-import { createGlobalStyle } from "styled-components";
+import styled from "styled-components";
 import DocumentsStore from "stores/DocumentsStore";
 import UiStore from "stores/UiStore";
 import LoadingIndicator from "components/LoadingIndicator";
@@ -17,8 +17,6 @@ type Props = {
   children: React.Node,
   collectionId: string,
   documentId?: string,
-  activeClassName?: string,
-  rejectClassName?: string,
   ui: UiStore,
   documents: DocumentsStore,
   disabled: boolean,
@@ -28,18 +26,6 @@ type Props = {
   staticContext: Object,
 };
 
-export const GlobalStyles = createGlobalStyle`
-  .activeDropZone {
-    border-radius: 4px;
-    background: ${(props) => props.theme.slateDark};
-    svg { fill: ${(props) => props.theme.white}; }
-  }
-
-  .activeDropZone a {
-    color: ${(props) => props.theme.white} !important;
-  }
-`;
-
 @observer
 class DropToImport extends React.Component<Props> {
   @observable isImporting: boolean = false;
@@ -82,18 +68,7 @@ class DropToImport extends React.Component<Props> {
   };
 
   render() {
-    const {
-      documentId,
-      collectionId,
-      documents,
-      disabled,
-      location,
-      match,
-      history,
-      staticContext,
-      ui,
-      ...rest
-    } = this.props;
+    const { documents } = this.props;
 
     if (this.props.disabled) return this.props.children;
 
@@ -102,16 +77,38 @@ class DropToImport extends React.Component<Props> {
         accept={documents.importFileTypes.join(", ")}
         onDropAccepted={this.onDropAccepted}
         style={EMPTY_OBJECT}
-        disableClick
-        disablePreview
+        noClick
         multiple
-        {...rest}
       >
-        {this.isImporting && <LoadingIndicator />}
-        {this.props.children}
+        {({
+          getRootProps,
+          getInputProps,
+          isDragActive,
+          isDragAccept,
+          isDragReject,
+        }) => (
+          <DropzoneContainer {...getRootProps()} {...{ isDragActive }}>
+            <input {...getInputProps()} />
+            {this.isImporting && <LoadingIndicator />}
+            {this.props.children}
+          </DropzoneContainer>
+        )}
       </Dropzone>
     );
   }
 }
 
+const DropzoneContainer = styled("div")`
+  border-radius: 4px;
+  background: ${({ isDragActive, theme }) =>
+    isDragActive && theme.slateDark} !important;
+  a {
+    color: ${({ isDragActive, theme }) =>
+      isDragActive && theme.white} !important;
+  }
+  svg {
+    fill: ${({ isDragActive, theme }) => isDragActive && theme.white};
+  }
+`;
+
 export default inject("documents", "ui")(withRouter(DropToImport));