zavadil-react-common 1.2.111 → 1.2.112

package/src/component/alerts/UserAlertsWidget.tsx

@@ -2,24 +2,33 @@ import {UserAlert, UserAlerts, UserAlertType} from 'zavadil-ts-common';
 import {useEffect, useState} from "react";
 import UserAlertWidget from "./UserAlertWidget";
 import UserAlertTypeIcon from "./UserAlertTypeIcon";
-import {Button, Stack} from "react-bootstrap";
+import {Stack} from "react-bootstrap";
+import {IconButton} from "../forms";
+import {BsEye, BsTrash} from "react-icons/bs";
 
 export type UserAlertsWidgetProps = {
 	userAlerts: UserAlerts;
 };
 
 export function UserAlertsWidget({userAlerts}: UserAlertsWidgetProps) {
-	const [renderedAlerts, setRenderedAlerts] = useState<UserAlert[]>([...userAlerts.alerts]);
+	const [totalAlerts, setTotalAlerts] = useState<number>(userAlerts.alerts.length);
+	const [renderedAlerts, setRenderedAlerts] = useState<UserAlert[]>([...userAlerts.visibleAlerts]);
 	const [summary, setSummary] = useState<Map<UserAlertType, number>>(userAlerts.getSummary());
 
 	useEffect(() => {
 		userAlerts.addOnChangeHandler(() => {
-			setRenderedAlerts([...userAlerts.alerts]);
+			setTotalAlerts(userAlerts.alerts.length);
+			setRenderedAlerts([...userAlerts.visibleAlerts]);
 			setSummary(userAlerts.getSummary());
 		});
+		const handle = setInterval(
+			() => userAlerts.updateVisibility(),
+			100
+		);
+		return () => clearInterval(handle);
 	}, [userAlerts]);
 
-	if (renderedAlerts.length === 0) return <></>;
+	if (totalAlerts <= 0) return <></>;
 
 	return (
 		<div className="user-alerts border rounded bg-body text-body position-fixed text-end" style={{bottom: 15, right: 15, zIndex: 2147483647}}>
@@ -32,7 +41,7 @@ export function UserAlertsWidget({userAlerts}: UserAlertsWidgetProps) {
 			}
 			<div className="p-2">
 				<Stack direction="horizontal" gap={2} className="justify-content-end align-items-center">
-					<Button size="sm" variant="primary" onClick={() => userAlerts.reset()}>Clear</Button>
+					<IconButton size="sm" variant="primary" onClick={() => userAlerts.hideAll()} icon={<BsEye/>}>Hide</IconButton>
 					{
 						Array.from(summary.entries()).map(
 							(entry, index) => (
@@ -45,6 +54,7 @@ export function UserAlertsWidget({userAlerts}: UserAlertsWidgetProps) {
 							)
 						)
 					}
+					<IconButton size="sm" variant="danger" onClick={() => userAlerts.reset()} icon={<BsTrash/>}>Reset</IconButton>
 				</Stack>
 			</div>
 		</div>