@griddo/ax 11.4.24 → 11.5.0

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { IBulkAction } from "@ax/types";
+
+import TableHeader from "./TableHeader";
+
+import * as S from "./style";
+
+const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
+  const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions, setHoverCheck } = props;
+
+  return showBulk ? (
+    <S.BulkWrapper>
+      <S.StyledBulkSelectionOptions
+        isScrolling={false}
+        checkState={checkState}
+        actions={bulkActions}
+        selectItems={selectItems}
+        totalItems={totalItems}
+      />
+    </S.BulkWrapper>
+  ) : (
+    <TableHeader
+      isScrolling={false}
+      selectAllItems={selectAllItems}
+      checkState={checkState}
+      totalItems={totalItems}
+      setHoverCheck={setHoverCheck}
+    />
+  );
+};
+
+export interface IBulkHeaderProps {
+  showBulk: boolean;
+  checkState: any;
+  selectItems: () => void;
+  selectAllItems: () => void;
+  totalItems: number;
+  bulkActions: IBulkAction[];
+  setHoverCheck: (state: boolean) => void;
+}
+
+export default BulkListHeader;

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

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import { BulkSelectionOptions } from "@ax/components";
+
+const BulkWrapper = styled.div`
+  width: 100%;
+  span {
+    margin-left: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+const StyledBulkSelectionOptions = styled(BulkSelectionOptions)`
+  padding: ${(p) => `0 0 ${p.theme.spacing.m} 0`};
+  margin-top: ${(p) => `-${p.theme.spacing.xs}`};
+  margin-bottom: ${(p) => `-${p.theme.spacing.xs}`};
+`;
+
+export { BulkWrapper, StyledBulkSelectionOptions }

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

@@ -0,0 +1,191 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+
+import { IActionMenuOption, IFolder, IGetFolderParams } from "@ax/types";
+import { Icon, Tooltip } from "@ax/components";
+import { useModal } from "@ax/hooks";
+import { galleryActions } from "@ax/containers/Gallery";
+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,
+    getParams,
+    updateFolder,
+  } = props;
+  const { id, folderName, parentId } = 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 params = getParams();
+    const updated = await updateFolder(
+      id,
+      { parentId: folderForm.parentId, folderName: folderForm.folderName },
+      params
+    );
+    if (updated) {
+      isRenameOpen && toggleRenameModal();
+      toast && toggleToast("1 Folder moved to another folder");
+    }
+  };
+
+  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(state: string): void;
+  getParams(): IGetFolderParams;
+  updateFolder(
+    folderID: number,
+    data: { parentId?: number; folderName: string },
+    params: IGetFolderParams
+  ): Promise<boolean>;
+}
+
+const mapDispatchToProps = {
+  updateFolder: galleryActions.updateFolder,
+};
+
+export default connect(null, mapDispatchToProps)(FolderItem);

package/src/modules/MediaGallery/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/MediaGallery/FolderTree/MenuItem/index.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import MenuList from "../MenuList";
+import { IFolderTree } from "@ax/types";
+import { Icon } from "@ax/components";
+import { trimText } from "@ax/helpers";
+
+import * as S from "./style";
+
+const MenuItem = (props: IMenuItem) => {
+  const { item, trimNames, folderID, hidden, createAction, onClick } = props;
+  const { id, name } = item;
+
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const hasChildren =
+    item.children &&
+    item.children.filter((listItem) => !hidden || (hidden && !hidden.includes(listItem.id))).length > 0;
+
+  const handleToggle = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    setIsExpanded((prev) => !prev);
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    onClick(id);
+  };
+
+  const getIcon = (item: IFolderTree) => {
+    if (item.children && item.children.length > 0) {
+      return isExpanded ? <Icon name="DownArrow" size="16" /> : <Icon name="RightArrow" size="16" />;
+    } else {
+      return <></>;
+    }
+  };
+
+  const NewFolderButton = () =>
+    createAction ? (
+      <S.NewIconWrapper onClick={createAction}>
+        <Icon name="newFolder" size="16" />
+      </S.NewIconWrapper>
+    ) : (
+      <></>
+    );
+
+  if (hidden?.includes(id)) {
+    return <></>;
+  }
+
+  return (
+    <li>
+      <S.ItemWrapper>
+        <S.Item onClick={handleClick} selected={folderID === item.id}>
+          {hasChildren && <S.ArrowWrapper onClick={handleToggle}>{getIcon(item)}</S.ArrowWrapper>}
+          <S.IconWrapper>
+            <Icon name="project" size="16" />
+          </S.IconWrapper>
+          <S.Name>{trimNames ? trimText(name, 15) : name}</S.Name>
+          <NewFolderButton />
+        </S.Item>
+      </S.ItemWrapper>
+      {hasChildren && isExpanded && (
+        <S.ListWrapper>
+          <MenuList
+            list={item.children}
+            hidden={hidden}
+            trimNames={trimNames}
+            createAction={createAction}
+            folderID={folderID}
+            onClick={onClick}
+          />
+        </S.ListWrapper>
+      )}
+    </li>
+  );
+};
+
+interface IMenuItem {
+  item: IFolderTree;
+  folderID: number | null;
+  trimNames?: boolean;
+  hidden?: number[];
+  onClick(folderID: number): void;
+  createAction?(): void;
+}
+
+export default MenuItem;

package/src/modules/MediaGallery/FolderTree/MenuItem/style.tsx

@@ -0,0 +1,76 @@
+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};
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+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};
+`;
+
+const ListWrapper = styled.div`
+  padding-left: ${(p) => `calc(${p.theme.spacing.s} * 2)`};
+`;
+
+export { ItemWrapper, Item, Name, RootName, IconWrapper, ArrowWrapper, Title, NewIconWrapper, ListWrapper };

package/src/modules/MediaGallery/FolderTree/MenuList/index.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { IFolderTree } from "@ax/types";
+import MenuItem from "../MenuItem";
+
+const MenuList = (props: IMenuListProps) => {
+  const { list, folderID, hidden, trimNames, createAction, onClick } = props;
+
+  return (
+    <ul>
+      {list.map((listItem) => (
+        <MenuItem
+          key={listItem.id}
+          item={listItem}
+          onClick={onClick}
+          folderID={folderID}
+          createAction={createAction}
+          hidden={hidden}
+          trimNames={trimNames}
+        />
+      ))}
+    </ul>
+  );
+};
+
+interface IMenuListProps {
+  list: IFolderTree[];
+  folderID: number | null;
+  hidden?: number[];
+  trimNames?: boolean;
+  createAction?(): void;
+  onClick(folderID: number): void;
+}
+
+export default MenuList;

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

@@ -0,0 +1,62 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { IFolderTree, IRootState } from "@ax/types";
+import { Icon } from "@ax/components";
+
+import MenuList from "./MenuList";
+import * as S from "./style";
+
+const FolderTree = (props: IProps) => {
+  const { folders, folderID, title, hidden, hideRoot, trimNames, createAction, onClick } = props;
+
+  const NewFolderButton = () =>
+    createAction ? (
+      <S.NewIconWrapper onClick={createAction}>
+        <Icon name="newFolder" size="16" />
+      </S.NewIconWrapper>
+    ) : (
+      <></>
+    );
+
+  const handleRootClick = () => onClick(null);
+
+  return (
+    <>
+      {!hideRoot && (
+        <S.Item selected={!folderID} onClick={handleRootClick}>
+          <S.RootName>All Documents</S.RootName>
+          <NewFolderButton />
+        </S.Item>
+      )}
+      {title && <S.Title>{title}</S.Title>}
+      <S.TreeWrapper>
+        <MenuList
+          list={folders}
+          hidden={hidden}
+          trimNames={trimNames}
+          createAction={createAction}
+          folderID={folderID}
+          onClick={onClick}
+        />
+      </S.TreeWrapper>
+    </>
+  );
+};
+
+interface IProps {
+  folders: IFolderTree[];
+  folderID: number | null;
+  title?: string;
+  hidden?: number[];
+  hideRoot?: boolean;
+  trimNames?: boolean;
+  createAction?(): void;
+  onClick(folderID: number | null): void;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  folders: state.gallery.foldersTree,
+});
+
+export default connect(mapStateToProps)(FolderTree);

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

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+const TreeWrapper = styled.div`
+  ul:not(:first-child) {
+    padding-left: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+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 RootName = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  white-space: nowrap;
+`;
+
+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};
+  word-break: normal;
+`;
+
+export { TreeWrapper, Item, RootName, Title, NewIconWrapper };