Notification center — панель уведомлений о работе приложений

Обрати внимание

Компонент использует Scrollbar, поэтому необходимо установить его зависимости:

npm install overlayscrollbars@2.7.3

Список уведомлений открывается из главного меню. В меню показывается счётчик непрочитанных сообщений: при 0 он скрыт, при количестве больше 99 отображается «99+».

Новые уведомления появляются в списке и группируются по датам, новые — сверху. Каждый элемент имеет заголовок и время, дополнительно может быть подпись и действия. По наведению или фокусу появляется кнопка удаления. Возможна очистка сообщений за день или удаление всех сразу.

Непрочитанные сообщения помечены синей точкой. По наведению или взаимодействию с элементом (ссылка, кнопка, удаление) сообщение автоматически помечается прочитанным.

При пустом состоянии показывается сообщение «Нет уведомлений», а кнопка «Удалить все» скрыта.

Панель поддерживает прокрутку с «липкой» шапкой и дозагрузку записей. При пустом состоянии показывается сообщение «Нет уведомлений», кнопка «Удалить все» скрыта.

Список может догружать уведомления постранично по мере прокрутки к концу списка. Подпишитесь на KbqNotificationCenterService.onNextPage, чтобы загрузить следующую страницу, добавьте результат в items и управляйте процессом через setLoadingMore, setHasMore и setLoadMoreErrorMode. Порог, при котором начинается загрузка, настраивается свойством scrolledToBottomOffset.

Уведомления можно удалять по одному, группой за день или все сразу. Подпишитесь на KbqNotificationCenterService.onDelete, чтобы отреагировать на удаление — например, удалить элементы на сервере. Событие срабатывает во всех трёх случаях и содержит type ('item', 'group' или 'all') и items — удалённые уведомления.

Центр уведомлений можно открыть в поповере. Например, при размещении в горизонтальном меню.

Предложения по улучшению
Если вы нашли ошибку или хотите доработать статью, создайте запрос на GitHub.