@griddo/ax 11.4.24 → 11.5.0

package/src/modules/MediaGallery/ImageModal/index.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+import { IGetFolderParams, IImage } from "@ax/types";
+import { Button, ErrorToast, IconAction, Toast, Tooltip } from "@ax/components";
+import { useModal, useToast } from "@ax/hooks";
+import ImageDragAndDrop from "../ImageDragAndDrop";
+import { NotSavedModal } from "../atoms";
+import DetailPanel from "./DetailPanel";
+import { IImageFormState } from "..";
+
+import * as S from "./style";
+
+const ImageModal = (props: IProps) => {
+  const {
+    image,
+    items,
+    activeDelete,
+    isAllowedToEdit,
+    setFile,
+    onDelete,
+    setFileSelected,
+    handleDownload,
+    form,
+    setForm,
+    isDirty,
+    resetDirty,
+    getParams,
+  } = props;
+
+  const { name, id, site, alt, url } = image;
+
+  const [isDNDVisible, setDNDVisible] = useState(false);
+  const [isArrowPrev, setIsArrowPrev] = useState(false);
+  const { isVisible, toggleToast, setIsVisible } = useToast();
+  const { isOpen: isSaveOpen, toggleModal: toggleSaveModal } = useModal();
+
+  const index = items.indexOf(image.id);
+
+  const validFormats = ["jpeg", "jpg", "png", "svg", "gif"];
+
+  const handleArrowClick = (isPrev: boolean) => () => {
+    if (isDirty) {
+      setIsArrowPrev(isPrev);
+      toggleSaveModal();
+    } else {
+      resetDirty();
+      changeFile(isPrev);
+    }
+  };
+
+  const changeFile = (isPrev: boolean) => {
+    isPrev ? setFile(items[index - 1]) : setFile(items[index + 1]);
+    setDNDVisible(false);
+  };
+
+  const handleReplace = () => setDNDVisible((state) => !state);
+
+  const handleUpload = (file: IImage[]) => {
+    setFileSelected(file[0]);
+    setDNDVisible(false);
+    toggleToast();
+    resetDirty();
+  };
+
+  const handleFileDownload = () => handleDownload(id, name);
+
+  const toastProps = {
+    setIsVisible,
+    message: "1 image replaced",
+  };
+
+  const handleMainAction = () => {
+    toggleSaveModal();
+    resetDirty();
+    changeFile(isArrowPrev);
+  };
+
+  const mainModalAction = {
+    title: "Yes, discard changes",
+    onClick: () => handleMainAction(),
+  };
+
+  const secondaryModalAction = { title: "Cancel", onClick: toggleSaveModal };
+
+  return (
+    <>
+      <S.Wrapper>
+        <ErrorToast size="l" />
+        <S.LeftPanel>
+          <IconAction icon="leftArrow" onClick={handleArrowClick(true)} disabled={index === 0} />
+          <S.FilePreview>
+            <S.ImageWrapper>
+              <div>
+                <img src={url} alt={alt} />
+              </div>
+              {isDNDVisible && (
+                <S.DragAndDropWrapper>
+                  <ImageDragAndDrop
+                    validFormats={validFormats}
+                    handleUpload={handleUpload}
+                    inverse={true}
+                    replaceData={{ fileID: id }}
+                    siteID={site || "global"}
+                    getParams={getParams}
+                  />
+                </S.DragAndDropWrapper>
+              )}
+            </S.ImageWrapper>
+            <S.FileActions>
+              {isAllowedToEdit ? (
+                <S.ReplaceWrapper>
+                  <Tooltip content="Replacement image will appear on all linked pages.">
+                    <Button type="button" buttonStyle="text" icon="image" onClick={handleReplace}>
+                      Replace
+                    </Button>
+                  </Tooltip>
+                </S.ReplaceWrapper>
+              ) : (
+                <></>
+              )}
+              <Button type="button" buttonStyle="text" icon="download" onClick={handleFileDownload}>
+                Download
+              </Button>
+            </S.FileActions>
+          </S.FilePreview>
+          <IconAction icon="rightArrow" onClick={handleArrowClick(false)} disabled={index === items.length - 1} />
+        </S.LeftPanel>
+        <DetailPanel
+          image={image}
+          onDelete={onDelete}
+          activeDelete={activeDelete}
+          isAllowedToEdit={isAllowedToEdit}
+          form={form}
+          setForm={setForm}
+          isDirty={isDirty}
+          resetDirty={resetDirty}
+          getParams={getParams}
+        />
+      </S.Wrapper>
+      {isVisible && <Toast {...toastProps} />}
+      {isSaveOpen && (
+        <NotSavedModal
+          isOpen={isSaveOpen}
+          toggleModal={toggleSaveModal}
+          mainModalAction={mainModalAction}
+          secondaryModalAction={secondaryModalAction}
+        />
+      )}
+    </>
+  );
+};
+
+interface IProps {
+  image: IImage;
+  onDelete(fileID: number): Promise<void>;
+  items: number[];
+  setFile(id: number): void;
+  setFileSelected: (file: IImage) => void;
+  activeDelete: boolean;
+  isAllowedToEdit: boolean;
+  handleDownload(fileID: number, fileName: string): void;
+  form: IImageFormState;
+  setForm(form: IImageFormState): void;
+  isDirty: boolean;
+  resetDirty(): void;
+  getParams(): IGetFolderParams;
+}
+
+export default ImageModal;

package/src/modules/MediaGallery/ImageModal/style.tsx

@@ -0,0 +1,106 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+`;
+
+const LeftPanel = styled.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding-left: ${(p) => p.theme.spacing.m};
+  padding-right: ${(p) => p.theme.spacing.m};
+  align-items: center;
+`;
+
+const FilePreview = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-content: center;
+  flex-flow: column wrap;
+`;
+
+const ImageWrapper = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 358px;
+  align-items: center;
+  img {
+    max-height: 358px;
+  }
+`;
+
+const FileName = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  margin-top: ${(p) => p.theme.spacing.s};
+  text-align: center;
+  word-break: break-word;
+`;
+
+const FileActions = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: ${(p) => p.theme.spacing.m};
+`;
+
+const ReplaceWrapper = styled.div`
+  position: relative;
+`;
+
+const ActionMenu = styled.ul`
+  padding: 0;
+  white-space: nowrap;
+`;
+
+const ActionItem = styled.li`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  padding: ${(p) => p.theme.spacing.xxs} ${(p) => p.theme.spacing.xs};
+  cursor: pointer;
+
+  &:focus {
+    background: ${(p) => p.theme.color.overlayFocusPrimary};
+  }
+
+  &:hover {
+    background: ${(p) => p.theme.color.overlayHoverPrimary};
+  }
+`;
+
+const TextType = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  padding-left: ${(p) => p.theme.spacing.xs};
+  padding-top: ${(p) => p.theme.spacing.xxs};
+  width: 140px;
+`;
+
+const DragAndDropWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+`;
+
+export {
+  Wrapper,
+  FilePreview,
+  ImageWrapper,
+  FileName,
+  LeftPanel,
+  FileActions,
+  ReplaceWrapper,
+  ActionMenu,
+  ActionItem,
+  TextType,
+  DragAndDropWrapper,
+};

package/src/modules/MediaGallery/ListItem/index.tsx

@@ -0,0 +1,181 @@
+import React, { useState } from "react";
+import { CheckField, ElementsTooltip, Tooltip } from "@ax/components";
+import { IActionMenuOption, ICheck, IImage } from "@ax/types";
+import { formatBytes, getFileExtension, trimText } from "@ax/helpers";
+import { useModal } from "@ax/hooks";
+
+import { DeleteFileModal, MoveItemModal } from "../atoms";
+
+import * as S from "./style";
+
+const ListItem = (props: IProps) => {
+  const {
+    image,
+    isSelected,
+    currentFolderID,
+    isAllowedToDelete,
+    isAllowedToEdit,
+    isAllowedToMove,
+    hoverCheck,
+    onChange,
+    onClick,
+    onDelete,
+    onMove,
+  } = props;
+  const { id, tags, name, size, width, height, folderId } = image;
+  const imageType = getFileExtension(image.name);
+
+  const [selectedFolder, setSelectedFolder] = useState<number | null>(currentFolderID || null);
+  const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+  const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
+
+  const handleChange = (value: ICheck) => onChange(value);
+  const handleClick = () => onClick(image);
+
+  let menuOptions: IActionMenuOption[] = [];
+
+  if (isAllowedToEdit) {
+    menuOptions = [
+      {
+        label: "Edit",
+        icon: "edit",
+        action: () => onClick(image),
+      },
+    ];
+
+    if (isAllowedToMove) {
+      menuOptions = [
+        ...menuOptions,
+        {
+          label: "Move to...",
+          icon: "change",
+          action: () => toggleMoveModal(),
+        },
+      ];
+    }
+  }
+
+  if (isAllowedToDelete) {
+    menuOptions = [
+      ...menuOptions,
+      {
+        label: "Delete",
+        icon: "delete",
+        action: () => toggleDeleteModal(),
+      },
+    ];
+  }
+
+  const handleDeleteFile = () => {
+    onDelete(id);
+    isDeleteOpen && toggleDeleteModal();
+  };
+
+  const handleMoveFile = () => {
+    if (folderId !== selectedFolder) {
+      onMove(id, selectedFolder || "root");
+      isMoveOpen && toggleMoveModal();
+      setSelectedFolder(0);
+    }
+  };
+
+  const handleModalClose = () => {
+    setSelectedFolder(0);
+    isMoveOpen && toggleMoveModal();
+  };
+
+  const mainDeleteModalAction = {
+    title: "Delete image",
+    onClick: () => handleDeleteFile(),
+  };
+
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+
+  const mainMoveModalAction = {
+    title: "Move",
+    onClick: () => handleMoveFile(),
+  };
+
+  const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
+
+  const FileTitle = () => (name.length > 50 ? <Tooltip content={name}>{trimText(name, 50)}</Tooltip> : <>{name}</>);
+
+  return (
+    <>
+      <S.ItemRow role="rowgroup" selected={isSelected}>
+        <S.CheckCell role="cell">
+          <CheckField name="check" value={id} checked={isSelected || hoverCheck} onChange={handleChange} />
+        </S.CheckCell>
+        <S.ThumbCell role="cell" onClick={handleClick}>
+          <S.ThumbWrapper>
+            <img src={image.thumb} alt={image.alt} />
+          </S.ThumbWrapper>
+        </S.ThumbCell>
+        <S.NameCell role="cell" onClick={handleClick} data-testid="file-name-cell">
+          <FileTitle />
+        </S.NameCell>
+        <S.TypeCell role="cell" onClick={handleClick}>
+          <S.FileType>{imageType}</S.FileType>
+        </S.TypeCell>
+        <S.SizeCell role="cell" onClick={handleClick}>
+          {formatBytes(size)}
+        </S.SizeCell>
+        <S.UpdatedCell role="cell" onClick={handleClick}>
+          {`${width}x${height}`}
+        </S.UpdatedCell>
+        <S.TagsCell role="cell" onClick={handleClick}>
+          {tags.length > 0 && (
+            <ElementsTooltip
+              elements={tags}
+              elementsPerRow={3}
+              defaultElements={3}
+              rounded={true}
+              defaultColor="#FFBB37"
+              prefix="#"
+              size="M"
+            />
+          )}
+        </S.TagsCell>
+        <S.ActionsCell role="cell">
+          <S.StyledActionMenu icon="more" options={menuOptions} tooltip="File actions" />
+        </S.ActionsCell>
+      </S.ItemRow>
+      {isDeleteOpen && (
+        <DeleteFileModal
+          isOpen={isDeleteOpen}
+          toggleModal={toggleDeleteModal}
+          mainModalAction={mainDeleteModalAction}
+          secondaryModalAction={secondaryDeleteModalAction}
+          title={name}
+        />
+      )}
+      {isMoveOpen && (
+        <MoveItemModal
+          isOpen={isMoveOpen}
+          toggleModal={handleModalClose}
+          mainModalAction={mainMoveModalAction}
+          secondaryModalAction={secondaryMoveModalAction}
+          folder={selectedFolder}
+          setFolder={setSelectedFolder}
+          hideRoot={!folderId}
+        />
+      )}
+    </>
+  );
+};
+
+interface IProps {
+  image: IImage;
+  isSelected: boolean;
+  currentFolderID: number | null;
+  isAllowedToEdit: boolean;
+  isAllowedToDelete: boolean;
+  isAllowedToMove: boolean;
+  onChange(e: ICheck): void;
+  onClick(file: IImage): void;
+  onDelete(fileID: number): void;
+  onMove(fileID: number, folderID: number | "root"): void;
+  hoverCheck: boolean;
+}
+
+export default ListItem;

package/src/modules/MediaGallery/ListItem/style.tsx

@@ -0,0 +1,100 @@
+import styled from "styled-components";
+import { ActionMenu } from "@ax/components";
+import { Cell, Row } from "@ax/components/TableList/TableItem/style";
+
+const StyledActionMenu = styled(ActionMenu)`
+  opacity: 0;
+`;
+
+const ItemRow = styled(Row)<{ global?: boolean }>`
+  &:hover {
+    ${StyledActionMenu} {
+      opacity: 1;
+    }
+  }
+`;
+
+const CheckCell = styled(Cell)`
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+  > div {
+    width: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const ThumbCell = styled(Cell)`
+  padding: 8px 0;
+`;
+
+const ThumbWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  padding: ${(p) => p.theme.spacing.xxs};
+  width: ${(p) => p.theme.spacing.l};
+  height: ${(p) => p.theme.spacing.l};
+  img {
+    max-height: 40px;
+    width: auto;
+  }
+`;
+
+const NameCell = styled(Cell)`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  flex-grow: 1;
+`;
+
+const TypeCell = styled(Cell)`
+  flex: 0 0 80px;
+  align-items: center;
+  text-transform: uppercase;
+`;
+
+const FileType = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  border: ${(p) => `1px solid ${p.theme.color.textMediumEmphasis}`};
+  border-radius: ${(p) => p.theme.radii.s};
+  padding: ${(p) => `0 ${p.theme.spacing.xxs}`};
+`;
+
+const SizeCell = styled(Cell)`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  flex: 0 0 85px;
+  align-items: center;
+`;
+
+const UpdatedCell = styled(Cell)`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  flex: 0 0 120px;
+  align-items: center;
+`;
+
+const TagsCell = styled(Cell)`
+  flex: 0 0 300px;
+`;
+
+const ActionsCell = styled(Cell)`
+  flex: 0 0 70px;
+  text-align: center;
+`;
+
+export {
+  ItemRow,
+  StyledActionMenu,
+  CheckCell,
+  ThumbCell,
+  ThumbWrapper,
+  NameCell,
+  TypeCell,
+  FileType,
+  SizeCell,
+  UpdatedCell,
+  TagsCell,
+  ActionsCell,
+};

package/src/modules/MediaGallery/UploadItem/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { CheckField, Icon, ProgressBar } from "@ax/components";
+
+import * as S from "./style";
+
+const UploadItem = (props: IProps) => {
+  const { uploadPercentage, grid } = props;
+
+  return (
+    <S.Wrapper grid={grid}>
+      {!grid && (
+        <S.CheckWrapper role="cell">
+          <CheckField name="check" value={0} checked={false} />
+        </S.CheckWrapper>
+      )}
+      <S.IconWrapper>
+        <Icon name="page" size="32" />
+      </S.IconWrapper>
+      <S.BarWrapper>
+        <ProgressBar percentage={uploadPercentage} />
+      </S.BarWrapper>
+      <S.Text>Uploading...</S.Text>
+    </S.Wrapper>
+  );
+};
+
+interface IProps {
+  uploadPercentage: number;
+  grid: boolean;
+}
+
+export default UploadItem;

package/src/modules/MediaGallery/UploadItem/style.tsx

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { Cell } from "@ax/components/TableList/TableItem/style";
+
+const BarWrapper = styled.div``;
+
+const Wrapper = styled.div<{ grid: boolean }>`
+  display: flex;
+  flex-direction: ${(p) => (p.grid ? "column" : "row")};
+  border: ${(p) => `1px dashed ${p.theme.color.interactive01}`};
+  border-radius: ${(p) => p.theme.radii.s};
+  align-items: center;
+  padding: ${(p) =>
+    p.grid ? p.theme.spacing.m : `${p.theme.spacing.xs} ${p.theme.spacing.xs} ${p.theme.spacing.xs} 0`};
+  margin-bottom: ${(p) => (p.grid ? "0" : p.theme.spacing.xs)};
+  justify-content: center;
+
+  ${BarWrapper} {
+    width: ${(p) => (p.grid ? "150px" : "250px")};
+    margin: ${(p) => (p.grid ? `${p.theme.spacing.s} 0` : `0 ${p.theme.spacing.m}`)};
+  }
+`;
+
+const IconWrapper = styled.div`
+  width: 32px;
+  height: 32px;
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.colors.interactive01};
+`;
+
+const CheckWrapper = styled(Cell)`
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+  > div {
+    width: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+export { Wrapper, IconWrapper, BarWrapper, Text, CheckWrapper };