packages/drive-store/components/modals/FileThresholdModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import type { ModalStateProps } from '@proton/components';
   5 import { BasicModal, PrimaryButton, useModalTwoStatic } from '@proton/components';
   6
   7 type Props = {
   8     type?: FileThresholdModalType;
   9     onSubmit: () => void;
  10     onCancel: () => void;
  11 };
  12
  13 export type FileThresholdModalType = 'fileNumberTotal' | 'fileSizeTotal';
  14
  15 export const FileThresholdModal = ({
  16     onSubmit,
  17     onCancel,
  18     onClose,
  19     type = 'fileNumberTotal',
  20     open,
  21     ...modalProps
  22 }: Props & ModalStateProps) => {
  23     const handleCancel = () => {
  24         onCancel();
  25         onClose?.();
  26     };
  27
  28     return (
  29         <BasicModal
  30             title={
  31                 type === 'fileNumberTotal'
  32                     ? c('Title').t`Performance might be affected`
  33                     : c('Title').t`Uploading a large file or folder`
  34             }
  35             isOpen={open === undefined ? true : open}
  36             onClose={handleCancel}
  37             footer={
  38                 <>
  39                     <Button onClick={handleCancel}>{c('Action').t`Cancel`}</Button>
  40                     <PrimaryButton
  41                         onClick={() => {
  42                             onSubmit();
  43                             onClose?.();
  44                         }}
  45                     >
  46                         {c('Action').t`Upload anyway`}
  47                     </PrimaryButton>
  48                 </>
  49             }
  50             {...modalProps}
  51         >
  52             <p>
  53                 {type === 'fileNumberTotal'
  54                     ? c('Info').t`Uploading hundreds of files at once may have a performance impact.`
  55                     : c('Info')
  56                           .t`For best results, avoid streaming and memory-intensive activities or split your upload into smaller batches.`}
  57             </p>
  58         </BasicModal>
  59     );
  60 };
  61
  62 export const useFileThresholdModal = () => {
  63     return useModalTwoStatic(FileThresholdModal);
  64 };