applications/calendar/src/app/components/eventModal/rows/RepeatOnRow.tsx

   1 import { useMemo } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { WEEKLY_TYPE } from '@proton/shared/lib/calendar/constants';
   6 import type { WeekStartsOn } from '@proton/shared/lib/date-fns-utc/interface';
   7 import { getFormattedWeekdays } from '@proton/shared/lib/date/date';
   8 import { dateLocale } from '@proton/shared/lib/i18n';
   9 import type { DateTimeModel, FrequencyModel } from '@proton/shared/lib/interfaces/calendar';
  10 import clsx from '@proton/utils/clsx';
  11
  12 import DayCheckbox from '../inputs/DayCheckbox';
  13
  14 const DAYS = Array.from({ length: 7 }, (a, i) => i);
  15
  16 interface Props {
  17     frequencyModel: FrequencyModel;
  18     start: DateTimeModel;
  19     weekStartsOn: WeekStartsOn;
  20     onChange: (value: FrequencyModel) => void;
  21     displayStacked?: boolean;
  22 }
  23 const RepeatOnRow = ({ frequencyModel, start, weekStartsOn, onChange, displayStacked = false }: Props) => {
  24     const [weekdaysLong, weekdaysAbbreviations] = useMemo(() => {
  25         return ['cccc', 'cccccc'].map((format) => getFormattedWeekdays(format, { locale: dateLocale }));
  26     }, [dateLocale]);
  27     const currentDay = start.date.getDay();
  28
  29     const handleToggleDay = (day: number) => {
  30         if (day === currentDay) {
  31             // do not allow to toggle current day
  32             return;
  33         }
  34         const selectedDays = frequencyModel.weekly.days || [currentDay];
  35         if (selectedDays.includes(day)) {
  36             const newDays = selectedDays.filter((selectedDay) => selectedDay !== day);
  37             return onChange({ ...frequencyModel, weekly: { type: WEEKLY_TYPE.ON_DAYS, days: newDays } });
  38         }
  39         onChange({ ...frequencyModel, weekly: { type: WEEKLY_TYPE.ON_DAYS, days: selectedDays.concat(day).sort() } });
  40     };
  41
  42     return (
  43         <div className={clsx('mb-2 ml-0', !displayStacked && 'md:ml-2')}>
  44             <label className={clsx(displayStacked && 'text-semibold')} id="label-event-weekly-repeat">{c('Label')
  45                 .t`Repeat on`}</label>
  46             <div className="flex gap-2">
  47                 {DAYS.map((dayIndex) => {
  48                     const day = (dayIndex + weekStartsOn) % 7;
  49                     const dayLong = weekdaysLong[day];
  50                     const dayAbbreviation = weekdaysAbbreviations[day];
  51                     const checked = frequencyModel.weekly.days.includes(day);
  52                     return (
  53                         <DayCheckbox
  54                             key={day.toString()}
  55                             id={dayLong}
  56                             checked={checked}
  57                             dayAbbreviation={dayAbbreviation}
  58                             dayLong={day === currentDay ? c('Tooltip').t`Change start date to unselect` : dayLong}
  59                             onChange={() => handleToggleDay(day)}
  60                             aria-describedby="label-event-weekly-repeat"
  61                             disabled={day === currentDay}
  62                         />
  63                     );
  64                 })}
  65             </div>
  66         </div>
  67     );
  68 };
  69
  70 export default RepeatOnRow;