zavadil-react-common 1.2.115 → 1.2.117

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.esm.js +1 -1
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/component/alerts/UserAlertsWidget.tsx +9 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zavadil-react-common",
3
- "version": "1.2.115",
3
+ "version": "1.2.117",
4
4
  "description": "Common types for React Typescript UI apps.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
package/src/component/alerts/UserAlertsWidget.tsx CHANGED
@@ -5,12 +5,14 @@ import UserAlertTypeIcon from "./UserAlertTypeIcon";
5
5
  import {Stack} from "react-bootstrap";
6
6
  import {IconButton} from "../forms";
7
7
  import {BsEye, BsTrash} from "react-icons/bs";
8
+ import {VscEyeClosed} from "react-icons/vsc";
8
9
 
9
10
  export type UserAlertsWidgetProps = {
10
11
  userAlerts: UserAlerts;
11
12
  };
12
13
 
13
14
  export function UserAlertsWidget({userAlerts}: UserAlertsWidgetProps) {
15
+ const [showAll, setShowAll] = useState<boolean>(false);
14
16
  const [totalAlerts, setTotalAlerts] = useState<number>(userAlerts.alerts.length);
15
17
  const [renderedAlerts, setRenderedAlerts] = useState<UserAlert[]>([...userAlerts.visibleAlerts]);
16
18
  const [summary, setSummary] = useState<Map<UserAlertType, number>>(userAlerts.getSummary());
@@ -18,10 +20,10 @@ export function UserAlertsWidget({userAlerts}: UserAlertsWidgetProps) {
18
20
  const onChangeHandler = useCallback(
19
21
  () => {
20
22
  setTotalAlerts(userAlerts.alerts.length);
21
- setRenderedAlerts([...userAlerts.visibleAlerts]);
23
+ setRenderedAlerts(showAll ? [...userAlerts.alerts] : [...userAlerts.visibleAlerts]);
22
24
  setSummary(userAlerts.getSummary());
23
25
  },
24
- [userAlerts]
26
+ [userAlerts, showAll]
25
27
  );
26
28
 
27
29
  useEffect(() => {
@@ -43,6 +45,7 @@ export function UserAlertsWidget({userAlerts}: UserAlertsWidgetProps) {
43
45
  return (
44
46
  <div className="user-alerts border rounded bg-body text-body position-fixed text-end" style={{bottom: 15, right: 15, zIndex: 2147483647}}>
45
47
  {
48
+ renderedAlerts.length > 0 &&
46
49
  <div className="max-w-50 p-2 border-bottom">
47
50
  {
48
51
  renderedAlerts.map((a, index) => <UserAlertWidget key={index} userAlert={a} maxDurationMs={userAlerts.maxVisibilityMs}/>)
@@ -51,7 +54,10 @@ export function UserAlertsWidget({userAlerts}: UserAlertsWidgetProps) {
51
54
  }
52
55
  <div className="p-2">
53
56
  <Stack direction="horizontal" gap={2} className="justify-content-end align-items-center">
54
- <IconButton size="sm" variant="primary" onClick={() => userAlerts.hideAll()} icon={<BsEye/>}>Hide</IconButton>
57
+ {
58
+ showAll ? <IconButton size="sm" variant="primary" onClick={() => setShowAll(false)} icon={<VscEyeClosed/>}>Hide</IconButton>
59
+ : <IconButton size="sm" variant="primary" onClick={() => setShowAll(true)} icon={<BsEye/>}>Show All</IconButton>
60
+ }
55
61
  {
56
62
  Array.from(summary.entries()).map(
57
63
  (entry, index) => (