دیالوگ تأیید (Confirm Dialog)

معرفی

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

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

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

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

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

استفاده

import { ConfirmDialog, Button } from '@parto-system-design/ui'

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

انواع

حالت مخرب

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

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

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

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

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

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

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

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

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

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