packages/components/containers/contacts/edit/fields/ContactFieldOrg.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 { VCardOrg, VCardProperty } from '@proton/shared/lib/interfaces/contacts/VCard';
   8 import isTruthy from '@proton/utils/isTruthy';
   9
  10 interface Props extends Omit<InputProps, 'onChange'> {
  11     vCardProperty: VCardProperty<VCardOrg>;
  12     onChange: (vCardProperty: VCardProperty<VCardOrg>) => void;
  13 }
  14
  15 const ContactFieldOrg = ({ vCardProperty, onChange, ...rest }: Props, ref: Ref<HTMLInputElement>) => {
  16     const label = getAllFieldLabels().org;
  17
  18     const property = vCardProperty;
  19     const value = `${[
  20         property.value?.organizationalName ?? '',
  21         ...(property.value?.organizationalUnitNames ?? []),
  22     ].join(';')}`;
  23
  24     const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
  25         const isBackspace = value.length > target.value.length;
  26
  27         let splitted = target.value.split(';');
  28         splitted = isBackspace ? splitted.filter(isTruthy) : splitted;
  29
  30         const [organizationalName, ...organizationalUnitNames] = splitted;
  31
  32         const newValue = {
  33             organizationalName,
  34             organizationalUnitNames,
  35         };
  36
  37         onChange({ ...vCardProperty, value: newValue });
  38     };
  39
  40     return <Input ref={ref} value={value} placeholder={label} onChange={handleChange} data-testid={label} {...rest} />;
  41 };
  42
  43 export default forwardRef(ContactFieldOrg);