packages/components/containers/autoReply/AutoReplyForm/fields/DaysOfWeekField.tsx

   1 import { c } from 'ttag';
   2
   3 import Checkbox from '@proton/components/components/input/Checkbox';
   4 import { getFormattedWeekdays } from '@proton/shared/lib/date/date';
   5 import { dateLocale } from '@proton/shared/lib/i18n';
   6
   7 import SettingsLayout from '../../../account/SettingsLayout';
   8 import SettingsLayoutLeft from '../../../account/SettingsLayoutLeft';
   9 import SettingsLayoutRight from '../../../account/SettingsLayoutRight';
  10
  11 interface Props {
  12     value?: number[];
  13     onChange: (days: number[]) => void;
  14 }
  15
  16 const DaysOfWeekField = ({ value = [], onChange }: Props) => {
  17     const handleChange = (weekday: number) => () =>
  18         onChange(value.includes(weekday) ? value.filter((existing) => weekday !== existing) : [...value, weekday]);
  19
  20     return (
  21         <SettingsLayout>
  22             <SettingsLayoutLeft>
  23                 <span id="label-days-of-week" className="label text-semibold">{c('Label').t`Days of the week`}</span>
  24             </SettingsLayoutLeft>
  25             <SettingsLayoutRight>
  26                 <div className="flex flex-column pt-1">
  27                     {getFormattedWeekdays('iiii', { locale: dateLocale }).map((text, i) => (
  28                         <Checkbox
  29                             className="mb-1"
  30                             id={`weekday-${i}`}
  31                             key={text}
  32                             checked={value.includes(i)}
  33                             onChange={handleChange(i)}
  34                             aria-describedby="label-days-of-week"
  35                         >
  36                             {text}
  37                         </Checkbox>
  38                     ))}
  39                 </div>
  40             </SettingsLayoutRight>
  41         </SettingsLayout>
  42     );
  43 };
  44
  45 export default DaysOfWeekField;