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

   1 import type { ChangeEvent } from 'react';
   2
   3 import TelInput from '@proton/components/components/input/TelInput';
   4 import { getAllFieldLabels } from '@proton/shared/lib/helpers/contacts';
   5 import type { VCardProperty } from '@proton/shared/lib/interfaces/contacts/VCard';
   6
   7 interface Props {
   8     vCardProperty: VCardProperty<string>;
   9     onChange: (vCardProperty: VCardProperty) => void;
  10 }
  11
  12 const ContactFieldTel = ({ vCardProperty, onChange, ...rest }: Props) => {
  13     const label = getAllFieldLabels().tel;
  14
  15     const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
  16         const newValue = target.value;
  17         onChange({ ...vCardProperty, value: newValue });
  18     };
  19
  20     const value = vCardProperty.value || '';
  21
  22     return <TelInput value={value} placeholder={label} onChange={handleChange} data-testid={label} {...rest} />;
  23 };
  24
  25 export default ContactFieldTel;