@fibery/ui-kit 2.0.0 → 2.0.1

package/src/file-item-2.tsx

@@ -1,357 +0,0 @@
-import {css, cx} from "@linaria/core";
-import {CSSProperties, useState} from "react";
-import {ActionsMenu} from "./actions-menu";
-import {ActionsButtonCompact} from "./button/actions-button-compact";
-import {border, fontSize, fontWeight, lineHeight, space, themeVars} from "./design-system";
-import {makeButtonColors} from "./button/make-button-colors";
-import {useTheme} from "./theme-provider";
-import Spinner from "./icons/react/Spinner";
-import {Icon} from "./icons/Icon";
-import {FileIcon} from "./file-item/file-icon";
-import {FileMenuItems} from "./file-item/file-menu-items";
-import {UploadFileWithContent} from "./file-item/types";
-import {FileTitle as FileTitleInner} from "./file-item/file-title";
-
-const fileItemStyle = css`
-  display: block;
-  height: 100%;
-  background-color: ${themeVars.transparent};
-  background-size: cover;
-  text-decoration: none;
-  border-radius: ${space.s8}px;
-  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%;
-  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;
-`;
-
-const actionsButtonStyle = css`
-  position: absolute;
-  top: ${space.s8}px;
-  right: ${space.s8}px;
-  opacity: 0;
-`;
-
-export type FileItemProps = {
-  data: UploadFileWithContent;
-  onDownloadClick?: () => void;
-  onRemoveClick?: () => void;
-  onRenameClick?: (file: {id: string; name: string}) => void;
-  onClick?: () => void;
-  disabled?: boolean;
-};
-
-export const minFileTileWidth = 120;
-
-export function FileItem(props: FileItemProps) {
-  const theme = useTheme();
-  const {onDownloadClick, onRemoveClick, onClick} = props;
-  const {name, thumbnailUrl, status, contentType} = props.data;
-  const isPending = status === "uploading" || status === "deleting";
-  const [isThumbnailLoadFailed, setIsThumbnailLoadFailed] = useState(false);
-  const isBackgroundReady = !isThumbnailLoadFailed && Boolean(thumbnailUrl && !isPending);
-  const [isActionsOpened, setIsActionsOpened] = useState(false);
-
-  const showFileIcon = !isPending && !isBackgroundReady;
-
-  return (
-    <>
-      <div
-        className={cx(
-          css`
-            flex: 1 0 0;
-            height: 100%;
-            min-width: ${minFileTileWidth}px;
-          `,
-          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);
-              }
-            `,
-          !isBackgroundReady &&
-            css`
-              &:hover .${overlayStyle} {
-                background-color: ${themeVars.colorBgMenuItemHover};
-              }
-              &:hover .${actionsButtonStyle} {
-                opacity: 1;
-              }
-            `,
-          !isBackgroundReady &&
-            isActionsOpened &&
-            css`
-              .${overlayStyle} {
-                background-color: ${themeVars.colorBgMenuItemHover};
-              }
-              .${actionsButtonStyle} {
-                opacity: 1;
-              }
-            `
-        )}
-      >
-        <div
-          style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
-          onClick={onClick}
-          className={cx(
-            css`
-              flex-shrink: 0;
-            `,
-            fileItemStyle,
-            showFileIcon ? iconOnlyStyle : thumbnailStyle,
-            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`
-                    display: flex;
-                    width: 100%;
-                    justify-content: center;
-                    gap: 10px;
-                    flex-shrink: 0;
-                    color: ${themeVars.colorTextMenuItem};
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                  `}
-                >
-                  <FileTitle
-                    title={name}
-                    className={css`
-                      overflow: hidden;
-                      text-overflow: ellipsis;
-                    `}
-                  />
-                </div>
-              </div>
-              <div className={actionsButtonStyle}>
-                <FileActionsMenu
-                  setIsActionsOpened={setIsActionsOpened}
-                  data={props.data}
-                  disabled={props.disabled}
-                  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;
-                  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}
-                    actionsButtonStyle={
-                      isBackgroundReady ? makeButtonColors(themeVars.inversedTextColor, "ghost", theme) : undefined
-                    }
-                    onDownloadClick={onDownloadClick}
-                    onRemoveClick={props.onRemoveClick}
-                    onRenameClick={props.onRenameClick}
-                  />
-                </div>
-                <div
-                  className={css`
-                    display: flex;
-                    width: 100%;
-                    align-self: flex-start;
-                    align-items: flex-end;
-                    text-overflow: ellipsis;
-                    box-sizing: border-box;
-                  `}
-                >
-                  <FileTitle title={name} />
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-        {thumbnailUrl ? (
-          <img
-            style={{display: "none"}}
-            onError={() => setIsThumbnailLoadFailed(true)}
-            src={thumbnailUrl}
-            alt="invisible"
-          />
-        ) : null}
-      </div>
-    </>
-  );
-}
-
-function FileActionsMenu({
-  data,
-  disabled,
-  setIsActionsOpened,
-  onDownloadClick,
-  onRemoveClick,
-  onRenameClick,
-  actionsButtonStyle,
-}: {
-  data: UploadFileWithContent;
-  onDownloadClick?: () => void;
-  onRemoveClick?: () => void;
-  onRenameClick?: (data: {id: string; name: string}) => void;
-  disabled?: boolean;
-  setIsActionsOpened: (val: boolean) => void;
-  actionsButtonStyle?: CSSProperties;
-}) {
-  return (
-    <ActionsMenu
-      onOpenChange={setIsActionsOpened}
-      trigger={
-        <ActionsButtonCompact
-          className={css`
-            z-index: 1;
-          `}
-          style={actionsButtonStyle}
-        />
-      }
-    >
-      {
-        <FileMenuItems
-          file={data}
-          disabled={disabled}
-          onDownloadClick={onDownloadClick}
-          onRemoveClick={onRemoveClick}
-          onRenameClick={onRenameClick}
-        />
-      }
-    </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;
-          overflow: hidden;
-          font-size: ${fontSize.mini}px;
-          font-weight: ${fontWeight.medium};
-          line-height: ${lineHeight.heading};
-          text-transform: none;
-          text-overflow: ellipsis;
-          &:hover {
-            text-decoration: none;
-            color: inherit;
-          }
-        `,
-        className
-      )}
-    >
-      <FileTitleInner
-        title={title}
-        containerCss={css`
-          max-width: 180px;
-        `}
-      />
-    </div>
-  );
-}