packages/components/containers/contacts/edit/fields/ContactFieldString.tsx

   1 import type { ChangeEvent, Ref } from 'react';
   2 import { forwardRef } from 'react';
   3
   4 import type { InputProps } from '@proton/atoms';
   5 import { Input } from '@proton/atoms';
   6 import { getAllFieldLabels } from '@proton/shared/lib/helpers/contacts';
   7 import type { VCardProperty } from '@proton/shared/lib/interfaces/contacts/VCard';
   8
   9 interface Props extends Omit<InputProps, 'onChange'> {
  10     vCardProperty: VCardProperty<string>;
  11     onChange: (vCardProperty: VCardProperty<string>) => void;
  12 }
  13
  14 const ContactFieldString = ({ vCardProperty, onChange, ...rest }: Props, ref: Ref<HTMLInputElement>) => {
  15     const label = (getAllFieldLabels() as any)[vCardProperty.field] || '';
  16
  17     const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
  18         const newValue = target.value;
  19         onChange({ ...vCardProperty, value: newValue });
  20     };
  21
  22     return (
  23         <Input
  24             ref={ref}
  25             value={vCardProperty.value}
  26             placeholder={label}
  27             onChange={handleChange}
  28             data-testid={label}
  29             {...rest}
  30         />
  31     );
  32 };
  33
  34 export default forwardRef(ContactFieldString);