1
0
silverbullet/packages/web/components/top_bar.tsx

94 lines
2.2 KiB
TypeScript
Raw Normal View History

2022-06-17 18:17:22 +00:00
import { useEffect, useState } from "react";
import { ShortcutItem, Notification } from "../types";
function prettyName(s: string | undefined): string {
if (!s) {
return "";
}
return s.replaceAll("/", " / ");
}
export function TopBar({
pageName,
unsavedChanges,
notifications,
2022-06-17 18:17:22 +00:00
shortcutItems,
onClick,
2022-04-04 16:33:13 +00:00
lhs,
rhs,
}: {
pageName?: string;
unsavedChanges: boolean;
notifications: Notification[];
2022-06-17 18:17:22 +00:00
shortcutItems: ShortcutItem[];
onClick: () => void;
2022-04-04 16:33:13 +00:00
lhs?: React.ReactNode;
rhs?: React.ReactNode;
}) {
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);
};
}, []);
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>
</div>
2022-04-04 16:33:13 +00:00
{rhs}
</div>
);
}