99 lines
2.4 KiB
TypeScript
99 lines
2.4 KiB
TypeScript
import { observer } from "mobx-react";
|
||
import * as React from "react";
|
||
import Dropzone from "react-dropzone";
|
||
import { useTranslation } from "react-i18next";
|
||
import styled, { css } from "styled-components";
|
||
import HelpText from "~/components/HelpText";
|
||
import LoadingIndicator from "~/components/LoadingIndicator";
|
||
import useImportDocument from "~/hooks/useImportDocument";
|
||
import useToasts from "~/hooks/useToasts";
|
||
|
||
type Props = {
|
||
children: React.ReactNode;
|
||
disabled: boolean;
|
||
accept: string;
|
||
collectionId: string;
|
||
};
|
||
|
||
function DropToImport({ children, disabled, accept, collectionId }: Props) {
|
||
const { handleFiles, isImporting } = useImportDocument(collectionId);
|
||
const { showToast } = useToasts();
|
||
const { t } = useTranslation();
|
||
|
||
const handleRejection = React.useCallback(() => {
|
||
showToast(
|
||
t("Document not supported – try Markdown, Plain text, HTML, or Word"),
|
||
{
|
||
type: "error",
|
||
}
|
||
);
|
||
}, [t, showToast]);
|
||
|
||
return (
|
||
<Dropzone
|
||
accept={accept}
|
||
onDropAccepted={handleFiles}
|
||
onDropRejected={handleRejection}
|
||
disabled={disabled}
|
||
noClick
|
||
multiple
|
||
>
|
||
{({ getRootProps, getInputProps, isDragActive }) => (
|
||
<DropzoneContainer
|
||
{...getRootProps()}
|
||
isDragActive={isDragActive}
|
||
tabIndex={-1}
|
||
>
|
||
<input {...getInputProps()} />
|
||
{isImporting && <LoadingIndicator />}
|
||
|
||
{children}
|
||
<DropMessage>{t("Drop documents to import")}</DropMessage>
|
||
</DropzoneContainer>
|
||
)}
|
||
</Dropzone>
|
||
);
|
||
}
|
||
|
||
const DropMessage = styled(HelpText)`
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
`;
|
||
|
||
const DropzoneContainer = styled.div<{ isDragActive?: boolean }>`
|
||
outline-color: transparent !important;
|
||
height: calc(100% - 56px);
|
||
position: relative;
|
||
|
||
${({ isDragActive, theme }) =>
|
||
isDragActive &&
|
||
css`
|
||
&:after {
|
||
display: block;
|
||
content: "";
|
||
position: absolute;
|
||
top: 24px;
|
||
right: 24px;
|
||
left: 24px;
|
||
height: 85vh;
|
||
background: ${theme.background};
|
||
border-radius: 8px;
|
||
border: 1px dashed ${theme.divider};
|
||
box-shadow: 0 0 0 100px white;
|
||
z-index: 1;
|
||
}
|
||
|
||
${DropMessage} {
|
||
opacity: 1;
|
||
z-index: 2;
|
||
position: absolute;
|
||
text-align: center;
|
||
top: 50vh;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
`}
|
||
`;
|
||
|
||
export default observer(DropToImport);
|