دیالوگ تأیید (ConfirmDialog)

معرفی

کامپوننت ConfirmDialog یک لایه بالاتر روی AlertDialog است که جریان تأیید رایج را ساده‌تر می‌کند. مناسب برای تأیید حذف، اعمال غیرقابل بازگشت، یا هر عملیاتی که نیاز به تأیید صریح کاربر دارد.

چه زمانی استفاده کنیم:

• برای تأییدهای ساده که فقط به یک پیام و دو دکمه (تأیید/لغو) نیاز دارند
• وقتی می‌خواهید جریان تأیید را بدون کدنویسی اضافی پیاده‌سازی کنید
• برای عملیات مخرب رایج مثل حذف آیتم از لیست

چه زمانی استفاده نکنیم:

• برای تأییدهایی که به محتوای کاملاً سفارشی یا چند مرحله‌ای نیاز دارند — از AlertDialog مستقیم استفاده کنید تا کنترل بیشتری داشته باشید
• برای محتوای پیچیده‌تر از یک پیام ساده (مثل فرم) — از Dialog استفاده کنید

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

import { ConfirmDialog, Button } from '@partodata/ui'

export default function MyComponent() {
  return (
    <ConfirmDialog
      trigger={<Button variant="destructive">حذف کاربر</Button>}
      description="آیا مطمئن هستید که می‌خواهید این کاربر را حذف کنید؟ این عمل غیرقابل بازگشت است."
      variant="destructive"
      onConfirm={() => console.log('حذف شد')}
    />
  )
}

انواع

حالت مخرب

با اسلات alert — زمینهٔ اضافه

وقتی تأیید به بیش از یک پاراگراف نیاز دارد (توضیح پیامدهای برگشت‌ناپذیر)، از prop alert استفاده کنید که یک Callout بین سربرگ و فوتر رندر می‌کند. variant آن به‌صورت پیش‌فرض وقتی دیالوگ destructive باشد destructive و در غیر این صورت warning است.

<ConfirmDialog
  trigger={<Button variant="outline">حذف گزارش</Button>}
  variant="destructive"
  title="حذف گزارش؟"
  description="این گزارش برای همیشه حذف می‌شود."
  alert={{
    title: 'این اقدام برگشت‌ناپذیر است',
    description: 'پس از حذف، امکان بازیابی داده‌های این گزارش وجود ندارد.',
  }}
  confirmLabel="حذف"
  onConfirm={deleteReport}
/>

تأیید تایپی با confirmString — اقدام مخرب

برای اقدامات مخرب و برگشت‌ناپذیر (حذف یک منبع نام‌دار)، confirmString یک «دست‌انداز عمدی» اضافه می‌کند: دکمهٔ تأیید تا وقتی کاربر عبارت دقیق را تایپ نکند غیرفعال می‌ماند.

<ConfirmDialog
  trigger={<Button variant="destructive">حذف کمپین</Button>}
  variant="destructive"
  title="حذف کمپین «تخفیف فصلی»؟"
  description="همهٔ داده‌های این کمپین برای همیشه حذف می‌شود."
  confirmString="تخفیف فصلی"
  confirmLabel="حذف دائمی"
  onConfirm={deleteCampaign}
/>

حالت کنترل‌شده

می‌توانید با استفاده از open و onOpenChange حالت دیالوگ را به صورت خارجی کنترل کنید.

const [open, setOpen] = React.useState(false)

<ConfirmDialog
  open={open}
  onOpenChange={setOpen}
  description="آیا از این عمل اطمینان دارید؟"
  onConfirm={handleConfirm}
/>

راهنمای استفاده

جدول ویژگی‌ها

دسترسی‌پذیری

• از AlertDialog Radix UI استفاده می‌کند که focus را به دیالوگ منتقل می‌کند
• با Escape قابل بستن است
• پشتیبانی کامل از کیبورد برای دکمه‌های تأیید و لغو

کامپوننت‌های مرتبط

• AlertDialog — وقتی نیاز به سفارشی‌سازی بیشتر دارید (محتوای پیچیده، چند مرحله‌ای)
• Dialog — برای محتوای غیر confirm که نیاز به فرم یا تعامل بیشتر دارد