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
This commit is contained in:
parent
ac2060b166
commit
aa59f5fe09
|
@ -5,7 +5,7 @@ import { observer, inject } from "mobx-react";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import Dropzone from "react-dropzone";
|
import Dropzone from "react-dropzone";
|
||||||
import { withRouter, type RouterHistory, type Match } from "react-router-dom";
|
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 DocumentsStore from "stores/DocumentsStore";
|
||||||
import UiStore from "stores/UiStore";
|
import UiStore from "stores/UiStore";
|
||||||
import LoadingIndicator from "components/LoadingIndicator";
|
import LoadingIndicator from "components/LoadingIndicator";
|
||||||
|
@ -17,8 +17,6 @@ type Props = {
|
||||||
children: React.Node,
|
children: React.Node,
|
||||||
collectionId: string,
|
collectionId: string,
|
||||||
documentId?: string,
|
documentId?: string,
|
||||||
activeClassName?: string,
|
|
||||||
rejectClassName?: string,
|
|
||||||
ui: UiStore,
|
ui: UiStore,
|
||||||
documents: DocumentsStore,
|
documents: DocumentsStore,
|
||||||
disabled: boolean,
|
disabled: boolean,
|
||||||
|
@ -28,18 +26,6 @@ type Props = {
|
||||||
staticContext: Object,
|
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
|
@observer
|
||||||
class DropToImport extends React.Component<Props> {
|
class DropToImport extends React.Component<Props> {
|
||||||
@observable isImporting: boolean = false;
|
@observable isImporting: boolean = false;
|
||||||
|
@ -82,18 +68,7 @@ class DropToImport extends React.Component<Props> {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const { documents } = this.props;
|
||||||
documentId,
|
|
||||||
collectionId,
|
|
||||||
documents,
|
|
||||||
disabled,
|
|
||||||
location,
|
|
||||||
match,
|
|
||||||
history,
|
|
||||||
staticContext,
|
|
||||||
ui,
|
|
||||||
...rest
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
if (this.props.disabled) return this.props.children;
|
if (this.props.disabled) return this.props.children;
|
||||||
|
|
||||||
|
@ -102,16 +77,38 @@ class DropToImport extends React.Component<Props> {
|
||||||
accept={documents.importFileTypes.join(", ")}
|
accept={documents.importFileTypes.join(", ")}
|
||||||
onDropAccepted={this.onDropAccepted}
|
onDropAccepted={this.onDropAccepted}
|
||||||
style={EMPTY_OBJECT}
|
style={EMPTY_OBJECT}
|
||||||
disableClick
|
noClick
|
||||||
disablePreview
|
|
||||||
multiple
|
multiple
|
||||||
{...rest}
|
|
||||||
>
|
>
|
||||||
|
{({
|
||||||
|
getRootProps,
|
||||||
|
getInputProps,
|
||||||
|
isDragActive,
|
||||||
|
isDragAccept,
|
||||||
|
isDragReject,
|
||||||
|
}) => (
|
||||||
|
<DropzoneContainer {...getRootProps()} {...{ isDragActive }}>
|
||||||
|
<input {...getInputProps()} />
|
||||||
{this.isImporting && <LoadingIndicator />}
|
{this.isImporting && <LoadingIndicator />}
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
|
</DropzoneContainer>
|
||||||
|
)}
|
||||||
</Dropzone>
|
</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));
|
export default inject("documents", "ui")(withRouter(DropToImport));
|
||||||
|
|
|
@ -15,7 +15,6 @@ import ErrorSuspended from "scenes/ErrorSuspended";
|
||||||
import KeyboardShortcuts from "scenes/KeyboardShortcuts";
|
import KeyboardShortcuts from "scenes/KeyboardShortcuts";
|
||||||
import Analytics from "components/Analytics";
|
import Analytics from "components/Analytics";
|
||||||
import DocumentHistory from "components/DocumentHistory";
|
import DocumentHistory from "components/DocumentHistory";
|
||||||
import { GlobalStyles } from "components/DropToImport";
|
|
||||||
import Flex from "components/Flex";
|
import Flex from "components/Flex";
|
||||||
|
|
||||||
import { LoadingIndicatorBar } from "components/LoadingIndicator";
|
import { LoadingIndicatorBar } from "components/LoadingIndicator";
|
||||||
|
@ -138,7 +137,6 @@ class Layout extends React.Component<Props> {
|
||||||
>
|
>
|
||||||
<KeyboardShortcuts />
|
<KeyboardShortcuts />
|
||||||
</Modal>
|
</Modal>
|
||||||
<GlobalStyles />
|
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -41,11 +41,7 @@ class CollectionLink extends React.Component<Props> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DropToImport
|
<DropToImport key={collection.id} collectionId={collection.id}>
|
||||||
key={collection.id}
|
|
||||||
collectionId={collection.id}
|
|
||||||
activeClassName="activeDropZone"
|
|
||||||
>
|
|
||||||
<SidebarLink
|
<SidebarLink
|
||||||
key={collection.id}
|
key={collection.id}
|
||||||
to={collection.url}
|
to={collection.url}
|
||||||
|
|
|
@ -47,8 +47,8 @@ function SidebarLink({
|
||||||
|
|
||||||
const activeStyle = {
|
const activeStyle = {
|
||||||
color: theme.text,
|
color: theme.text,
|
||||||
background: theme.sidebarItemBackground,
|
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
|
background: theme.sidebarItemBackground,
|
||||||
...style,
|
...style,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -138,7 +138,7 @@
|
||||||
"react-avatar-editor": "^10.3.0",
|
"react-avatar-editor": "^10.3.0",
|
||||||
"react-color": "^2.17.3",
|
"react-color": "^2.17.3",
|
||||||
"react-dom": "^16.8.6",
|
"react-dom": "^16.8.6",
|
||||||
"react-dropzone": "4.2.1",
|
"react-dropzone": "^11.2.4",
|
||||||
"react-helmet": "^5.2.0",
|
"react-helmet": "^5.2.0",
|
||||||
"react-i18next": "^11.7.3",
|
"react-i18next": "^11.7.3",
|
||||||
"react-keydown": "^1.7.3",
|
"react-keydown": "^1.7.3",
|
||||||
|
|
39
yarn.lock
39
yarn.lock
|
@ -2149,12 +2149,10 @@ atob@^2.1.2:
|
||||||
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
|
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
|
||||||
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
|
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
|
||||||
|
|
||||||
attr-accept@^1.0.3:
|
attr-accept@^2.2.1:
|
||||||
version "1.1.3"
|
version "2.2.2"
|
||||||
resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-1.1.3.tgz#48230c79f93790ef2775fcec4f0db0f5db41ca52"
|
resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
|
||||||
integrity sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==
|
integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
|
||||||
dependencies:
|
|
||||||
core-js "^2.5.0"
|
|
||||||
|
|
||||||
auto-bind@^1.1.0:
|
auto-bind@^1.1.0:
|
||||||
version "1.2.1"
|
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"
|
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.7.0.tgz#28a57c861d5698e053f0ff36905f7a3301b4191e"
|
||||||
integrity sha512-EZD2ckZysv8MMt4J6HSvS9K2GdtlZtdBncKAmF9lr2n0c9dJUaUN88PSTjvgwCgQPWKTkERXITgS6JJRAnljtg==
|
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"
|
version "2.6.11"
|
||||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
|
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
|
||||||
integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
|
integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
|
||||||
|
@ -4942,6 +4940,13 @@ file-loader@^1.1.6:
|
||||||
loader-utils "^1.0.2"
|
loader-utils "^1.0.2"
|
||||||
schema-utils "^0.4.5"
|
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:
|
file-uri-to-path@1.0.0:
|
||||||
version "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"
|
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"
|
kleur "^3.0.3"
|
||||||
sisteransi "^1.0.5"
|
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"
|
version "15.7.2"
|
||||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||||
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
||||||
|
@ -9764,13 +9769,14 @@ react-dom@^16.8.6:
|
||||||
prop-types "^15.6.2"
|
prop-types "^15.6.2"
|
||||||
scheduler "^0.19.1"
|
scheduler "^0.19.1"
|
||||||
|
|
||||||
react-dropzone@4.2.1:
|
react-dropzone@^11.2.4:
|
||||||
version "4.2.1"
|
version "11.2.4"
|
||||||
resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-4.2.1.tgz#695e80bd0b065f1181e69f2d0f6d1d5cc72664c9"
|
resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.2.4.tgz#391a8d2e41a8a974340f83524d306540192e3313"
|
||||||
integrity sha512-qKZRMYAU5tOAI/olSp8DNnmKtoG9PmU1g+Z+TR7/QV0q9rK/zLn7hVyFKU8BSJt9q+Z9umLKJrS9DuxyBiIDMA==
|
integrity sha512-EGSvK2CxFTuc28WxwuJCICyuYFX8b+sRumwU6Bs6sTbElV2HtQkT0d6C+HEee6XfbjiLIZ+Th9uji27rvo2wGw==
|
||||||
dependencies:
|
dependencies:
|
||||||
attr-accept "^1.0.3"
|
attr-accept "^2.2.1"
|
||||||
prop-types "^15.5.7"
|
file-selector "^0.2.2"
|
||||||
|
prop-types "^15.7.2"
|
||||||
|
|
||||||
react-fast-compare@^2.0.2:
|
react-fast-compare@^2.0.2:
|
||||||
version "2.0.4"
|
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"
|
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
|
||||||
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
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:
|
tsscmp@1.0.6:
|
||||||
version "1.0.6"
|
version "1.0.6"
|
||||||
resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
|
resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
|
||||||
|
|
Reference in New Issue