从头开始创建一个自动产生文档/类型安全的现代API(19) 添加删除功能/二次确认对话框 (结束）

完整演示

先看一下完整演示：

添加confirmation dialog hook

添加 hooks/use-confirmation-dialog.tsx:

"use client"

import * as React from "react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"

interface ConfirmationDialogOptions {
  title?: string
  description?: string
  confirmText?: string
  cancelText?: string
  variant?: "default" | "destructive"
}

type ConfirmCallback = () => void | Promise<void>
type CancelCallback = () => void | Promise<void>

interface UseConfirmationDialogReturn {
  ConfirmationDialog: React.FC
  confirm: (onConfirm: ConfirmCallback, onCancel?: CancelCallback, options?: ConfirmationDialogOptions) => void
}

export function useConfirmationDialog(defaultOptions?: ConfirmationDialogOptions): UseConfirmationDialogReturn {
  const [isDialogOpen, setIsDialogOpen] = React.useState(false)
  const [options, setOptions] = React.useState<ConfirmationDialogOptions>(
    defaultOptions || {
      title: "Are you sure?",
      description: "This action cannot be undone.",
      confirmText: "Confirm",
      cancelText: "Cancel",
      variant: "default",
    },
  )
  const [onConfirmCallback, setOnConfirmCallback] = React.useState<ConfirmCallback | null>(null)
  const [onCancelCallback, setOnCancelCallback] = React.useState<CancelCallback | null>(null)

  const confirm = React.useCallback(
    (onConfirm: ConfirmCallback, onCancel?: CancelCallback, customOptions?: ConfirmationDialogOptions) => {
      setOnConfirmCallback(() => onConfirm)
      if (onCancel) {
        setOnCancelCallback(() => onCancel)
      }
      if (customOptions) {
        setOptions((prev) => ({ ...prev, ...customOptions }))
      }
      setIsDialogOpen(true)
    },
    [],
  )

  const handleConfirm = React.useCallback(() => {
    if (onConfirmCallback) {
      onConfirmCallback()
    }
    setIsDialogOpen(false)
  }, [onConfirmCallback])

  const handleCancel = React.useCallback(() => {
    if (onCancelCallback) {
      onCancelCallback()
    }
    setIsDialogOpen(false)
  }, [onCancelCallback])

  const ConfirmationDialog: React.FC = React.useCallback(
    () => (
      <AlertDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{options.title}</AlertDialogTitle>
            <AlertDialogDescription>{options.description}</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={handleCancel}>{options.cancelText}</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleConfirm}
              className={
                options.variant === "destructive"
                  ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
                  : ""
              }
            >
              {options.confirmText}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    ),
    [isDialogOpen, options, handleConfirm, handleCancel],
  )

  return { ConfirmationDialog, confirm }
}

修改 page.tsx

function SortableTaskItem(...){

const deleteMutation = useDeleteTask(task.id);

const { ConfirmationDialog, confirm } = useConfirmationDialog();

function handleDelete(id: number) {
    confirm(
      // Confirm callback
      () => {
        deleteMutation.mutate();
        onDelete(id);
      },
      // Cancel callback
      () => {},
      // Custom options
      {
        title: "Delete task?",
        description: `Are you sure you want to delete the task?`,
        confirmText: "Delete",
        cancelText: "Cancel",
        variant: "destructive",
      },
    );
  };
}

...
return (
...
      <ConfirmationDialog />
    </div>
)

---

作者：Bearalise
出处：从头开始创建一个自动产生文档/类型安全的现代API(19) 添加删除功能/二次确认对话框 (结束）
版权：本文版权归作者所有
转载：欢迎转载，但未经作者同意，必须保留此段声明，必须在文章中给出原文链接。