49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { useMask } from "@react-input/mask";
|
|
|
|
interface InputProps {
|
|
type?: "text" | "email" | "password" | "time" | "tel";
|
|
value?: string;
|
|
placeholder?: string;
|
|
autoFocus?: boolean;
|
|
required?: boolean;
|
|
readOnly?: boolean;
|
|
className?: string;
|
|
handleChange?: (value: string) => void;
|
|
handleFocus?: () => void;
|
|
}
|
|
|
|
function Input({
|
|
type = "text",
|
|
value,
|
|
placeholder,
|
|
autoFocus,
|
|
required,
|
|
readOnly,
|
|
className,
|
|
handleChange,
|
|
handleFocus,
|
|
}: InputProps) {
|
|
const inputRef = useMask({
|
|
mask: "+7 (___) ___-__-__",
|
|
replacement: { _: /\d/ },
|
|
});
|
|
|
|
return (
|
|
<input
|
|
ref={type === "tel" ? inputRef : undefined}
|
|
type={type}
|
|
placeholder={placeholder}
|
|
autoFocus={autoFocus}
|
|
required={required}
|
|
readOnly={readOnly}
|
|
value={value}
|
|
onChange={(e) => handleChange && handleChange(e.target.value)}
|
|
onFocus={handleFocus}
|
|
className={`px-3 py-2.5 outline-none rounded-lg border border-[#DAE0E5] focus:border-[#49A1F5] transition-colors text-sm ${className}`}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default Input;
|