applications/calendar/src/app/components/DateCursorButtons.tsx

   1 import { useMemo } from 'react';
   2
   3 import { format } from 'date-fns';
   4 import { c } from 'ttag';
   5
   6 import { Button, Vr } from '@proton/atoms';
   7 import { Icon, ToolbarButton } from '@proton/components';
   8 import type { VIEWS } from '@proton/shared/lib/calendar/constants';
   9 import { dateLocale } from '@proton/shared/lib/i18n';
  10
  11 import { getNavigationArrowsText } from '../helpers/i18n';
  12
  13 interface Props {
  14     view: VIEWS;
  15     now: Date;
  16     onToday: () => void;
  17     onPrev: () => void;
  18     onNext: () => void;
  19     currentRange: string;
  20 }
  21
  22 const DateCursorButtons = ({ view, now, onToday, onPrev, onNext, currentRange }: Props) => {
  23     const todayTitle = useMemo(() => {
  24         return format(now, 'PP', { locale: dateLocale });
  25     }, [now, dateLocale]);
  26
  27     const { previous, next } = getNavigationArrowsText(view);
  28
  29     return (
  30         <>
  31             <span className="md:hidden current-range my-auto block text-bold text-ellipsis" title={currentRange}>
  32                 {currentRange}
  33             </span>
  34             <span className="flex flex-nowrap ml-auto md:ml-0">
  35                 <span className="md:hidden shrink-0 flex flex-nowrap">
  36                     <ToolbarButton
  37                         data-testid="calendar-toolbar:today"
  38                         className="shrink-0 items-centers"
  39                         title={todayTitle}
  40                         onClick={onToday}
  41                     >
  42                         <Icon name="calendar-today" alt={c('Action').t`Today`} />
  43                     </ToolbarButton>
  44                 </span>
  45                 <Vr className="mx-1 md:hidden" />
  46                 <Button
  47                     shape="outline"
  48                     data-testid="calendar-toolbar:today"
  49                     className="shrink-0 hidden md:inline-flex mr-2"
  50                     title={todayTitle}
  51                     onClick={onToday}
  52                 >
  53                     {c('Action').t`Today`}
  54                 </Button>
  55                 <ToolbarButton
  56                     data-testid="calendar-toolbar:previous"
  57                     title={previous}
  58                     onClick={onPrev}
  59                     icon={<Icon name="chevron-left" className="m-auto toolbar-icon" />}
  60                 >
  61                     <span className="sr-only">{previous}</span>
  62                 </ToolbarButton>
  63                 <ToolbarButton
  64                     data-testid="calendar-toolbar:next"
  65                     title={next}
  66                     onClick={onNext}
  67                     icon={<Icon name="chevron-right" className="m-auto toolbar-icon" />}
  68                 >
  69                     <span className="sr-only">{next}</span>
  70                 </ToolbarButton>
  71                 <h2
  72                     className="hidden md:block current-range ml-2 my-auto text-bold text-xl text-ellipsis"
  73                     title={currentRange}
  74                 >
  75                     {currentRange}
  76                 </h2>
  77             </span>
  78         </>
  79     );
  80 };
  81
  82 export default DateCursorButtons;