shelving/ui/notice/Notices.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect } from "react";
import { useStore } from "../../react/useStore.js";
import { getFlexClass } from "../style/Flex.js";
import { getClass } from "../util/css.js";
import { subscribeNotices } from "../util/notice.js";
import { Notice } from "./Notice.js";
import NOTICES_CSS from "./Notices.module.css";
import { NOTICES } from "./NoticesStore.js";
/**
 * Output the global list of notices.
 * - Listens for `"notice"` events on `window` (or that bubble up to `window`) and shows them in the global notice list.
 * - This is how e.g. `<Button>` and `<FormNotify>` components send notices into the global list.
 */
export function Notices(props) {
    const notices = useStore(NOTICES).value;
    useEffect(() => {
        // Subscribe to global notices.
        return subscribeNotices((message, status) => NOTICES.show(message, status));
    });
    return (_jsx("aside", { className: getClass(NOTICES_CSS.notices, getFlexClass(props)), children: notices.map(({ key, value }) => (_jsx(Notice, { ...value }, key))) }));
}