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

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import type { HotkeyTuple } from '@proton/components';
   6 import { FolderIcon, Icon } from '@proton/components';
   7 import { formatFolderName } from '@proton/shared/lib/helpers/folder';
   8 import type { Folder, FolderWithSubFolders } from '@proton/shared/lib/interfaces/Folder';
   9 import clsx from '@proton/utils/clsx';
  10
  11 import type { ApplyLabelsParams } from '../../hooks/actions/label/useApplyLabels';
  12 import type { MoveParams } from '../../hooks/actions/move/useMoveToFolder';
  13 import SidebarItem from './SidebarItem';
  14 import SidebarLabelActions from './SidebarLabelActions';
  15
  16 interface Props {
  17     currentLabelID: string;
  18     folders: Folder[];
  19     folder: FolderWithSubFolders;
  20     level: number;
  21     onToggle: (folder: FolderWithSubFolders, expanded: boolean) => void;
  22     unreadCount?: number;
  23     expanded?: boolean;
  24     onFocus: (id: string) => void;
  25     id: string;
  26     treeMode?: boolean;
  27     moveToFolder: (params: MoveParams) => void;
  28     applyLabels: (params: ApplyLabelsParams) => void;
  29 }
  30
  31 const SidebarFolder = ({
  32     currentLabelID,
  33     folder,
  34     folders,
  35     level,
  36     onToggle,
  37     unreadCount,
  38     expanded,
  39     onFocus,
  40     id,
  41     treeMode = true,
  42     moveToFolder,
  43     applyLabels,
  44 }: Props) => {
  45     const [isOptionDropdownOpened, setIsOptionDropdownOpened] = useState(false);
  46
  47     const shortcutHandlers: HotkeyTuple[] = [
  48         [
  49             'ArrowRight',
  50             (e) => {
  51                 if (!expanded) {
  52                     e.stopPropagation();
  53                     onToggle(folder, true);
  54                 }
  55             },
  56         ],
  57         [
  58             'ArrowLeft',
  59             () => {
  60                 if (expanded) {
  61                     onToggle(folder, false);
  62                 }
  63             },
  64         ],
  65     ];
  66
  67     const noChevron = treeMode ? <span className="navigation-icon-empty shrink-0" /> : null;
  68
  69     return (
  70         <SidebarItem
  71             currentLabelID={currentLabelID}
  72             labelID={folder.ID}
  73             isFolder
  74             text={folder.Name}
  75             unreadCount={unreadCount}
  76             shortcutHandlers={shortcutHandlers}
  77             moveToFolder={moveToFolder}
  78             applyLabels={applyLabels}
  79             id={id}
  80             onFocus={onFocus}
  81             isOptionDropdownOpened={isOptionDropdownOpened}
  82             content={
  83                 <div className="flex flex-nowrap items-center gap-2" data-level={level}>
  84                     {folder.subfolders?.length ? (
  85                         <button
  86                             type="button"
  87                             className="shrink-0 navigation-link--expand relative interactive-pseudo-inset interactive--no-background"
  88                             aria-expanded={!!folder.Expanded}
  89                             onClick={(e) => {
  90                                 e.stopPropagation();
  91                                 e.preventDefault();
  92                                 onToggle(folder, !expanded);
  93                             }}
  94                         >
  95                             <Icon
  96                                 name="chevron-down-filled"
  97                                 className={clsx([
  98                                     'navigation-icon navigation-icon--expand',
  99                                     !folder.Expanded && 'rotateZ-270',
 100                                 ])}
 101                             />
 102                         </button>
 103                     ) : (
 104                         noChevron
 105                     )}
 106                     <FolderIcon className="navigation-icon shrink-0" alt={c('Info').t`Folder`} folder={folder} />
 107                     <div className="text-ellipsis">{formatFolderName(level, folder.Name)}</div>
 108                 </div>
 109             }
 110             itemOptions={
 111                 <SidebarLabelActions
 112                     type="folder"
 113                     level={level}
 114                     folders={folders}
 115                     element={folder}
 116                     onToggleDropdown={setIsOptionDropdownOpened}
 117                 />
 118             }
 119         />
 120     );
 121 };
 122
 123 export default SidebarFolder;