186 lines
4 KiB
TypeScript
186 lines
4 KiB
TypeScript
import { Modal } from './modal';
|
|
import { Button } from './button';
|
|
import { cn } from '@/lib/utils';
|
|
import { AlertCircle, Info } from 'lucide-react';
|
|
|
|
export interface DialogProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
variant?: 'default' | 'alert' | 'confirm' | 'info';
|
|
onConfirm?: () => void | Promise<void>;
|
|
onCancel?: () => void;
|
|
confirmLabel?: string;
|
|
cancelLabel?: string;
|
|
showCancel?: boolean;
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
}
|
|
|
|
const variantIcons = {
|
|
alert: AlertCircle,
|
|
confirm: AlertCircle,
|
|
info: Info,
|
|
default: undefined,
|
|
};
|
|
|
|
const variantStyles = {
|
|
alert: 'text-destructive',
|
|
confirm: 'text-primary',
|
|
info: 'text-blue-600',
|
|
default: '',
|
|
};
|
|
|
|
/**
|
|
* Composant Dialog avancé avec header, body, footer et actions.
|
|
*/
|
|
export function Dialog({
|
|
open,
|
|
onClose,
|
|
title,
|
|
children,
|
|
footer,
|
|
variant = 'default',
|
|
onConfirm,
|
|
onCancel,
|
|
confirmLabel = 'Confirm',
|
|
cancelLabel = 'Cancel',
|
|
showCancel = true,
|
|
size = 'md',
|
|
}: DialogProps) {
|
|
const handleConfirm = async () => {
|
|
if (onConfirm) {
|
|
await onConfirm();
|
|
}
|
|
onClose();
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
if (onCancel) {
|
|
onCancel();
|
|
}
|
|
onClose();
|
|
};
|
|
|
|
const IconComponent = variantIcons[variant];
|
|
const iconStyle = variantStyles[variant];
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
onClose={onClose}
|
|
size={size}
|
|
closeOnOverlayClick={variant === 'default'}
|
|
>
|
|
<div className="flex flex-col">
|
|
{/* Header */}
|
|
{title && (
|
|
<DialogHeader variant={variant}>
|
|
<div className="flex items-center gap-3">
|
|
{IconComponent && (
|
|
<IconComponent className={cn('h-5 w-5', iconStyle)} />
|
|
)}
|
|
<h2 className="text-2xl font-semibold leading-none tracking-tight">
|
|
{title}
|
|
</h2>
|
|
</div>
|
|
</DialogHeader>
|
|
)}
|
|
|
|
{/* Body */}
|
|
<DialogBody variant={variant}>{children}</DialogBody>
|
|
|
|
{/* Footer */}
|
|
{footer || onConfirm || onCancel ? (
|
|
<DialogFooter>
|
|
{footer ? (
|
|
footer
|
|
) : (
|
|
<div className="flex justify-end gap-2">
|
|
{showCancel && (
|
|
<Button variant="outline" onClick={handleCancel}>
|
|
{cancelLabel}
|
|
</Button>
|
|
)}
|
|
{onConfirm && (
|
|
<Button
|
|
variant={variant === 'alert' ? 'destructive' : 'default'}
|
|
onClick={handleConfirm}
|
|
>
|
|
{confirmLabel}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</DialogFooter>
|
|
) : null}
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export interface DialogHeaderProps {
|
|
children: React.ReactNode;
|
|
variant?: 'default' | 'alert' | 'confirm' | 'info';
|
|
className?: string;
|
|
}
|
|
|
|
export function DialogHeader({
|
|
children,
|
|
variant = 'default',
|
|
className,
|
|
}: DialogHeaderProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center justify-between p-6 border-b',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface DialogBodyProps {
|
|
children: React.ReactNode;
|
|
variant?: 'default' | 'alert' | 'confirm' | 'info';
|
|
className?: string;
|
|
}
|
|
|
|
export function DialogBody({
|
|
children,
|
|
variant = 'default',
|
|
className,
|
|
}: DialogBodyProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'p-6',
|
|
variant === 'alert' && 'text-destructive-foreground',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface DialogFooterProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function DialogFooter({ children, className }: DialogFooterProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center justify-end gap-2 p-6 border-t',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|