Компонент ConfirmDialog в WordPress является экспериментальной функцией, построенной на основе компонента Modal. Он отображает диалоговое окно с кнопками подтверждения и отмены. Этот компонент позволяет показывать пользователю сообщения для подтверждения, при этом пользователь может подтвердить действие с помощью клавиши Enter или отменить его с помощью клавиши ESC.
Этот компонент полезен в ситуациях, когда необходимо, чтобы пользователи подтвердили или отменили действие, например, при удалении записи, отправке формы или подтверждении критических изменений.
В этой статье мы подробно рассмотрим, как использовать компонент ConfirmDialog как в контролируемом, так и в неконтролируемом режимах, а также изучим его пропсы и лучшие практики.
Что такое ConfirmDialog?
Компонент ConfirmDialog отображает диалоговое окно с подтверждением и настраиваемым содержимым. Он может быть использован в двух режимах:
- Контролируемый режим: родительский компонент управляет состоянием диалога (открыто/закрыто).
- Неконтролируемый режим: компонент сам управляет состоянием, открывая и закрывая диалог при различных действиях пользователя.
Основное использование ConfirmDialog
Компонент предоставляет два способа использования: неконтролируемый и контролируемый режимы.
Неконтролируемый режим
В неконтролируемом режиме диалоговое окно отображается автоматически при монтировании компонента. Пользователь может отменить диалог, кликнув вне его или нажав ESC. Вот пример использования ConfirmDialog в этом режиме:
import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
function Example() {
return (
<ConfirmDialog onConfirm={() => console.log('Подтверждено!')}>
Вы уверены, что хотите продолжить? <strong>Это действие невозможно отменить!</strong>
</ConfirmDialog>
);
}
В этом примере диалог автоматически появляется при рендере компонента. Когда пользователь подтверждает действие, в консоль выводится сообщение «Подтверждено!».
Контролируемый режим
В контролируемом режиме родительский компонент управляет состоянием видимости диалога через пропс isOpen. Это дает больше контроля над отображением диалога.
import { useState } from 'react';
import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
function Example() {
const [isOpen, setIsOpen] = useState(true); // Диалог открыт по умолчанию.
const handleConfirm = () => {
console.log('Подтверждено!');
setIsOpen(false); // Закрываем диалог при подтверждении.
};
const handleCancel = () => {
console.log('Отменено!');
setIsOpen(false); // Закрываем диалог при отмене.
};
return (
<ConfirmDialog
isOpen={isOpen}
onConfirm={handleConfirm}
onCancel={handleCancel}
>
Вы уверены? <strong>Это действие невозможно отменить!</strong>
</ConfirmDialog>
);
}
Здесь диалог управляется состоянием isOpen, которое изначально установлено в true. Когда пользователь подтверждает или отменяет действие, срабатывает соответствующий колбэк (handleConfirm или handleCancel), и диалог закрывается путем изменения состояния isOpen на false.
Пропсы компонента ConfirmDialog
Компонент ConfirmDialog имеет несколько пропсов, которые позволяют настроить поведение и внешний вид диалога.
Основные пропсы:
- title: Опциональный пропс, задающий заголовок диалога. Если задан, он будет отображаться в верхней части диалога.
- children: Пропс, содержащий сообщение для диалога. Это обязательный пропс, который передается как JSX-контент.
- isOpen: Опциональный пропс, управляющий состоянием видимости диалога в контролируемом режиме.
- onConfirm: Обязательный пропс, который принимает функцию, вызываемую при подтверждении. Обычно это происходит, когда пользователь нажимает кнопку «OK» или клавишу Enter.
- onCancel: Обязательный пропс в контролируемом режиме, который принимает функцию, вызываемую при отмене. Это срабатывает при нажатии кнопки «Cancel», клавиши ESC или клике за пределами диалога.
- confirmButtonText: Опциональный пропс, который задает текст на кнопке подтверждения. По умолчанию это «OK».
- cancelButtonText: Опциональный пропс, который задает текст на кнопке отмены. По умолчанию это «Cancel».
Пример использования с дополнительными пропсами
Вот пример компонента ConfirmDialog с использованием дополнительных пропсов, таких как заголовок и кастомные тексты на кнопках:
import { useState } from 'react';
import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
function Example() {
const [isOpen, setIsOpen] = useState(true);
const handleConfirm = () => {
console.log('Действие подтверждено!');
setIsOpen(false);
};
const handleCancel = () => {
console.log('Действие отменено!');
setIsOpen(false);
};
return (
<ConfirmDialog
isOpen={isOpen}
onConfirm={handleConfirm}
onCancel={handleCancel}
title="Подтверждение действия"
confirmButtonText="Да, продолжить"
cancelButtonText="Нет, отменить"
>
Вы уверены, что хотите удалить этот элемент? <strong>Это действие нельзя отменить!</strong>
</ConfirmDialog>
);
}
В этом примере мы добавили заголовок, а также изменили текст на кнопках подтверждения и отмены.
Лучшие практики при использовании ConfirmDialog
- Для кратких сообщений: Используйте компонент
ConfirmDialogдля отображения кратких сообщений, где необходимо подтвердить или отменить действие. - Дескриптивные тексты: Убедитесь, что текст на кнопке подтверждения является понятным и описательным. Например, используйте «Да, продолжить» или «Удалить», вместо обычного «OK».
- Однократное использование: Избегайте использования нескольких экземпляров
ConfirmDialogодновременно, так как это может привести к некорректной работе из-за особенностей реализации компонентаModal.
Заключение
Компонент ConfirmDialog предоставляет удобный способ для получения подтверждения пользователя перед выполнением критичных операций в интерфейсе WordPress. Вы можете использовать его в двух режимах — контролируемом и неконтролируемом — в зависимости от того, насколько хотите контролировать поведение диалога.