AlertDialog

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

Для работы с AlertDialog необходимо использовать несколько ключевых элементов:

  • AlertDialog — контейнер для всего диалога.
  • AlertDialogOverlay — затемнённый фон, который блокирует взаимодействие с остальной частью интерфейса.
  • AlertDialogContent — основной блок, содержащий текст, кнопки и другие элементы.
  • AlertDialogHeader, AlertDialogBody, AlertDialogFooter — структурируют содержимое.
  • AlertDialogCloseButton — необязательная кнопка закрытия диалога.
  • leastDestructiveRef — ссылка на кнопку, которая предотвращает случайное удаление данных.

Простейший пример AlertDialog

import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogContent,
  AlertDialogOverlay,
  Button,
} from "@chakra-ui/react";
import { useRef, useState } from "react";

function DeleteConfirmation() {
  const [isOpen, setIsOpen] = useState(false);
  const cancelRef = useRef();

  const onCl ose = () => setIsOpen(false);
  const onDel ete = () => {
    console.log("Действие подтверждено");
    onClose();
  };

  return (
    <>
      <Button colorScheme="red" onCl ick={() => setIsOpen(true)}>
        Удалить
      </Button>

      <AlertDialog
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onCl ose={onClose}
      >
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader fontSize="lg" fontWeight="bold">
              Подтверждение удаления
            </AlertDialogHeader>

            <AlertDialogBody>
              Вы действительно хотите удалить этот элемент? Это действие невозможно отменить.
            </AlertDialogBody>

            <AlertDialogFooter>
              <Button ref={cancelRef} onCl ick={onClose}>
                Отмена
              </Button>
              <Button colorScheme="red" onCl ick={onDelete} ml={3}>
                Удалить
              </Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
    </>
  );
}

В этом примере:

  • isOpen управляет видимостью диалога.
  • cancelRef указывает на кнопку «Отмена», чтобы фокус по умолчанию был безопасным.
  • AlertDialogOverlay создаёт затемнённый фон для модального окна.
  • AlertDialogContent содержит заголовок, тело и футер с кнопками.

Управление фокусом и безопасностью

leastDestructiveRef — ключевой параметр. Он гарантирует, что фокус при открытии диалога будет на кнопке, которая не приведёт к разрушительным действиям. Это улучшает UX и предотвращает случайное выполнение критических операций.

Можно использовать initialFocusRef, чтобы указать элемент, на который фокус будет установлен при открытии. Если не задать ни leastDestructiveRef, ни initialFocusRef, Chakra автоматически устанавливает фокус на первый интерактивный элемент, что может быть опасно при критических действиях.

<AlertDialog
  isOpen={isOpen}
  leastDestructiveRef={cancelRef}
  initialFocusRef={deleteButtonRef}
  onCl ose={onClose}
>

Настройка стиля и размера

AlertDialogContent поддерживает пропсы maxW, minW, borderRadius и bg для управления шириной, закруглением углов и цветом фона.

<AlertDialogContent maxW="400px" borderRadius="md" bg="gray.50">

Можно применять стандартные Chakra UI стили, включая тени, отступы и цветовую палитру.

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

Если действие требует обращения к серверу, рекомендуется использовать состояние загрузки для кнопки:

const [isLoading, setIsLoading] = useState(false);

const onDel ete = async () => {
  setIsLoading(true);
  await api.deleteItem(itemId);
  setIsLoading(false);
  onClose();
};

<Button
  colorScheme="red"
  onCl ick={onDelete}
  ml={3}
  isLoading={isLoading}
>
  Удалить
</Button>

Это предотвращает повторные клики и даёт пользователю визуальный отклик, что процесс выполняется.

Композиция с другими компонентами

AlertDialog может использоваться совместно с FormControl, Input, Checkbox и другими элементами Chakra UI, если необходимо собрать дополнительную информацию перед подтверждением. Например, можно потребовать от пользователя ввести слово «DELETE» для подтверждения.

<AlertDialogBody>
  Введите "DELETE", чтобы подтвердить удаление:
  <Input mt={2} ref={inputRef} value={value} onCha nge={handleChange} />
</AlertDialogBody>

Мобильная адаптивность

Компонент полностью адаптивен. AlertDialogOverlay и AlertDialogContent автоматически подстраиваются под размеры экрана. Для оптимизации на мобильных устройствах можно использовать maxW="90vw" и p={4}:

<AlertDialogContent maxW="90vw" p={4}>

Это гарантирует удобное использование на небольших экранах и предотвращает выход контента за границы экрана.

Заключение по структуре и поведению

  • Структура: Overlay → Content → Header/Body/Footer.
  • Фокус: leastDestructiveRef обязательный для безопасности.
  • Стилизация: стандартные пропсы Chakra UI применимы.
  • Асинхронность: кнопки можно делать с индикатором загрузки.
  • Компоновка: можно встраивать формы и интерактивные элементы.
  • Адаптивность: автоматическая подстройка под размеры экрана.

Использование AlertDialog в Chakra UI обеспечивает безопасное и удобное взаимодействие пользователя с критическими действиями, при этом оставаясь полностью настраиваемым и совместимым с остальными компонентами библиотеки.

Оглавление