applications/drive/src/app/components/modals/ShareLinkModal/PublicSharing/ExpirationTimeDatePicker.tsx

   1 import { useState } from 'react';
   2
   3 import { fromUnixTime, getDate, getHours, getMinutes, getMonth, getUnixTime, getYear } from 'date-fns';
   4 import { c } from 'ttag';
   5
   6 import type { InputProps } from '@proton/atoms';
   7 import { DateInputTwo, TimeInput } from '@proton/components';
   8
   9 interface Props extends Omit<InputProps, 'min' | 'max' | 'value' | 'onChange'> {
  10     expiration: number | null;
  11     handleExpirationChange: (exp: number) => void;
  12     clearButton?: boolean;
  13     disabled?: boolean;
  14     allowTime?: boolean;
  15 }
  16
  17 const getMaxDate = () => {
  18     const date = new Date();
  19     date.setDate(date.getDate() + 90);
  20     return date;
  21 };
  22
  23 export const ExpirationTimeDatePicker = ({
  24     expiration,
  25     handleExpirationChange,
  26     disabled,
  27     allowTime,
  28     ...rest
  29 }: Props) => {
  30     const initialValue = expiration ? fromUnixTime(expiration) : undefined;
  31     const [expDate, setExpDate] = useState<Date | undefined>(initialValue);
  32     const [expTime, setExpTime] = useState<Date | undefined>(initialValue);
  33
  34     const MIN_DATE = new Date();
  35     const date = getMaxDate();
  36     const MAX_DATE = date;
  37
  38     const [maxTime, setMaxTime] = useState<Date | undefined>(expTime ? date : undefined);
  39
  40     const handleChangeDate = (value: Date | undefined) => {
  41         if (value) {
  42             setExpDate(value);
  43
  44             const year = getYear(value);
  45             const month = getMonth(value);
  46             const day = getDate(value);
  47
  48             if (!expTime) {
  49                 setExpTime(value);
  50             }
  51
  52             if (year === getYear(MAX_DATE) && month === getMonth(MAX_DATE) && day === getDate(MAX_DATE)) {
  53                 const date = getMaxDate();
  54                 setMaxTime(date);
  55                 setExpTime(value);
  56             } else {
  57                 setMaxTime(undefined);
  58             }
  59
  60             let tempDate = value;
  61             if (expiration) {
  62                 tempDate = fromUnixTime(expiration);
  63                 tempDate.setFullYear(year);
  64                 tempDate.setMonth(month);
  65                 tempDate.setDate(day);
  66             }
  67             handleExpirationChange(getUnixTime(tempDate));
  68         }
  69     };
  70
  71     const handleChangeTime = (value: Date) => {
  72         setExpTime(value);
  73
  74         const hours = getHours(value);
  75         const minutes = getMinutes(value);
  76
  77         if (expiration) {
  78             const tempDate = fromUnixTime(expiration);
  79             tempDate.setHours(hours);
  80             tempDate.setMinutes(minutes);
  81             handleExpirationChange(getUnixTime(tempDate));
  82         }
  83     };
  84
  85     return (
  86         <>
  87             <DateInputTwo
  88                 id="expirationDateInputId"
  89                 className="flex-1 grow-2"
  90                 disabled={disabled}
  91                 value={expDate}
  92                 onChange={handleChangeDate}
  93                 displayWeekNumbers={false}
  94                 min={MIN_DATE}
  95                 max={MAX_DATE}
  96                 placeholder={c('Title').t`Date`}
  97                 title={c('Title').t`Select link expiration date`}
  98                 hasToday={false}
  99                 data-testid="expirationDateInputId"
 100                 {...rest}
 101             />
 102             {allowTime && expTime && (
 103                 <TimeInput
 104                     id="epirationTimeInputId"
 105                     className="ml-2 flex-1"
 106                     disabled={disabled}
 107                     value={expTime}
 108                     onChange={handleChangeTime}
 109                     max={maxTime}
 110                     title={c('Title').t`Select link expiration time`}
 111                     data-testid="expirationDateInputId"
 112                     {...rest}
 113                 />
 114             )}
 115         </>
 116     );
 117 };