feat: Pin to home (#2880)

2021-12-30 16:54:02 -08:00
parent 5be2eb75f3
commit eb0c324da8
57 changed files with 1884 additions and 819 deletions
--- a/app/scenes/Collection/DropToImport.tsx
+++ b/app/scenes/Collection/DropToImport.tsx
@@ -0,0 +1,98 @@
+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);