117 lines
4.7 KiB
TypeScript
117 lines
4.7 KiB
TypeScript
import React, {ChangeEvent, useEffect, useState} from "react";
|
|
|
|
interface TextAreaInputProps {
|
|
value: string;
|
|
setValue: (e: ChangeEvent<HTMLTextAreaElement>) => void;
|
|
placeholder: string;
|
|
maxLength?: number;
|
|
}
|
|
|
|
export default function TextAreaInput(
|
|
{
|
|
value,
|
|
setValue,
|
|
placeholder,
|
|
maxLength
|
|
}: TextAreaInputProps) {
|
|
const [prevLength, setPrevLength] = useState(value.length);
|
|
const [isGrowing, setIsGrowing] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (value.length > prevLength) {
|
|
setIsGrowing(true);
|
|
setTimeout(() => setIsGrowing(false), 200);
|
|
}
|
|
setPrevLength(value.length);
|
|
}, [value.length, prevLength]);
|
|
|
|
const getProgressPercentage = () => {
|
|
if (!maxLength) return 0;
|
|
return Math.min((value.length / maxLength) * 100, 100);
|
|
};
|
|
|
|
const getStatusStyles = () => {
|
|
if (!maxLength) return {};
|
|
const percentage = getProgressPercentage();
|
|
|
|
if (percentage >= 100) return {
|
|
textColor: 'text-error',
|
|
bgColor: 'bg-error/10',
|
|
borderColor: 'border-error/30',
|
|
progressColor: 'bg-error'
|
|
};
|
|
|
|
if (percentage >= 90) return {
|
|
textColor: 'text-warning',
|
|
bgColor: 'bg-warning/10',
|
|
borderColor: 'border-warning/30',
|
|
progressColor: 'bg-warning'
|
|
};
|
|
|
|
if (percentage >= 75) return {
|
|
textColor: 'text-warning',
|
|
bgColor: 'bg-warning/10',
|
|
borderColor: 'border-warning/30',
|
|
progressColor: 'bg-warning'
|
|
};
|
|
|
|
return {
|
|
textColor: 'text-success',
|
|
bgColor: 'bg-success/10',
|
|
borderColor: 'border-success/30',
|
|
progressColor: 'bg-success'
|
|
};
|
|
};
|
|
|
|
const styles = getStatusStyles();
|
|
|
|
return (
|
|
<div className="flex-grow flex-col flex h-full">
|
|
<textarea
|
|
value={value}
|
|
onChange={setValue}
|
|
placeholder={placeholder}
|
|
rows={3}
|
|
className={`w-full flex-grow text-text-primary p-3 lg:p-4 rounded-xl border-2 outline-none resize-none transition-all duration-300 placeholder:text-muted/60 ${
|
|
maxLength && value.length >= maxLength
|
|
? 'border-error focus:ring-4 focus:ring-error/20 bg-error/10 hover:bg-error/15'
|
|
: 'bg-secondary/50 border-secondary/50 focus:ring-4 focus:ring-primary/20 focus:border-primary focus:bg-secondary hover:bg-secondary hover:border-secondary'
|
|
}`}
|
|
style={{height: '100%', minHeight: '200px'}}
|
|
/>
|
|
|
|
{maxLength && (
|
|
<div className="flex items-center justify-end gap-3 mt-3">
|
|
{/* Compteur avec effet de croissance */}
|
|
<div className={`flex items-center gap-3 px-4 py-2 rounded-lg border transition-all duration-300 ${
|
|
isGrowing ? 'scale-110 shadow-lg' : 'scale-100'
|
|
} ${styles.bgColor} ${styles.borderColor}`}>
|
|
|
|
{/* Progress bar visible */}
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-muted font-medium">Progression</span>
|
|
<div className="w-20 h-2 bg-secondary/50 rounded-full overflow-hidden shadow-inner">
|
|
<div
|
|
className={`h-full rounded-full transition-all duration-500 ease-out ${styles.progressColor} shadow-md`}
|
|
style={{width: `${getProgressPercentage()}%`}}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Compteur de caractères */}
|
|
<div className="flex items-center gap-2">
|
|
<div className={`text-sm font-semibold transition-all duration-200 ${
|
|
isGrowing ? 'scale-125' : 'scale-100'
|
|
} ${styles.textColor}`}>
|
|
{value.length}
|
|
<span className="text-muted mx-1">/</span>
|
|
<span className="text-text-secondary">{maxLength}</span>
|
|
</div>
|
|
<span className="text-xs text-muted font-medium">caractères</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |