packages/components/containers/contacts/group/ContactGroupLabels.tsx

   1 import type { MouseEvent } from 'react';
   2
   3 import type { LabelDescription } from '@proton/components/components/labelStack/LabelStack';
   4 import LabelStack from '@proton/components/components/labelStack/LabelStack';
   5 import type { ContactGroup } from '@proton/shared/lib/interfaces/contacts/Contact';
   6
   7 interface Props {
   8     contactGroups: ContactGroup[];
   9     isStacked?: boolean;
  10     className?: string;
  11     onDetails: (contactGroupID: string, onCloseContactDetailsModal?: () => void) => void;
  12     maxNumber?: number;
  13     leftToRight?: boolean;
  14     onCloseModal?: () => void;
  15 }
  16
  17 const ContactGroupLabels = ({
  18     contactGroups,
  19     isStacked = true,
  20     className,
  21     onDetails,
  22     leftToRight,
  23     maxNumber,
  24     onCloseModal,
  25 }: Props) => {
  26     const labels = contactGroups.reduce((acc: LabelDescription[], contactGroup: ContactGroup) => {
  27         return contactGroup
  28             ? [
  29                   ...acc,
  30                   {
  31                       name: contactGroup.Name,
  32                       color: contactGroup.Color,
  33                       title: contactGroup.Name,
  34                       onClick: (event: MouseEvent) => {
  35                           onDetails(contactGroup.ID, onCloseModal);
  36                           event.stopPropagation();
  37                       },
  38                   },
  39               ]
  40             : acc;
  41     }, []);
  42
  43     return (
  44         <LabelStack
  45             className={className}
  46             labels={labels}
  47             isStacked={isStacked}
  48             leftToRight={leftToRight}
  49             maxNumber={maxNumber}
  50         />
  51     );
  52 };
  53
  54 export default ContactGroupLabels;