2022-06-17 18:17:22 +00:00
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { ShortcutItem, Notification } from "../types";
|
2022-03-20 08:56:28 +00:00
|
|
|
|
|
|
|
function prettyName(s: string | undefined): string {
|
|
|
|
if (!s) {
|
|
|
|
return "";
|
|
|
|
}
|
|
|
|
return s.replaceAll("/", " / ");
|
|
|
|
}
|
|
|
|
|
|
|
|
export function TopBar({
|
|
|
|
pageName,
|
2022-03-31 12:28:07 +00:00
|
|
|
unsavedChanges,
|
2022-03-20 08:56:28 +00:00
|
|
|
notifications,
|
2022-06-17 18:17:22 +00:00
|
|
|
shortcutItems,
|
2022-03-20 08:56:28 +00:00
|
|
|
onClick,
|
2022-04-04 16:33:13 +00:00
|
|
|
lhs,
|
|
|
|
rhs,
|
2022-03-20 08:56:28 +00:00
|
|
|
}: {
|
|
|
|
pageName?: string;
|
2022-03-31 12:28:07 +00:00
|
|
|
unsavedChanges: boolean;
|
2022-03-20 08:56:28 +00:00
|
|
|
notifications: Notification[];
|
2022-06-17 18:17:22 +00:00
|
|
|
shortcutItems: ShortcutItem[];
|
2022-03-20 08:56:28 +00:00
|
|
|
onClick: () => void;
|
2022-04-04 16:33:13 +00:00
|
|
|
lhs?: React.ReactNode;
|
|
|
|
rhs?: React.ReactNode;
|
2022-03-20 08:56:28 +00:00
|
|
|
}) {
|
2022-06-17 18:17:22 +00:00
|
|
|
const [menuExpanded, setMenuExpanded] = useState(false);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
function closer() {
|
|
|
|
setMenuExpanded(false);
|
|
|
|
}
|
|
|
|
|
|
|
|
document.addEventListener("click", closer);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
document.removeEventListener("click", closer);
|
|
|
|
};
|
|
|
|
}, []);
|
|
|
|
|
2022-03-20 08:56:28 +00:00
|
|
|
return (
|
|
|
|
<div id="top" onClick={onClick}>
|
2022-04-04 16:33:13 +00:00
|
|
|
{lhs}
|
|
|
|
<div className="main">
|
|
|
|
<div className="inner">
|
2022-04-10 09:04:07 +00:00
|
|
|
<span
|
|
|
|
className={`current-page ${unsavedChanges ? "unsaved" : "saved"}`}
|
|
|
|
>
|
|
|
|
{prettyName(pageName)}
|
2022-04-04 16:33:13 +00:00
|
|
|
</span>
|
|
|
|
{notifications.length > 0 && (
|
|
|
|
<div className="status">
|
|
|
|
{notifications.map((notification) => (
|
|
|
|
<div key={notification.id}>{notification.message}</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
)}
|
2022-05-06 16:55:04 +00:00
|
|
|
<div className="actions">
|
2022-06-17 18:17:22 +00:00
|
|
|
<button
|
|
|
|
onClick={(e) => {
|
|
|
|
setMenuExpanded(!menuExpanded);
|
|
|
|
e.stopPropagation();
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
...
|
|
|
|
</button>
|
|
|
|
{menuExpanded && (
|
|
|
|
<ul>
|
|
|
|
{shortcutItems.map((actionButton, idx) => (
|
|
|
|
<li key={idx}>
|
|
|
|
<a
|
|
|
|
href="#"
|
|
|
|
onClick={(e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
setMenuExpanded(false);
|
|
|
|
actionButton.run();
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{actionButton.label}
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
)}
|
2022-05-06 16:55:04 +00:00
|
|
|
</div>
|
2022-04-04 16:33:13 +00:00
|
|
|
</div>
|
2022-03-20 08:56:28 +00:00
|
|
|
</div>
|
2022-04-04 16:33:13 +00:00
|
|
|
{rhs}
|
2022-03-20 08:56:28 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|