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

   1 import { Icon } from '@proton/components';
   2 import { ICAL_ATTENDEE_STATUS } from '@proton/shared/lib/calendar/constants';
   3
   4 const { ACCEPTED, DECLINED, TENTATIVE, DELEGATED, NEEDS_ACTION } = ICAL_ATTENDEE_STATUS;
   5
   6 const iconContainerClassName = 'inline-flex rounded-50 items-center justify-center partstatIcon';
   7 const iconClassName = '';
   8
   9 const IconYes = () => (
  10     <span className={`${iconContainerClassName} color-success`}>
  11         <Icon name="checkmark-circle-filled" className={iconClassName} size={3} />
  12     </span>
  13 );
  14 const IconMaybe = () => (
  15     <span className={`${iconContainerClassName} color-warning`}>
  16         <Icon name="question-circle-filled" className={iconClassName} size={3} />
  17     </span>
  18 );
  19 const IconNo = () => (
  20     <span className={`${iconContainerClassName} color-danger`}>
  21         <Icon name="cross-circle-filled" className={iconClassName} size={3} />
  22     </span>
  23 );
  24 const IconNeedsAction = () => null;
  25
  26 export const iconMap = {
  27     [ACCEPTED]: IconYes,
  28     [DECLINED]: IconNo,
  29     [TENTATIVE]: IconMaybe,
  30     [DELEGATED]: () => null,
  31     [NEEDS_ACTION]: IconNeedsAction,
  32 };
  33
  34 interface Props {
  35     partstat: ICAL_ATTENDEE_STATUS;
  36 }
  37 const ParticipantStatusIcon = ({ partstat }: Props) => {
  38     if (partstat === ACCEPTED) {
  39         return (
  40             <span className={`${iconContainerClassName} color-success`}>
  41                 <Icon name="checkmark-circle-filled" className={iconClassName} size={4} />
  42             </span>
  43         );
  44     }
  45     if (partstat === TENTATIVE) {
  46         return (
  47             <span className={`${iconContainerClassName} color-warning`}>
  48                 <Icon name="question-circle-filled" className={iconClassName} size={4} />
  49             </span>
  50         );
  51     }
  52     if (partstat === DECLINED) {
  53         return (
  54             <span className={`${iconContainerClassName} color-danger`}>
  55                 <Icon name="cross-circle-filled" className={iconClassName} size={4} />
  56             </span>
  57         );
  58     }
  59     if (partstat === NEEDS_ACTION) {
  60         return null;
  61     }
  62     return null;
  63 };
  64
  65 export default ParticipantStatusIcon;