ConfirmDialog

کامپوننت ConfirmDialog برای گرفتن تأیید صریح کاربر قبل از یک عملیات حساس استفاده می‌شود؛ مثل حذف دائمی داده. ترکیبی آماده از Modal + متن + دکمه‌های «تأیید» و «انصراف» است و لازم نیست هر بار از صفر بسازیش.

Import

import { ConfirmDialog } from "fara-ui";

اگر هنوز FaraUI را نصب و راه‌اندازی نکرده‌ای، ابتدا صفحه‌ی شروع به کار را ببین.

Basic Usage

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

<Button onClick={() => setOpen(true)}>حذف آیتم</Button>
<ConfirmDialog
  open={open}
  onClose={() => setOpen(false)}
  onConfirm={handleDelete}
  message="این آیتم برای همیشه حذف می‌شود. مطمئنی؟"
/>;

Playground

title

message

confirmLabel

danger

<ConfirmDialog
  open={open}
  onClose={() => setOpen(false)}
  onConfirm={handleDelete}
  title="حذف آیتم"
  message="این آیتم برای همیشه حذف می‌شود. مطمئنی؟"
  confirmLabel="حذف"
  danger
/>

Danger

با danger دکمه‌ی تأیید قرمز می‌شود — برای عملیات‌های مخرب مثل حذف، که ظاهر هم باید جدی بودنشان را نشان دهد.

Loading

با loading هر دو دکمه غیرفعال می‌شوند و متن دکمه‌ی تأیید به «در حال انجام...» تغییر می‌کند — مناسب برای انتظار تا پایان عملیات async. توجه کن که بستن دیالوگ با Escape و کلیک روی overlay همچنان فعال است؛ اگر می‌خواهی در حین عملیات بسته نشود، open را از سمت خودت کنترل کن.

function DeleteButton({ id }) {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  async function handleDelete() {
    setLoading(true);
    try {
      await deleteItem(id);
      setOpen(false);
    } finally {
      setLoading(false);
    }
  }

  return (
    <>
      <Button onClick={() => setOpen(true)}>حذف</Button>
      <ConfirmDialog
        open={open}
        onClose={() => setOpen(false)}
        onConfirm={handleDelete}
        message="این عملیات قابل بازگشت نیست."
        danger
        loading={loading}
      />
    </>
  );
}

Accessibility

• از Modal زیربنایی استفاده می‌کند، پس بستن با Escape و کلیک بیرون پشتیبانی می‌شود و دکمه‌ی بستن دارای aria-label است.
• message می‌تواند ReactNode باشد؛ متن آن باید توضیح دهد چه عملیاتی در حال تأیید است.
• برای عملیات مخرب، danger را همراه با متن روشن درباره‌ی غیرقابل‌بازگشت بودن عملیات استفاده کن.

Data Attributes and Customize CSS

چون ConfirmDialog از Modal استفاده می‌کند، hookهای Modal برای overlay، dialog و header نیز در DOM حضور دارند. hookهای اختصاصی ConfirmDialog:

Attribute	کاربرد
data-fara-confirm-dialog-message	متن پیام
data-fara-confirm-dialog-actions	ردیف دکمه‌ها؛ دارای data-loading هنگام loading
data-fara-confirm-dialog-cancel	دکمه‌ی انصراف
data-fara-confirm-dialog-confirm	دکمه‌ی تأیید؛ دارای data-danger در حالت danger

[data-fara-confirm-dialog-actions][data-loading] {
  opacity: 0.8;
}

[data-fara-confirm-dialog-confirm][data-danger] {
  background: #dc2626;
}

[data-fara-confirm-dialog-message] {
  max-width: 48ch;
}

در API فعلی className برای خود ConfirmDialog وجود ندارد؛ برای تغییر ظاهر از hookهای Modal و data attributes اختصاصی استفاده کن.

Props

Prop	Type	Default	Description
open	boolean	-	باز یا بسته بودن دیالوگ (الزامی)
onClose	() => void	-	هنگام انصراف یا بستن صدا زده می‌شود (الزامی)
onConfirm	() => void	-	با کلیک روی دکمه‌ی تأیید صدا زده می‌شود (الزامی)
message	ReactNode	-	متن اصلی دیالوگ (الزامی)
title	string	"تایید عملیات"	عنوان دیالوگ
confirmLabel	string	"تایید"	متن دکمه‌ی تأیید
cancelLabel	string	"انصراف"	متن دکمه‌ی انصراف
danger	boolean	false	قرمز کردن دکمه‌ی تأیید (عملیات مخرب)
loading	boolean	false	حالت در حال انجام — دکمه‌ها غیرفعال می‌شوند