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

   1 import { c } from 'ttag';
   2
   3 import {
   4     Dropdown,
   5     DropdownButton,
   6     DropdownMenuButton,
   7     Icon,
   8     Option,
   9     SelectTwo,
  10     usePopperAnchor,
  11 } from '@proton/components';
  12 import type { SelectTwoProps } from '@proton/components/components/selectTwo/SelectTwo';
  13 import { FREQUENCY } from '@proton/shared/lib/calendar/constants';
  14
  15 const { ONCE, DAILY, WEEKLY, MONTHLY, YEARLY, CUSTOM } = FREQUENCY;
  16
  17 interface Props extends Omit<SelectTwoProps<FREQUENCY>, 'onChange' | 'children'> {
  18     value: FREQUENCY;
  19     frequencyInputType?: 'dropdown' | 'select';
  20     onChange: (value: FREQUENCY) => void;
  21 }
  22
  23 const FrequencyInput = ({ value, frequencyInputType = 'select', onChange, ...rest }: Props) => {
  24     const frequencies = [
  25         { text: c('Option').t`Does not repeat`, value: ONCE },
  26         { text: c('Option').t`Every day`, value: DAILY },
  27         { text: c('Option').t`Every week`, value: WEEKLY },
  28         { text: c('Option').t`Every month`, value: MONTHLY },
  29         { text: c('Option').t`Every year`, value: YEARLY },
  30         { text: c('Option').t`Custom`, value: CUSTOM },
  31     ];
  32
  33     const { anchorRef, isOpen, toggle, close } = usePopperAnchor<HTMLButtonElement>();
  34
  35     const selectedOption = frequencies.find((item) => item.value === value);
  36
  37     if (frequencyInputType === 'dropdown') {
  38         const handleClick = () => {
  39             toggle();
  40         };
  41
  42         return (
  43             <>
  44                 <DropdownButton
  45                     as="button"
  46                     type="button"
  47                     ref={anchorRef}
  48                     isOpen={isOpen}
  49                     onClick={handleClick}
  50                     {...rest}
  51                 >
  52                     <span>{selectedOption?.text}</span> <Icon name="arrows-rotate" />
  53                 </DropdownButton>
  54                 <Dropdown autoClose autoCloseOutside isOpen={isOpen} anchorRef={anchorRef} onClose={close}>
  55                     {frequencies.map(({ value, text }) => (
  56                         <DropdownMenuButton
  57                             className="text-left flex flex-nowrap items-center"
  58                             onClick={() => onChange(value)}
  59                             aria-pressed={selectedOption?.value === value}
  60                             key={value}
  61                         >
  62                             <span className="flex-1 pr-4">{text}</span>
  63                             {selectedOption?.value === value && (
  64                                 <span className="ml-auto flex color-primary">
  65                                     <Icon name="checkmark" />
  66                                 </span>
  67                             )}
  68                         </DropdownMenuButton>
  69                     ))}
  70                 </Dropdown>
  71             </>
  72         );
  73     }
  74
  75     return (
  76         <SelectTwo
  77             value={value}
  78             onChange={({ value }) => {
  79                 onChange(value as FREQUENCY);
  80             }}
  81             {...rest}
  82         >
  83             {frequencies.map(({ value, text }) => (
  84                 <Option key={value} value={value} title={text} />
  85             ))}
  86         </SelectTwo>
  87     );
  88 };
  89
  90 export default FrequencyInput;