32 lines
868 B
TypeScript
32 lines
868 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 BankCardProps {
|
||
|
|
bankCardState: string | undefined;
|
||
|
|
validateHandler: (e: ChangeEvent<HTMLInputElement>) => void;
|
||
|
|
clearCondition?: string | undefined | null
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function BankCardInput({ bankCardState, validateHandler }: BankCardProps) {
|
||
|
|
const [bankCard, setBankCard] = useState<string | undefined>(bankCardState ? bankCardState : '');
|
||
|
|
|
||
|
|
return (
|
||
|
|
<InputMask
|
||
|
|
type="phone"
|
||
|
|
id="bankCard"
|
||
|
|
name="bankCard"
|
||
|
|
className={`${styles['form-input']}`}
|
||
|
|
mask="____ ____ ____ ____"
|
||
|
|
replacement={{ _: /\d/ }}
|
||
|
|
value={bankCard}
|
||
|
|
onChange={(e) => {
|
||
|
|
setBankCard(e.target.value);
|
||
|
|
validateHandler(e);
|
||
|
|
}}
|
||
|
|
placeholder="1234 1234 1234 1234"
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|