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

   1 import type { CSSProperties, ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
   2 import { forwardRef } from 'react';
   3
   4 import { MINUTE } from '@proton/shared/lib/constants';
   5 import clsx from '@proton/utils/clsx';
   6
   7 import type {
   8     CalendarViewBusyEvent,
   9     CalendarViewEvent,
  10     CalendarViewEventTemporaryEvent,
  11 } from '../../containers/calendar/interface';
  12 import { isBusySlotEvent } from '../../helpers/busySlots';
  13 import PartDayBusyEvent from './PartDayBusyEvent';
  14 import PartDayRegularEvent from './PartDayRegularEvent';
  15
  16 export type EventSize = 'sm' | 'xs' | '2xs';
  17
  18 interface PartDayEventViewProps extends ComponentPropsWithoutRef<'div'> {
  19     size?: EventSize;
  20     isSelected?: boolean;
  21     isUnanswered?: boolean;
  22     isCancelled?: boolean;
  23     isPast?: boolean;
  24     isLoaded?: boolean;
  25     className?: string;
  26     children?: ReactNode;
  27     eventPartDuration?: number;
  28 }
  29 export const PartDayEventView = forwardRef<HTMLDivElement, PartDayEventViewProps>(function PartDayEventViewComponent(
  30     {
  31         size,
  32         isSelected,
  33         isUnanswered,
  34         isCancelled,
  35         isPast,
  36         isLoaded,
  37         className,
  38         children,
  39         eventPartDuration,
  40         ...rest
  41     }: PartDayEventViewProps,
  42     ref: Ref<HTMLDivElement>
  43 ) {
  44     const canDisplayOnlyOneLine = eventPartDuration ? eventPartDuration < 75 * MINUTE : false;
  45
  46     return (
  47         // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
  48         <div
  49             role="button"
  50             tabIndex={0}
  51             className={clsx([
  52                 'calendar-eventcell overflow-hidden',
  53                 isLoaded && 'isLoaded',
  54                 isPast && 'isPast',
  55                 isSelected && 'isSelected',
  56                 isUnanswered && 'isUnanswered',
  57                 isCancelled && 'isCancelled',
  58                 size && `calendar-eventcell--${size}`,
  59                 canDisplayOnlyOneLine && 'calendar-eventcell--title-small-fit',
  60                 className,
  61             ])}
  62             ref={ref}
  63             {...rest}
  64         >
  65             {children}
  66         </div>
  67     );
  68 });
  69
  70 export interface PartDayEventProps {
  71     size?: EventSize;
  72     style: CSSProperties;
  73     formatTime: (date: Date) => string;
  74     event: CalendarViewEvent | CalendarViewEventTemporaryEvent | CalendarViewBusyEvent;
  75     eventPartDuration: number;
  76     isSelected: boolean;
  77     isBeforeNow: boolean;
  78     eventRef?: Ref<HTMLDivElement>;
  79     tzid: string;
  80 }
  81 const PartDayEvent = ({ event, ...rest }: PartDayEventProps) => {
  82     return isBusySlotEvent(event) ? (
  83         <PartDayBusyEvent event={event} {...rest} />
  84     ) : (
  85         <PartDayRegularEvent event={event} {...rest} />
  86     );
  87 };
  88
  89 export default PartDayEvent;