38 lines
940 B
TypeScript
38 lines
940 B
TypeScript
'use client'
|
|
|
|
import { useState, ChangeEvent, useEffect } from 'react';
|
|
import { InputMask } from '@react-input/mask';
|
|
import styles from '@/app/styles/module/login.module.scss';
|
|
|
|
interface PhoneInputProps {
|
|
phoneState: string | undefined;
|
|
validateHandler: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
clearCondition?: string | undefined | null
|
|
}
|
|
|
|
export default function PhoneInput({ phoneState, validateHandler, clearCondition }: PhoneInputProps) {
|
|
const [phone, setPhone] = useState<string | undefined>(phoneState ? phoneState : '');
|
|
|
|
useEffect(() => {
|
|
if (clearCondition) {
|
|
setPhone('');
|
|
}
|
|
}, [clearCondition])
|
|
|
|
return (
|
|
<InputMask
|
|
type="phone"
|
|
id="phone"
|
|
name="phone"
|
|
className={`${styles['form-input']}`}
|
|
mask="+7 (___) ___-__-__"
|
|
replacement={{ _: /\d/ }}
|
|
value={phone}
|
|
onChange={(e) => {
|
|
setPhone(e.target.value);
|
|
validateHandler(e);
|
|
}}
|
|
placeholder="+7 (999) 123-45-67"
|
|
/>
|
|
)
|
|
} |