88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
import { useEffect, useState, type ReactNode } from "react";
|
|
import { ChevronDown } from "lucide-react";
|
|
import { usePlatformLanguage } from "../i18n/LanguageContext";
|
|
|
|
type CardProps = {
|
|
title?: ReactNode;
|
|
children: ReactNode;
|
|
actions?: ReactNode;
|
|
collapsible?: boolean;
|
|
collapseKey?: string;
|
|
persistCollapse?: boolean;
|
|
};
|
|
|
|
function resolveCollapseStorageKey(collapsible: boolean, persistCollapse: boolean, collapseKey: string | undefined, title: ReactNode): string | null {
|
|
if (!collapsible || !persistCollapse) return null;
|
|
if (collapseKey) return `govoplan.card.collapsed:${collapseKey}`;
|
|
if (typeof window === "undefined" || typeof title !== "string") return null;
|
|
const normalizedTitle = title.trim();
|
|
if (!normalizedTitle) return null;
|
|
return `govoplan.card.collapsed:${window.location.pathname}:${normalizedTitle}`;
|
|
}
|
|
|
|
function readCollapseState(storageKey: string | null): boolean {
|
|
if (!storageKey || typeof window === "undefined") return false;
|
|
try {
|
|
return window.localStorage.getItem(storageKey) === "1";
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function writeCollapseState(storageKey: string | null, collapsed: boolean): void {
|
|
if (!storageKey || typeof window === "undefined") return;
|
|
try {
|
|
window.localStorage.setItem(storageKey, collapsed ? "1" : "0");
|
|
} catch {
|
|
|
|
// localStorage may be unavailable in private or restricted contexts.
|
|
}}
|
|
|
|
export default function Card({ title, children, actions, collapsible = false, collapseKey, persistCollapse = true }: CardProps) {
|
|
const { translateText } = usePlatformLanguage();
|
|
const storageKey = resolveCollapseStorageKey(collapsible, persistCollapse, collapseKey, title);
|
|
const [collapseState, setCollapseState] = useState(() => ({ storageKey, collapsed: readCollapseState(storageKey) }));
|
|
const collapsed = collapseState.storageKey === storageKey ? collapseState.collapsed : readCollapseState(storageKey);
|
|
const hasHeader = Boolean(title || actions || collapsible);
|
|
const body = <div className="card-body">{children}</div>;
|
|
const shouldRenderBody = !collapsible || !collapsed;
|
|
const collapseLabel = translateText(collapsed ? "i18n:govoplan-core.show_content.0528d8d2" : "i18n:govoplan-core.show_header_only.24afefca");
|
|
|
|
useEffect(() => {
|
|
setCollapseState({ storageKey, collapsed: readCollapseState(storageKey) });
|
|
}, [storageKey]);
|
|
|
|
function toggleCollapsed() {
|
|
const nextCollapsed = !collapsed;
|
|
writeCollapseState(storageKey, nextCollapsed);
|
|
setCollapseState({ storageKey, collapsed: nextCollapsed });
|
|
}
|
|
|
|
return (
|
|
<section className={`card${collapsible ? " card-collapsible" : ""}${collapsed ? " is-collapsed" : ""}`}>
|
|
{hasHeader &&
|
|
<header className="card-header">
|
|
{title && (typeof title === "string" ? <h2>{translateText(title)}</h2> : <div className="card-title-node">{title}</div>)}
|
|
{(actions || collapsible) &&
|
|
<div className="card-actions">
|
|
{actions}
|
|
{collapsible &&
|
|
<button
|
|
type="button"
|
|
className="card-collapse-toggle"
|
|
aria-label={collapseLabel}
|
|
aria-expanded={!collapsed}
|
|
title={collapseLabel}
|
|
onClick={toggleCollapsed}>
|
|
|
|
<ChevronDown size={18} strokeWidth={2.4} aria-hidden="true" />
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
</header>
|
|
}
|
|
{shouldRenderBody && (collapsible ? <div className="card-collapse-region">{body}</div> : body)}
|
|
</section>);
|
|
|
|
} |