284 lines
9.7 KiB
TypeScript
284 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
/* eslint-disable @next/next/no-img-element */
|
|
|
|
import type { MediaKind } from "@prisma/client";
|
|
import { Check, Link2, Search, Type, Upload } from "lucide-react";
|
|
import { useEffect, useId, useMemo, useRef, useState } from "react";
|
|
|
|
import type { MediaOption } from "@/lib/media";
|
|
import { cn } from "@/lib/utils";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
|
|
export type MediaFieldState = {
|
|
mode: "upload" | "external" | "library";
|
|
assetId: string;
|
|
url: string;
|
|
label: string;
|
|
kind: MediaKind;
|
|
isCleared?: boolean;
|
|
};
|
|
|
|
type MediaFieldPickerProps = {
|
|
title: string;
|
|
value: MediaFieldState;
|
|
onChange: (nextValue: MediaFieldState) => void;
|
|
options: MediaOption[];
|
|
hasInitialValue?: boolean;
|
|
inputName: string;
|
|
fileFieldName: string;
|
|
fileLabel?: string;
|
|
externalLabel?: string;
|
|
libraryLabel?: string;
|
|
accept?: string;
|
|
allowExternal?: boolean;
|
|
allowClear?: boolean;
|
|
clearLabel?: string;
|
|
emptyValue?: Partial<MediaFieldState>;
|
|
};
|
|
|
|
export function MediaFieldPicker({
|
|
title,
|
|
value,
|
|
onChange,
|
|
options,
|
|
hasInitialValue = false,
|
|
inputName,
|
|
fileFieldName,
|
|
fileLabel,
|
|
externalLabel,
|
|
libraryLabel,
|
|
accept,
|
|
allowExternal = true,
|
|
allowClear = false,
|
|
clearLabel = "Remove",
|
|
emptyValue,
|
|
}: MediaFieldPickerProps) {
|
|
const hiddenInputRef = useRef<HTMLInputElement | null>(null);
|
|
const searchId = useId();
|
|
const [libraryQuery, setLibraryQuery] = useState("");
|
|
const modeOptions: Array<MediaFieldState["mode"]> = allowExternal
|
|
? ["upload", "external", "library"]
|
|
: ["upload", "library"];
|
|
const filteredOptions = options.filter((option) => option.kind === value.kind);
|
|
const selectedOption = filteredOptions.find((option) => option.id === value.assetId) ?? null;
|
|
const visibleLibraryOptions = useMemo(() => {
|
|
const normalizedQuery = libraryQuery.trim().toLowerCase();
|
|
|
|
if (!normalizedQuery) {
|
|
return filteredOptions;
|
|
}
|
|
|
|
return filteredOptions.filter((option) => option.label.toLowerCase().includes(normalizedQuery));
|
|
}, [filteredOptions, libraryQuery]);
|
|
const resolvedLabel =
|
|
value.mode === "library"
|
|
? selectedOption?.label ?? value.label
|
|
: value.label;
|
|
const serializedValue = JSON.stringify({
|
|
mode: value.mode,
|
|
assetId: value.assetId,
|
|
url: value.url,
|
|
label: resolvedLabel,
|
|
kind: value.kind,
|
|
});
|
|
const previewUrl =
|
|
value.isCleared
|
|
? ""
|
|
: value.mode === "library"
|
|
? selectedOption?.url ?? ""
|
|
: value.mode === "external"
|
|
? value.url
|
|
: ""
|
|
;
|
|
const hasCurrentValue =
|
|
!value.isCleared &&
|
|
((value.mode === "library" && value.assetId.trim() !== "") ||
|
|
(value.mode === "external" && value.url.trim() !== ""));
|
|
const canClear = allowClear && (hasCurrentValue || (hasInitialValue && !value.isCleared));
|
|
|
|
useEffect(() => {
|
|
const hiddenInput = hiddenInputRef.current;
|
|
|
|
if (!hiddenInput) {
|
|
return;
|
|
}
|
|
|
|
hiddenInput.dispatchEvent(new Event("input", { bubbles: true }));
|
|
hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
|
|
}, [serializedValue]);
|
|
|
|
return (
|
|
<div className="space-y-3 rounded-surface border border-border/80 bg-card p-4 shadow-card">
|
|
<div className="space-y-2">
|
|
<Label className="sr-only">{title}</Label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{modeOptions.map((mode) => (
|
|
<button
|
|
key={mode}
|
|
type="button"
|
|
onClick={() =>
|
|
onChange({
|
|
...value,
|
|
mode,
|
|
assetId: mode === "library" ? value.assetId : "",
|
|
url: mode === "external" ? value.url : "",
|
|
isCleared: false,
|
|
})
|
|
}
|
|
className={cn(
|
|
"rounded-nested border px-4 py-2 text-sm transition-colors",
|
|
value.mode === mode
|
|
? "border-input bg-primary text-primary-foreground"
|
|
: "border-input bg-background text-foreground/75 hover:bg-accent hover:text-accent-foreground",
|
|
)}
|
|
>
|
|
{mode}
|
|
</button>
|
|
))}
|
|
{canClear ? (
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
onChange({
|
|
...value,
|
|
mode: emptyValue?.mode ?? "upload",
|
|
assetId: emptyValue?.assetId ?? "",
|
|
url: emptyValue?.url ?? "",
|
|
label: emptyValue?.label ?? value.label,
|
|
isCleared: true,
|
|
})
|
|
}
|
|
className="rounded-nested border border-destructive/25 px-4 py-2 text-sm text-destructive transition-colors hover:bg-destructive/5"
|
|
>
|
|
{clearLabel}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
<input
|
|
ref={hiddenInputRef}
|
|
type="hidden"
|
|
name={inputName}
|
|
value={serializedValue}
|
|
/>
|
|
|
|
{value.mode !== "library" ? (
|
|
<div className="space-y-2">
|
|
<Label className="sr-only">Label</Label>
|
|
<div className="relative">
|
|
<Type className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
value={value.label}
|
|
onChange={(event) => onChange({ ...value, label: event.target.value, isCleared: false })}
|
|
placeholder="Label"
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{value.mode === "upload" ? (
|
|
<div className="space-y-2">
|
|
<Label className="sr-only">{fileLabel ?? fileFieldName}</Label>
|
|
<div className="relative">
|
|
<Upload className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input name={fileFieldName} type="file" accept={accept} className="pl-9 file:mr-3" />
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{value.mode === "external" ? (
|
|
<div className="space-y-2">
|
|
<Label className="sr-only">{externalLabel ?? "External URL"}</Label>
|
|
<div className="relative">
|
|
<Link2 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
value={value.url}
|
|
onChange={(event) => onChange({ ...value, url: event.target.value, isCleared: false })}
|
|
placeholder={externalLabel ?? "External URL"}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{value.mode === "library" ? (
|
|
<div className="space-y-3">
|
|
<Label className="sr-only">{libraryLabel ?? "Media Library"}</Label>
|
|
<div className="space-y-2 rounded-nested border border-border/80 bg-card p-3">
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={searchId}
|
|
value={libraryQuery}
|
|
onChange={(event) => setLibraryQuery(event.target.value)}
|
|
className="pl-9"
|
|
placeholder="Search media"
|
|
/>
|
|
</div>
|
|
|
|
<div className="max-h-64 space-y-2 overflow-y-auto">
|
|
{visibleLibraryOptions.length > 0 ? (
|
|
visibleLibraryOptions.map((option) => {
|
|
const isActive = option.id === value.assetId;
|
|
|
|
return (
|
|
<button
|
|
key={option.id}
|
|
type="button"
|
|
onClick={() =>
|
|
onChange({
|
|
...value,
|
|
assetId: option.id,
|
|
label: option.label,
|
|
isCleared: false,
|
|
})
|
|
}
|
|
className={cn(
|
|
"flex w-full items-center gap-3 rounded-md border px-3 py-2 text-left transition-colors",
|
|
isActive
|
|
? "border-input bg-accent/40"
|
|
: "border-input bg-background hover:bg-accent/20",
|
|
)}
|
|
>
|
|
{option.url ? (
|
|
<img src={option.url} alt={option.label} className="h-12 w-12 rounded-md object-cover" />
|
|
) : (
|
|
<div className="h-12 w-12 rounded-md border border-border bg-background" />
|
|
)}
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium text-foreground">{option.label}</p>
|
|
<p className="truncate text-xs text-muted-foreground">{option.source}</p>
|
|
</div>
|
|
{isActive ? <Check className="h-4 w-4 text-brand-primary" /> : null}
|
|
</button>
|
|
);
|
|
})
|
|
) : (
|
|
<div className="rounded-md border border-dashed border-input px-3 py-4 text-sm text-muted-foreground">
|
|
No media found.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{previewUrl ? (
|
|
value.kind === "IMAGE" ? (
|
|
<div className="overflow-hidden rounded-md border bg-card">
|
|
<img src={previewUrl} alt={value.label || title} className="h-40 w-full object-cover" />
|
|
</div>
|
|
) : (
|
|
<div className="rounded-md border bg-card px-4 py-3 text-sm text-muted-foreground">
|
|
{previewUrl}
|
|
</div>
|
|
)
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|