Delete Resource

import { useState } from "react";
import { DeleteResource, Button } from "@cloudflare/kumo";

export function DeleteResourceBasicDemo() {
  const [open, setOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsDeleting(false);
    setOpen(false);
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting}
      />
    </>
  );
}

安装

DeleteResource 是一个 block —— 通过 CLI 安装、归你所有且可自定义的组件。与普通组件不同，block 会复制到你的项目中，因此你可以完全掌控代码。

1. 初始化 Kumo 配置（仅首次）

npx @cloudflare/kumo init

2. 安装 block

npx @cloudflare/kumo add DeleteResource

3. 从本地路径导入

// The path depends on your kumo.json blocksDir setting
// Default: src/components/kumo/
import { DeleteResource } from "./components/kumo/delete-resource/delete-resource";

为什么用 block？ Block 让你完全拥有代码，允许你自定义删除流程以满足特定需求。它们非常适合常需针对具体项目定制的关键操作。

用法

import { useState } from "react";
import { DeleteResource } from "./components/kumo/delete-resource/delete-resource";
import { Button } from "@cloudflare/kumo";

export default function Example() {
  const [open, setOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      await deleteZone("example.com");
      setOpen(false);
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting}
      />
    </>
  );
}

示例

Worker 删除

适用于任何资源类型 —— 只需更改 resourceType 与 resourceName 属性。

import { useState } from "react";
import { DeleteResource, Button } from "@cloudflare/kumo";

export function DeleteResourceWorkerDemo() {
  const [open, setOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsDeleting(false);
    setOpen(false);
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Worker
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Worker"
        resourceName="api-gateway-worker"
        onDelete={handleDelete}
        isDeleting={isDeleting}
      />
    </>
  );
}

错误状态

使用 errorMessage 属性显示错误消息。

import { useState } from "react";
import { DeleteResource, Button } from "@cloudflare/kumo";

export function DeleteResourceErrorDemo() {
  const [open, setOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [errorMsg, setErrorMsg] = useState<string>("");

  const handleDelete = async () => {
    setErrorMsg("");
    setIsDeleting(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsDeleting(false);
    setErrorMsg("Something went wrong");
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting}
        errorMessage={errorMsg}
      />
    </>
  );
}

API 参考

Prop	Type	Default	Description
size	`"sm" \| "base"`	`"base"`	-
open*	`boolean`	-	Whether the dialog is open
resourceType*	`string`	-	The type of resource being deleted (e.g., "Zone", "Worker", "KV Namespace")
resourceName*	`string`	-	The name of the specific resource being deleted
isDeleting	`boolean`	-	Whether the delete action is in progress
caseSensitive	`boolean`	-	Whether the confirmation input should be case-sensitive (default: true)
deleteButtonText	`string`	-	Custom delete button text (defaults to "Delete {resourceType}")
className	`string`	-	Additional className for the dialog
errorMessage	`string`	-	Error message to display if the delete action fails