applications/drive/src/app/components/modals/ShareLinkModal/PublicSharing/PublicSharing.tsx

   1 import { useRef } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Avatar, Button, Input } from '@proton/atoms';
   6 import { Icon, Toggle, useNotifications } from '@proton/components';
   7 import useLoading from '@proton/hooks/useLoading';
   8 import type { SHARE_URL_PERMISSIONS } from '@proton/shared/lib/drive/permissions';
   9 import { textToClipboard } from '@proton/shared/lib/helpers/browser';
  10 import clsx from '@proton/utils/clsx';
  11
  12 import { PermissionsDropdownMenu } from '../PermissionsDropdownMenu';
  13
  14 interface Props {
  15     publicSharedLink: string;
  16     publicSharedLinkPermissions: SHARE_URL_PERMISSIONS;
  17     onChangePermissions: (permissions: number) => Promise<void>;
  18     createSharedLink: () => void;
  19     deleteSharedLink: () => void;
  20     isLoading: boolean;
  21     viewOnly: boolean;
  22 }
  23 export const PublicSharing = ({
  24     publicSharedLink,
  25     publicSharedLinkPermissions,
  26     onChangePermissions,
  27     createSharedLink,
  28     deleteSharedLink,
  29     isLoading,
  30     viewOnly,
  31 }: Props) => {
  32     const contentRef = useRef<HTMLDivElement>(null);
  33     const [isPermissionsLoading, withPermissionsLoading] = useLoading(false);
  34     const { createNotification } = useNotifications();
  35     const handleCopyURLClick = () => {
  36         if (contentRef.current) {
  37             textToClipboard(publicSharedLink, contentRef.current);
  38             createNotification({
  39                 text: c('Success').t`Secure link copied`,
  40             });
  41         }
  42     };
  43
  44     const handleUpdatePermissions = (permissions: SHARE_URL_PERMISSIONS) => {
  45         return withPermissionsLoading(() => onChangePermissions(permissions));
  46     };
  47
  48     const handleToggle = () => {
  49         if (publicSharedLink) {
  50             deleteSharedLink();
  51         } else {
  52             createSharedLink();
  53         }
  54     };
  55
  56     return (
  57         <div className="w-full" ref={contentRef} data-testid="share-modal-shareWithAnyoneSection">
  58             <div className="flex justify-space-between items-center mb-6">
  59                 <h2 className="text-lg text-semibold mr">{c('Info').t`Create public link`}</h2>
  60                 <Toggle checked={!!publicSharedLink} loading={isLoading} onChange={handleToggle} />
  61             </div>
  62             <div className={clsx('flex items-center justify-space-between mb-4', !publicSharedLink && 'opacity-30')}>
  63                 <div className="flex items-center">
  64                     <Avatar color="weak" className="mr-2 shrink-0">
  65                         <Icon name="globe" />
  66                     </Avatar>
  67                     <p className="flex-1 flex flex-column p-0 m-0">
  68                         <span className="text-semibold">{c('Label').t`Anyone with the link`}</span>
  69                         <span className="color-weak">{c('Label')
  70                             .t`Anyone on the Internet with the link can view`}</span>
  71                     </p>
  72                 </div>
  73                 {viewOnly ? (
  74                     <div className="hidden sm:block shrink-0">{c('Label').t`Viewer`}</div>
  75                 ) : (
  76                     <PermissionsDropdownMenu
  77                         disabled={!publicSharedLink || isLoading}
  78                         isLoading={isPermissionsLoading}
  79                         selectedPermissions={publicSharedLinkPermissions}
  80                         onChangePermissions={handleUpdatePermissions}
  81                         publicSharingOptions
  82                     />
  83                 )}
  84             </div>
  85             {!!publicSharedLink ? (
  86                 <div className="w-full flex justify-space-between">
  87                     <Input
  88                         readOnly
  89                         value={publicSharedLink}
  90                         className="overflow-hidden text-ellipsis bg-weak border-weak color-weak"
  91                         data-testid="share-anyone-url"
  92                         disabled={!publicSharedLink}
  93                     />
  94                     <Button
  95                         color="norm"
  96                         shape="outline"
  97                         icon
  98                         id="copy-url-button"
  99                         onClick={handleCopyURLClick}
 100                         className="ml-3"
 101                         disabled={!publicSharedLink}
 102                         data-testid="share-anyone-copyUrlButton"
 103                     >
 104                         <Icon name="squares" />
 105                     </Button>
 106                 </div>
 107             ) : null}
 108         </div>
 109     );
 110 };