Компоненты

ConfirmDialog

Подтверждение действия вместо window.confirm.

Подтверждение действия вместо window.confirm: то же назначение, но в стиле приложения, с состоянием «выполняется» и без блокировки потока.

Пример

import { ConfirmDialog } from "@toimetdev/pathlogs-core";

const [open, setOpen] = useState(false);
const [pending, startTransition] = useTransition();

<ConfirmDialog
  open={open}
  pending={pending}
  title="Удалить колонку?"
  message="Карточки переедут в первую оставшуюся колонку."
  confirmLabel="Удалить"
  cancelLabel="Отмена"
  pendingLabel="Удаляем…"
  onConfirm={() => startTransition(() => deleteColumn(id))}
  onCancel={() => setOpen(false)}
/>

Пропсы

Проп	Тип	По умолчанию	Описание
`open`*	`boolean`	—	Показано ли окно.
`title`*	`string`	—	Вопрос — коротко и по делу.
`message`	`string`	—	Последствия действия: что именно произойдёт и что нельзя будет отменить.
`onConfirm`*	`() => void`	—	Подтверждение. Окно само не закрывается — закройте его, когда действие завершится.
`onCancel`*	`() => void`	—	Отказ.
`pending`	`boolean`	`false`	Действие выполняется: кнопки заблокированы, окно не закрыть.
`tone`	`"danger" \| "accent"`	`"danger"`	Разрушающее действие или обычный вопрос.
`confirmLabel`	`string`	`"Confirm"`	Подпись кнопки подтверждения.
`cancelLabel`	`string`	`"Cancel"`	Подпись кнопки отказа.
`pendingLabel`	`string`	`"Working…"`	Подпись во время выполнения.

open*boolean

Показано ли окно.

title*string

Вопрос — коротко и по делу.

messagestring

Последствия действия: что именно произойдёт и что нельзя будет отменить.

onConfirm*() => void

Подтверждение. Окно само не закрывается — закройте его, когда действие завершится.

onCancel*() => void

Отказ.

pendingboolean

по умолчанию: false

Действие выполняется: кнопки заблокированы, окно не закрыть.

tone"danger" | "accent"

по умолчанию: "danger"

Разрушающее действие или обычный вопрос.

confirmLabelstring

по умолчанию: "Confirm"

Подпись кнопки подтверждения.

cancelLabelstring

по умолчанию: "Cancel"

Подпись кнопки отказа.

pendingLabelstring

по умолчанию: "Working…"

Подпись во время выполнения.

Тон

danger — восклицательный знак в треугольнике и красная кнопка: для удаления и всего необратимого. accent — вопросительный знак в круге: для обычных «вы уверены?».

Своя обёртка

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

src/components/Confirm.tsx

import { ConfirmDialog, type ConfirmDialogProps } from "@toimetdev/pathlogs-core";

export function Confirm(props: ConfirmDialogProps) {
  return (
    <ConfirmDialog
      confirmLabel="Подтвердить"
      cancelLabel="Отмена"
      pendingLabel="Выполняем…"
      {...props}
    />
  );
}

Фреймворк на такие обёртки не претендует: набор подписей зависит от тона продукта, а не от компонента.