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

   1 import type { CSSProperties, Ref } from 'react';
   2 import { useMemo } from 'react';
   3
   4 import { Icon, useContactEmailsCache } from '@proton/components';
   5 import { getContactDisplayNameEmail } from '@proton/shared/lib/contacts/contactEmail';
   6 import { canonicalizeEmail } from '@proton/shared/lib/helpers/email';
   7 import clsx from '@proton/utils/clsx';
   8
   9 import type { CalendarViewBusyEvent } from '../../containers/calendar/interface';
  10 import { getEventStyle } from '../../helpers/color';
  11 import { useCalendarSelector } from '../../store/hooks';
  12
  13 interface Props {
  14     style: CSSProperties;
  15     formatTime: (date: Date) => string;
  16     className?: string;
  17     event: CalendarViewBusyEvent;
  18     isBeforeNow: boolean;
  19     isOutsideStart: boolean;
  20     isOutsideEnd: boolean;
  21     eventRef?: Ref<HTMLDivElement>;
  22 }
  23 const FullDayBusyEvent = ({
  24     style,
  25     formatTime,
  26     className = 'calendar-dayeventcell h-custom w-custom top-custom left-custom absolute text-left',
  27     event,
  28     isBeforeNow,
  29     isOutsideStart,
  30     isOutsideEnd,
  31     eventRef,
  32 }: Props) => {
  33     const { start, isAllDay, isAllPartDay, color } = event;
  34     const canonicalizedEmail = canonicalizeEmail(event.email);
  35
  36     const { contactEmailsMap } = useContactEmailsCache();
  37     const { Name: contactName } = contactEmailsMap[canonicalizedEmail] || {};
  38     const { nameEmail } = getContactDisplayNameEmail({ name: contactName, email: event.email });
  39
  40     const isHighlighted = useCalendarSelector(
  41         (state) => state.calendarBusySlots.attendeeHighlight === canonicalizedEmail
  42     );
  43
  44     const eventStyle = useMemo(() => {
  45         return getEventStyle(color);
  46     }, [color]);
  47
  48     const startTimeString = useMemo(() => {
  49         if (start && (!isAllDay || isAllPartDay)) {
  50             return formatTime(start);
  51         }
  52     }, [start, isAllPartDay, isAllDay, formatTime]);
  53
  54     return (
  55         <div
  56             style={style}
  57             className={clsx([className, isOutsideStart && 'isOutsideStart', isOutsideEnd && 'isOutsideEnd'])}
  58             data-ignore-create="1"
  59         >
  60             <div
  61                 title={nameEmail}
  62                 className={clsx([
  63                     'isLoaded calendar-dayeventcell-inner text-left flex',
  64                     !isAllDay && 'isNotAllDay',
  65                     isBeforeNow && 'isPast',
  66                 ])}
  67                 style={{
  68                     ...eventStyle,
  69                     ...(isHighlighted
  70                         ? {
  71                               boxShadow: `0 0 0 2px ${color}`,
  72                           }
  73                         : {}),
  74                 }}
  75                 ref={eventRef}
  76             >
  77                 <div className="flex flex-nowrap flex-1 items-center">
  78                     {!isAllDay ? (
  79                         <Icon className="mr-2 shrink-0 calendar-dayeventcell-circle" size={4} name="circle-filled" />
  80                     ) : null}
  81
  82                     {isOutsideStart ? <Icon name="chevron-left" size={3} className="shrink-0" /> : null}
  83
  84                     <span data-testid="calendar-view:all-day-event" className="flex-1 text-ellipsis">
  85                         {startTimeString && <span className="calendar-dayeventcell-time">{startTimeString}</span>}
  86                         <span className="calendar-dayeventcell-title">{nameEmail}</span>
  87                     </span>
  88
  89                     {isOutsideEnd ? <Icon name="chevron-right" size={3} className="shrink-0" /> : null}
  90                 </div>
  91             </div>
  92         </div>
  93     );
  94 };
  95
  96 export default FullDayBusyEvent;