diff --git a/.changeset/kind-things-listen.md b/.changeset/kind-things-listen.md new file mode 100644 index 000000000..3b23a22b0 --- /dev/null +++ b/.changeset/kind-things-listen.md @@ -0,0 +1,5 @@ +--- +"@wpmudev/sui-notification": patch +--- + +fix(notification): rename `id` to `count` in notification push logic diff --git a/.changeset/nice-olives-create.md b/.changeset/nice-olives-create.md new file mode 100644 index 000000000..929ac8c3a --- /dev/null +++ b/.changeset/nice-olives-create.md @@ -0,0 +1,5 @@ +--- +"@wpmudev/sui-notification": patch +--- + +fix remove + add support for `count` property and implement removal by count diff --git a/packages/ui/notification/src/notification.tsx b/packages/ui/notification/src/notification.tsx index 3a98e72a8..275a2715a 100644 --- a/packages/ui/notification/src/notification.tsx +++ b/packages/ui/notification/src/notification.tsx @@ -9,6 +9,7 @@ import { useNotifications } from "./use-notification" import { useStyles } from "@wpmudev/sui-hooks" const Notification: React.FC = ({ + count, id, title, message = "message", @@ -34,10 +35,10 @@ const Notification: React.FC = ({ useEffect(() => { if (!isInline && !isDismissible) { setTimeout(() => { - notifications.remove(id) + notifications.removeByCount(count) }, timeout ?? 5000) } - }, [id, isInline, notifications, timeout, isDismissible]) + }, [id, count, isInline, notifications, timeout, isDismissible]) /** * Hide notification when click on dismiss button diff --git a/packages/ui/notification/src/notification.types.ts b/packages/ui/notification/src/notification.types.ts index e2aae9e16..dbdb0d9b9 100644 --- a/packages/ui/notification/src/notification.types.ts +++ b/packages/ui/notification/src/notification.types.ts @@ -11,6 +11,7 @@ interface NotificationProps extends SuiStyleType, SuiHTMLAttributes> { id?: string // unique ID for the notification + count?: number // notification count title?: ReactNode // title content of the notification (can be any valid React node) message?: ReactNode // message content of the notification (can be any valid React node) action?: ReactNode // notification action diff --git a/packages/ui/notification/src/use-notification.tsx b/packages/ui/notification/src/use-notification.tsx index 631d326b9..d0eac3ca5 100644 --- a/packages/ui/notification/src/use-notification.tsx +++ b/packages/ui/notification/src/use-notification.tsx @@ -12,13 +12,19 @@ let listeners: Function[] = [] const notificationStore = { // function to push a new notification to the store push: (options: NotificationProps) => { - notifications = [...notifications, { ...options, id: id++ }] + notifications = [...notifications, { ...options, count: id++ }] emitChange() }, // function to remove a notification from the store based on its ID remove: (idStr: string | undefined) => { notifications = notifications.filter( - (alert: any) => alert?.id !== (idStr ?? ""), + (alert: NotificationProps) => alert?.id !== (idStr ?? ""), + ) + emitChange() + }, + removeByCount: (count?: number) => { + notifications = notifications.filter( + (alert: NotificationProps) => alert?.count !== count, ) emitChange() }, @@ -50,6 +56,7 @@ const useNotifications = () => { return { push: notificationStore.push, remove: notificationStore.remove, + removeByCount: notificationStore.removeByCount, queue, } }