markus/next-ory
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases 1 Packages Wiki Activity Actions

NORY-47: create confirmation dialog wrapper component

Browse source
This commit is contained in:
Markus Thielker 2025-01-01 23:10:38 +01:00
parent 9a2e349340
commit 7cef969bb8
No known key found for this signature in database
2 changed files with 82 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
dashboard/src/components/confirmation-dialog-wrapper.tsx Normal file
View file

@ -0,0 +1,81 @@
'use client';
import { Button, ButtonProps } from '@/components/ui/button';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { ReactNode } from 'react';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
interface ButtonWithConfirmDialogProps {
buttonProps?: ButtonProps,
onCancel?: () => any
onSubmit: () => any
tooltipContent?: string
dialogTitle: string
dialogDescription: string
dialogButtonCancel?: string
dialogButtonCancelProps?: ButtonProps
dialogButtonSubmit?: string
dialogButtonSubmitProps?: ButtonProps
children: ReactNode
}
export function ConfirmationDialogWrapper(
{
onCancel,
onSubmit,
tooltipContent,
dialogTitle,
dialogDescription,
dialogButtonCancel,
dialogButtonCancelProps,
dialogButtonSubmit,
dialogButtonSubmitProps,
children,
}: ButtonWithConfirmDialogProps) {
return (
<Tooltip>
<TooltipContent className={tooltipContent ? '' : 'hidden'}>
{tooltipContent}
</TooltipContent>
<AlertDialog>
<AlertDialogTrigger asChild>
<TooltipTrigger asChild>
{children}
</TooltipTrigger>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{dialogTitle}</AlertDialogTitle>
<AlertDialogDescription>{dialogDescription}</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel asChild>
<Button
onClick={onCancel}
{...dialogButtonCancelProps}>
{dialogButtonCancel ?? 'Cancel'}
</Button>
</AlertDialogCancel>
<AlertDialogAction asChild>
<Button
onClick={onSubmit}
{...dialogButtonSubmitProps}>
{dialogButtonSubmit ?? 'Confirm'}
</Button>
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</Tooltip>
);
}

2
dashboard/src/components/ui/alert-dialog.tsx
View file

@ -104,7 +104,7 @@ const AlertDialogAction = React.forwardRef<
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Action
ref={ref}
className={cn(buttonVariants(), className)}
className={className}
{...props}
/>
));