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
2020-12-06 17:50:59 -08:00 · 2020-12-06 17:50:59 -08:00 · aa59f5fe09
parent ac2060b166
commit aa59f5fe09
6 changed files with 57 additions and 55 deletions
--- a/app/components/DropToImport.js
+++ b/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));
--- a/app/components/Layout.js
+++ b/app/components/Layout.js
@ -15,7 +15,6 @@ import ErrorSuspended from "scenes/ErrorSuspended";
 import KeyboardShortcuts from "scenes/KeyboardShortcuts";
 import Analytics from "components/Analytics";
 import DocumentHistory from "components/DocumentHistory";
-import { GlobalStyles } from "components/DropToImport";
 import Flex from "components/Flex";

 import { LoadingIndicatorBar } from "components/LoadingIndicator";
@ -138,7 +137,6 @@ class Layout extends React.Component<Props> {
        >
          <KeyboardShortcuts />
        </Modal>
-        <GlobalStyles />
      </Container>
    );
  }
--- a/app/components/Sidebar/components/CollectionLink.js
+++ b/app/components/Sidebar/components/CollectionLink.js
@ -41,11 +41,7 @@ class CollectionLink extends React.Component<Props> {

    return (
      <>
-        <DropToImport
-          key={collection.id}
-          collectionId={collection.id}
-          activeClassName="activeDropZone"
-        >
+        <DropToImport key={collection.id} collectionId={collection.id}>
          <SidebarLink
            key={collection.id}
            to={collection.url}
--- a/app/components/Sidebar/components/SidebarLink.js
+++ b/app/components/Sidebar/components/SidebarLink.js
@ -47,8 +47,8 @@ function SidebarLink({

  const activeStyle = {
    color: theme.text,
-    background: theme.sidebarItemBackground,
    fontWeight: 600,
+    background: theme.sidebarItemBackground,
    ...style,
  };

--- a/package.json
+++ b/package.json
@ -138,7 +138,7 @@
    "react-avatar-editor": "^10.3.0",
    "react-color": "^2.17.3",
    "react-dom": "^16.8.6",
-    "react-dropzone": "4.2.1",
+    "react-dropzone": "^11.2.4",
    "react-helmet": "^5.2.0",
    "react-i18next": "^11.7.3",
    "react-keydown": "^1.7.3",
--- a/yarn.lock
+++ b/yarn.lock
@ -2149,12 +2149,10 @@ atob@^2.1.2:
  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==

-attr-accept@^1.0.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-1.1.3.tgz#48230c79f93790ef2775fcec4f0db0f5db41ca52"
-  integrity sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==
-  dependencies:
-    core-js "^2.5.0"
+attr-accept@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==

 auto-bind@^1.1.0:
  version "1.2.1"
@ -3593,7 +3591,7 @@ core-js-pure@^3.0.0:
  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.7.0.tgz#28a57c861d5698e053f0ff36905f7a3301b4191e"
  integrity sha512-EZD2ckZysv8MMt4J6HSvS9K2GdtlZtdBncKAmF9lr2n0c9dJUaUN88PSTjvgwCgQPWKTkERXITgS6JJRAnljtg==

-core-js@2, core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.5:
+core-js@2, core-js@^2.4.0, core-js@^2.6.5:
  version "2.6.11"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
@ -4942,6 +4940,13 @@ file-loader@^1.1.6:
    loader-utils "^1.0.2"
    schema-utils "^0.4.5"

+file-selector@^0.2.2:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.2.4.tgz#7b98286f9dbb9925f420130ea5ed0a69238d4d80"
+  integrity sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==
+  dependencies:
+    tslib "^2.0.3"
+
 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"
@ -9404,7 +9409,7 @@ prompts@^2.0.1:
    kleur "^3.0.3"
    sisteransi "^1.0.5"

-prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -9764,13 +9769,14 @@ react-dom@^16.8.6:
    prop-types "^15.6.2"
    scheduler "^0.19.1"

-react-dropzone@4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-4.2.1.tgz#695e80bd0b065f1181e69f2d0f6d1d5cc72664c9"
-  integrity sha512-qKZRMYAU5tOAI/olSp8DNnmKtoG9PmU1g+Z+TR7/QV0q9rK/zLn7hVyFKU8BSJt9q+Z9umLKJrS9DuxyBiIDMA==
+react-dropzone@^11.2.4:
+  version "11.2.4"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.2.4.tgz#391a8d2e41a8a974340f83524d306540192e3313"
+  integrity sha512-EGSvK2CxFTuc28WxwuJCICyuYFX8b+sRumwU6Bs6sTbElV2HtQkT0d6C+HEee6XfbjiLIZ+Th9uji27rvo2wGw==
  dependencies:
-    attr-accept "^1.0.3"
-    prop-types "^15.5.7"
+    attr-accept "^2.2.1"
+    file-selector "^0.2.2"
+    prop-types "^15.7.2"

 react-fast-compare@^2.0.2:
  version "2.0.4"
@ -11747,6 +11753,11 @@ tslib@^1.9.0, tslib@^1.9.3:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

+tslib@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
+  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
+
 tsscmp@1.0.6:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"