applications/drive/src/app/components/modals/SelectLinkToShareModal/ModalContent.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import { Alert, ModalTwoContent, ModalTwoFooter, ModalTwoHeader, PrimaryButton } from '@proton/components';
   5
   6 import type { DecryptedLink, TreeItem } from '../../../store';
   7 import FolderTree from '../../FolderTree/FolderTree';
   8 import EmptyFileTreePlaceholder from './EmptyFileTreePlaceholder';
   9
  10 export const ModalContent = ({
  11     rootItems,
  12     isLoading,
  13     isSharingDisabled,
  14     actionText,
  15     toggleExpand,
  16     onSelect,
  17     selectedLinkId,
  18 }: {
  19     rootItems: TreeItem[];
  20     isLoading: boolean;
  21     isTreeLoaded: boolean;
  22     selectedLinkId: string | undefined;
  23     isSharingDisabled: boolean;
  24     actionText: string;
  25     toggleExpand: (linkId: string) => void;
  26     onSelect: (link: DecryptedLink) => void;
  27 }) => {
  28     if (rootItems.length === 0) {
  29         return (
  30             <>
  31                 <ModalTwoHeader closeButtonProps={{ disabled: isLoading }} />
  32                 <EmptyFileTreePlaceholder />
  33             </>
  34         );
  35     }
  36
  37     return (
  38         <>
  39             <ModalTwoHeader title={c('Action').t`Share item`} closeButtonProps={{ disabled: isLoading }} />
  40             <ModalTwoContent>
  41                 <Alert className="mb-4">{c('Info')
  42                     .t`Select an uploaded file or folder and create a link to it.`}</Alert>
  43                 <FolderTree
  44                     treeItems={rootItems}
  45                     isLoaded={true}
  46                     selectedItemId={selectedLinkId}
  47                     onSelect={onSelect}
  48                     toggleExpand={toggleExpand}
  49                 />
  50             </ModalTwoContent>
  51             <ModalTwoFooter>
  52                 <Button type="reset" className="w-custom" style={{ '--w-custom': '8em' }} disabled={isLoading}>
  53                     {c('Action').t`Cancel`}
  54                 </Button>
  55                 <PrimaryButton
  56                     className="ml-4 w-custom"
  57                     style={{ '--w-custom': '8em' }}
  58                     loading={isLoading}
  59                     type="submit"
  60                     disabled={isSharingDisabled}
  61                 >
  62                     {actionText}
  63                 </PrimaryButton>
  64             </ModalTwoFooter>
  65         </>
  66     );
  67 };