@fibery/ui-kit 1.39.0 → 1.40.0

package/src/file-item-2.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 import {css, cx} from "@linaria/core";
-import {useCallback, useEffect, useState} from "react";
+import {CSSProperties, useCallback, useEffect, useState} from "react";
 import {ActionsMenu, ActionsMenuItem, ActionsMenuSeparator} from "./actions-menu";
 import {ActionsButtonCompact} from "./button/actions-button-compact";
 import {border, colors, space, themeVars, fontSize, fontWeight, lineHeight} from "./design-system";
@@ -17,10 +17,12 @@ import Link from "./icons/react/Link";
 import RicheditorOpenLink from "./icons/react/RicheditorOpenLink";
 import Spinner from "./icons/react/Spinner";
 import AppWiki from "./icons/react/AppWiki";
-import {copyToClipboard} from "./copy-to-clipboard";
+import {copyUrlToClipboard} from "./copy-to-clipboard";
 import {useToast} from "./toast/toast-provider";
 import {Icon} from "./icons/Icon";
 import {useImagesGalleryMethods, useImagesGalleryRegistry} from "./images-gallery/images-gallery";
+import {isPhoneApp} from "./use-is-phone";
+import Pencil from "./icons/react/Pencil";
 
 const fileItemStyle = css`
   display: block;
@@ -29,13 +31,20 @@ const fileItemStyle = css`
   background-size: cover;
   text-decoration: none;
   border-radius: ${space.s8}px;
-  border: 1px solid ${themeVars.separatorColor};
   background-clip: padding-box;
   &:focus {
     text-decoration: none;
   }
 `;
 
+const thumbnailStyle = css`
+  border: 1px solid ${themeVars.separatorColor};
+`;
+
+const iconOnlyStyle = css`
+  border: 1px solid ${themeVars.colorBorderButtonOutlineNeutralDefault};
+`;
+
 const overlayStyle = css`
   width: 100%;
   height: 100%;
@@ -63,7 +72,15 @@ const fileOverlayStyle = css`
   background: transparent;
 `;
 
+const actionsButtonStyle = css`
+  position: absolute;
+  top: ${space.s8}px;
+  right: ${space.s8}px;
+  opacity: 0;
+`;
+
 export type FileItemType = {
+  uid: string;
   name: string;
   url: string;
   downloadUrl?: string | null;
@@ -79,14 +96,18 @@ export type FileItemType = {
 
 export type FileItemProps = {
   data: FileItemType;
+  onDownloadClick?: () => void;
   onRemoveClick?: (x: FileItemType) => void;
+  onRenameClick?: (x: {id: string; name: string}) => void;
   disabled?: boolean;
 };
 
 export function FileItem(props: FileItemProps) {
-  const {name, url, thumbnailUrl, status, previewData: preview, contentType} = props.data;
+  const {onDownloadClick, onRemoveClick} = props;
+  const {name, thumbnailUrl, status, previewData: preview, contentType} = props.data;
   const isPending = status === "uploading" || status === "deleting";
-  const isBackgroundReady = Boolean(thumbnailUrl && !isPending);
+  const [isThumbnailLoadFailed, setIsThumbnailLoadFailed] = useState(false);
+  const isBackgroundReady = !isThumbnailLoadFailed && Boolean(thumbnailUrl && !isPending);
   const [isActionsOpened, setIsActionsOpened] = useState(false);
 
   const showFileIcon = !isPending && !isBackgroundReady;
@@ -103,11 +124,12 @@ export function FileItem(props: FileItemProps) {
     imagesRegistry.set(preview.originalSrc, {
       type: preview.type,
       src: preview.originalSrc,
+      label: name,
       zoomed: false,
       setZoomed,
-      actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
+      actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
     });
-  }, [imagesRegistry, name, preview]);
+  }, [imagesRegistry, name, preview, onDownloadClick]);
 
   useEffect(() => {
     if (!preview) {
@@ -124,79 +146,86 @@ export function FileItem(props: FileItemProps) {
       imagesRegistry.set(preview.originalSrc, {
         type: preview.type,
         src: preview.originalSrc,
+        label: name,
         zoomed,
         setZoomed,
-        actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
+        actions: <FilePreviewActions url={preview.originalSrc} name={name} onDownloadClick={onDownloadClick} />,
       });
     }
-  }, [galleryMethods, zoomed, preview, imagesRegistry, name]);
+  }, [galleryMethods, zoomed, preview, imagesRegistry, name, onDownloadClick]);
 
   const onContainerClick = useCallback(() => {
     if (preview) {
       setZoomed(true);
     } else {
-      stratFileDownload(url, name);
+      onDownloadClick?.();
     }
-  }, [name, preview, url]);
+  }, [preview, onDownloadClick]);
 
   return (
-    <div
-      className={cx(
-        css`
-          flex: 1 0 0;
-          height: 100%;
-        `,
-        isBackgroundReady &&
-          css`
-            &:hover .${overlayStyle} {
-              opacity: 1;
-              background-position: 0 0;
-              color: ${themeVars.whiteColor};
-              background-color: rgba(0, 0, 0, 0.6);
-            }
-          `,
-        isBackgroundReady &&
-          isActionsOpened &&
-          css`
-            .${overlayStyle} {
-              opacity: 1;
-              background-position: 0 0;
-              color: ${themeVars.whiteColor};
-              background-color: rgba(0, 0, 0, 0.6);
-            }
-          `
-      )}
-    >
+    <>
       <div
-        style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
-        onClick={onContainerClick}
         className={cx(
           css`
-            flex-shrink: 0;
+            flex: 1 0 0;
+            height: 100%;
           `,
-          fileItemStyle,
-          isPending &&
+          isBackgroundReady &&
             css`
-              ${{backgroundColor: themeVars.entityCardSelectedColor}}
+              &:hover .${overlayStyle} {
+                opacity: 1;
+                background-position: 0 0;
+                color: ${themeVars.whiteColor};
+                background-color: rgba(0, 0, 0, 0.6);
+              }
+            `,
+          isBackgroundReady &&
+            isActionsOpened &&
+            css`
+              .${overlayStyle} {
+                opacity: 1;
+                background-position: 0 0;
+                color: ${themeVars.whiteColor};
+                background-color: rgba(0, 0, 0, 0.6);
+              }
+            `,
+          !isBackgroundReady &&
+            css`
+              &:hover .${overlayStyle} {
+                background-color: ${themeVars.colorBgMenuItemHover};
+              }
+              &:hover .${actionsButtonStyle} {
+                opacity: 1;
+              }
+            `,
+          !isBackgroundReady &&
+            isActionsOpened &&
+            css`
+              .${overlayStyle} {
+                background-color: ${themeVars.colorBgMenuItemHover};
+              }
+              .${actionsButtonStyle} {
+                opacity: 1;
+              }
             `
         )}
       >
-        {isPending && (
-          <div
-            className={css`
-              display: flex;
-              flex-direction: column;
-              justify-content: center; /* centers vertically */
-              align-items: center; /* centers horizontally */
-              height: 100%;
-              width: 100%;
-            `}
-          >
-            <Spinner />
-          </div>
-        )}
-        {showFileIcon && (
-          <div className={cx(overlayStyle, fileOverlayStyle)}>
+        <div
+          style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
+          onClick={onContainerClick}
+          className={cx(
+            css`
+              flex-shrink: 0;
+            `,
+            fileItemStyle,
+            showFileIcon ? iconOnlyStyle : thumbnailStyle,
+            isPending &&
+              css`
+                ${{backgroundColor: themeVars.entityCardSelectedColor}}
+              `
+          )}
+        >
+          {isPending && (
             <div
               className={css`
                 display: flex;
@@ -205,99 +234,122 @@ export function FileItem(props: FileItemProps) {
                 align-items: center; /* centers horizontally */
                 height: 100%;
                 width: 100%;
-                padding-top: ${space.s1}px;
-                gap: ${space.s2}px;
               `}
             >
-              <Icon containerSize={40} iconSize={40}>
-                <FileIcon contentType={contentType} />
-              </Icon>
+              <Spinner />
+            </div>
+          )}
+          {showFileIcon && (
+            <div className={cx(overlayStyle, fileOverlayStyle)}>
               <div
                 className={css`
-                  align-content: center;
-
                   display: flex;
-                  align-items: center;
-                  gap: 10px;
-                  flex-shrink: 0;
-                  color: ${themeVars.colorTextMenuItem};
-                  text-overflow: ellipsis;
-                  overflow: hidden;
+                  flex-direction: column;
+                  justify-content: center; /* centers vertically */
+                  align-items: center; /* centers horizontally */
+                  height: 100%;
+                  width: 100%;
+                  padding-top: ${space.s1}px;
+                  gap: ${space.s2}px;
                 `}
               >
-                <FileTitle
-                  title={name}
+                <Icon containerSize={40} iconSize={40}>
+                  <FileIcon contentType={contentType} />
+                </Icon>
+                <div
                   className={css`
-                    -webkit-line-clamp: 1;
-                    -webkit-box-orient: vertical;
-                    overflow: hidden;
+                    align-content: center;
+
+                    display: flex;
+                    align-items: center;
+                    gap: 10px;
+                    flex-shrink: 0;
+                    color: ${themeVars.colorTextMenuItem};
                     text-overflow: ellipsis;
+                    overflow: hidden;
                   `}
-                />
+                >
+                  <FileTitle
+                    title={name}
+                    className={css`
+                      -webkit-line-clamp: 1;
+                      -webkit-box-orient: vertical;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    `}
+                  />
+                </div>
               </div>
-            </div>
-            <div
-              className={css`
-                position: absolute;
-                top: ${space.s8}px;
-                right: ${space.s8}px;
-              `}
-            >
-              <FileActionsMenu
-                setIsActionsOpened={setIsActionsOpened}
-                data={props.data}
-                disabled={props.disabled}
-                isBackgroundReady={isBackgroundReady}
-                onRemoveClick={props.onRemoveClick}
-              />
-            </div>
-          </div>
-        )}
-        {!isPending && !showFileIcon && (
-          <div className={cx(overlayStyle, isBackgroundReady ? imageOverlayStyle : fileOverlayStyle)}>
-            <div
-              className={css`
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between; /* Top + bottom placement */
-                width: 100%;
-                height: 100%;
-                overflow: hidden;
-                box-sizing: border-box;
-                gap: ${space.s8}px;
-              `}
-            >
-              <div
-                className={css`
-                  align-self: flex-end;
-                `}
-              >
+              <div className={actionsButtonStyle}>
                 <FileActionsMenu
                   setIsActionsOpened={setIsActionsOpened}
                   data={props.data}
                   disabled={props.disabled}
-                  isBackgroundReady={isBackgroundReady}
-                  onRemoveClick={props.onRemoveClick}
+                  onDownloadClick={onDownloadClick}
+                  onRemoveClick={onRemoveClick}
+                  onRenameClick={props.onRenameClick}
                 />
               </div>
+            </div>
+          )}
+          {!isPending && !showFileIcon && (
+            <div className={cx(overlayStyle, isBackgroundReady ? imageOverlayStyle : fileOverlayStyle)}>
               <div
                 className={css`
+                  position: relative;
                   display: flex;
-                  align-self: flex-start;
-                  align-items: flex-end;
-                  text-overflow: ellipsis;
-                  //overflow: hidden;
+                  flex-direction: column;
+                  justify-content: space-between; /* Top + bottom placement */
+                  width: 100%;
+                  height: 100%;
+                  overflow: hidden;
                   box-sizing: border-box;
+                  gap: ${space.s8}px;
                 `}
               >
-                <FileTitle title={name} />
+                <div
+                  className={css`
+                    align-self: flex-end;
+                  `}
+                >
+                  <FileActionsMenu
+                    setIsActionsOpened={setIsActionsOpened}
+                    data={props.data}
+                    disabled={props.disabled}
+                    actionsButtonStyle={
+                      isBackgroundReady ? makeButtonColors(colors.inversedTextColor, "ghost") : undefined
+                    }
+                    onDownloadClick={onDownloadClick}
+                    onRemoveClick={props.onRemoveClick}
+                    onRenameClick={props.onRenameClick}
+                  />
+                </div>
+                <div
+                  className={css`
+                    display: flex;
+                    align-self: flex-start;
+                    align-items: flex-end;
+                    text-overflow: ellipsis;
+                    //overflow: hidden;
+                    box-sizing: border-box;
+                  `}
+                >
+                  <FileTitle title={name} />
+                </div>
               </div>
             </div>
-          </div>
-        )}
+          )}
+        </div>
+        {thumbnailUrl ? (
+          <img
+            style={{display: "none"}}
+            onError={() => setIsThumbnailLoadFailed(true)}
+            src={thumbnailUrl}
+            alt="invisible"
+          />
+        ) : null}
       </div>
-    </div>
+    </>
   );
 }
 
@@ -305,14 +357,18 @@ function FileActionsMenu({
   data,
   disabled,
   setIsActionsOpened,
+  onDownloadClick,
   onRemoveClick,
-  isBackgroundReady,
+  onRenameClick,
+  actionsButtonStyle,
 }: {
   data: FileItemType;
+  onDownloadClick?: () => void;
   onRemoveClick?: (data: FileItemType) => void;
+  onRenameClick?: (data: {id: string; name: string}) => void;
   disabled?: boolean;
   setIsActionsOpened: (val: boolean) => void;
-  isBackgroundReady: boolean;
+  actionsButtonStyle?: CSSProperties;
 }) {
   const toast = useToast();
 
@@ -324,14 +380,14 @@ function FileActionsMenu({
           className={css`
             z-index: 1;
           `}
-          style={isBackgroundReady ? makeButtonColors(colors.inversedTextColor, "ghost") : undefined}
+          style={actionsButtonStyle}
         />
       }
     >
       <ActionsMenuItem
         Icon={Link}
         onSelect={() => {
-          copyToClipboard(`${window.origin}${data.url}`)
+          copyUrlToClipboard({url: `${window.origin}${data.url}`, label: data.name})
             .then(() => toast.success({title: "Link copied to clipboard"}))
             .catch((error) => toast.error({title: "Unable to copy link to clipboard", subTitle: error.message}));
         }}
@@ -339,11 +395,27 @@ function FileActionsMenu({
         Copy file URL
       </ActionsMenuItem>
       <a href={data.url} target="_blank" rel="noopener noreferrer">
-        <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
-      </a>
-      <a download={data.name} href={`${data.url}?attachment`}>
-        <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+        <ActionsMenuItem Icon={RicheditorOpenLink}>
+          {isPhoneApp() ? "Open in browser" : "Open in new tab"}
+        </ActionsMenuItem>
       </a>
+      {isPhoneApp() ? (
+        <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+          Download
+        </ActionsMenuItem>
+      ) : (
+        <a download={data.name} href={`${data.url}?attachment`}>
+          <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+        </a>
+      )}
+      {onRenameClick && data.status === "done" ? (
+        <>
+          <ActionsMenuSeparator />
+          <ActionsMenuItem Icon={Pencil} onSelect={() => onRenameClick?.({id: data.uid, name: data.name})}>
+            Rename
+          </ActionsMenuItem>
+        </>
+      ) : null}
       <ActionsMenuSeparator />
       <ActionsMenuItem Icon={Delete} onSelect={() => onRemoveClick?.(data)} dangerous disabled={disabled}>
         Delete
@@ -353,6 +425,10 @@ function FileActionsMenu({
 }
 
 function FileTitle({title, className}: {title: string; className?: string}) {
+  const parts = title.split(".");
+  const ext = parts.length > 1 ? "." + parts[parts.length - 1] : "";
+  const name = title.substring(0, title.length - ext.length);
+
   return (
     <div
       className={cx(
@@ -368,7 +444,7 @@ function FileTitle({title, className}: {title: string; className?: string}) {
           overflow: hidden;
           font-size: ${fontSize.mini}px;
           font-weight: ${fontWeight.medium};
-          line-height: ${lineHeight.narrow};
+          line-height: ${lineHeight.heading};
           text-transform: none;
           text-overflow: ellipsis;
           -webkit-line-clamp: 1;
@@ -382,12 +458,51 @@ function FileTitle({title, className}: {title: string; className?: string}) {
         className
       )}
     >
-      {title}
+      <div
+        className={css`
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          max-width: 120px;
+        `}
+      >
+        <span
+          className={css`
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            /* ellipsis shows ONLY if this span overflows */
+            min-width: 0;
+          `}
+        >
+          {name}
+        </span>
+        <span
+          className={css`
+            flex: 0 0 auto;
+          `}
+        >
+          {ext}
+        </span>
+      </div>
     </div>
   );
 }
 
-function FilePreviewActions({url, name}: {url: string; name: string}) {
+function FilePreviewActions({url, name, onDownloadClick}: {url: string; name: string; onDownloadClick?: () => void}) {
+  if (isPhoneApp()) {
+    return (
+      <>
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          <ActionsMenuItem Icon={RicheditorOpenLink}>Open in browser</ActionsMenuItem>
+        </a>
+        <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+          Download
+        </ActionsMenuItem>
+      </>
+    );
+  }
+
   return (
     <>
       <a href={url} target="_blank" rel="noopener noreferrer">
@@ -400,18 +515,10 @@ function FilePreviewActions({url, name}: {url: string; name: string}) {
   );
 }
 
-function stratFileDownload(url: string, filename: string) {
-  const a = document.createElement("a");
-  a.href = `${url}?attachment`;
-  a.download = filename;
-  a.style.display = "none";
-
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-}
-
-function FileIcon({contentType}: {contentType: string}) {
+function FileIcon({contentType}: {contentType?: string}) {
+  if (!contentType) {
+    return <AppWiki />;
+  }
   if (contentType.startsWith("image/")) {
     return <FileImage />;
   }