46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { type Ref } from "react";
|
|
import {
|
|
formatRuPhoneDisplay,
|
|
normalizeRuPhoneFromInput,
|
|
} from "@/landing/lib/phoneRu";
|
|
|
|
const inputClassName =
|
|
"placeholder:btnl placeholder:font-medium placeholder:select-none peer btnl w-full h-full bg-transparent rounded-none transition-all outline-none";
|
|
|
|
interface PhoneInputRuProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
onBlur?: () => void;
|
|
inputRef?: Ref<HTMLInputElement>;
|
|
id?: string;
|
|
placeholder?: string;
|
|
}
|
|
|
|
export function PhoneInputRu({
|
|
value,
|
|
onChange,
|
|
onBlur,
|
|
inputRef,
|
|
id = "tel",
|
|
placeholder = "+7 (XXX) XXX - XX - XX",
|
|
}: PhoneInputRuProps) {
|
|
return (
|
|
<input
|
|
ref={inputRef}
|
|
type="tel"
|
|
autoComplete="tel"
|
|
id={id}
|
|
placeholder={placeholder}
|
|
className={inputClassName}
|
|
value={formatRuPhoneDisplay(value)}
|
|
onBlur={onBlur}
|
|
onChange={(e) => {
|
|
if (!e.nativeEvent.type.startsWith("input")) return;
|
|
const cleanValue = e.target.value.replace(/\s/g, "");
|
|
const inputType = (e.nativeEvent as InputEvent).inputType;
|
|
onChange(normalizeRuPhoneFromInput(cleanValue, inputType));
|
|
}}
|
|
/>
|
|
);
|
|
}
|