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

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import type { ModalStateProps } from '@proton/components';
   5 import {
   6     Alert,
   7     Field,
   8     Label,
   9     ModalTwo,
  10     ModalTwoContent,
  11     ModalTwoFooter,
  12     ModalTwoHeader,
  13     Row,
  14     useModalTwoStatic,
  15 } from '@proton/components';
  16 import humanSize from '@proton/shared/lib/helpers/humanSize';
  17
  18 import { useLinksDetailsView } from '../../store';
  19 import ModalContentLoader from './ModalContentLoader';
  20
  21 interface Props {
  22     selectedItems: { rootShareId: string; linkId: string }[];
  23     onClose?: () => void;
  24 }
  25
  26 const FilesDetailsModal = ({ selectedItems, onClose, ...modalProps }: Props & ModalStateProps) => {
  27     const { isLoading, hasError, count, size } = useLinksDetailsView(selectedItems);
  28
  29     let title = c('Title').t`Item details`;
  30     let labelCount = c('Title').t`Number of items`;
  31
  32     const renderModalState = () => {
  33         if (isLoading) {
  34             return <ModalContentLoader>{c('Info').t`Loading links`}</ModalContentLoader>;
  35         }
  36
  37         if (hasError) {
  38             return (
  39                 <ModalTwoContent>
  40                     <Alert type="error">{c('Info').t`Cannot load links`}</Alert>
  41                 </ModalTwoContent>
  42             );
  43         }
  44
  45         return (
  46             <ModalTwoContent>
  47                 <Row>
  48                     <Label style={{ cursor: 'default' }}>{labelCount}</Label>
  49                     <Field className="pt-2">
  50                         <b data-testid="number-of-items">{count}</b>
  51                     </Field>
  52                 </Row>
  53                 <Row>
  54                     <Label style={{ cursor: 'default' }}>{c('Title').t`Total size`}</Label>
  55                     <Field className="pt-2">
  56                         <b>{humanSize({ bytes: size })}</b>
  57                     </Field>
  58                 </Row>
  59             </ModalTwoContent>
  60         );
  61     };
  62
  63     return (
  64         <ModalTwo onClose={onClose} size="large" {...modalProps}>
  65             <ModalTwoHeader title={title} />
  66             {renderModalState()}
  67             <ModalTwoFooter>
  68                 <Button onClick={onClose}>{c('Action').t`Close`}</Button>
  69             </ModalTwoFooter>
  70         </ModalTwo>
  71     );
  72 };
  73
  74 export default FilesDetailsModal;
  75 export const useFilesDetailsModal = () => {
  76     return useModalTwoStatic(FilesDetailsModal);
  77 };