@griddo/ax 11.4.23 → 11.4.24

package/src/modules/Categories/CategoriesList/CategoryItem/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
+import { AnimateLayoutChanges, useSortable } from "@dnd-kit/sortable";
 
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { useModal, usePermission } from "@ax/hooks";
@@ -25,11 +26,12 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
     toggleToast,
     getContents,
     currentSiteID,
-    dragHandleProps,
-    icon,
     deleteCategoryGroup,
     hoverCheck,
-    isDragging,
+    depth,
+    indentationWidth,
+    collapsed,
+    onCollapse,
   } = props;
 
   const { isOpen, toggleModal } = useModal();
@@ -49,6 +51,15 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
   const allowedToEditTaxonomy = currentSiteID ? allowedToEditSiteCategory : allowedToEditGlobalCategory;
   const allowedToDeleteTaxonomy = currentSiteID ? allowedToDeleteSiteCategory : allowedToDeleteGlobalCategory;
 
+  const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>
+    isSorting || wasDragging ? false : true;
+
+  const { attributes, isDragging, listeners, setDraggableNodeRef, setDroppableNodeRef, transform, transition } =
+    useSortable({
+      id: category.id,
+      animateLayoutChanges,
+    });
+
   const { locale } = lang;
   const { dataLanguages = [], content } = category;
   const isGroup = category.type === "group";
@@ -189,40 +200,56 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 
   return (
     <>
-      <S.CategoryRow role="rowgroup" selected={isSelected} onClick={handleClick} {...dragHandleProps}>
-        <S.HandleCell>
-          <S.IconWrapperDrag role="cell">
-            <Icon name="drag" size="16" />
-          </S.IconWrapperDrag>
-          <S.IconWrapper>{icon}</S.IconWrapper>
-        </S.HandleCell>
-        <S.CheckCell role="cell" onClick={handleCheckClick}>
-          <CheckField name="check" value={category.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
-        </S.CheckCell>
-        <S.NameCell role="cell" clickable={allowedToEditTaxonomy} isGroup={isGroup}>
-          {isGroup && (
-            <S.FolderWrapper>
-              <Icon name="project" size="24" />
-            </S.FolderWrapper>
-          )}
-          <div>{content?.title || ""}</div>
-        </S.NameCell>
-        <S.CodeCell role="cell" clickable={allowedToEditTaxonomy}>
-          {isCategory(category) && category.content ? category.content.code : ""}
-        </S.CodeCell>
-        <S.SelectableCell role="cell">
-          <Tag
-            type="square"
-            color={selectable ? "" : "#FFD4C7"}
-            text={selectable ? "Yes" : "No"}
-            textColor={selectable ? "" : "#20224C"}
-          />
-        </S.SelectableCell>
-        <S.TransCell role="cell">{translations}</S.TransCell>
-        <S.ActionsCell role="cell">
-          <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
-        </S.ActionsCell>
-      </S.CategoryRow>
+      <S.Wrapper identationWidth={isDragging ? indentationWidth : indentationWidth * depth} ref={setDroppableNodeRef}>
+        <S.CategoryRow
+          selected={isSelected}
+          onClick={handleClick}
+          ref={setDraggableNodeRef}
+          cssTransform={transform}
+          transition={transition}
+          {...listeners}
+          {...attributes}
+        >
+          <S.HandleCell>
+            <S.IconWrapperDrag role="cell">
+              <Icon name="drag" size="16" />
+            </S.IconWrapperDrag>
+            <S.IconWrapper onClick={handleCheckClick}>
+              {onCollapse && (
+                <div onClick={onCollapse} role="button" tabIndex={0} onKeyDown={onCollapse}>
+                  {collapsed ? <Icon name="UpArrow" /> : <Icon name="DownArrow" />}
+                </div>
+              )}
+            </S.IconWrapper>
+          </S.HandleCell>
+          <S.CheckCell role="cell" onClick={handleCheckClick}>
+            <CheckField name="check" value={category.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
+          </S.CheckCell>
+          <S.NameCell role="cell" clickable={allowedToEditTaxonomy} isGroup={isGroup}>
+            {isGroup && (
+              <S.FolderWrapper>
+                <Icon name="project" size="24" />
+              </S.FolderWrapper>
+            )}
+            <div>{content?.title || ""}</div>
+          </S.NameCell>
+          <S.CodeCell role="cell" clickable={allowedToEditTaxonomy}>
+            {isCategory(category) && category.content ? category.content.code : ""}
+          </S.CodeCell>
+          <S.SelectableCell role="cell">
+            <Tag
+              type="square"
+              color={selectable ? "" : "#FFD4C7"}
+              text={selectable ? "Yes" : "No"}
+              textColor={selectable ? "" : "#20224C"}
+            />
+          </S.SelectableCell>
+          <S.TransCell role="cell">{translations}</S.TransCell>
+          <S.ActionsCell role="cell">
+            <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
+          </S.ActionsCell>
+        </S.CategoryRow>
+      </S.Wrapper>
       {isOpen && (
         <CategoryPanel
           isOpen={isOpen}
@@ -261,14 +288,15 @@ interface IProps {
   lang: { locale: string; id: number | null };
   isTranslatable: boolean;
   isSelected: boolean;
-  onChange: (e: any) => void;
-  toggleToast(state: any): void;
-  getContents(dataId: string): void;
+  onChange: (item: ICheck) => void;
+  toggleToast: (state: string) => void;
+  getContents: (dataId: string) => void;
   currentSiteID: number | null;
-  icon: JSX.Element;
-  dragHandleProps?: any;
   hoverCheck?: boolean;
-  isDragging: boolean;
+  depth: number;
+  indentationWidth: number;
+  collapsed: boolean;
+  onCollapse?: () => void;
 }
 
 interface IDispatchProps {

package/src/modules/Categories/CategoriesList/CategoryItem/style.tsx

@@ -1,8 +1,13 @@
 import styled from "styled-components";
+import { CSS, Transform } from "@dnd-kit/utilities";
 
 import { Cell, Row } from "@ax/components/TableList/TableItem/style";
 import { ActionMenu } from "@ax/components";
 
+const Wrapper = styled.div<{ identationWidth: number }>`
+  padding-left: ${(p) => `${p.identationWidth}px`};
+`;
+
 const CheckCell = styled(Cell)`
   padding-left: 0;
   padding-right: 0;
@@ -53,7 +58,9 @@ const StyledActionMenu = styled(ActionMenu)`
   margin-left: auto;
 `;
 
-const CategoryRow = styled(Row)`
+const CategoryRow = styled(Row)<{ cssTransform: Transform | null; transition?: string }>`
+  transform: ${(p) => CSS.Transform.toString(p.cssTransform)};
+  transition: ${(p) => p.transition};
   &:hover {
     ${StyledActionMenu} {
       opacity: 1;
@@ -103,6 +110,7 @@ const FolderWrapper = styled.div`
 `;
 
 export {
+  Wrapper,
   CheckCell,
   NameCell,
   ActionsCell,

package/src/modules/Categories/CategoriesList/CategoryNav/index.tsx

@@ -2,7 +2,6 @@ import React from "react";
 
 import { IDataPack, IStructuredData } from "@ax/types";
 import { SubNav } from "@ax/components";
-import { sortBy } from "@ax/helpers";
 import NavItem from "./NavItem";
 
 const CategoryNav = (props: IProps): JSX.Element => {

package/src/modules/Categories/CategoriesList/CategoryPanel/index.tsx

@@ -78,6 +78,7 @@ const CategoryPanel = (props: IProps): JSX.Element => {
     }
 
     toggleModal();
+    setForm(initState);
   };
 
   const editItemAction = async () => {

package/src/modules/Categories/CategoriesList/helpers.tsx

@@ -1,116 +1,157 @@
-import { ItemId, TreeData, TreeItem } from "@atlaskit/tree";
-import { isEmptyObj } from "@ax/helpers";
 import { ICategoryGroup, IStructuredDataCategory } from "@ax/types";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import { arrayMove } from "@dnd-kit/sortable";
 
-const normalizeItems = (itemList: (IStructuredDataCategory | ICategoryGroup)[], tree: TreeData) => {
-  const normalized: TreeData = {
-    rootId: "root",
-    items: {
-      root: {
-        id: "root",
-        children: [],
-        hasChildren: true,
-        isExpanded: true,
-        isChildrenLoading: false,
-      },
-    },
-  };
-
-  const previousItems: (IStructuredDataCategory | ICategoryGroup)[] = [];
-  if (!isEmptyObj(tree.items)) {
-    previousItems.push(...formatTree(tree));
-  }
+const flatten = (items: TreeItem[], parentId: UniqueIdentifier | null = null, depth = 0): FlattenedItem[] => {
+  return items.reduce<FlattenedItem[]>((acc, item, index) => {
+    return [...acc, { ...item, parentId, depth, index }, ...flatten(item.children || [], item.id, depth + 1)];
+  }, []);
+};
 
-  const isItemExpanded = (item: IStructuredDataCategory | ICategoryGroup) => {
-    if (!item) return true;
-    return item.isExpanded;
-  };
-
-  const getElement = (
-    item: IStructuredDataCategory | ICategoryGroup,
-    previousItems: IStructuredDataCategory | ICategoryGroup
-  ) => {
-    normalized.items[item.id] = {
-      ...item,
-      children: [],
-      isExpanded: isItemExpanded(previousItems),
-    };
-    if (item.children && item.children.length > 0) {
-      item.children.forEach((child: IStructuredDataCategory | ICategoryGroup, index: number) => {
-        normalized.items[item.id].children.push(child.id);
-        getElement(child, previousItems?.children[index]);
-      });
-    }
-  };
+const flattenTree = (items: TreeItem[]): FlattenedItem[] => {
+  return flatten(items);
+};
 
-  itemList.forEach((item: IStructuredDataCategory | ICategoryGroup, index: number) => {
-    normalized.items.root.children.push(item.id);
-    getElement(item, previousItems[index]);
-  });
+const buildTree = (flattenedItems: FlattenedItem[]): TreeItem[] => {
+  const root = { id: 0, children: [] };
+  const nodes: Record<string, Partial<TreeItem>> = { [root.id]: root };
+  const items = flattenedItems.map((item) => ({ ...item, children: [] })) as FlattenedItem[];
 
-  return normalized;
-};
+  for (const item of items) {
+    const { id, children } = item;
+    const parentId = item.parentId ?? root.id;
+    const parent = nodes[parentId] ?? findItem(items, parentId);
 
-const getElementsFromTree = (tree: TreeData): TreeItem[] => {
-  const { items } = tree;
-  const elements: TreeItem[] = [];
-  for (const item of Object.values(items)) {
-    elements.push(item);
+    nodes[id] = { id, children };
+    parent.children && parent.children.push(item);
   }
-  return elements;
-};
 
-const getChild = (child: ItemId, elements: any[]): IStructuredDataCategory | ICategoryGroup => {
-  const element = elements.find((element: IStructuredDataCategory | ICategoryGroup) => element.id === child);
-  const children = element?.children.map((child: ItemId) => getChild(child, elements));
-  return { ...element, children };
+  return root.children;
 };
 
-const formatTree = (tree: TreeData) => {
-  const elements: TreeItem[] = getElementsFromTree(tree);
+const findItem = (items: FlattenedItem[], itemId: UniqueIdentifier) => {
+  return items.find(({ id }) => id === itemId);
+};
 
-  const root: any = elements.find((element: TreeItem) => element.id === "root");
-  const formattedTree = root.children.map((child: ItemId) => {
-    return getChild(child, elements);
+function getDragDepth(offset: number, indentationWidth: number) {
+  return Math.round(offset / indentationWidth);
+}
+
+export function getProjection(
+  items: FlattenedItem[],
+  activeId: UniqueIdentifier,
+  overId: UniqueIdentifier,
+  dragOffset: number,
+  indentationWidth: number
+) {
+  const overItemIndex = items.findIndex(({ id }) => id === overId);
+  const activeItemIndex = items.findIndex(({ id }) => id === activeId);
+  const activeItem = items[activeItemIndex];
+  const newItems = arrayMove(items, activeItemIndex, overItemIndex);
+  const previousItem = newItems[overItemIndex - 1];
+  const nextItem = newItems[overItemIndex + 1];
+  const dragDepth = getDragDepth(dragOffset, indentationWidth);
+  const projectedDepth = activeItem.depth + dragDepth;
+  const maxDepth = getMaxDepth({
+    previousItem,
   });
+  const minDepth = getMinDepth({ nextItem });
+  let depth = projectedDepth;
 
-  return formattedTree;
-};
+  if (projectedDepth >= maxDepth) {
+    depth = maxDepth;
+  } else if (projectedDepth < minDepth) {
+    depth = minDepth;
+  }
 
-const formatItem = (item: any, tree: TreeData) => {
-  const elements = getElementsFromTree(tree);
+  return { depth, maxDepth, minDepth, parentId: getParentId() };
 
-  const formattedItem = {
-    ...item,
-    children: item.children.map((child: ItemId) => getChild(child, elements)),
-  };
+  function getParentId() {
+    if (depth === 0 || !previousItem) {
+      return null;
+    }
 
-  return formattedItem;
-};
+    if (depth === previousItem.depth) {
+      return previousItem.parentId;
+    }
 
-const findChild = (tree: TreeData, child: ItemId) => {
-  const elements: any[] = getElementsFromTree(tree);
-  return elements.find((element) => element.id === parseInt(child as string));
-};
+    if (depth > previousItem.depth) {
+      return previousItem.id;
+    }
 
-const findChildByIndex = (tree: TreeData, parentId: ItemId, index: number) => {
-  const elements: any[] = getElementsFromTree(tree);
-  const parent = elements.find((element) =>
-    parentId === "root" ? element.id === parentId : element.id === parseInt(parentId as string)
-  );
-  const elementID = parent && parent.children[index] ? parent.children[index] : null;
-  return elementID ? elements.find((element) => element.id === elementID) : undefined;
-};
+    const newParent = newItems
+      .slice(0, overItemIndex)
+      .reverse()
+      .find((item) => item.depth === depth)?.parentId;
+
+    return newParent ?? null;
+  }
+}
 
-const getIDsFromTree = (dataContent: (IStructuredDataCategory | ICategoryGroup)[]): number[] => {
-  return dataContent.reduce((acc: number[], current) => {
-    acc.push(current.id);
-    const children = getIDsFromTree(current.children || []);
-    if (children.length) {
-      acc = [...acc, ...children];
+function getMinDepth({ nextItem }: { nextItem: FlattenedItem }) {
+  if (nextItem) {
+    return nextItem.depth;
+  }
+
+  return 0;
+}
+
+function getMaxDepth({ previousItem }: { previousItem: FlattenedItem }) {
+  if (previousItem) {
+    return previousItem.depth + 1;
+  }
+
+  return 0;
+}
+
+const removeChildrenOf = (items: FlattenedItem[], ids: UniqueIdentifier[]) => {
+  const excludeParentIds = [...ids];
+
+  return items.filter((item) => {
+    if (item.parentId && excludeParentIds.includes(item.parentId)) {
+      if (item.children && item.children.length) {
+        excludeParentIds.push(item.id);
+      }
+      return false;
     }
-    return acc;
-  }, []);
+
+    return true;
+  });
 };
 
-export { normalizeItems, formatItem, findChild, findChildByIndex, getElementsFromTree, getIDsFromTree };
+export function setProperty<T extends keyof TreeItem>(
+  items: TreeItem[],
+  id: UniqueIdentifier,
+  property: T,
+  setter: (value: TreeItem[T]) => TreeItem[T]
+) {
+  for (const item of items) {
+    if (item.id === id) {
+      item[property] = setter(item[property]);
+      continue;
+    }
+
+    if (item.children && item.children.length) {
+      item.children = setProperty(item.children || [], id, property, setter);
+    }
+  }
+
+  return [...items];
+}
+
+interface FlattenedCategory extends IStructuredDataCategory {
+  parentId: UniqueIdentifier | null;
+  depth: number;
+  index: number;
+}
+
+interface FlattenedGroup extends ICategoryGroup {
+  parentId: UniqueIdentifier | null;
+  depth: number;
+  index: number;
+}
+
+type TreeItem = IStructuredDataCategory | ICategoryGroup;
+export type FlattenedItem = FlattenedCategory | FlattenedGroup;
+
+export { flattenTree, buildTree, removeChildrenOf };