applications/mail/src/app/components/sidebar/SidebarLabels.tsx

   1 import { memo, useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import type { Label } from '@proton/shared/lib/interfaces/Label';
   6
   7 import type { ApplyLabelsParams } from '../../hooks/actions/label/useApplyLabels';
   8 import type { MoveParams } from '../../hooks/actions/move/useMoveToFolder';
   9 import type { UnreadCounts } from './MailSidebarList';
  10 import SidebarItem from './SidebarItem';
  11 import SidebarLabelActions from './SidebarLabelActions';
  12
  13 interface LabelProps {
  14     currentLabelID: string;
  15     counterMap: UnreadCounts;
  16     label: Label;
  17     updateFocusItem: (item: string) => void;
  18     moveToFolder: (params: MoveParams) => void;
  19     applyLabels: (params: ApplyLabelsParams) => void;
  20 }
  21
  22 const SidebarLabel = ({
  23     currentLabelID,
  24     counterMap,
  25     label,
  26     updateFocusItem,
  27     moveToFolder,
  28     applyLabels,
  29 }: LabelProps) => {
  30     const [isOptionDropdownOpened, setIsOptionDropdownOpened] = useState(false);
  31
  32     return (
  33         <SidebarItem
  34             currentLabelID={currentLabelID}
  35             labelID={label.ID}
  36             isOptionDropdownOpened={isOptionDropdownOpened}
  37             icon="circle-filled"
  38             iconSize={4}
  39             text={label.Name}
  40             color={label.Color}
  41             isFolder={false}
  42             isLabel={true}
  43             unreadCount={counterMap[label.ID]}
  44             id={label.ID}
  45             onFocus={updateFocusItem}
  46             moveToFolder={moveToFolder}
  47             applyLabels={applyLabels}
  48             itemOptions={
  49                 <SidebarLabelActions type={'label'} element={label} onToggleDropdown={setIsOptionDropdownOpened} />
  50             }
  51         />
  52     );
  53 };
  54
  55 interface LabelsProps {
  56     currentLabelID: string;
  57     counterMap: UnreadCounts;
  58     labels: Label[];
  59     updateFocusItem: (item: string) => void;
  60     moveToFolder: (params: MoveParams) => void;
  61     applyLabels: (params: ApplyLabelsParams) => void;
  62 }
  63
  64 const SidebarLabels = ({
  65     currentLabelID,
  66     counterMap,
  67     labels,
  68     updateFocusItem,
  69     moveToFolder,
  70     applyLabels,
  71 }: LabelsProps) => {
  72     return labels.length === 0 ? (
  73         <div className="py-2 ml-7 text-sm color-weak">{c('Description').t`No labels`}</div>
  74     ) : (
  75         <>
  76             {labels.map((label) => (
  77                 <SidebarLabel
  78                     key={label.ID}
  79                     label={label}
  80                     updateFocusItem={updateFocusItem}
  81                     currentLabelID={currentLabelID}
  82                     counterMap={counterMap}
  83                     moveToFolder={moveToFolder}
  84                     applyLabels={applyLabels}
  85                 />
  86             ))}
  87         </>
  88     );
  89 };
  90
  91 export default memo(SidebarLabels);