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

   1 import { useMemo } from 'react';
   2
   3 import { useContactEmailsCache } from '@proton/components';
   4 import { getContactDisplayNameEmail } from '@proton/shared/lib/contacts/contactEmail';
   5 import { canonicalizeEmail } from '@proton/shared/lib/helpers/email';
   6
   7 import type { CalendarViewBusyEvent } from '../../containers/calendar/interface';
   8 import { getEventStyle } from '../../helpers/color';
   9 import { useCalendarSelector } from '../../store/hooks';
  10 import type { PartDayEventProps } from './PartDayEvent';
  11 import { PartDayEventView } from './PartDayEvent';
  12
  13 interface PartDayBusyEventProps
  14     extends Pick<
  15         PartDayEventProps,
  16         'size' | 'style' | 'formatTime' | 'eventPartDuration' | 'isSelected' | 'isBeforeNow' | 'eventRef'
  17     > {
  18     event: CalendarViewBusyEvent;
  19 }
  20
  21 const PartDayBusyEvent = ({
  22     size,
  23     style,
  24     event,
  25     isSelected,
  26     isBeforeNow,
  27     eventRef,
  28     eventPartDuration,
  29 }: PartDayBusyEventProps) => {
  30     const canonicalizedEmail = canonicalizeEmail(event.email);
  31     const isHighlighted = useCalendarSelector(
  32         (state) => state.calendarBusySlots.attendeeHighlight === canonicalizedEmail
  33     );
  34
  35     const { contactEmailsMap } = useContactEmailsCache();
  36     const { Name: contactName } = contactEmailsMap[canonicalizedEmail] || {};
  37
  38     const { nameEmail } = getContactDisplayNameEmail({ name: contactName, email: event.email });
  39
  40     const { color } = event;
  41     const eventStyle = useMemo(() => {
  42         return getEventStyle(color, style);
  43     }, [color, style]);
  44
  45     return (
  46         <PartDayEventView
  47             size={size}
  48             style={{
  49                 ...eventStyle,
  50                 ...(isHighlighted
  51                     ? {
  52                           boxShadow: `0 0 0 2px ${color}`,
  53                       }
  54                     : {}),
  55             }}
  56             isPast={isBeforeNow}
  57             isSelected={isSelected}
  58             ref={eventRef}
  59             isLoaded
  60             title={nameEmail}
  61             eventPartDuration={eventPartDuration}
  62         >
  63             <div data-testid="calendar-day-week-view:part-day-event" className="calendar-eventcell-title">
  64                 <div className="flex flex-nowrap items-center">
  65                     <div className="text-ellipsis flex-shrink">{nameEmail}</div>
  66                 </div>
  67             </div>
  68         </PartDayEventView>
  69     );
  70 };
  71
  72 export default PartDayBusyEvent;