/
pdfFileOptions.jsx
112 lines (108 loc) · 3.59 KB
/
pdfFileOptions.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React, { useState } from "react";
import { Box, Dialog, Flex, Input, Text } from "@100mslive/roomkit-react";
import { DialogInputFile } from "../../primitives/DialogContent";
import Tabs from "../Tabs";
import { PdfErrorView } from "./pdfErrorView";
import { PDFHeader } from "./pdfHeader";
import { PDFInfo } from "./pdfInfo";
import { SubmitPDF } from "./submitPdf";
import { UploadedFile } from "./uploadedFile";
import { PDF_SHARING_OPTIONS } from "../../common/constants";
export function PDFFileOptions({ onOpenChange }) {
const [isPDFUrlValid, setIsPDFUrlValid] = useState(true);
const [isValidateProgress, setIsValidateProgress] = useState(false);
const [pdfFile, setPDFFile] = useState(null);
const [pdfURL, setPDFURL] = useState("");
const [activeTab, setActiveTab] = useState(
PDF_SHARING_OPTIONS.FROM_YOUR_COMPUTER
);
return !pdfFile ? (
<Dialog.Root defaultOpen onOpenChange={onOpenChange}>
<Dialog.Portal>
<Dialog.Overlay />
<Dialog.Content
css={{
w: "min(420px,80%)",
overflow: "auto",
p: "$10",
}}
>
<Flex direction="column">
<PDFHeader
onOpenChange={onOpenChange}
title="Start PDF Sharing"
subtitle="Choose a PDF to annotate and share"
/>
<Tabs
options={Object.values(PDF_SHARING_OPTIONS)}
activeTab={activeTab}
setActiveTab={setActiveTab}
/>
{activeTab === PDF_SHARING_OPTIONS.FROM_YOUR_COMPUTER ? (
<Box css={{ mt: "$6", mb: "$3" }}>
<DialogInputFile
onChange={target => {
setPDFFile(target.files[0]);
}}
placeholder="Click to upload"
type="file"
accept=".pdf"
/>
</Box>
) : null}
{activeTab === PDF_SHARING_OPTIONS.FROM_A_URL ? (
<>
<Text
variant="sm"
css={{
mt: "$8",
pb: "$2",
}}
>
Enter PDF URL
</Text>
<Input
css={{ w: "100%", mb: "$10" }}
value={pdfURL}
onFocus={() => {
setIsPDFUrlValid(true);
setIsValidateProgress(false);
}}
onChange={e => {
setPDFURL(e.target.value);
}}
placeholder="Enter a valid PDF link to share"
type="text"
error={!isPDFUrlValid}
/>
{!isPDFUrlValid && (
<PdfErrorView isPDFUrlValid={isPDFUrlValid} />
)}
<PDFInfo />
</>
) : null}
<SubmitPDF
pdfFile={pdfFile}
pdfURL={pdfURL}
isValidateProgress={isValidateProgress}
setIsPDFUrlValid={setIsPDFUrlValid}
setIsValidateProgress={setIsValidateProgress}
onOpenChange={onOpenChange}
hideSecondaryCTA
/>
</Flex>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
) : (
<UploadedFile
pdfFile={pdfFile}
pdfURL={pdfURL}
isValidateProgress={isValidateProgress}
setPDFFile={setPDFFile}
setIsPDFUrlValid={setIsPDFUrlValid}
setIsValidateProgress={setIsValidateProgress}
onOpenChange={onOpenChange}
/>
);
}