CoastalCommitsPastes/client/app/(posts)/post/[id]/components/post-page/view-document/index.tsx

169 lines
3.8 KiB
TypeScript
Raw Normal View History

import { memo, useRef, useState } from "react"
2022-04-09 20:48:19 -04:00
import styles from "./document.module.css"
import Download from "@geist-ui/icons/download"
import ExternalLink from "@geist-ui/icons/externalLink"
2022-03-09 20:11:37 -05:00
import Skeleton from "react-loading-skeleton"
2022-11-10 02:11:36 -05:00
import Link from "next/link"
2022-04-09 20:48:19 -04:00
import {
Button,
ButtonGroup,
Spacer,
Tabs,
Textarea,
Tooltip,
Tag
2022-11-09 21:38:05 -05:00
} from "@geist-ui/core/dist"
2022-11-12 03:58:21 -05:00
import HtmlPreview from "app/(posts)/new/components/edit-document-list/edit-document/preview"
2022-11-12 04:28:06 -05:00
import FadeIn from "@components/fade-in"
// import Link from "next/link"
2022-03-06 19:46:59 -05:00
type Props = {
2022-04-09 20:48:19 -04:00
title: string
initialTab?: "edit" | "preview"
skeleton?: boolean
id: string
content: string
2022-03-06 19:46:59 -05:00
}
const DownloadButton = ({ rawLink }: { rawLink?: string }) => {
2022-04-09 20:48:19 -04:00
return (
<div className={styles.actionWrapper}>
<ButtonGroup className={styles.actions}>
<Tooltip hideArrow text="Download">
<Link
2022-04-09 20:48:19 -04:00
href={`${rawLink}?download=true`}
target="_blank"
rel="noopener noreferrer"
>
<Button
scale={2 / 3}
px={0.6}
icon={<Download />}
auto
aria-label="Download"
/>
</Link>
2022-04-09 20:48:19 -04:00
</Tooltip>
<Tooltip hideArrow text="Open raw in new tab">
<Link href={rawLink || ""} target="_blank" rel="noopener noreferrer">
2022-04-09 20:48:19 -04:00
<Button
scale={2 / 3}
px={0.6}
icon={<ExternalLink />}
auto
aria-label="Open raw file in new tab"
/>
</Link>
2022-04-09 20:48:19 -04:00
</Tooltip>
</ButtonGroup>
</div>
)
}
2022-04-09 20:48:19 -04:00
const Document = ({
content,
title,
initialTab = "edit",
skeleton,
id
}: Props) => {
const codeEditorRef = useRef<HTMLTextAreaElement>(null)
const [tab, setTab] = useState(initialTab)
// const height = editable ? "500px" : '100%'
const height = "100%"
2022-04-09 20:48:19 -04:00
const handleTabChange = (newTab: string) => {
if (newTab === "edit") {
codeEditorRef.current?.focus()
}
setTab(newTab as "edit" | "preview")
}
2022-03-06 19:46:59 -05:00
2022-04-09 20:48:19 -04:00
const rawLink = () => {
if (id) {
return `/file/raw/${id}`
}
}
2022-04-09 20:48:19 -04:00
if (skeleton) {
return (
<>
<Spacer height={1} />
<div className={styles.card}>
<div className={styles.fileNameContainer}>
<Skeleton width={275} height={36} />
</div>
<div className={styles.descriptionContainer}>
<div style={{ flexDirection: "row", display: "flex" }}>
<Skeleton width={125} height={36} />
</div>
<Skeleton width={"100%"} height={350} />
</div>
</div>
</>
)
}
2022-04-09 20:48:19 -04:00
return (
<FadeIn>
<Spacer height={1} />
<div className={styles.card}>
<Link href={`#${title}`} className={styles.fileNameContainer}>
<Tag
height={"100%"}
id={`${title}`}
width={"100%"}
style={{ borderRadius: 0 }}
>
{title || "Untitled"}
</Tag>
</Link>
<div className={styles.descriptionContainer}>
<DownloadButton rawLink={rawLink()} />
<Tabs
onChange={handleTabChange}
initialValue={initialTab}
hideDivider
leftSpace={0}
>
<Tabs.Item label={"Raw"} value="edit">
{/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
<div
style={{
marginTop: "var(--gap-half)",
display: "flex",
flexDirection: "column"
}}
>
<Textarea
readOnly
ref={codeEditorRef}
value={content}
width="100%"
// TODO: Textarea should grow to fill parent if height == 100%
style={{ flex: 1, minHeight: 350 }}
resize="vertical"
className={styles.textarea}
/>
</div>
</Tabs.Item>
<Tabs.Item label="Preview" value="preview">
<div style={{ marginTop: "var(--gap-half)" }}>
<HtmlPreview
height={height}
fileId={id}
content={content}
title={title}
/>
</div>
</Tabs.Item>
</Tabs>
</div>
</div>
</FadeIn>
)
2022-03-06 19:46:59 -05:00
}
2022-04-09 20:48:19 -04:00
export default memo(Document)