Popconfirm

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

Основные свойства Popconfirm

1. title Текст, отображаемый в окне подтверждения. Обычно краткий вопрос вроде “Вы уверены, что хотите удалить элемент?”. Тип значения: ReactNode | string.

2. onConfirm Функция, которая выполняется при подтверждении действия пользователем. Срабатывает после клика по кнопке подтверждения. Тип: (event: React.MouseEvent<HTMLElement>) => void.

3. onCancel Функция, выполняемая при отмене действия. Тип: (event: React.MouseEvent<HTMLElement>) => void.

4. okText и cancelText Текст на кнопках подтверждения и отмены соответственно. Позволяет локализовать или изменить стандартные “Ok” и “Cancel”.

5. okType Тип кнопки подтверждения. Например, "primary", "danger". Используется для визуального выделения опасных действий, например удаления.

6. placement Положение всплывающего окна относительно элемента:

  • "topLeft", "top", "topRight"
  • "bottomLeft", "bottom", "bottomRight"
  • "leftTop", "left", "leftBottom"
  • "rightTop", "right", "rightBottom"

7. disabled Логическое значение, блокирующее отображение Popconfirm.

8. icon Иконка, отображаемая слева от текста подтверждения. По умолчанию используется предупреждающая иконка. Можно передать кастомный компонент React.

9. trigger Событие, вызывающее Popconfirm. По умолчанию "click". Может быть изменено на "hover" или "contextMenu".

Пример базового использования

import React from 'react';
import { Popconfirm, Button } from 'antd';

const DeleteButton = () => {
  const confirmDelete = () => {
    console.log('Элемент удален');
  };

  return (
    <Popconfirm
      title="Вы уверены, что хотите удалить этот элемент?"
      onConf irm={confirmDelete}
      okText="Да"
      cancelText="Нет"
      okType="danger"
    >
      <Button type="primary">Удалить</Button>
    </Popconfirm>
  );
};

export default DeleteButton;

В этом примере кнопка обернута в Popconfirm. При клике появляется всплывающее окно с вопросом и двумя кнопками: подтверждения и отмены.

Использование с разными позициями

Popconfirm позволяет настраивать положение всплывающего окна с помощью свойства placement. Это полезно при ограниченном пространстве на экране или при необходимости визуально согласовать окно с окружающими элементами.

<Popconfirm
  title="Вы уверены?"
  onConf irm={() => console.log('Подтверждено')}
  okText="Да"
  cancelText="Нет"
  placement="topRight"
>
  <Button>Удалить</Button>
</Popconfirm>

Кастомизация кнопок и иконок

Кнопки и иконки Popconfirm можно полностью кастомизировать. Например, для опасных действий лучше использовать красную кнопку:

<Popconfirm
  title="Удалить запись?"
  onConf irm={() => console.log('Удалено')}
  okText="Удалить"
  cancelText="Отмена"
  okType="danger"
  icon={<CustomWarningIcon />}
>
  <Button type="primary">Удалить</Button>
</Popconfirm>

CustomWarningIcon может быть любым React-компонентом, например SVG или иконкой из библиотеки Ant Design Icons.

Управление видимостью Popconfirm

Свойство visible позволяет полностью контролировать отображение компонента программно. Вместе с onVisibleChange можно реализовать сложные сценарии:

import React, { useState } from 'react';
import { Popconfirm, Button } from 'antd';

const ControlledPopconfirm = () => {
  const [visible, setVisible] = useState(false);

  const handleConfirm = () => {
    console.log('Подтверждено');
    setVisible(false);
  };

  const handleCancel = () => {
    console.log('Отменено');
    setVisible(false);
  };

  return (
    <Popconfirm
      title="Вы уверены?"
      visible={visible}
      onVisibleCha nge={setVisible}
      onConf irm={handleConfirm}
      onCan cel={handleCancel}
      okText="Да"
      cancelText="Нет"
    >
      <Button onCl ick={() => setVisible(true)}>Удалить элемент</Button>
    </Popconfirm>
  );
};

export default ControlledPopconfirm;

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

Советы по использованию

  • Для действий с высоким риском рекомендуется использовать okType="danger" для визуального акцента.
  • При использовании Popconfirm с динамическими списками рекомендуется добавлять уникальный key для каждого компонента.
  • Для улучшения UX можно добавлять анимацию или использовать кастомные иконки.
  • Popconfirm работает с любыми интерактивными элементами: кнопками, ссылками, иконками.

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

Оглавление