applications/calendar/src/app/components/events/MoreFullDayEvent.tsx

   1 import type { CSSProperties, Ref } from 'react';
   2
   3 import { c, msgid } from 'ttag';
   4
   5 import clsx from '@proton/utils/clsx';
   6
   7 interface Props {
   8     style: CSSProperties;
   9     more: number;
  10     eventRef?: Ref<HTMLDivElement>;
  11     isSelected: boolean;
  12 }
  13 // NOTE: Can not be a button to satisfy auto close, and to be the same as the normal events
  14 const MoreFullDayEvent = ({ style, more, eventRef, isSelected }: Props) => {
  15     // translator: This string shows up when we have to collapse some events in the calendar view because they don't all fit in the window. The variable ${more} is a number. E.g.: "3 more" (short for 3 events more)
  16     const moreText = c('Calendar view; more events collapsed').ngettext(msgid`${more} more`, `${more} more`, more);
  17
  18     return (
  19         <div style={style} className="calendar-dayeventcell h-custom w-custom top-custom left-custom absolute">
  20             <div
  21                 className={clsx([
  22                     'calendar-dayeventcell-inner isNotAllDay isLoaded inline-flex text-left w-full px-2',
  23                     isSelected && 'isSelected',
  24                 ])}
  25                 ref={eventRef}
  26                 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
  27                 tabIndex={0}
  28             >
  29                 <span
  30                     data-testid="calendar-view:more-events-collapsed"
  31                     className="my-auto text-ellipsis"
  32                     title={moreText}
  33                 >
  34                     {moreText}
  35                 </span>
  36             </div>
  37         </div>
  38     );
  39 };
  40
  41 export default MoreFullDayEvent;