@griddo/ax 10.2.25 → 10.3.0

package/src/modules/FileDrive/FileDragAndDrop/index.tsx

@@ -0,0 +1,249 @@
+import React, { memo, useRef, useState } from "react";
+import { connect } from "react-redux";
+
+import { Icon, DragAndDrop, ProgressBar } from "@ax/components";
+import { IFile, IRootState } from "@ax/types";
+import { fileDriveActions } from "@ax/containers/FileDrive";
+
+import * as S from "./style";
+
+const FileDragAndDrop = (props: IProps) => {
+  const {
+    validFormats,
+    isUploading,
+    isSuccess,
+    isError,
+    errorMsg,
+    folderID = null,
+    inverse = false,
+    uploadError,
+    uploadFile,
+    handleUpload,
+    replaceData,
+    replaceFile,
+    siteID,
+    isAllowedToUpload = true,
+  } = props;
+
+  const validExtensions = validFormats.map((format) => `.${format}`).join(",");
+
+  const filesInputRef = useRef<any>(null);
+  const filesButtonRef = useRef<any>(null);
+  const [inDropZone, setInDropZone] = useState(false);
+  const [dropDepth, setDropDepth] = useState(0);
+  const [uploadingState, setUploadingState] = useState({ total: 0, ready: 0 });
+
+  const uploading = isUploading || uploadingState.total > uploadingState.ready;
+  const success = isSuccess && uploadingState.total === uploadingState.ready;
+  const uploadPercentage = (uploadingState.ready * 100) / uploadingState.total;
+
+  const handleDragEnter = () => {
+    setDropDepth((depth) => depth + 1);
+  };
+
+  const handleDragLeave = () => {
+    setDropDepth((depth) => depth - 1);
+    if (dropDepth > 1) return;
+    setInDropZone(false);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.dataTransfer.dropEffect = "copy";
+    setInDropZone(true);
+  };
+
+  const checkType = (type: string) => {
+    for (const i in validFormats) {
+      if (type.includes(validFormats[i])) return true;
+    }
+    return false;
+  };
+
+  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+    const files = Array.from(e.dataTransfer.files);
+    e.dataTransfer.clearData();
+    await uploadFiles(files);
+    setDropDepth(0);
+  };
+
+  const handleFilesUpload = (e: any) => {
+    const files: File[] = Array.from(e.currentTarget.files);
+    uploadFiles(files);
+  };
+
+  const uploadFiles = async (files: File[]) => {
+    try {
+      if (!files.every((file) => checkType(file.type))) {
+        uploadError(true, "Invalid format");
+        return;
+      }
+
+      setUploadingState({ total: files.length, ready: 0 });
+
+      let result = [];
+      if (replaceData) {
+        const fileUploaded = files[0] && (await replaceFile(files[0], replaceData.fileID, replaceData.keepURL, siteID));
+        if (fileUploaded) {
+          result.push(fileUploaded);
+        }
+      } else {
+        while (files.length) {
+          const file = files.shift();
+          const fileUploaded = file && (await uploadFile(file, folderID, siteID || "global"));
+          if (fileUploaded) {
+            result.push(fileUploaded);
+          }
+          setUploadingState((state) => ({ total: state.total, ready: state.ready + 1 }));
+        }
+      }
+
+      if (result) {
+        setInDropZone(false);
+        setUploadingState({ total: 0, ready: 0 });
+        handleUpload(result);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleTryAgain = () => {
+    setInDropZone(false);
+  };
+
+  const handleFileClick = () => {
+    if (filesInputRef) {
+      filesInputRef.current.click();
+    }
+  };
+
+  const errorWrapper = errorMsg ? <S.ErrorMsg>{errorMsg}</S.ErrorMsg> : null;
+
+  const renderDragAndDrop = () => (
+    <DragAndDrop
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      validFormats={validFormats}
+    >
+      <S.StatusWrapper onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
+        <S.DragStatus onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
+          <S.DragIcon>
+            <Icon name="page" size="48" />
+          </S.DragIcon>
+          <S.DragTitle>Drag your file here</S.DragTitle>
+          <S.DragSubtitle>or</S.DragSubtitle>
+          <S.FilesInput type="file" ref={filesInputRef} multiple accept={validExtensions} onInput={handleFilesUpload} />
+          <S.FilesButton
+            ref={filesButtonRef}
+            type="button"
+            buttonStyle={inverse ? "lineInverse" : "line"}
+            onClick={handleFileClick}
+            className={inverse ? "inverse" : ""}
+          >
+            Select files
+          </S.FilesButton>
+          <S.DragSubtitle>Valid formats: {validFormats.join(", ")}. Max. size: 50MB</S.DragSubtitle>
+        </S.DragStatus>
+        <S.DragOverStatus onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
+          <S.DragIcon>
+            <Icon name="success" size="48" />
+          </S.DragIcon>
+          <S.DragTitle>Drop your file</S.DragTitle>
+          <S.DragSubtitle>Valid formats: {validFormats.join(", ")}. Max. size: 50MB</S.DragSubtitle>
+        </S.DragOverStatus>
+      </S.StatusWrapper>
+    </DragAndDrop>
+  );
+
+  const renderPlaceholder = () => (
+    <S.StatusWrapper>
+      <S.DragIcon>
+        <Icon name="page" size="36" />
+      </S.DragIcon>
+      <S.DragTitle>Select a file to see details</S.DragTitle>
+    </S.StatusWrapper>
+  );
+
+  return (
+    <S.Wrapper data-testid="file-drag-and-drop-wrapper" inverse={inverse}>
+      <S.DragAndDropWrapper
+        inDropZone={inDropZone}
+        uploading={uploading}
+        success={success}
+        error={isError}
+        inverse={inverse}
+      >
+        {isAllowedToUpload ? renderDragAndDrop() : renderPlaceholder()}
+      </S.DragAndDropWrapper>
+      <S.UploadingWrapper
+        inDropZone={inDropZone}
+        uploading={uploading}
+        success={success}
+        error={isError}
+        inverse={inverse}
+      >
+        <S.StatusWrapper>
+          <S.UploadingStatus>
+            <S.DragIcon>
+              <Icon name="uploadFile" size="48" />
+            </S.DragIcon>
+            <S.ProgressBar>
+              <ProgressBar percentage={uploadPercentage} inverse={inverse} />
+            </S.ProgressBar>
+            <S.DragTitle>Uploading...</S.DragTitle>
+          </S.UploadingStatus>
+          <S.SuccessStatus>
+            <S.DragIcon>
+              <Icon name="success" size="48" />
+            </S.DragIcon>
+            <S.DragTitle>File loaded!</S.DragTitle>
+          </S.SuccessStatus>
+          <S.ErrorStatus>
+            <S.DragIcon>
+              <Icon name="alert" size="48" />
+            </S.DragIcon>
+            <S.DragTitle>Error uploading file</S.DragTitle>
+            {errorWrapper}
+            <S.StyledButton type="button" buttonStyle="text" onClick={handleTryAgain}>
+              TRY AGAIN
+            </S.StyledButton>
+          </S.ErrorStatus>
+        </S.StatusWrapper>
+      </S.UploadingWrapper>
+    </S.Wrapper>
+  );
+};
+
+interface IProps {
+  validFormats: string[];
+  isUploading: boolean;
+  isSuccess: boolean;
+  isError: boolean;
+  errorMsg: string;
+  folderID?: number | null;
+  inverse?: boolean;
+  siteID: number | "global";
+  isAllowedToUpload?: boolean;
+  uploadError: (error: boolean, msg?: string) => Promise<void>;
+  uploadFile: (docFiles: File | File[], folderID: number | null, siteID: number | "global") => Promise<IFile | null>;
+  handleUpload: (result: IFile[]) => void;
+  replaceData?: { fileID: number; keepURL: boolean };
+  replaceFile: (docFile: File, fileID: number, keepUrl: boolean, siteID: number | "global") => Promise<IFile | null>;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  isUploading: state.fileDrive.isUploading,
+  isSuccess: state.fileDrive.isSuccess,
+  isError: state.fileDrive.isError,
+  errorMsg: state.fileDrive.errorMsg,
+});
+
+const mapDispatchToProps = {
+  uploadError: fileDriveActions.uploadError,
+  uploadFile: fileDriveActions.uploadFile,
+  replaceFile: fileDriveActions.replaceFile,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(memo(FileDragAndDrop));

package/src/{components/Fields/FileField → modules/FileDrive}/FileDragAndDrop/style.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import Button from "@ax/components/Button";
 
-export const Wrapper = styled.div`
-  background-color: ${(p) => p.theme.color.uiBarBackground};
+export const Wrapper = styled.div<{ inverse: boolean }>`
+  background-color: ${(p) => (p.inverse ? p.theme.color.overlay : p.theme.color.uiBarBackground)};
   position: relative;
   transition: opacity 0.1s;
   height: 100%;
@@ -25,13 +25,11 @@ export const DragStatus = styled.div`
 
 export const DragTitle = styled.div`
   ${(p) => p.theme.textStyle.fieldLabel};
-  color: ${(p) => p.theme.color.interactive01};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
 export const DragSubtitle = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) => p.theme.color.textMediumEmphasis};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
@@ -88,10 +86,13 @@ export const DragAndDropWrapper = styled.div<{
   uploading: boolean;
   success: boolean;
   error: boolean;
+  inverse: boolean;
 }>`
-  border: ${(p) => `2px dashed ${p.inDropZone ? p.theme.color.interactiveInverse : p.theme.color.interactive01}`};
+  border: ${(p) =>
+    `2px dashed ${p.inDropZone || p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01}`};
   border-radius: 4px;
-  background-color: ${(p) => (p.inDropZone ? p.theme.color.interactive01 : p.theme.color.uiBarBackground)};
+  background-color: ${(p) =>
+    p.inDropZone ? p.theme.color.interactive01 : p.inverse ? "transparent" : p.theme.color.uiBarBackground};
   width: 100%;
   height: 100%;
   opacity: ${(p) => (p.uploading || p.success || p.error ? "0" : "1")};
@@ -109,11 +110,20 @@ export const DragAndDropWrapper = styled.div<{
   }
 
   ${DragTitle} {
-    color: ${(p) => (p.inDropZone ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
+    color: ${(p) => (p.inDropZone || p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
   }
 
   ${DragSubtitle} {
-    color: ${(p) => (p.inDropZone ? p.theme.color.textMediumEmphasisInverse : p.theme.color.textMediumEmphasis)};
+    color: ${(p) =>
+      p.inDropZone || p.inverse ? p.theme.color.textMediumEmphasisInverse : p.theme.color.textMediumEmphasis};
+  }
+
+  ${DragIcon} {
+    svg {
+      path {
+        fill: ${(p) => (p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
+      }
+    }
   }
 `;
 
@@ -122,10 +132,11 @@ export const UploadingWrapper = styled.div<{
   uploading: boolean;
   success: boolean;
   error: boolean;
+  inverse: boolean;
 }>`
   border: ${(p) => (p.success || p.error ? `none` : `2px dashed ${p.theme.color.interactive01}`)};
   border-radius: 4px;
-  background-color: ${(p) => p.theme.color.uiBackground01};
+  background-color: ${(p) => (p.inverse ? "transparent" : p.theme.color.uiBackground01)};
   padding: ${(p) => p.theme.spacing.m};
   width: 100%;
   height: 100%;
@@ -147,6 +158,18 @@ export const UploadingWrapper = styled.div<{
     opacity: ${(p) => (p.error ? "1" : "0")};
     display: ${(p) => (p.error ? "block" : "none")};
   }
+
+  ${DragTitle} {
+    color: ${(p) => (p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
+  }
+
+  ${DragIcon} {
+    svg {
+      path {
+        fill: ${(p) => (p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
+      }
+    }
+  }
 `;
 
 export const ErrorMsg = styled.div`
@@ -167,4 +190,22 @@ const _Button: any = React.forwardRef((props: any, ref?: React.Ref<HTMLDivElemen
 export const FilesButton = styled(_Button)`
   margin-top: ${(p) => p.theme.spacing.xs};
   margin-bottom: ${(p) => p.theme.spacing.xs};
+
+  &.inverse {
+    background-color: transparent;
+
+    :hover:before {
+      background-color: ${(p) => p.theme.color.overlay};
+    }
+    :focus:before {
+      background-color: ${(p) => p.theme.color.overlay};
+    }
+    :active:before {
+      background-color: ${(p) => p.theme.color.overlay};
+    }
+  }
+`;
+
+export const ProgressBar = styled.div`
+  margin-bottom: ${(p) => p.theme.spacing.xs};
 `;

package/src/modules/FileDrive/FileModal/DetailPanel/index.tsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+
+import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
+import { Button, FieldsBehavior, IconAction } from "@ax/components";
+import { IFile, IRootState } from "@ax/types";
+import { fileDriveActions } from "@ax/containers/FileDrive";
+import { useModal } from "@ax/hooks";
+import { DeleteFileModal } from "../../atoms";
+
+import * as S from "./style";
+
+const DetailPanel = (props: IProps) => {
+  const { file, isSaving, activeDelete, isAllowedToEdit, toggleModal, onDelete, updateFile } = props;
+  const { title, alt, tags, site } = file;
+
+  const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+
+  const initState: IFormState = { title: title || "", alt: alt || "", tags: tags || [] };
+  const [form, setForm] = useState(initState);
+
+  useEffect(() => {
+    setForm(initState);
+  }, [file]);
+
+  const handleTitle = (value: string) => setForm({ ...form, title: value });
+  const handleAlt = (value: string) => setForm({ ...form, alt: value });
+  const handleTags = (value: string[]) => setForm({ ...form, tags: value });
+
+  const handleSave = async () => await updateFile(file.id, form, site || "global");
+
+  const handleOpenUrl = () => {
+    const win = window.open(file.url, "_blank");
+    if (win) {
+      win.focus();
+    }
+  };
+
+  const handleCopyUrl = () => navigator.clipboard.writeText(file.url);
+
+  const handleDeleteFile = () => {
+    onDelete(file.id);
+    isDeleteOpen && toggleDeleteModal();
+    toggleModal();
+  };
+
+  const mainNewModalAction = {
+    title: "Delete document",
+    onClick: () => handleDeleteFile(),
+  };
+
+  const secondaryNewModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+
+  return (
+    <>
+      <S.Wrapper>
+        <S.Header>DETAILS</S.Header>
+        <S.Content>
+          <S.FileInfo>
+            <S.FileName>{file.fileName}</S.FileName>
+            <S.InfoLine>
+              <strong>Uploaded:</strong> {getFormattedDateWithTimezone(file.uploadDate, "d MMM Y")}
+            </S.InfoLine>
+            <S.InfoLine>
+              <strong>Type:</strong> {file.fileType}
+            </S.InfoLine>
+            <S.InfoLine>
+              <strong>Size:</strong> {formatBytes(file.sizeBytes)}
+            </S.InfoLine>
+            <S.FileActions>
+              <Button type="button" onClick={handleCopyUrl} buttonStyle="line">
+                Copy URL
+              </Button>
+              <IconAction icon="OpenOutside" size="m" onClick={handleOpenUrl} />
+            </S.FileActions>
+          </S.FileInfo>
+          <S.FileForm>
+            {isAllowedToEdit ? (
+              <>
+                <FieldsBehavior
+                  title="Title"
+                  name="title"
+                  value={form.title}
+                  fieldType="TextField"
+                  onChange={handleTitle}
+                />
+                <FieldsBehavior
+                  title="Alternative text"
+                  name="alt"
+                  value={form.alt}
+                  fieldType="TextField"
+                  onChange={handleAlt}
+                />
+              </>
+            ) : (
+              <>
+                <S.Label>Title</S.Label>
+                <S.FieldText>{form.title}</S.FieldText>
+                <S.Label>Alternative text</S.Label>
+                <S.FieldText>{form.alt}</S.FieldText>
+              </>
+            )}
+            <FieldsBehavior
+              title="Tags"
+              value={form.tags}
+              fieldType="TagsField"
+              onChange={handleTags}
+              disabled={!isAllowedToEdit}
+              helptext="Type a tag and press enter to create it"
+            />
+          </S.FileForm>
+        </S.Content>
+        {(isAllowedToEdit || activeDelete) && (
+          <S.Footer>
+            {activeDelete && (
+              <Button type="button" buttonStyle="text" onClick={toggleDeleteModal}>
+                Delete
+              </Button>
+            )}
+            {isAllowedToEdit && (
+              <Button type="button" onClick={handleSave} disabled={isSaving}>
+                {isSaving ? "Saving" : "Save"}
+              </Button>
+            )}
+          </S.Footer>
+        )}
+      </S.Wrapper>
+      {isDeleteOpen && (
+        <DeleteFileModal
+          isOpen={isDeleteOpen}
+          toggleModal={toggleDeleteModal}
+          mainModalAction={mainNewModalAction}
+          secondaryModalAction={secondaryNewModalAction}
+          title={file.fileName}
+          isChild={true}
+        />
+      )}
+    </>
+  );
+};
+
+interface IProps {
+  file: IFile;
+  isSaving: boolean;
+  activeDelete: boolean;
+  isAllowedToEdit: boolean;
+  toggleModal(): void;
+  onDelete(fileID: number): void;
+  updateFile(
+    fileID: number,
+    data: { title: string; alt: string; tags: string[] },
+    siteID: number | "global"
+  ): Promise<boolean>;
+}
+
+interface IFormState {
+  title: string;
+  alt: string;
+  tags: string[];
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  isSaving: state.app.isSaving,
+});
+
+const mapDispatchToProps = {
+  updateFile: fileDriveActions.updateFile,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(DetailPanel);

package/src/modules/FileDrive/FileModal/DetailPanel/style.tsx

@@ -0,0 +1,81 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  position: relative;
+  display: flex;
+  width: 320px;
+  height: 100%;
+  flex-shrink: 0;
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border-left: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  overflow: hidden;
+  flex-flow: column nowrap;
+`;
+
+const Header = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  padding: ${(p) => p.theme.spacing.s};
+  text-align: center;
+  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+`;
+
+const Content = styled.div`
+  overflow: auto;
+  height: 100%;
+`;
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: ${(p) => p.theme.spacing.s};
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border-top: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  button:not(:first-child) {
+    margin-left: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const FileInfo = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.s} ${p.theme.spacing.m} ${p.theme.spacing.s}`};
+  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+`;
+
+const FileName = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  word-break: break-word;
+`;
+
+const InfoLine = styled.div`
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const FileActions = styled.div`
+  display: flex;
+  align-items: center;
+  padding-top: ${(p) => p.theme.spacing.s};
+  button:first-child {
+    margin-right: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+const FileForm = styled.div`
+  padding: ${(p) => p.theme.spacing.s};
+`;
+
+const Label = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const FieldText = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+export { Wrapper, Header, Content, Footer, FileInfo, FileName, InfoLine, FileActions, FileForm, Label, FieldText };