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

   1 import { type FC, type KeyboardEventHandler } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import Toggle from '@proton/components/components/toggle/Toggle';
   6 import { InlineFieldBox } from '@proton/pass/components/Form/Field/Layout/InlineFieldBox';
   7 import type { MaybeNull } from '@proton/pass/types';
   8
   9 import { IncrementableInput } from './IncrementableInput';
  10
  11 type Props = {
  12     disabled: boolean;
  13     value: MaybeNull<number>;
  14     onChange: (value: MaybeNull<number>) => void;
  15     onPressEnter?: KeyboardEventHandler<HTMLInputElement>;
  16 };
  17
  18 export const [MIN_READS, MAX_READS] = [1, 1000];
  19
  20 export const MaxReadsToggleInput: FC<Props> = ({ disabled, value, onPressEnter, onChange }) => (
  21     <>
  22         <InlineFieldBox label={c('Action').t`Restrict number of views`}>
  23             <Toggle checked={Boolean(value)} onChange={() => onChange(value ? null : MIN_READS)} disabled={disabled} />
  24         </InlineFieldBox>
  25
  26         {value && (
  27             <InlineFieldBox label={c('Action').t`Maximum views`}>
  28                 <IncrementableInput
  29                     value={value}
  30                     onChange={onChange}
  31                     min={MIN_READS}
  32                     max={MAX_READS}
  33                     disabled={disabled}
  34                     onPressEnter={onPressEnter}
  35                 />
  36             </InlineFieldBox>
  37         )}
  38     </>
  39 );