39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
/* eslint-disable consistent-return */
|
|
/* eslint-disable no-return-assign */
|
|
/* eslint-disable react/no-array-index-key */
|
|
import React from 'react';
|
|
import { staticMessages } from '~/driven/utils/constants/staticMessages';
|
|
|
|
export interface IOtpCodeView {
|
|
otpChar: React.MutableRefObject<HTMLInputElement[]>;
|
|
eventHandlers: {
|
|
handleFocusInput: (e: React.FocusEvent) => void;
|
|
handleKeyPressInput: (e: React.KeyboardEvent) => void;
|
|
};
|
|
}
|
|
|
|
export default function OtpCodeView(props: IOtpCodeView) {
|
|
const { eventHandlers, otpChar } = props;
|
|
const { handleFocusInput, handleKeyPressInput } = eventHandlers;
|
|
const otpInputs = Array.from({ length: 6 }).map((digit, i) => (
|
|
<input
|
|
tabIndex={i + 1}
|
|
ref={(el: HTMLInputElement) => (otpChar.current[i] = el)}
|
|
key={`otp_char_${i}`}
|
|
className='font-bold text-base inline-block w-5 md:w-10 bg-transparent text-center focus:outline-none'
|
|
maxLength={1}
|
|
defaultValue='_'
|
|
placeholder='_'
|
|
onClick={(e) => e.stopPropagation()}
|
|
onFocus={handleFocusInput}
|
|
onKeyDown={handleKeyPressInput}
|
|
/>
|
|
));
|
|
return (
|
|
<div className='mb-9 justify-end items-center text-xs self-start'>
|
|
<div className='text-xs mb-9 self-start text-txt-medium'>{staticMessages.global.enterOtpCode}</div>
|
|
<div className='w-full flex gap-4'>{otpInputs}</div>
|
|
</div>
|
|
);
|
|
}
|