packages/components/containers/contacts/edit/ContactEditLabel.tsx

   1 import Option from '@proton/components/components/option/Option';
   2 import { getAllTypes, getOtherInformationFields } from '@proton/shared/lib/helpers/contacts';
   3 import type { VCardProperty } from '@proton/shared/lib/interfaces/contacts/VCard';
   4
   5 import { Label, SelectTwo } from '../../../components';
   6 import type { SelectChangeEvent } from '../../../components/selectTwo/select';
   7 import ContactLabelProperty from '../view/ContactLabelProperty';
   8
   9 interface Props {
  10     vCardProperty: VCardProperty;
  11     onChangeVCard: (vCardProperty: VCardProperty) => void;
  12     /**
  13      * fixedType means you don't want to change the type of data (ie: no select)
  14      */
  15     fixedType?: boolean;
  16     /**
  17      * list of types not to propose in the other information fields
  18      * mostly useful not to propose second instance of fields limited to one entry in vcards
  19      */
  20     filteredTypes?: string[];
  21 }
  22
  23 const ContactEditLabel = ({ vCardProperty, onChangeVCard, fixedType = false, filteredTypes = [] }: Props) => {
  24     const { field } = vCardProperty;
  25
  26     const types = getAllTypes();
  27     const fieldTypes = types[field];
  28     const type = vCardProperty.params?.type || '';
  29     const fieldsToReset = ['bday', 'anniversary', 'photo', 'logo'];
  30
  31     const otherInformationFields = getOtherInformationFields();
  32
  33     const handleChangeType = ({ value }: SelectChangeEvent<string>) => {
  34         onChangeVCard({ ...vCardProperty, params: { ...vCardProperty.params, type: value } });
  35     };
  36     const handleChangeField = ({ value }: SelectChangeEvent<string>) => {
  37         let maybeResetValue = {};
  38         if (fieldsToReset.includes(vCardProperty.field) || value.includes(vCardProperty.field)) {
  39             maybeResetValue = { value: undefined };
  40         }
  41         onChangeVCard({ ...vCardProperty, field: value, ...maybeResetValue });
  42     };
  43
  44     if (!fixedType && otherInformationFields.map(({ value: f }) => f).includes(field)) {
  45         const selectedField = otherInformationFields.find((otherField) => otherField.value === field);
  46         const filteredOtherInformationFields = otherInformationFields.filter(
  47             (field) => !filteredTypes.includes(field.value)
  48         );
  49
  50         return (
  51             <Label className="pt-0 md:mr-6 w-full">
  52                 <SelectTwo
  53                     value={field}
  54                     onChange={handleChangeField}
  55                     title={selectedField?.text}
  56                     data-testid="create-contact:other-info-select"
  57                 >
  58                     {filteredOtherInformationFields.map((field) => (
  59                         <Option
  60                             data-testid={`create-contact:dropdown-item-${field.text}`}
  61                             key={field.value}
  62                             title={field.text}
  63                             value={field.value}
  64                         />
  65                     ))}
  66                 </SelectTwo>
  67             </Label>
  68         );
  69     }
  70
  71     if (field === 'fn' || field === 'n' || fixedType || !fieldTypes.map(({ value: type }) => type).includes(type)) {
  72         return <ContactLabelProperty className="pt-2" field={field} type={type} />;
  73     }
  74
  75     const selectedType = fieldTypes.find((fieldType) => fieldType.value === type) || fieldTypes[0];
  76
  77     return (
  78         <Label className="pt-0 md:mr-6 w-full">
  79             <SelectTwo value={type} onChange={handleChangeType} title={selectedType.text}>
  80                 {fieldTypes.map((fieldType) => (
  81                     <Option key={fieldType.value} title={fieldType.text} value={fieldType.value} />
  82                 ))}
  83             </SelectTwo>
  84         </Label>
  85     );
  86 };
  87
  88 export default ContactEditLabel;