refactoring majeur (code dupliqué, mort, ...)
- Économie : ~1240 lignes de code dupliqué - Réduction : ~60% du code modal - Amélioration : Cohérence et maintenabilité
This commit is contained in:
61
src/components/base/FormModal.tsx
Normal file
61
src/components/base/FormModal.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { BaseModal } from './BaseModal';
|
||||
import { ErrorDisplay } from './ErrorDisplay';
|
||||
|
||||
interface FormModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (e: React.FormEvent) => Promise<void>;
|
||||
title: string;
|
||||
description?: string;
|
||||
children: ReactNode;
|
||||
loading: boolean;
|
||||
error: string;
|
||||
submitText: string;
|
||||
loadingText?: string;
|
||||
cancelText?: string;
|
||||
maxWidth?: string;
|
||||
}
|
||||
|
||||
export function FormModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSubmit,
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
loading,
|
||||
error,
|
||||
submitText,
|
||||
loadingText = "En cours...",
|
||||
cancelText = "Annuler",
|
||||
maxWidth = "sm:max-w-[500px]"
|
||||
}: FormModalProps) {
|
||||
const footer = (
|
||||
<>
|
||||
<Button type="button" variant="outline" onClick={onClose} disabled={loading}>
|
||||
{cancelText}
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading} form="form-modal">
|
||||
{loading ? loadingText : submitText}
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={title}
|
||||
description={description}
|
||||
footer={footer}
|
||||
maxWidth={maxWidth}
|
||||
>
|
||||
<form id="form-modal" onSubmit={onSubmit} className="space-y-4">
|
||||
<ErrorDisplay error={error} />
|
||||
{children}
|
||||
</form>
|
||||
</BaseModal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user