users/ryan/modules/simple-bar/simple-bar-source/lib/components/missives/missive.jsx

c589cef163fddefcca977f130319f6b5e3657621 · 1.6 KB · 48 lines raw

1	import * as Uebersicht from "uebersicht";
2	import { SuspenseIcon } from "../icons/icon.jsx";
3	import * as Icons from "../icons/icons.jsx";
4	import { useSimpleBarContext } from "../simple-bar-context.jsx";
5	import * as Utils from "../../utils.js";
6
7	const { React } = Uebersicht;
8
9	/**
10	* Missive component to display a notification.
11	* @param {Object} props - The properties object.
12	* @param {string} props.id - The unique identifier for the missive.
13	* @param {string} props.side - The side where the missive should appear ('left' or 'right').
14	* @param {string} props.content - The content of the missive.
15	* @param {number} [props.timeout] - The timeout for the missive to auto-close.
16	* @returns {JSX.Element} The Missive component.
17	*/
18	export default function Missive({ id, side, content, timeout }) {
19	// Get the setMissives function from the context
20	const { setMissives } = useSimpleBarContext();
21
22	// Generate class names based on the side prop
23	const classes = Utils.classNames("missive", {
24	"missive--left": side === "left",
25	"missive--right": side === "right",
26	});
27
28	// Close the missive by removing it from the context and clearing the timeout.
29	const closeMissive = () => {
30	setMissives((current) => {
31	return current.filter((m) => m.id !== id);
32	});
33	if (timeout) {
34	clearTimeout(timeout);
35	}
36	};
37
38	return (
39	<div key={id} className={classes}>
40	<div className="missive__text">{content}</div>
41	<button className="missive__close" onClick={closeMissive}>
42	<SuspenseIcon>
43	<Icons.Close className="missive__close-icon" />
44	</SuspenseIcon>
45	</button>
46	</div>
47	);
48	}