packages/pass/components/Form/Field/Custom/ExpirationTimeSelect.tsx

   1 import { type FC, useMemo } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Option, SelectTwo } from '@proton/components';
   6 import { InlineFieldBox } from '@proton/pass/components/Form/Field/Layout/InlineFieldBox';
   7 import { UNIX_DAY, UNIX_HOUR, UNIX_WEEK } from '@proton/pass/utils/time/constants';
   8
   9 export enum ExpireTime {
  10     OneHour = UNIX_HOUR,
  11     OneDay = UNIX_DAY,
  12     OneWeek = UNIX_WEEK,
  13     TwoWeeks = UNIX_WEEK * 2,
  14     OneMonth = UNIX_DAY * 30,
  15 }
  16
  17 type Props = { disabled: boolean; value: ExpireTime; onChange: (value: ExpireTime) => void };
  18 type ExpireTimeOption = { value: ExpireTime; title: string };
  19
  20 export const getExpireTimeOptions = (): ExpireTimeOption[] => [
  21     { value: ExpireTime.OneHour, title: c('Label').t`1 hour` },
  22     { value: ExpireTime.OneDay, title: c('Label').t`24 hours` },
  23     { value: ExpireTime.OneWeek, title: c('Label').t`7 days` },
  24     { value: ExpireTime.TwoWeeks, title: c('Label').t`14 days` },
  25     { value: ExpireTime.OneMonth, title: c('Label').t`30 days` },
  26 ];
  27
  28 export const ExpirationTimeSelect: FC<Props> = ({ disabled, value, onChange }) => {
  29     const expirationTimeOptions = useMemo(() => getExpireTimeOptions(), []);
  30
  31     return (
  32         <InlineFieldBox label={c('Action').t`Link expires after`}>
  33             <SelectTwo
  34                 className="bg-weak"
  35                 color="weak"
  36                 value={value}
  37                 onChange={({ value }) => onChange(value)}
  38                 disabled={disabled}
  39             >
  40                 {expirationTimeOptions.map(({ value, title }) => (
  41                     <Option key={title} value={value} title={title}>
  42                         {title}
  43                     </Option>
  44                 ))}
  45             </SelectTwo>
  46         </InlineFieldBox>
  47     );
  48 };