Ограничение количества уведомлений

В библиотеке Ant Design для управления уведомлениями используется компонент notification. Он позволяет создавать системные уведомления с настраиваемым контентом, временем отображения и позицией на экране. В некоторых случаях возникает необходимость ограничить количество одновременно отображаемых уведомлений, чтобы интерфейс оставался чистым и не перегружался визуально. Ant Design предоставляет для этого встроенные механизмы.

Основные методы компонента notification

Компонент notification предоставляет несколько методов:

  • notification.open(config) – открывает уведомление с указанной конфигурацией.
  • notification.info(config), notification.success(config), notification.warning(config), notification.error(config) – открывают уведомления с предопределенным стилем.
  • notification.close(key) – закрывает уведомление по ключу.
  • notification.destroy() – закрывает все уведомления.

Каждое уведомление может иметь уникальный key, что позволяет управлять отдельными уведомлениями и предотвращать дублирование.

Установка максимального количества уведомлений

Ant Design поддерживает глобальную настройку максимального количества отображаемых уведомлений через метод notification.config. Ключевое свойство для ограничения количества уведомлений:

import { notification } from 'antd';

notification.config({
  maxCount: 3, // Максимальное количество уведомлений на экране
});

Пояснение ключевых параметров:

  • maxCount – число уведомлений, которое может одновременно отображаться. Если вызывается notification.open при достижении лимита, самое старое уведомление автоматически закрывается, уступая место новому.
  • duration – время, через которое уведомление автоматически исчезнет (в секундах). По умолчанию 4.5.
  • placement – позиция уведомления на экране (topLeft, topRight, bottomLeft, bottomRight).

Пример с duration и placement:

notification.config({
  maxCount: 2,
  duration: 3,
  placement: 'topRight',
});

В этом примере одновременно могут отображаться только два уведомления в правом верхнем углу, каждое исчезнет через 3 секунды.

Использование уникальных ключей для управления уведомлениями

Каждое уведомление можно идентифицировать через параметр key. Это особенно важно при динамическом отображении сообщений:

const key = `open${Date.now()}`;

notification.open({
  message: 'Системное уведомление',
  description: 'Пример ограничения количества уведомлений',
  key,
});

Использование key позволяет:

  • Закрыть конкретное уведомление: notification.close(key).
  • Обновить существующее уведомление при повторном вызове notification.open({ key, ... }).

Реализация логики «FIFO» для уведомлений

При ограничении количества уведомлений старые сообщения автоматически исчезают, но можно управлять этим вручную, если требуется дополнительная логика:

let notifications = [];

function showNotification(message) {
  const key = `notif_${Date.now()}`;

  if (notifications.length >= 3) {
    const oldestKey = notifications.shift();
    notification.close(oldestKey);
  }

  notifications.push(key);

  notification.open({
    message,
    key,
  });
}

В этом примере реализована очередь FIFO (First In, First Out): когда достигается лимит в 3 уведомления, старейшее закрывается перед отображением нового.

Ограничение количества уведомлений на уровне компонента

Для приложений с большим количеством динамических уведомлений иногда полезно создавать обертку вокруг notification, которая будет централизованно управлять количеством и временем жизни сообщений:

class NotificationManager {
  constructor(maxCount = 3) {
    this.maxCount = maxCount;
    this.notifications = [];
  }

  show(message, duration = 4.5) {
    const key = `notif_${Date.now()}`;
    if (this.notifications.length >= this.maxCount) {
      const oldest = this.notifications.shift();
      notification.close(oldest);
    }
    this.notifications.push(key);

    notification.open({
      message,
      key,
      duration,
    });
  }
}

const manager = new NotificationManager(3);
manager.show('Новое уведомление');

Такой подход позволяет централизованно управлять уведомлениями во всех частях приложения, не дублируя логику в разных компонентах.

Советы по UX при ограничении уведомлений

  • Не превышать 3–4 уведомления одновременно – это обеспечивает удобочитаемость и не перегружает интерфейс.
  • Использовать уникальные ключи для важных уведомлений, чтобы предотвратить дублирование.
  • Настраивать duration для временных сообщений и оставлять более длительное отображение только для критических уведомлений.
  • Использовать placement в зависимости от контекста приложения: правый верхний угол подходит для большинства дашбордов, левый нижний – для уведомлений действий пользователя.
Оглавление