Глобальная настройка Message

В библиотеке Ant Design компонент Message используется для отображения кратких уведомлений пользователю. Он предоставляет API для создания сообщений различных типов: успех, ошибка, предупреждение, информация и загрузка. Глобальная настройка Message позволяет централизованно управлять поведением всех уведомлений в приложении, что особенно важно для поддержания консистентного UX и упрощения поддержки кода.

Основные возможности глобальной конфигурации

Компонент Message имеет метод config, который позволяет задавать параметры по умолчанию для всех последующих вызовов Message. Ключевые параметры:

top – расстояние от верхнего края окна до уведомления.

import { message } from 'antd';

message.config({
  top: 100, // 100 пикселей от верха
});

duration – стандартное время отображения сообщения в секундах. По умолчанию 3 секунды.
```
message.config({
  duration: 5, // 5 секунд
});
```
maxCount – максимальное количество одновременно отображаемых сообщений. При превышении лимита старые сообщения автоматически удаляются.
```
message.config({
  maxCount: 3,
});
```
rtl – режим отображения справа налево (для языков с направлением текста справа налево).
```
message.config({
  rtl: true,
});
```
prefixCls – задаёт префикс CSS-класса для компонента, используется для кастомизации стилей через CSS или Less.
```
message.config({
  prefixCls: 'custom-message',
});
```

Применение глобальной конфигурации

Глобальная настройка Message применяется один раз, обычно при инициализации приложения. Например, в App.js или index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { message } from 'antd';
import App from './App';

message.config({
  top: 80,
  duration: 4,
  maxCount: 5,
});

ReactDOM.render(<App />, document.getElementById('root'));

После этого все вызовы message.success, message.error, message.info и т.д. будут наследовать эти параметры по умолчанию.

Локальная переопределяемость

Хотя глобальная конфигурация задаёт параметры по умолчанию, каждый вызов Message может иметь свои собственные настройки, которые переопределяют глобальные:

message.success('Операция выполнена', 2); // duration = 2 секунды
message.error('Произошла ошибка', { duration: 5, top: 120 }); // передача объекта с настройками

В последних версиях Ant Design допустимо использовать объект с настройками:

message.info({
  content: 'Информационное сообщение',
  duration: 6,
  top: 150,
});

Динамическое управление сообщениями

Глобальная конфигурация не влияет на методы управления отдельными сообщениями через возвращаемый объект:

const key = 'updatable';

message.loading({ content: 'Загрузка...', key });

setTimeout(() => {
  message.success({ content: 'Загрузка завершена', key, duration: 2 });
}, 3000);

Использование key позволяет обновлять или заменять сообщение, сохраняя его идентификатор для управления отображением. При этом глобальные параметры, такие как top и maxCount, продолжают действовать.

Настройка анимации и стилей

Хотя глобальная конфигурация напрямую не задаёт анимацию, изменение prefixCls позволяет полностью контролировать стили через CSS или Less:

.custom-message {
  .ant-message-notice {
    border-radius: 8px;
    background-color: #f0f5ff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

Это удобно для соблюдения фирменного стиля приложения, не затрагивая логику отображения сообщений.