packages/pass/components/Form/Field/MaskedTextField.tsx

   1 import { type FC, type RefObject } from 'react';
   2
   3 import { type FactoryOpts } from 'imask/esm/masked/factory';
   4
   5 import noop from '@proton/utils/noop';
   6
   7 import { useFieldMask } from '../../../hooks/useFieldMask';
   8 import { FieldBox, type FieldBoxProps } from './Layout/FieldBox';
   9 import { BaseTextField, type BaseTextFieldProps } from './TextField';
  10
  11 export type MaskedTextFieldProps = FieldBoxProps &
  12     BaseTextFieldProps & {
  13         mask: FactoryOpts;
  14     };
  15
  16 export const MaskedTextField: FC<MaskedTextFieldProps> = (props) => {
  17     const { actions, actionsContainerClassName, className, icon, mask, ...rest } = props;
  18     const { inputRef, maskedValue } = useFieldMask(props, mask);
  19
  20     return (
  21         <FieldBox
  22             actions={actions}
  23             actionsContainerClassName={actionsContainerClassName}
  24             className={className}
  25             icon={icon}
  26         >
  27             <BaseTextField
  28                 {...rest}
  29                 field={{
  30                     ...props.field,
  31                     onChange: noop,
  32                     value: maskedValue,
  33                 }}
  34                 ref={inputRef as RefObject<HTMLInputElement>}
  35             />
  36         </FieldBox>
  37     );
  38 };