packages/pass/components/Lock/PinCodeInput.tsx

   1 import { type FC, useEffect, useRef } from 'react';
   2
   3 import { TotpInput } from '@proton/components';
   4 import clsx from '@proton/utils/clsx';
   5
   6 import './PinCodeInput.scss';
   7
   8 type Props = {
   9     autoFocus?: boolean;
  10     className?: string;
  11     disabled?: boolean;
  12     loading?: boolean;
  13     value: string;
  14     onValue: (value: string) => void;
  15 };
  16
  17 export const PinCodeInput: FC<Props> = ({ autoFocus = true, className, disabled, loading = false, value, onValue }) => {
  18     const focusRef = useRef<HTMLInputElement>(null);
  19
  20     useEffect(() => {
  21         if (autoFocus) focusRef.current?.focus();
  22         if (loading || disabled) focusRef.current?.blur();
  23     }, [autoFocus, loading]);
  24
  25     return (
  26         <div className={clsx('pass-pin--input', className, (loading || disabled) && 'opacity-30 pointer-events-none')}>
  27             <TotpInput
  28                 ref={focusRef}
  29                 length={6}
  30                 value={value}
  31                 onValue={onValue}
  32                 inputType="password"
  33                 disableChange={disabled || loading}
  34                 autoFocus={autoFocus}
  35             />
  36         </div>
  37     );
  38 };