applications/calendar/src/app/components/eventModal/inputs/CustomFrequencyModal.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import type { ModalStateProps } from '@proton/components';
   7 import { ModalTwo, ModalTwoContent, ModalTwoFooter, ModalTwoHeader, PrimaryButton } from '@proton/components';
   8 import type { WeekStartsOn } from '@proton/shared/lib/date-fns-utc/interface';
   9 import type { DateTimeModel, FrequencyModel } from '@proton/shared/lib/interfaces/calendar';
  10
  11 import CustomFrequencySelector from './CustomFrequencySelector';
  12
  13 interface Props {
  14     frequencyModel: FrequencyModel;
  15     start: DateTimeModel;
  16     displayWeekNumbers: boolean;
  17     weekStartsOn: WeekStartsOn;
  18     errors: object;
  19     isSubmitted: boolean;
  20     onChange: (value: FrequencyModel) => void;
  21     modalProps: ModalStateProps;
  22 }
  23
  24 const CustomFrequencyModal = ({
  25     frequencyModel,
  26     start,
  27     displayWeekNumbers,
  28     weekStartsOn,
  29     errors,
  30     onChange,
  31     isSubmitted,
  32     modalProps,
  33 }: Props) => {
  34     const [values, setValues] = useState(frequencyModel);
  35
  36     return (
  37         <ModalTwo {...modalProps}>
  38             <ModalTwoHeader title={c('Header').t`Custom recurrence`} />
  39             <ModalTwoContent>
  40                 <CustomFrequencySelector
  41                     frequencyModel={values}
  42                     start={start}
  43                     displayWeekNumbers={displayWeekNumbers}
  44                     weekStartsOn={weekStartsOn}
  45                     errors={errors}
  46                     isSubmitted={isSubmitted}
  47                     onChange={setValues}
  48                     displayStacked
  49                 />
  50             </ModalTwoContent>
  51             <ModalTwoFooter>
  52                 <Button onClick={modalProps.onClose}>{c('Action').t`Cancel`}</Button>
  53                 <PrimaryButton
  54                     onClick={() => {
  55                         onChange(values);
  56                     }}
  57                 >{c('Action').t`Done`}</PrimaryButton>
  58             </ModalTwoFooter>
  59         </ModalTwo>
  60     );
  61 };
  62
  63 export default CustomFrequencyModal;