Подтверждающие диалоги

Подтверждающие диалоги в Ant Design реализуются с помощью компонента Modal, который предоставляет готовый интерфейс для диалоговых окон с кнопками подтверждения и отмены. Наиболее часто используются функции Modal.confirm, Modal.info, Modal.success, Modal.error и Modal.warning, каждая из которых подходит для конкретных сценариев.

Основы использования Modal.confirm

Modal.confirm создаёт диалог с двумя основными кнопками: «ОК» и «Отмена». Он позволяет быстро реализовать стандартные сценарии подтверждения действий пользователя, таких как удаление записи или выполнение критической операции.

import { Modal, Button } from 'antd';

const showConfirm = () => {
  Modal.confirm({
    title: 'Вы уверены?',
    content: 'Данное действие нельзя будет отменить.',
    okText: 'Да',
    cancelText: 'Нет',
    onOk() {
      console.log('Подтверждено');
    },
    onCancel() {
      console.log('Отменено');
    },
  });
};

<Button onCl ick={showConfirm}>Удалить</Button>

Ключевые моменты:

  • title – заголовок диалога.
  • content – содержимое, объясняющее действие.
  • okText и cancelText – текст кнопок.
  • onOk и onCancel – колбэки для обработки действий пользователя.

Использование разных типов модальных окон

Ant Design предоставляет несколько типов модальных окон, которые автоматически применяют подходящие иконки и стили:

  1. Modal.info – для информационных сообщений.
  2. Modal.success – при успешном завершении действия.
  3. Modal.error – для сообщений об ошибках.
  4. Modal.warning – для предупреждений.

Пример:

Modal.success({
  title: 'Успешно!',
  content: 'Данные успешно сохранены.',
});

Эти функции возвращают объект модального окна, что позволяет управлять его состоянием программно, например, закрывать окно с помощью modal.destroy().

Асинхронные операции в onOk

Функция onOk поддерживает возврат Promise, что позволяет показывать индикатор загрузки, пока выполняется асинхронное действие:

Modal.confirm({
  title: 'Подтвердите удаление',
  content: 'Процесс удаления займет некоторое время.',
  onOk: () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('Удаление завершено');
        resolve();
      }, 2000);
    });
  },
});

При возврате Promise кнопка «ОК» автоматически блокируется до завершения операции, а диалог закрывается только после успешного выполнения промиса.

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

Кнопки можно полностью кастомизировать с помощью свойств okButtonProps и cancelButtonProps, которые принимают объект с параметрами, аналогичными кнопкам Ant Design:

Modal.confirm({
  title: 'Удаление записи',
  content: 'Вы точно хотите удалить эту запись?',
  okText: 'Удалить',
  cancelText: 'Отмена',
  okButtonProps: { danger: true, type: 'primary' },
  cancelButtonProps: { type: 'default' },
});
  • danger: true выделяет кнопку красным цветом для критических действий.
  • type позволяет управлять стилем кнопки: primary, default, dashed, link, text.

Вложенные и кастомные модальные окна

Ant Design поддерживает вложенные модальные окна и кастомное содержимое, включая формы, списки и любые React-компоненты:

import { Form, Input } from 'antd';

const showModalWithForm = () => {
  const [form] = Form.useForm();

  Modal.confirm({
    title: 'Создать пользователя',
    content: (
      <Form form={form}>
        <Form.Item name="username" label="Имя пользователя" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
    ),
    onOk: async () => {
      try {
        const values = await form.validateFields();
        console.log('Данные формы:', values);
      } catch (err) {
        console.log('Ошибка валидации');
        return Promise.reject();
      }
    },
  });
};

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

Управление жизненным циклом модальных окон

Все модальные окна, созданные через Modal API, возвращают объект с методами:

  • destroy() – принудительно закрывает окно.
  • update(config) – динамически обновляет содержимое, заголовок и кнопки без закрытия.

Пример динамического обновления:

const modal = Modal.info({
  title: 'Загрузка',
  content: 'Пожалуйста, подождите...',
  okText: 'Закрыть',
});

setTimeout(() => {
  modal.update({
    title: 'Готово',
    content: 'Данные успешно загружены!',
  });
}, 2000);

События закрытия

Ant Design предоставляет события onCancel, onOk и глобальные хуки afterClose, что позволяет выполнять дополнительную логику после полного закрытия модального окна:

Modal.confirm({
  title: 'Подтверждение',
  content: 'Закрытие окна выполнит сохранение данных.',
  onOk() { console.log('ОК'); },
  onCancel() { console.log('Отмена'); },
  afterClose() { console.log('Модальное окно закрыто'); },
});

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

Вывод

Компоненты Modal и методы Modal.confirm, Modal.info, Modal.success, Modal.error, Modal.warning предоставляют мощный и гибкий инструмент для реализации подтверждающих диалогов. Они позволяют обрабатывать асинхронные операции, динамически менять содержимое, кастомизировать кнопки и интегрироваться с любыми React-компонентами, обеспечивая при этом единый стиль интерфейса и удобство для пользователя.

Оглавление