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

   1 import type { Ref } from 'react';
   2 import { forwardRef } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import DropdownActions from '@proton/components/components/dropdown/DropdownActions';
   7 import Icon from '@proton/components/components/icon/Icon';
   8 import OrderableHandle from '@proton/components/components/orderable/OrderableHandle';
   9 import type { ContactEmail, ContactEmailModel } from '@proton/shared/lib/interfaces/contacts';
  10 import type { VCardContact, VCardProperty } from '@proton/shared/lib/interfaces/contacts/VCard';
  11 import clsx from '@proton/utils/clsx';
  12
  13 import ContactGroupDropdown from '../ContactGroupDropdown';
  14 import type { ContactGroupEditProps } from '../group/ContactGroupEditModal';
  15 import type { ContactGroupLimitReachedProps } from '../modals/ContactGroupLimitReachedModal';
  16 import type { ContactImageProps } from '../modals/ContactImageModal';
  17 import ContactEditLabel from './ContactEditLabel';
  18 import ContactFieldProperty from './fields/ContactFieldProperty';
  19
  20 interface Props {
  21     vCardProperty: VCardProperty;
  22     vCardContact: VCardContact;
  23     onChangeVCard: (vCardProperty: VCardProperty) => void;
  24     onRemove: (value: string) => void;
  25     sortable?: boolean;
  26     isSubmitted?: boolean;
  27     actionRow?: boolean;
  28     fixedType?: boolean;
  29     labelWidthClassName?: string;
  30     filteredTypes?: string[];
  31     contactEmail?: ContactEmailModel;
  32     onContactEmailChange?: (contactEmail: ContactEmailModel) => void;
  33     onUpgrade: () => void;
  34     onSelectImage: (props: ContactImageProps) => void;
  35     onGroupEdit: (props: ContactGroupEditProps) => void;
  36     onLimitReached?: (props: ContactGroupLimitReachedProps) => void;
  37 }
  38
  39 const ContactEditProperty = (
  40     {
  41         vCardProperty,
  42         vCardContact,
  43         onChangeVCard,
  44         onRemove,
  45         sortable = false,
  46         isSubmitted = false,
  47         actionRow = true,
  48         labelWidthClassName,
  49         fixedType,
  50         filteredTypes,
  51         contactEmail,
  52         onContactEmailChange,
  53         onUpgrade,
  54         onSelectImage,
  55         onGroupEdit,
  56         onLimitReached,
  57     }: Props,
  58     ref: Ref<HTMLInputElement>
  59 ) => {
  60     const { field, value } = vCardProperty;
  61     const canDelete = !(field === 'photo' && !value);
  62
  63     const list = [];
  64
  65     // Delete is always available (except when primary and no image). Primary name has action row disabled.
  66     if (canDelete) {
  67         list.push({
  68             color: 'weak',
  69             shape: 'outline',
  70             text: <Icon name="trash" className="m-auto" alt={c('Action').t`Delete`} />,
  71             onClick: () => {
  72                 if (vCardProperty.uid) {
  73                     onRemove(vCardProperty.uid);
  74                 }
  75             },
  76         });
  77     }
  78
  79     const handleUpdateContactGroups = (changes: { [groupID: string]: boolean }) => {
  80         if (contactEmail && onContactEmailChange) {
  81             let LabelIDs = [...contactEmail.LabelIDs];
  82             Object.entries(changes).forEach(([groupID, checked]) => {
  83                 if (checked) {
  84                     LabelIDs.push(groupID);
  85                 } else {
  86                     LabelIDs = contactEmail.LabelIDs.filter((id: string) => id !== groupID);
  87                 }
  88             });
  89             onContactEmailChange({ ...contactEmail, LabelIDs, changes: { ...contactEmail.changes, ...changes } });
  90         }
  91     };
  92
  93     // The data-contact-property-id is used to focus on the element in ContactEditProperties
  94     return (
  95         <div className="flex flex-nowrap shrink-0" data-contact-property-id={vCardProperty.uid}>
  96             {sortable ? (
  97                 <OrderableHandle key="icon">
  98                     <div className="cursor-row-resize mr-2 flex shrink-0 mb-4 mt-0.5">
  99                         <Icon name="text-align-justify" className="mt-2" />
 100                     </div>
 101                 </OrderableHandle>
 102             ) : (
 103                 <div className="mr-2 flex items-center shrink-0">
 104                     <Icon name="text-align-justify" className="visibility-hidden" />
 105                 </div>
 106             )}
 107             <div className="contact-modal-field relative flex flex-nowrap flex-column md:flex-row w-full items-stretch md:items-start">
 108                 <span
 109                     className={clsx([
 110                         'contact-modal-select flex flex-nowrap mb-2 md:mb-4 items-start',
 111                         labelWidthClassName || 'md:w-3/10',
 112                     ])}
 113                 >
 114                     <ContactEditLabel
 115                         vCardProperty={vCardProperty}
 116                         onChangeVCard={onChangeVCard}
 117                         fixedType={fixedType}
 118                         filteredTypes={filteredTypes}
 119                     />
 120                 </span>
 121
 122                 <div className="flex flex-nowrap items-startoupas md:flex-1 shrink-0">
 123                     <span className="flex-1 mb-4">
 124                         <ContactFieldProperty
 125                             ref={ref}
 126                             vCardProperty={vCardProperty}
 127                             vCardContact={vCardContact}
 128                             onChangeVCard={onChangeVCard}
 129                             isSubmitted={isSubmitted}
 130                             onSelectImage={onSelectImage}
 131                         />
 132                     </span>
 133                     {actionRow && (
 134                         <span className="mb-4 ml-2 flex">
 135                             {list.length > 0 && (
 136                                 <div
 137                                     className={clsx([
 138                                         'flex shrink-0 h-4',
 139                                         field,
 140                                         (field === 'photo' ||
 141                                             field === 'note' ||
 142                                             field === 'logo' ||
 143                                             field === 'adr') &&
 144                                             'items-start',
 145                                     ])}
 146                                 >
 147                                     {field === 'email' && (
 148                                         <ContactGroupDropdown
 149                                             icon
 150                                             color="weak"
 151                                             shape="outline"
 152                                             className="mr-2"
 153                                             contactEmails={[contactEmail as unknown as ContactEmail]}
 154                                             onDelayedSave={handleUpdateContactGroups}
 155                                             tooltip={c('Title').t`Contact group`}
 156                                             onGroupEdit={onGroupEdit}
 157                                             onLimitReached={onLimitReached}
 158                                             onUpgrade={onUpgrade}
 159                                         >
 160                                             <Icon name="users" alt={c('Action').t`Contact group`} />
 161                                         </ContactGroupDropdown>
 162                                     )}
 163                                     <DropdownActions icon list={list} />
 164                                 </div>
 165                             )}
 166                         </span>
 167                     )}
 168                 </div>
 169             </div>
 170         </div>
 171     );
 172 };
 173
 174 export default forwardRef(ContactEditProperty);