دیالوگ تأیید (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}
/>

اقدامی که کاربر اجازه‌اش را ندارد

اقدامی که کاربر ممکن است اجازه‌اش را نداشته باشد در صفحه پنهان نمی‌شود: GatedAction ماشهٔ پنجره است (trigger)، دور همان Button. وقتی اجازه نیست پنجره باز نمی‌شود و دکمه دلیلش را نشان می‌دهد؛ ConfirmDialog را درون GatedAction نگذارید (فقط دکمه را می‌تواند غیرفعال کند):

<ConfirmDialog
  trigger={
    <GatedAction allowed={canDelete} reason="حذف منبع فقط برای مدیران فضای کار ممکن است">
      <Button variant="default">حذف</Button>
    </GatedAction>
  }
  title="منابع انتخاب‌شده حذف شوند؟"
  description="منابع انتخاب‌شده و داده‌های جمع‌آوری‌شده‌شان برای همیشه حذف می‌شوند."
  variant="destructive"
  confirmLabel="حذف"
  onConfirm={deleteSources}
/>

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

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

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

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

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

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

آناتومی v2 — تأیید گروهی

دکمهٔ تأیید پیش‌فرض primary است (پیش‌تر پرکنندهٔ معکوس و در تم روشن سیاه بود) و «انصراف» بدون variant؛ تأیید مخرب همان قرمز یکدست است. در تأیید تایپی فیلد هنگام باز شدن فوکوس می‌گیرد، placeholder هرگز با پاسخ یکی نیست (خاکستریِ «6» شبیه پرشده می‌خواند) و Enter پس از تطابق تأیید می‌کند؛ هر تأیید دیگر روی «انصراف» شروع می‌شود تا Enter بی‌قصد تأیید نکند.

<ConfirmDialog
  open={open}
  onOpenChange={setOpen}
  sectioned
  size="lg"
  title="ورود مجدد برای 4 اکانت"
  description="ورود دوباره برای اکانت‌های نیازمند ورود."
  confirmLabel="ورود مجدد برای 4 اکانت"
  loadingLabel={`${done} از ${total}`}
  onConfirm={run}
  result={results && <BulkResultList items={results} onRetry={retry} />}
>
  <TargetList title="اجرا می‌شود" items={runnable} />
  <TargetList title="کنار گذاشته می‌شود" tone="warning" reason="سوخته‌ها دوباره وارد نمی‌شوند" items={skipped} />
</ConfirmDialog>

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

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

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

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