132 lines
3.2 KiB
TypeScript
132 lines
3.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/**
|
|
* FormSuccess Component
|
|
* Display success messages with different variants and auto-dismiss
|
|
*/
|
|
|
|
export interface FormSuccessProps {
|
|
message?: string;
|
|
variant?: 'inline' | 'block' | 'toast';
|
|
className?: string;
|
|
showIcon?: boolean;
|
|
animate?: boolean;
|
|
autoDismiss?: boolean;
|
|
autoDismissTimeout?: number;
|
|
onClose?: () => void;
|
|
id?: string;
|
|
}
|
|
|
|
export const FormSuccess: React.FC<FormSuccessProps> = ({
|
|
message,
|
|
variant = 'inline',
|
|
className,
|
|
showIcon = true,
|
|
animate = true,
|
|
autoDismiss = false,
|
|
autoDismissTimeout = 5000,
|
|
onClose,
|
|
id,
|
|
}) => {
|
|
const [isVisible, setIsVisible] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!message) {
|
|
setIsVisible(false);
|
|
return;
|
|
}
|
|
|
|
setIsVisible(true);
|
|
|
|
if (autoDismiss && autoDismissTimeout > 0) {
|
|
const timer = setTimeout(() => {
|
|
setIsVisible(false);
|
|
if (onClose) {
|
|
onClose();
|
|
}
|
|
}, autoDismissTimeout);
|
|
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [message, autoDismiss, autoDismissTimeout, onClose]);
|
|
|
|
if (!message || !isVisible) {
|
|
return null;
|
|
}
|
|
|
|
const baseClasses = {
|
|
inline: 'text-sm text-success mt-1',
|
|
block: 'p-3 bg-success/10 border border-success/20 rounded-md text-success text-sm',
|
|
toast: 'fixed bottom-4 right-4 p-4 bg-success text-white rounded-lg shadow-lg max-w-md z-tooltip animate-slide-up',
|
|
};
|
|
|
|
const animationClasses = animate ? 'animate-fade-in' : '';
|
|
|
|
const Icon = () => (
|
|
<svg
|
|
className="w-4 h-4 mr-1 inline-block"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
const handleClose = () => {
|
|
setIsVisible(false);
|
|
if (onClose) {
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
role="status"
|
|
aria-live="polite"
|
|
id={id}
|
|
className={cn(
|
|
baseClasses[variant],
|
|
animationClasses,
|
|
'transition-all duration-200',
|
|
'flex items-start justify-between gap-2',
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex items-start flex-1">
|
|
{showIcon && <Icon />}
|
|
<span>{message}</span>
|
|
</div>
|
|
|
|
{autoDismiss && (
|
|
<button
|
|
type="button"
|
|
onClick={handleClose}
|
|
className="text-current opacity-70 hover:opacity-100 transition-opacity"
|
|
aria-label="Close notification"
|
|
>
|
|
<svg
|
|
className="w-4 h-4"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
FormSuccess.displayName = 'FormSuccess';
|
|
|
|
export default FormSuccess; |