fix: i18n (#71)

* fix: block_identifier text

* fix: i18n

* chore: auto-fix linting and formatting issues

* fix: block button

* fix: ConfirmBlock text

* fix: i18n

---------

Co-authored-by: hamster1963 <hamster1963@users.noreply.github.com>
This commit is contained in:
仓鼠
2024-12-23 00:38:40 +08:00
committed by GitHub
parent 4d12682cdf
commit 5e3db19ed6
8 changed files with 172 additions and 16 deletions

View File

@@ -21,6 +21,12 @@ interface ButtonGroupProps<E, U> {
delete: { fn: (id: E[]) => Promise<void>; id: E; mutate: KeyedMutator<U> }
}
interface BlockButtonGroupProps<E, U> {
className?: string
children?: React.ReactNode
block: { fn: (id: E[]) => Promise<void>; id: E; mutate: KeyedMutator<U> }
}
export function ActionButtonGroup<E, U>({
className,
children,
@@ -66,3 +72,49 @@ export function ActionButtonGroup<E, U>({
</div>
)
}
export function BlockButtonGroup<E, U>({
className,
children,
block: { fn, id, mutate },
}: BlockButtonGroupProps<E, U>) {
const { t } = useTranslation()
const handleBlock = async () => {
try {
await fn([id])
} catch (error: any) {
toast(t("Error"), {
description: error.message,
})
}
await mutate()
}
return (
<div className={className}>
{children}
<AlertDialog>
<AlertDialogTrigger asChild>
<IconButton variant="destructive" icon="ban" />
</AlertDialogTrigger>
<AlertDialogContent className="sm:max-w-lg">
<AlertDialogHeader>
<AlertDialogTitle>{t("ConfirmBlock")}</AlertDialogTitle>
<AlertDialogDescription>
{t("Results.ThisOperationIsUnrecoverable")}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t("Close")}</AlertDialogCancel>
<AlertDialogAction
className={buttonVariants({ variant: "destructive" })}
onClick={handleBlock}
>
{t("Confirm")}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
)
}

View File

@@ -21,6 +21,12 @@ interface ButtonGroupProps<E, U> {
delete: { fn: (id: E[]) => Promise<void>; id: E[]; mutate: KeyedMutator<U> }
}
interface ButtonBlockGroupProps<E, U> {
className?: string
children?: React.ReactNode
block: { fn: (id: E[]) => Promise<void>; id: E[]; mutate: KeyedMutator<U> }
}
export function HeaderButtonGroup<E, U>({
className,
children,
@@ -83,3 +89,66 @@ export function HeaderButtonGroup<E, U>({
</div>
)
}
export function HeaderBlockButtonGroup<E, U>({
className,
children,
block: { fn, id, mutate },
}: ButtonBlockGroupProps<E, U>) {
const { t } = useTranslation()
const handleBlock = async () => {
try {
await fn(id)
} catch (error: any) {
toast(t("Error"), {
description: error.message,
})
}
await mutate()
}
return (
<div className={className}>
{id.length < 1 ? (
<>
<IconButton
variant="destructive"
icon="ban"
onClick={() => {
toast(t("Error"), {
description: t("Results.NoRowsAreSelected"),
})
}}
/>
{children}
</>
) : (
<>
<AlertDialog>
<AlertDialogTrigger asChild>
<IconButton variant="destructive" icon="trash" />
</AlertDialogTrigger>
<AlertDialogContent className="sm:max-w-lg">
<AlertDialogHeader>
<AlertDialogTitle>{t("ConfirmBlock")}</AlertDialogTitle>
<AlertDialogDescription>
{t("Results.ThisOperationIsUnrecoverable")}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t("Close")}</AlertDialogCancel>
<AlertDialogAction
className={buttonVariants({ variant: "destructive" })}
onClick={handleBlock}
>
{t("Confirm")}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{children}
</>
)}
</div>
)
}

View File

@@ -1,5 +1,6 @@
import { Button, ButtonProps } from "@/components/ui/button"
import {
BanIcon,
Check,
CircleArrowUp,
Clipboard,
@@ -29,6 +30,7 @@ export interface IconButtonProps extends ButtonProps {
| "download"
| "upload"
| "menu"
| "ban"
}
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
@@ -77,6 +79,9 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props,
case "menu": {
return <Menu />
}
case "ban": {
return <BanIcon />
}
}
})()}
</Button>