288 lines
9.3 KiB
TypeScript
288 lines
9.3 KiB
TypeScript
"use client"
|
||
|
||
import { useMemo, useState, type ReactNode } from "react"
|
||
import {
|
||
Alert,
|
||
AlertDescription,
|
||
AlertTitle,
|
||
} from "@/components/reui/alert"
|
||
import { Badge } from "@/components/reui/badge"
|
||
import { Frame, FramePanel } from "@/components/reui/frame"
|
||
import { Button } from "@/components/ui/button"
|
||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||
import {
|
||
Sheet,
|
||
SheetClose,
|
||
SheetContent,
|
||
SheetDescription,
|
||
SheetFooter,
|
||
SheetHeader,
|
||
SheetTitle,
|
||
} from "@/components/ui/sheet"
|
||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import {
|
||
CheckIcon,
|
||
CopyIcon,
|
||
DownloadIcon,
|
||
LoaderCircleIcon,
|
||
RefreshCwIcon,
|
||
TriangleAlertIcon,
|
||
} from "lucide-react"
|
||
import { cn } from "@/lib/utils"
|
||
import { toast } from "sonner"
|
||
|
||
export type CodeExportFormat = {
|
||
id: string
|
||
label: string
|
||
filename: string
|
||
code: string
|
||
/** Empty / unavailable — show warning instead of code */
|
||
emptyMessage?: string
|
||
/** Content came from live device fetch */
|
||
isLive?: boolean
|
||
}
|
||
|
||
function downloadText(filename: string, content: string) {
|
||
const blob = new Blob([content], { type: "text/plain;charset=utf-8" })
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement("a")
|
||
a.href = url
|
||
a.download = filename
|
||
a.click()
|
||
URL.revokeObjectURL(url)
|
||
}
|
||
|
||
function highlightLine(line: string): string {
|
||
const trimmed = line.trimStart()
|
||
if (line.startsWith("#") || trimmed.startsWith(";")) return "text-muted-foreground"
|
||
if (trimmed.startsWith("[")) return "text-info"
|
||
if (trimmed.startsWith("/")) return "text-info"
|
||
if (/^\s+[a-zA-Z]/.test(line) || /^[A-Za-z][\w-]*=/.test(line)) return "text-foreground"
|
||
return "text-foreground/90"
|
||
}
|
||
|
||
function CodeBlock({ code, className }: { code: string; className?: string }) {
|
||
const lines = code.length ? code.split("\n") : [""]
|
||
return (
|
||
<pre className={cn("px-4 py-3.5 text-[12px] font-mono leading-[1.65] whitespace-pre-wrap break-all select-all", className)}>
|
||
{lines.map((line, i) => (
|
||
<span key={i} className={cn("block", highlightLine(line))}>
|
||
{line || " "}
|
||
</span>
|
||
))}
|
||
</pre>
|
||
)
|
||
}
|
||
|
||
export interface CodeExportSheetProps {
|
||
open: boolean
|
||
onClose: () => void
|
||
title: string
|
||
description?: ReactNode
|
||
formats: CodeExportFormat[]
|
||
/** Initial format id when sheet opens */
|
||
initialFormatId?: string
|
||
/** Optional live fetch from device */
|
||
onLiveFetch?: (formatId: string) => void
|
||
liveBusy?: boolean
|
||
/** Short CTA — keep laconic */
|
||
liveLabel?: string
|
||
className?: string
|
||
/** Extra content under format tabs (e.g. meta strip) */
|
||
returnFocus?: () => HTMLElement | null
|
||
beforeCode?: ReactNode
|
||
}
|
||
|
||
/**
|
||
* Shared code export Sheet — ReUI Frame + sticky footer.
|
||
* Preview DNA: https://reui.io/preview/base/sheet-8 · Frame https://reui.io/docs/components/base/frame
|
||
* Alert: https://reui.io/docs/components/base/alert
|
||
*/
|
||
function CodeExportSheet({
|
||
open,
|
||
onClose,
|
||
title,
|
||
description,
|
||
formats,
|
||
initialFormatId,
|
||
onLiveFetch,
|
||
liveBusy,
|
||
liveLabel = "С роутера",
|
||
className,
|
||
beforeCode,
|
||
returnFocus,
|
||
}: CodeExportSheetProps) {
|
||
const firstId = formats[0]?.id ?? "default"
|
||
const initialTab = initialFormatId && formats.some(format => format.id === initialFormatId) ? initialFormatId : firstId
|
||
const resetKey = JSON.stringify([open, initialTab])
|
||
const [previousKey, setPreviousKey] = useState(resetKey)
|
||
const [tab, setTab] = useState(initialTab)
|
||
const [copiedCode, setCopiedCode] = useState<string | null>(null)
|
||
if (previousKey !== resetKey) {
|
||
setPreviousKey(resetKey)
|
||
if (open) { setTab(initialTab); setCopiedCode(null) }
|
||
}
|
||
|
||
const active = useMemo(
|
||
() => formats.find((f) => f.id === tab) ?? formats[0],
|
||
[formats, tab],
|
||
)
|
||
|
||
const code = active?.code ?? ""
|
||
const copied = !!code && copiedCode === code
|
||
const emptyMessage = active?.emptyMessage
|
||
const filename = active?.filename ?? "export.txt"
|
||
const canCopy = Boolean(code) && !emptyMessage
|
||
const isLive = Boolean(active?.isLive)
|
||
const showTabs = formats.length > 1
|
||
|
||
async function handleCopy() {
|
||
if (!canCopy) return
|
||
setCopiedCode(null)
|
||
try {
|
||
await navigator.clipboard.writeText(code)
|
||
setCopiedCode(code)
|
||
setTimeout(() => setCopiedCode(null), 1800)
|
||
} catch { setCopiedCode(null); toast.error("Не удалось скопировать. Повторите действие или скачайте файл.") }
|
||
}
|
||
|
||
return (
|
||
<Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
|
||
<SheetContent finalFocus={returnFocus}
|
||
className={cn(
|
||
"flex w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-xl",
|
||
className,
|
||
)}
|
||
>
|
||
<SheetHeader className="shrink-0 gap-1 border-b px-5 pt-5 pb-4 pr-12">
|
||
<SheetTitle className="text-base font-semibold tracking-tight">
|
||
{title}
|
||
</SheetTitle>
|
||
{description ? (
|
||
<SheetDescription className="font-mono text-xs">
|
||
{description}
|
||
</SheetDescription>
|
||
) : null}
|
||
</SheetHeader>
|
||
|
||
<div className="flex min-h-0 flex-1 flex-col gap-3 px-5 py-4">
|
||
{showTabs ? (
|
||
<Tabs
|
||
value={tab}
|
||
onValueChange={(v) => setTab(String(v))}
|
||
className="shrink-0 gap-0"
|
||
>
|
||
<TabsList className="h-9 w-full">
|
||
{formats.map((f) => (
|
||
<TabsTrigger key={f.id} value={f.id} className="flex-1 px-2 text-xs sm:text-sm">
|
||
{f.label}
|
||
</TabsTrigger>
|
||
))}
|
||
</TabsList>
|
||
</Tabs>
|
||
) : null}
|
||
|
||
{onLiveFetch || beforeCode ? (
|
||
<div className="flex shrink-0 flex-wrap items-center justify-between gap-2">
|
||
<div className="flex min-w-0 flex-wrap items-center gap-2">
|
||
{onLiveFetch ? (
|
||
<Badge
|
||
variant={isLive ? "success-light" : "secondary"}
|
||
size="sm"
|
||
radius="full"
|
||
>
|
||
{isLive ? "С роутера" : "Локально"}
|
||
</Badge>
|
||
) : null}
|
||
{beforeCode}
|
||
</div>
|
||
{onLiveFetch ? (
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="sm"
|
||
className="shrink-0"
|
||
disabled={liveBusy}
|
||
onClick={() => onLiveFetch(tab)}
|
||
aria-label="Подтянуть конфиг с роутера с private-key"
|
||
>
|
||
{liveBusy ? (
|
||
<LoaderCircleIcon className="size-3.5 animate-spin" />
|
||
) : (
|
||
<RefreshCwIcon className="size-3.5" />
|
||
)}
|
||
{liveBusy ? "Загрузка…" : liveLabel}
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
|
||
<Frame dense className="flex min-h-0 flex-1 flex-col">
|
||
<FramePanel className="relative flex min-h-0 flex-1 flex-col overflow-hidden p-0">
|
||
{emptyMessage ? (
|
||
<div className="flex flex-1 items-center p-4">
|
||
<Alert variant="warning" className="w-full">
|
||
<TriangleAlertIcon />
|
||
<AlertTitle>Нет данных</AlertTitle>
|
||
<AlertDescription>{emptyMessage}</AlertDescription>
|
||
</Alert>
|
||
</div>
|
||
) : (
|
||
<ScrollArea className="h-full min-h-0 flex-1">
|
||
<div className="min-h-[min(52vh,22rem)]">
|
||
<CodeBlock code={code} />
|
||
</div>
|
||
</ScrollArea>
|
||
)}
|
||
</FramePanel>
|
||
</Frame>
|
||
|
||
{onLiveFetch && !isLive ? (
|
||
<p className="text-muted-foreground shrink-0 text-[11px] leading-snug">
|
||
Локальный снимок. Подтяните с роутера, если нужен private-key с устройства.
|
||
</p>
|
||
) : null}
|
||
</div>
|
||
|
||
<SheetFooter className="shrink-0 flex-row items-center justify-between gap-3 border-t px-5 py-3.5 sm:flex-row">
|
||
<SheetClose
|
||
render={
|
||
<Button type="button" variant="ghost" className="shrink-0 px-3" />
|
||
}
|
||
>
|
||
Закрыть
|
||
</SheetClose>
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="default"
|
||
disabled={!canCopy}
|
||
onClick={() => downloadText(filename, code)}
|
||
>
|
||
<DownloadIcon className="size-4" />
|
||
Файл
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
size="default"
|
||
disabled={!canCopy}
|
||
onClick={handleCopy}
|
||
className="min-w-28"
|
||
>
|
||
{copied ? (
|
||
<CheckIcon className="size-4 text-success" />
|
||
) : (
|
||
<CopyIcon className="size-4" />
|
||
)}
|
||
{copied ? "Скопировано" : "Копировать"}
|
||
</Button>
|
||
</div>
|
||
</SheetFooter>
|
||
</SheetContent>
|
||
</Sheet>
|
||
)
|
||
}
|
||
|
||
export { CodeExportSheet, CodeBlock, downloadText }
|