@fibery/ui-kit 1.38.0 → 1.38.2

package/src/file-item-2.tsx

@@ -0,0 +1,566 @@
+/* eslint-disable max-lines */
+import {css, cx} from "@linaria/core";
+import {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";
+import {makeButtonColors} from "./button/make-button-colors";
+import Delete from "./icons/react/Delete";
+import FileDownload from "./icons/react/FileDownload";
+import FileImage from "./icons/react/FileImage";
+import FileVideo from "./icons/react/FileVideo";
+import FileTable from "./icons/react/FileTable";
+import FileDocument from "./icons/react/FileDocument";
+import FileArchive from "./icons/react/FileArchive";
+import FilePresentation from "./icons/react/FilePresentation";
+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 {useToast} from "./toast/toast-provider";
+import {Icon} from "./icons/Icon";
+import {useImagesGalleryMethods, useImagesGalleryRegistry} from "./images-gallery/images-gallery";
+
+const fileItemStyle = css`
+  display: block;
+  height: 100%;
+  background-color: ${themeVars.transparent};
+  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 overlayStyle = css`
+  width: 100%;
+  height: 100%;
+  padding: ${space.s8}px;
+  overflow: hidden;
+  color: ${themeVars.textColor};
+  border-radius: ${border.radius8}px;
+  cursor: pointer;
+  opacity: 0;
+`;
+
+const imageOverlayStyle = css`
+  background-size: 100% 200%;
+  background-position: 0 100%;
+  color: ${themeVars.transparent};
+  border-radius: ${border.radius6}px;
+  &:hover {
+    background-position: 0 0;
+    color: ${themeVars.inversedTextColor};
+  }
+`;
+
+const fileOverlayStyle = css`
+  opacity: 1;
+  background: transparent;
+`;
+
+export type FileItemType = {
+  name: string;
+  url: string;
+  downloadUrl?: string | null;
+  thumbnailUrl: string | null;
+  contentType: string;
+  previewData: null | {
+    type: "image" | "video" | "iframe";
+    previewSrc: string | null;
+    originalSrc: string;
+  };
+  status?: string;
+};
+
+export type FileItemProps = {
+  data: FileItemType;
+  onRemoveClick?: (x: FileItemType) => void;
+  disabled?: boolean;
+};
+
+export function FileItem(props: FileItemProps) {
+  const {name, url, thumbnailUrl, status, previewData: preview, contentType} = props.data;
+  const isPending = status === "uploading" || status === "deleting";
+  const isBackgroundReady = Boolean(thumbnailUrl && !isPending);
+  const [isActionsOpened, setIsActionsOpened] = useState(false);
+
+  const showFileIcon = !isPending && !isBackgroundReady;
+
+  const [zoomed, setZoomed] = useState(false);
+  const imagesRegistry = useImagesGalleryRegistry();
+  const galleryMethods = useImagesGalleryMethods();
+
+  useEffect(() => {
+    if (!preview) {
+      return;
+    }
+
+    imagesRegistry.set(preview.originalSrc, {
+      type: preview.type,
+      src: preview.originalSrc,
+      zoomed: false,
+      setZoomed,
+      actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
+    });
+  }, [imagesRegistry, name, preview]);
+
+  useEffect(() => {
+    if (!preview) {
+      return;
+    }
+
+    if (zoomed) {
+      galleryMethods.setActivated(true);
+    }
+    const imageData = imagesRegistry.get(preview.originalSrc);
+    if (imageData) {
+      imageData.zoomed = zoomed;
+    } else {
+      imagesRegistry.set(preview.originalSrc, {
+        type: preview.type,
+        src: preview.originalSrc,
+        zoomed,
+        setZoomed,
+        actions: <FilePreviewActions url={preview.originalSrc} name={name} />,
+      });
+    }
+  }, [galleryMethods, zoomed, preview, imagesRegistry, name]);
+
+  const onContainerClick = useCallback(() => {
+    if (preview) {
+      setZoomed(true);
+    } else {
+      stratFileDownload(url, name);
+    }
+  }, [name, preview, url]);
+
+  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;
+          `,
+          fileItemStyle,
+          isPending &&
+            css`
+              ${{backgroundColor: themeVars.entityCardSelectedColor}}
+            `
+        )}
+      >
+        {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
+              className={css`
+                display: flex;
+                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;
+              `}
+            >
+              <Icon containerSize={40} iconSize={40}>
+                <FileIcon contentType={contentType} />
+              </Icon>
+              <div
+                className={css`
+                  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
+              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;
+                `}
+              >
+                <FileActionsMenu
+                  setIsActionsOpened={setIsActionsOpened}
+                  data={props.data}
+                  disabled={props.disabled}
+                  isBackgroundReady={isBackgroundReady}
+                  onRemoveClick={props.onRemoveClick}
+                />
+              </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>
+  );
+}
+
+function FileActionsMenu({
+  data,
+  disabled,
+  setIsActionsOpened,
+  onRemoveClick,
+  isBackgroundReady,
+}: {
+  data: FileItemType;
+  onRemoveClick?: (data: FileItemType) => void;
+  disabled?: boolean;
+  setIsActionsOpened: (val: boolean) => void;
+  isBackgroundReady: boolean;
+}) {
+  const toast = useToast();
+
+  return (
+    <ActionsMenu
+      onOpenChange={setIsActionsOpened}
+      trigger={
+        <ActionsButtonCompact
+          className={css`
+            z-index: 1;
+          `}
+          style={isBackgroundReady ? makeButtonColors(colors.inversedTextColor, "ghost") : undefined}
+        />
+      }
+    >
+      <ActionsMenuItem
+        Icon={Link}
+        onSelect={() => {
+          copyToClipboard(`${window.origin}${data.url}`)
+            .then(() => toast.success({title: "Link copied to clipboard"}))
+            .catch((error) => toast.error({title: "Unable to copy link to clipboard", subTitle: error.message}));
+        }}
+      >
+        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>
+      </a>
+      <ActionsMenuSeparator />
+      <ActionsMenuItem Icon={Delete} onSelect={() => onRemoveClick?.(data)} dangerous disabled={disabled}>
+        Delete
+      </ActionsMenuItem>
+    </ActionsMenu>
+  );
+}
+
+function FileTitle({title, className}: {title: string; className?: string}) {
+  return (
+    <div
+      className={cx(
+        css`
+          border-radius: ${border.radius4}px;
+          background: ${themeVars.badgeBgColor};
+          padding: ${space.s2}px ${space.s5}px;
+          height: 100%;
+          vertical-align: top;
+          text-align: center;
+          justify-content: center;
+          word-break: break-word;
+          overflow: hidden;
+          font-size: ${fontSize.mini}px;
+          font-weight: ${fontWeight.medium};
+          line-height: ${lineHeight.narrow};
+          text-transform: none;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+
+          &:hover {
+            text-decoration: none;
+            color: inherit;
+          }
+        `,
+        className
+      )}
+    >
+      {title}
+    </div>
+  );
+}
+
+function FilePreviewActions({url, name}: {url: string; name: string}) {
+  return (
+    <>
+      <a href={url} target="_blank" rel="noopener noreferrer">
+        <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
+      </a>
+      <a download={name} href={`${url}?attachment`}>
+        <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+      </a>
+    </>
+  );
+}
+
+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}) {
+  if (contentType.startsWith("image/")) {
+    return <FileImage />;
+  }
+  if (contentType.startsWith("video/")) {
+    return <FileVideo />;
+  }
+  if (SheetsContentTypes.includes(contentType)) {
+    return <FileTable />;
+  }
+  if (ArchiveContentTypes.includes(contentType)) {
+    return <FileArchive />;
+  }
+  if (PresentationContentTypes.includes(contentType)) {
+    return <FilePresentation />;
+  }
+  if (DocumentContentTypes.includes(contentType) || contentType.startsWith("text/")) {
+    return <FileDocument />;
+  }
+
+  return <AppWiki />;
+}
+
+const ArchiveContentTypes = [
+  "application/zip",
+  "application/zip-compressed",
+  "application/x-zip",
+  "application/x-zip-compressed",
+  "multipart/x-zip",
+
+  "application/x-rar-compressed",
+  "application/vnd.rar",
+
+  "application/x-7z-compressed",
+
+  "application/gzip",
+  "application/x-gzip",
+
+  "application/x-tar",
+
+  "application/x-bzip",
+  "application/x-bzip2",
+  "application/x-bzip3",
+  "application/x-bzip4",
+
+  "application/x-xz",
+
+  "application/zstd",
+  "application/x-zstd",
+
+  "application/x-lzma",
+  "application/x-lzip",
+
+  "application/x-lzh",
+  "application/x-lha",
+
+  "application/x-iso9660-image",
+  "application/x-cd-image",
+
+  "application/x-apple-diskimage",
+
+  "application/x-arj",
+
+  "application/x-cpio",
+
+  "application/x-rpm",
+
+  "application/x-deb",
+  "application/vnd.debian.binary-package",
+
+  "application/x-compress",
+  "application/x-archive",
+  "application/vnd.android.package-archive",
+];
+
+const PresentationContentTypes = [
+  "application/x-iwork-keynote-sffkey",
+  "application/vnd.ms-powerpoint",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  "application/vnd.openxmlformats-officedocument.presentationml.slideshow",
+  "application/vnd.openxmlformats-officedocument.presentationml.template",
+  "application/vnd.ms-powerpoint.presentation.macroEnabled.12",
+  "application/vnd.ms-powerpoint.slideshow.macroEnabled.12",
+  "application/vnd.ms-powerpoint.template.macroEnabled.12",
+  "application/vnd.oasis.opendocument.presentation",
+  "application/vnd.oasis.opendocument.presentation-template",
+  "application/vnd.apple.keynote",
+  "application/vnd.google-apps.presentation",
+  "application/pdf",
+  "application/vnd.sun.xml.impress",
+  "application/vnd.stardivision.impress",
+];
+
+const SheetsContentTypes = [
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.template",
+  "application/vnd.ms-excel",
+  "application/vnd.ms-excel.sheet.macroEnabled.12",
+  "application/vnd.ms-excel.template.macroEnabled.12",
+  "application/vnd.ms-excel.addin.macroEnabled.12",
+  "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
+  "application/vnd.oasis.opendocument.spreadsheet",
+  "application/vnd.oasis.opendocument.spreadsheet-template",
+  "application/vnd.apple.numbers",
+  "application/vnd.google-apps.spreadsheet",
+  "text/csv",
+  "text/x-comma-separated-values",
+  "application/csv",
+  "text/tab-separated-values",
+  "application/vnd.lotus-1-2-3",
+  "application/x-123",
+  "application/vnd.stardivision.calc",
+  "application/vnd.sun.xml.calc",
+  "application/x-dbase",
+  "application/x-iwork-numbers-sffnumbers",
+];
+
+const DocumentContentTypes = [
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.template",
+  "application/vnd.ms-word.document.macroEnabled.12",
+  "application/vnd.ms-word.template.macroEnabled.12",
+
+  "application/vnd.oasis.opendocument.text",
+  "application/vnd.oasis.opendocument.text-template",
+  "application/vnd.oasis.opendocument.text-master",
+  "application/vnd.oasis.opendocument.text-web",
+
+  "application/vnd.apple.pages",
+  "application/x-iwork-pages-sffpages",
+
+  "application/rtf",
+  "text/rtf",
+
+  "text/plain",
+  "text/markdown",
+  "text/html",
+
+  "application/vnd.google-apps.document",
+
+  "application/vnd.sun.xml.writer",
+  "application/vnd.sun.xml.writer.template",
+  "application/vnd.sun.xml.writer.global",
+
+  "application/vnd.stardivision.writer",
+  "application/vnd.stardivision.writer-global",
+
+  "application/x-mswrite",
+  "application/x-abiword",
+
+  "application/pdf",
+];