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

   1 import type { CSSProperties, Ref } from 'react';
   2
   3 import formatUTC from '@proton/shared/lib/date-fns-utc/format';
   4 import { dateLocale } from '@proton/shared/lib/i18n';
   5
   6 import type {
   7     CalendarViewEvent,
   8     CalendarViewEventTemporaryEvent,
   9     TargetEventData,
  10 } from '../../containers/calendar/interface';
  11 import { DAY_EVENT_HEIGHT } from '../calendar/constants';
  12 import getIsBeforeNow from '../calendar/getIsBeforeNow';
  13 import { TYPE } from '../calendar/interactions/constants';
  14 import FullDayEvent from './FullDayEvent';
  15 import PopoverContainer from './PopoverContainer';
  16 import PopoverHeader from './PopoverHeader';
  17
  18 interface Props {
  19     isSmallViewport: boolean;
  20     date: Date;
  21     now: Date;
  22     onClose: () => void;
  23     formatTime: (date: Date) => string;
  24     style: CSSProperties;
  25     events: (CalendarViewEvent | CalendarViewEventTemporaryEvent)[];
  26     popoverRef: Ref<HTMLDivElement>;
  27     onClickEvent: (data: TargetEventData) => void;
  28     targetEventRef: Ref<HTMLDivElement>;
  29     targetEventData?: TargetEventData;
  30     tzid: string;
  31 }
  32 const MorePopoverEvent = ({
  33     isSmallViewport,
  34     date,
  35     now,
  36     onClose,
  37     formatTime,
  38     style,
  39     events = [],
  40     popoverRef,
  41     onClickEvent,
  42     targetEventRef,
  43     targetEventData,
  44     tzid,
  45 }: Props) => {
  46     const dateString = formatUTC(date, 'cccc PPP', { locale: dateLocale });
  47
  48     const eventsContent = events.map((event) => {
  49         const isSelected = targetEventData?.uniqueId === event.uniqueId;
  50         const isThisSelected =
  51             targetEventData &&
  52             isSelected &&
  53             targetEventData.idx === date.getUTCDate() &&
  54             targetEventData.type === TYPE.MORE;
  55
  56         const isBeforeNow = getIsBeforeNow(event, now);
  57
  58         return (
  59             <FullDayEvent
  60                 formatTime={formatTime}
  61                 event={event}
  62                 key={event.uniqueId}
  63                 className="calendar-dayeventcell w-full text-left h-custom"
  64                 isSelected={isSelected}
  65                 tzid={tzid}
  66                 isBeforeNow={isBeforeNow}
  67                 isOutsideStart={false}
  68                 isOutsideEnd={false}
  69                 onClick={() => onClickEvent({ uniqueId: event.uniqueId, idx: date.getUTCDate(), type: TYPE.MORE })}
  70                 style={{
  71                     '--h-custom': `${DAY_EVENT_HEIGHT}px`,
  72                 }}
  73                 eventRef={isThisSelected ? targetEventRef : undefined}
  74             />
  75         );
  76     });
  77
  78     return (
  79         <PopoverContainer
  80             style={isSmallViewport ? undefined : style}
  81             className="eventpopover flex flex-nowrap flex-column py-7 px-5"
  82             ref={popoverRef}
  83         >
  84             <PopoverHeader onClose={onClose} className="shrink-0">
  85                 <h1
  86                     className="eventpopover-title lh-rg text-ellipsis-four-lines text-cut"
  87                     title={`${date.getUTCDate()}`}
  88                 >
  89                     {dateString}
  90                 </h1>
  91             </PopoverHeader>
  92             <div className="overflow-auto unstyled">{eventsContent}</div>
  93         </PopoverContainer>
  94     );
  95 };
  96
  97 export default MorePopoverEvent;