@fibery/ui-kit 1.37.0 → 1.38.1

package/src/field-icon.tsx

@@ -18,8 +18,11 @@ export function FieldIcon({
   if (iconName && isAppIcon(iconName)) {
     return <FieldAppIcon iconName={iconName} color={color} containerSize={containerSize} iconSize={iconSize} />;
   }
+
+  const defaultSize = containerSize || iconSize;
+
   return (
-    <Suspense fallback={null}>
+    <Suspense fallback={<div style={{width: defaultSize, height: defaultSize}} />}>
       <FieldTypeIconLazy iconName={iconName} color={color} containerSize={containerSize} iconSize={iconSize} />
     </Suspense>
   );

package/src/file-item-2.tsx

@@ -0,0 +1,408 @@
+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} from "./design-system";
+import {makeButtonColors} from "./button/make-button-colors";
+import Delete from "./icons/react/Delete";
+import FileDownload from "./icons/react/FileDownload";
+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;
+  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} = 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,
+    });
+  }, [imagesRegistry, 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,
+      });
+    }
+  }, [galleryMethods, zoomed, preview, imagesRegistry]);
+
+  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.inversedTextColor};
+              background-color: rgba(0, 0, 0, 0.6);
+            }
+          `,
+        isBackgroundReady &&
+          isActionsOpened &&
+          css`
+            .${overlayStyle} {
+              opacity: 1;
+              background-position: 0 0;
+              color: ${themeVars.inversedTextColor};
+              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}>
+                <AppWiki />
+              </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;
+
+                  color: ${themeVars.colorBgSidebar};
+                `}
+              >
+                <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;
+          /* UI/Heading/H8 (reg-400, up) */
+          font-family: Inter;
+          font-size: 10px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 125%; /* 12.5px */
+          text-transform: none;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+
+          &:hover {
+            text-decoration: none;
+            color: inherit;
+          }
+        `,
+        className
+      )}
+    >
+      {title}
+    </div>
+  );
+}
+
+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);
+}
+
+// const long = `long text long text long text long text long text long text long text long text long text long text long
+//       long text long text long text long text long text long text long text long text long text long text long text long
+//       text long text long text long text long text long text long text long text long text long text long text long text
+//       long text long text long text long text long text long text long text long text long text long text long text long
+//       text long text long text long text long text long text long text long text long text long text long text long text
+//       long text long text long text long text long text long text long text long text long text long text long text long
+//       text long text long text long text long text long text long text long text long text long text long text long text
+//       long text long text long text long text long text long text long text long text long text long text long text long
+//       text long text long text long text long text long text long text long text long text long text long text long text
+//       long text long text long text long text long text long text long text
+// `;