@griddo/ax 10.2.25 → 10.3.0

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

@@ -0,0 +1,129 @@
+import React, { useState } from "react";
+import { IFile } from "@ax/types";
+import { Button, FloatingMenu, IconAction, Toast, Tooltip } from "@ax/components";
+import { useToast } from "@ax/hooks";
+import FileDragAndDrop from "../FileDragAndDrop";
+import { getFileIcon } from "../helpers";
+import DetailPanel from "./DetailPanel";
+
+import * as S from "./style";
+
+const FileModal = (props: IProps) => {
+  const { file, items, activeDelete, isAllowedToEdit, setFile, toggleModal, onDelete, setFileSelected } = props;
+  const { fileType, fileName, id, site } = file;
+
+  const [replaceType, setReplaceType] = useState<"full" | "partial" | null>(null);
+  const [isDNDVisible, setDNDVisible] = useState(false);
+  const { isVisible, toggleToast, setIsVisible } = useToast();
+
+  const iconUrl = `/img/icons/${getFileIcon(fileType)}`;
+  const index = items.indexOf(file.id);
+
+  const validFormats = ["pdf", "doc", "docx", "xls", "xlsx", "zip"];
+
+  const handleArrowClick = (isPrev: boolean) => () => {
+    isPrev ? setFile(items[index - 1]) : setFile(items[index + 1]);
+    setDNDVisible(false);
+    setReplaceType(null);
+  };
+
+  const OptionsButton = () => (
+    <Tooltip content="Replacement file will appear on all linked pages.">
+      <Button type="button" buttonStyle="text" icon="page" backIcon="downArrow">
+        Replace
+      </Button>
+    </Tooltip>
+  );
+
+  const handleReplaceType = (type: "full" | "partial") => {
+    setReplaceType(type);
+    setDNDVisible(true);
+  };
+
+  const textReplaceType =
+    replaceType === "full"
+      ? "Replace file and its URL"
+      : replaceType === "partial"
+      ? "Replace file and keep its original URL"
+      : "";
+
+  const handleUpload = (file: IFile[]) => {
+    setFileSelected(file[0]);
+    setDNDVisible(false);
+    setReplaceType(null);
+    toggleToast();
+  };
+
+  const toastProps = {
+    setIsVisible,
+    message: "1 file replaced",
+  };
+
+  return (
+    <>
+      <S.Wrapper>
+        <S.LeftPanel>
+          <IconAction icon="leftArrow" onClick={handleArrowClick(true)} disabled={index === 0} />
+          <S.FilePreview>
+            <S.ImageWrapper>
+              <S.IconWrapper>
+                <div><img src={iconUrl} alt={`${fileType} Icon`} /></div>
+                {isDNDVisible && (
+                <S.DragAndDropWrapper>
+                  <FileDragAndDrop
+                    validFormats={validFormats}
+                    handleUpload={handleUpload}
+                    inverse={true}
+                    replaceData={{ fileID: id, keepURL: replaceType === "full" ? false : true }}
+                    siteID={site || "global"}
+                  />
+                </S.DragAndDropWrapper>
+              )}
+              </S.IconWrapper>
+            </S.ImageWrapper>
+            <S.FileName>{fileName}</S.FileName>
+            <S.FileActions>
+              {isAllowedToEdit ? (
+                <S.ReplaceWrapper>
+                  <FloatingMenu Button={OptionsButton} position="left">
+                    <S.ActionMenu>
+                      <S.ActionItem onClick={() => handleReplaceType("full")}>Replace file and its URL</S.ActionItem>
+                      <S.ActionItem onClick={() => handleReplaceType("partial")}>
+                        Replace file and keep its original URL
+                      </S.ActionItem>
+                    </S.ActionMenu>
+                  </FloatingMenu>
+                  <S.TextType>{textReplaceType}</S.TextType>
+                </S.ReplaceWrapper>
+              ) : (
+                <></>
+              )}
+            </S.FileActions>
+          </S.FilePreview>
+          <IconAction icon="rightArrow" onClick={handleArrowClick(false)} disabled={index === items.length - 1} />
+        </S.LeftPanel>
+        <DetailPanel
+          file={file}
+          toggleModal={toggleModal}
+          onDelete={onDelete}
+          activeDelete={activeDelete}
+          isAllowedToEdit={isAllowedToEdit}
+        />
+      </S.Wrapper>
+      {isVisible && <Toast {...toastProps} />}
+    </>
+  );
+};
+
+interface IProps {
+  file: IFile;
+  toggleModal(): void;
+  onDelete(fileID: number): void;
+  items: number[];
+  setFile: (id: number) => void;
+  setFileSelected: (file: IFile) => void;
+  activeDelete: boolean;
+  isAllowedToEdit: boolean;
+}
+
+export default FileModal;

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

@@ -0,0 +1,112 @@
+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`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 300px;
+`;
+
+const IconWrapper = styled.div`
+  position: relative;
+  width: 300px;
+  height: 300px;
+  img {
+    max-width: 300px;
+    width: 100%;
+  }
+`;
+
+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: 300px;
+  width: 300px;
+`;
+
+export {
+  Wrapper,
+  FilePreview,
+  ImageWrapper,
+  IconWrapper,
+  FileName,
+  LeftPanel,
+  FileActions,
+  ReplaceWrapper,
+  ActionMenu,
+  ActionItem,
+  TextType,
+  DragAndDropWrapper
+};

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

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+
+import { IActionMenuOption, IFolder } from "@ax/types";
+import { Icon, Tooltip } from "@ax/components";
+import { useModal } from "@ax/hooks";
+import { fileDriveActions } from "@ax/containers/FileDrive";
+import { DeleteFolderModal, MoveItemModal, RenameFolderModal } from "../atoms";
+import { trimText } from "@ax/helpers";
+
+import * as S from "./style";
+
+const FolderItem = (props: IProps) => {
+  const { folder, isAllowedToDelete, isAllowedToEdit, isAllowedToMove, onClick, onDelete, toggleToast, updateFolder } =
+    props;
+  const { id, folderName, parentId, site } = folder;
+
+  const initState = { folderName, parentId };
+  const [folderForm, setFolderForm] = useState(initState);
+  const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+  const { isOpen: isRenameOpen, toggleModal: toggleRenameModal } = useModal();
+  const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
+
+  const setName = (name: string) => setFolderForm({ ...folderForm, folderName: name });
+  const setParent = (folderID: number) => setFolderForm({ ...folderForm, parentId: folderID });
+
+  let menuOptions: IActionMenuOption[] = [];
+
+  if (isAllowedToEdit) {
+    menuOptions = [
+      {
+        label: "Rename",
+        icon: "edit",
+        action: () => toggleRenameModal(),
+      },
+    ];
+
+    if (isAllowedToMove) {
+      menuOptions = [
+        ...menuOptions,
+        {
+          label: "Move to...",
+          icon: "change",
+          action: () => toggleMoveModal(),
+        },
+      ];
+    }
+  }
+
+  if (isAllowedToDelete) {
+    menuOptions = [
+      ...menuOptions,
+      {
+        label: "Delete",
+        icon: "delete",
+        action: () => toggleDeleteModal(),
+      },
+    ];
+  }
+
+  const handleClick = () => onClick(id);
+
+  const handleDeleteFolder = () => {
+    onDelete(folder);
+    isDeleteOpen && toggleDeleteModal();
+  };
+
+  const handleUpdateFolder = async (toast = false) => {
+    const updated = await updateFolder(
+      id,
+      { parentId: folderForm.parentId, folderName: folderForm.folderName },
+      site || "global"
+    );
+    if (updated) {
+      isRenameOpen && toggleRenameModal();
+      toast && toggleToast();
+    }
+  };
+
+  const handleModalClose = () => {
+    setFolderForm(initState);
+    isMoveOpen && toggleMoveModal();
+    isRenameOpen && toggleRenameModal();
+  };
+
+  const mainDeleteModalAction = {
+    title: "Delete Folder",
+    onClick: () => handleDeleteFolder(),
+  };
+
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+
+  const mainRenameModalAction = {
+    title: "Rename Folder",
+    onClick: () => handleUpdateFolder(),
+    disabled: folderForm.folderName.trim().length === 0,
+  };
+
+  const secondaryRenameModalAction = { title: "Cancel", onClick: handleModalClose };
+
+  const mainMoveModalAction = {
+    title: "Move",
+    onClick: () => handleUpdateFolder(true),
+  };
+
+  const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
+
+  const FolderTitle = () =>
+    folderName.length > 15 ? (
+      <Tooltip content={folderName}>
+        <S.Title>{trimText(folderName, 15)}</S.Title>
+      </Tooltip>
+    ) : (
+      <S.Title>{folderName}</S.Title>
+    );
+
+  return (
+    <>
+      <S.Wrapper onClick={handleClick}>
+        <S.IconWrapper>
+          <Icon name="project" size="24" />
+        </S.IconWrapper>
+        <FolderTitle />
+        <S.StyledActionMenu icon="more" options={menuOptions} tooltip="File actions" />
+      </S.Wrapper>
+      {isDeleteOpen && (
+        <DeleteFolderModal
+          isOpen={isDeleteOpen}
+          toggleModal={toggleDeleteModal}
+          mainModalAction={mainDeleteModalAction}
+          secondaryModalAction={secondaryDeleteModalAction}
+          title={folderName}
+        />
+      )}
+      {isRenameOpen && (
+        <RenameFolderModal
+          isOpen={isRenameOpen}
+          toggleModal={handleModalClose}
+          mainModalAction={mainRenameModalAction}
+          secondaryModalAction={secondaryRenameModalAction}
+          value={folderForm.folderName}
+          setValue={setName}
+        />
+      )}
+      {isMoveOpen && (
+        <MoveItemModal
+          isOpen={isMoveOpen}
+          toggleModal={handleModalClose}
+          mainModalAction={mainMoveModalAction}
+          secondaryModalAction={secondaryMoveModalAction}
+          folder={folderForm.parentId}
+          setFolder={setParent}
+          hidden={[folder.id]}
+          hideRoot={!parentId}
+        />
+      )}
+    </>
+  );
+};
+
+interface IProps {
+  folder: IFolder;
+  isAllowedToEdit: boolean;
+  isAllowedToDelete: boolean;
+  isAllowedToMove: boolean;
+  onClick(folderID: number): void;
+  onDelete(folder: IFolder): void;
+  toggleToast(): void;
+  updateFolder(
+    folderID: number,
+    data: { parentId: number; folderName: string },
+    siteID: number | "global"
+  ): Promise<boolean>;
+}
+
+const mapDispatchToProps = {
+  updateFolder: fileDriveActions.updateFolder,
+};
+
+export default connect(null, mapDispatchToProps)(FolderItem);

package/src/modules/FileDrive/FolderItem/style.tsx

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import { ActionMenu } from "@ax/components";
+
+const Wrapper = styled.div`
+  position: relative;
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  border-radius: ${p => p.theme.radii.s};
+  display: flex;
+  align-items: center;
+  min-width: 220px;
+  max-width: 280px;
+  height: 64px;
+  cursor: pointer;
+  &:hover {
+    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+  }
+`;
+
+const IconWrapper = styled.div`
+  width: 24px;
+  height: 24px;
+  margin-left: ${(p) => p.theme.spacing.m};
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  margin-left: ${(p) => p.theme.spacing.xs};
+`;
+
+const StyledActionMenu = styled(ActionMenu)`
+  width: 32px;
+  display: flex;
+  margin-left: auto;
+  margin-right: ${(p) => p.theme.spacing.xs};
+`;
+
+export { Wrapper, IconWrapper, Title, StyledActionMenu };

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

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import Tree, { mutateTree, RenderItemParams, TreeItem, TreeData, ItemId } from "@atlaskit/tree";
+
+import { IFolderTree, IRootState } from "@ax/types";
+import { Icon } from "@ax/components";
+import { trimText } from "@ax/helpers";
+
+import { formatItem, normalizeTree } from "./utils";
+
+import * as S from "./style";
+
+const FolderTree = (props: IProps) => {
+  const { folders, folderID, title, hidden, hideRoot, trimNames, createAction, onClick } = props;
+
+  const [tree, setTree] = useState<TreeData>({ rootId: "root", items: {} });
+
+  useEffect(() => {
+    setTree(normalizeTree(folders, tree, hidden || []));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [folders]);
+
+  const NewFolderButton = () =>
+    createAction ? (
+      <S.NewIconWrapper onClick={createAction}>
+        <Icon name="newFolder" size="16" />
+      </S.NewIconWrapper>
+    ) : (
+      <></>
+    );
+
+  const getIcon = (item: TreeItem) => {
+    if (item.children && item.children.length > 0) {
+      return item.isExpanded ? <Icon name="DownArrow" size="16" /> : <Icon name="RightArrow" size="16" />;
+    } else {
+      return <></>;
+    }
+  };
+
+  const renderItem = ({ item, onExpand, onCollapse, provided }: RenderItemParams) => {
+    const itemFormatted = formatItem(item, tree);
+
+    const handleArrowClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      item.isExpanded ? onCollapse(item.id) : onExpand(item.id);
+    };
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      onClick(itemFormatted.id);
+    };
+
+    return (
+      <S.ItemWrapper ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+        <S.Item onClick={handleClick} selected={folderID === item.id}>
+          <S.ArrowWrapper onClick={handleArrowClick}>{getIcon(item)}</S.ArrowWrapper>
+          <S.IconWrapper>
+            <Icon name="project" size="16" />
+          </S.IconWrapper>
+          <S.Name>{trimNames ? trimText(itemFormatted.name, 15) : itemFormatted.name}</S.Name>
+          <NewFolderButton />
+        </S.Item>
+      </S.ItemWrapper>
+    );
+  };
+
+  const onExpand = (itemId: ItemId) => {
+    const newTree = mutateTree(tree, itemId, { isExpanded: true });
+    setTree(newTree);
+  };
+
+  const onCollapse = (itemId: ItemId) => {
+    const newTree = mutateTree(tree, itemId, { isExpanded: false });
+    setTree(newTree);
+  };
+
+  const handleRootClick = () => onClick(0);
+
+  return (
+    <>
+      {!hideRoot && (
+        <S.Item selected={!folderID} onClick={handleRootClick}>
+          <S.RootName>All Documents</S.RootName>
+          <NewFolderButton />
+        </S.Item>
+      )}
+      {title && <S.Title>{title}</S.Title>}
+      <Tree tree={tree} renderItem={renderItem} onExpand={onExpand} onCollapse={onCollapse} offsetPerLevel={16} />
+    </>
+  );
+};
+
+interface IProps {
+  folders: IFolderTree[];
+  folderID: number;
+  title?: string;
+  hidden?: number[];
+  hideRoot?: boolean;
+  trimNames?: boolean;
+  createAction?(): void;
+  onClick(folderID: number): void;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  folders: state.fileDrive.foldersTree,
+});
+
+export default connect(mapStateToProps)(FolderTree);

package/src/modules/FileDrive/FolderTree/style.tsx

@@ -0,0 +1,69 @@
+import styled from "styled-components";
+
+const ItemWrapper = styled.div``;
+
+const NewIconWrapper = styled.div`
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+`;
+
+const Item = styled.div<{ selected: boolean }>`
+  display: flex;
+  width: 100%;
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  align-items: center;
+  cursor: pointer;
+  padding: ${(p) => `${p.theme.spacing.xxs} ${p.theme.spacing.xs}`};
+  border-radius: ${(p) => p.theme.radii.s};
+  background-color: ${(p) => (p.selected ? p.theme.color.overlayPressedPrimary : "transparent")};
+  height: 32px;
+  overflow: hidden;
+  flex-shrink: 0;
+  &:hover {
+    background-color: ${(p) => (p.selected ? p.theme.color.overlayPressedPrimary : p.theme.color.overlayHoverPrimary)};
+  }
+  ${NewIconWrapper} {
+    opacity: ${(p) => (p.selected ? "1" : "0")};
+  }
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-left: ${(p) => p.theme.spacing.xs};
+  white-space: nowrap;
+`;
+
+const RootName = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  white-space: nowrap;
+`;
+
+const IconWrapper = styled.div`
+  width: 16px;
+  height: 16px;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.iconMediumEmphasis};
+    }
+  }
+`;
+
+const ArrowWrapper = styled.div`
+  width: 16px;
+  height: 16px;
+  margin-right: ${(p) => p.theme.spacing.xxs};
+  white-space: nowrap;
+  flex-shrink: 0;
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-top: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+export { ItemWrapper, Item, Name, RootName, IconWrapper, ArrowWrapper, Title, NewIconWrapper };