@griddo/ax 11.4.23 → 11.4.24

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

@@ -1,6 +1,10 @@
 import styled from "styled-components";
 
-const ItemWrapper = styled.div``;
+const TreeWrapper = styled.div`
+  ul:not(:first-child) {
+    padding-left: ${(p) => p.theme.spacing.s};
+  }
+`;
 
 const NewIconWrapper = styled.div`
   width: 16px;
@@ -28,37 +32,12 @@ const Item = styled.div<{ selected: boolean }>`
   }
 `;
 
-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};
@@ -66,4 +45,4 @@ const Title = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
-export { ItemWrapper, Item, Name, RootName, IconWrapper, ArrowWrapper, Title, NewIconWrapper };
+export { TreeWrapper, Item, RootName, Title, NewIconWrapper };

package/src/modules/Forms/FormCategoriesList/CategoryItem/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { DraggableProvided } from "react-beautiful-dnd";
+import { useSortable } from "@dnd-kit/sortable";
 
 import { formsActions } from "@ax/containers/Forms";
 import { useModal, usePermission } from "@ax/hooks";
@@ -12,17 +12,7 @@ import { DeleteModal } from "../atoms";
 import * as S from "./style";
 
 const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
-  const {
-    category,
-    isSelected,
-    hoverCheck,
-    isDragging,
-    provided,
-    isSiteView,
-    deleteFormCategory,
-    onChange,
-    toggleToast,
-  } = props;
+  const { category, isSelected, hoverCheck, isDragging, isSiteView, deleteFormCategory, onChange, toggleToast } = props;
 
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
@@ -34,6 +24,10 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
   const isAllowedToEditFormCategory = usePermission(editFormCategoryPermission);
   const isAllowedToDeleteFormCategory = usePermission(deleteFormCategoryPermission);
 
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: category.id,
+  });
+
   const { content } = category;
 
   const handleClick = () => !isDragging && isAllowedToEditFormCategory && toggleModal();
@@ -75,12 +69,13 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
   return (
     <>
       <S.CategoryRow
-        role="rowgroup"
         selected={isSelected}
         onClick={handleClick}
-        ref={provided.innerRef}
-        {...provided.draggableProps}
-        {...provided.dragHandleProps}
+        ref={setNodeRef}
+        cssTransform={transform}
+        transition={transition}
+        {...listeners}
+        {...attributes}
       >
         <S.HandleCell>
           <S.IconWrapperDrag role="cell">
@@ -128,7 +123,6 @@ interface IProps {
   toggleToast(state: any): void;
   hoverCheck?: boolean;
   isDragging: boolean;
-  provided: DraggableProvided;
   isSiteView: boolean;
 }
 

package/src/modules/Forms/FormCategoriesList/CategoryItem/style.tsx

@@ -1,4 +1,5 @@
 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";
@@ -41,7 +42,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;

package/src/modules/Forms/FormCategoriesList/index.tsx

@@ -1,7 +1,17 @@
 import React, { useEffect, useState, useRef } from "react";
 import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
-import { DragDropContext, Droppable, Draggable, DropResult, BeforeCapture } from "react-beautiful-dnd";
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  DragStartEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 
 import { formsActions } from "@ax/containers/Forms";
 import { IRootState, FormCategory, FormCategoriesOrderParams } from "@ax/types";
@@ -48,6 +58,17 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
   const isAllowedToCreateFormCategory = usePermission(createFormCategoryPermission);
   const isAllowedToDeleteFormCategory = usePermission(deleteFormCategoryPermission);
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
   const catIds = categories.map((category) => category.id);
   const totalItems = categories.length;
 
@@ -116,55 +137,33 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
     />
   );
 
-  const ComponentList = React.memo(function ComponentList({ components }: any) {
-    return components.map((category: FormCategory, i: number) => {
-      const isItemSelected = isSelected(category.id);
-      const isDragging = !!draggingId && draggingId !== category.id;
-
-      return (
-        <Draggable draggableId={`${category.id}`} index={i} key={category.id}>
-          {(provided) => (
-            <CategoryItem
-              category={category}
-              key={category.id}
-              isSelected={isItemSelected}
-              onChange={addToBulkSelection}
-              toggleToast={toggleToast}
-              hoverCheck={checkState.hoverCheck}
-              isDragging={isDragging}
-              provided={provided}
-              isSiteView={isSiteView}
-            />
-          )}
-        </Draggable>
-      );
-    });
-  });
-
-  const onDragEnd = async (result: DropResult) => {
-    if (!result.destination || result.destination.index === result.source.index) {
-      setDraggingId(null);
-      return;
-    }
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    setDraggingId(active.id as number);
+  };
 
-    const newPosition = result.destination.index
-      ? categories[result.destination.index - (result.destination.index > result.source.index ? 0 : 1)].position + 1
-      : 1;
+  const handleOnDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
 
-    const params: FormCategoriesOrderParams = {
-      id: parseInt(result.draggableId),
-      categoryType: category,
-      position: newPosition,
-      relatedSite: currentSiteID,
-    };
+    if (over && active.id !== over.id) {
+      const oldIndex = categories.map((e) => e.id).indexOf(active.id as number);
+      const newIndex = categories.map((e) => e.id).indexOf(over.id as number);
 
-    await orderFormCategory(params);
+      const newPosition = newIndex ? categories[newIndex - (newIndex > oldIndex ? 0 : 1)].position + 1 : 1;
+
+      const params: FormCategoriesOrderParams = {
+        id: active.id as number,
+        categoryType: category,
+        position: newPosition,
+        relatedSite: currentSiteID,
+      };
+
+      await orderFormCategory(params);
+    }
 
     setDraggingId(null);
   };
 
-  const onBeforeCapture = (start: BeforeCapture) => setDraggingId(parseInt(start.draggableId));
-
   const isEmpty = totalItems === 0;
   const emptyProps = {
     message: isAllowedToCreateFormCategory
@@ -213,16 +212,32 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
                 <S.Notification>
                   Reorder your category list by <strong>drag & drop</strong>.
                 </S.Notification>
-                <DragDropContext onDragEnd={onDragEnd} onBeforeCapture={onBeforeCapture}>
-                  <Droppable droppableId="formCategoriesList">
-                    {(provided) => (
-                      <div ref={provided.innerRef} {...provided.droppableProps}>
-                        <ComponentList components={categories} />
-                        {provided.placeholder}
-                      </div>
-                    )}
-                  </Droppable>
-                </DragDropContext>
+                <DndContext
+                  sensors={sensors}
+                  collisionDetection={closestCenter}
+                  onDragEnd={handleOnDragEnd}
+                  onDragStart={handleDragStart}
+                >
+                  <SortableContext items={catIds} strategy={verticalListSortingStrategy}>
+                    {categories.map((category: FormCategory) => {
+                      const isItemSelected = isSelected(category.id);
+                      const isDragging = !!draggingId && draggingId !== category.id;
+
+                      return (
+                        <CategoryItem
+                          category={category}
+                          key={category.id}
+                          isSelected={isItemSelected}
+                          onChange={addToBulkSelection}
+                          toggleToast={toggleToast}
+                          hoverCheck={checkState.hoverCheck}
+                          isDragging={isDragging}
+                          isSiteView={isSiteView}
+                        />
+                      );
+                    })}
+                  </SortableContext>
+                </DndContext>
               </>
             )}
           </TableList>

package/src/modules/Navigation/Menus/List/Table/Item/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
+import { AnimateLayoutChanges, useSortable } from "@dnd-kit/sortable";
 
 import { menuActions } from "@ax/containers/Navigation";
 import { useModal, usePermission } from "@ax/hooks";
@@ -12,12 +13,6 @@ import { RemoveModal } from "./atoms";
 
 import * as S from "./style";
 
-const DragButton = ({ dragHandleProps }: any) => (
-  <S.IconWrapperDrag {...dragHandleProps}>
-    <Icon name="drag" size="16" />
-  </S.IconWrapperDrag>
-);
-
 const Item = (props: IItemProps): JSX.Element => {
   const {
     item,
@@ -25,11 +20,12 @@ const Item = (props: IItemProps): JSX.Element => {
     resetItemValues,
     setItemValue,
     updateFormValue,
-    icon,
-    dragHandleProps,
     depth,
-    isDragging,
+    indentationWidth,
+    collapsed,
+    onCollapse,
   } = props;
+
   const deleteItem = (item: IMenuItem, deleteChildren?: boolean) => deleteMenuItem(item.id, deleteChildren);
   const hasChildren = !!item.children.length;
 
@@ -50,6 +46,17 @@ const Item = (props: IItemProps): JSX.Element => {
   const [isOpenedSecond, setIsOpenedSecond] = useState(false);
   const { isOpen: isConfigOpen, toggleModal: toggleConfigModal } = useModal(false);
 
+  const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>
+    isSorting || wasDragging ? false : true;
+
+  const { attributes, isDragging, listeners, setDraggableNodeRef, setDroppableNodeRef, transform, transition } =
+    useSortable({
+      id: item.id,
+      animateLayoutChanges,
+    });
+
+  const handleIconClick = (e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation();
+
   const toggleSecondaryPanel = () => setIsOpenedSecond(!isOpenedSecond);
   const resetValues = () => resetItemValues();
 
@@ -84,10 +91,24 @@ const Item = (props: IItemProps): JSX.Element => {
 
   return (
     <>
-      <S.Container disabled={!isAllowedToMangageMenus}>
-        <S.Component onClick={openModal} isGroup={isGroupingElement}>
+      <S.Container
+        disabled={!isAllowedToMangageMenus}
+        identationWidth={isDragging ? indentationWidth : indentationWidth * depth}
+        ref={setDroppableNodeRef}
+      >
+        <S.Component
+          onClick={openModal}
+          isGroup={isGroupingElement}
+          ref={setDraggableNodeRef}
+          cssTransform={transform}
+          transition={transition}
+          {...listeners}
+          {...attributes}
+        >
           <S.FlexWrapper>
-            <DragButton dragHandleProps={dragHandleProps} />
+            <S.IconWrapperDrag>
+              <Icon name="drag" size="16" />
+            </S.IconWrapperDrag>
             {isGroupingElement && (
               <S.GroupIcon>
                 <Icon name="unlink" size="16" />
@@ -96,7 +117,15 @@ const Item = (props: IItemProps): JSX.Element => {
             {item.label}
           </S.FlexWrapper>
           <S.FlexWrapper>
-            <S.IconWrapper>{icon}</S.IconWrapper>
+            {onCollapse && (
+              <S.IconWrapper onClick={handleIconClick}>
+                {collapsed ? (
+                  <IconAction icon="UpArrow" size="m" onClick={onCollapse} />
+                ) : (
+                  <IconAction icon="DownArrow" size="m" onClick={onCollapse} />
+                )}
+              </S.IconWrapper>
+            )}
             {depth === 1 && hasChildren && isAllowedToMangageMenus && (
               <S.IconWrapper>
                 <Tooltip content="Options view">
@@ -125,10 +154,10 @@ const Item = (props: IItemProps): JSX.Element => {
 
 interface IProps {
   item: IMenuItem;
-  icon: JSX.Element;
-  dragHandleProps: any;
   depth: number;
-  isDragging: boolean;
+  indentationWidth: number;
+  collapsed: boolean;
+  onCollapse?: () => void;
 }
 
 interface IDispatchProps {

package/src/modules/Navigation/Menus/List/Table/Item/style.tsx

@@ -1,11 +1,14 @@
 import styled from "styled-components";
+import { CSS, Transform } from "@dnd-kit/utilities";
+
 import { ActionMenu } from "@ax/components";
 
-const Container = styled.div<{ disabled: boolean }>`
+const Container = styled.div<{ disabled: boolean; identationWidth: number }>`
   display: flex;
   align-items: center;
   width: 100%;
   pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
+  padding-left: ${(p) => `${p.identationWidth}px`};
 `;
 
 const IconWrapper = styled.div`
@@ -27,7 +30,8 @@ const StyledActionMenu = styled(ActionMenu)`
   opacity: 0;
 `;
 
-const Component = styled.span<{ isGroup: boolean }>`
+const Component = styled.span<{ isGroup: boolean; cssTransform: Transform | null; transition?: string }>`
+  ${(p) => p.theme.textStyle.fieldLabel};
   width: 100%;
   display: flex;
   align-items: center;
@@ -42,9 +46,10 @@ const Component = styled.span<{ isGroup: boolean }>`
   padding: 0 ${(p) => p.theme.spacing.s};
   border-radius: ${(p) => p.theme.radii.s};
   box-shadow: ${(p) => p.theme.shadow.shadowS};
-  ${(p) => p.theme.textStyle.fieldLabel};
   text-align: left;
   cursor: pointer;
+  transform: ${(p) => CSS.Transform.toString(p.cssTransform)};
+  transition: ${(p) => p.transition};
 
   &::after {
     content: "";

package/src/modules/Navigation/Menus/List/Table/helpers.tsx

@@ -1,92 +1,150 @@
-import { ItemId, TreeData, TreeItem } from "@atlaskit/tree";
-import { isEmptyObj } from "@ax/helpers";
 import { IMenuItem } from "@ax/types";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import { arrayMove } from "@dnd-kit/sortable";
 
-const normalizeMenu = (menu: IMenuItem[], tree: TreeData) => {
-  const normalized: TreeData = {
-    rootId: "root",
-    items: {
-      root: {
-        id: "root",
-        children: [],
-        hasChildren: true,
-        isExpanded: true,
-        isChildrenLoading: false,
-      },
-    },
-  };
-
-  const previousMenu: IMenuItem[] = [];
-  if (!isEmptyObj(tree.items)) {
-    previousMenu.push(...formatMenu(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: IMenuItem) => {
-    if (!item) return true;
-    return item.isExpanded;
-  };
-
-  const getElement = (item: IMenuItem, previousMenu: IMenuItem) => {
-    normalized.items[item.id] = {
-      ...item,
-      children: [],
-      isExpanded: isItemExpanded(previousMenu),
-    };
-
-    if (item.children && item.children.length > 0) {
-      item.children.forEach((child: IMenuItem, index: number) => {
-        normalized.items[item.id].children.push(child.id);
-        getElement(child, previousMenu?.children[index]);
-      });
-      normalized.items[item.id].hasChildren = true;
-    } else {
-      normalized.items[item.id].hasChildren = false;
-    }
-  };
+const flattenTree = (items: TreeItem[]): FlattenedItem[] => {
+  return flatten(items);
+};
 
-  menu.forEach((item: IMenuItem, index: number) => {
-    normalized.items.root.children.push(item.id);
-    getElement(item, previousMenu[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[]): IMenuItem => {
-  const element = elements.find((element: IMenuItem) => element.id === child);
-  const children = element?.children.map((child: ItemId) => getChild(child, elements));
-  return { ...element, children };
+  return root.children;
 };
 
-const formatMenu = (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 formattedMenu = 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 formattedMenu;
-};
+  if (projectedDepth >= maxDepth) {
+    depth = maxDepth;
+  } else if (projectedDepth < minDepth) {
+    depth = minDepth;
+  }
+
+  return { depth, maxDepth, minDepth, parentId: getParentId() };
+
+  function getParentId() {
+    if (depth === 0 || !previousItem) {
+      return null;
+    }
+
+    if (depth === previousItem.depth) {
+      return previousItem.parentId;
+    }
+
+    if (depth > previousItem.depth) {
+      return previousItem.id;
+    }
+
+    const newParent = newItems
+      .slice(0, overItemIndex)
+      .reverse()
+      .find((item) => item.depth === depth)?.parentId;
 
-const formatItem = (item: any, tree: TreeData) => {
-  const elements = getElementsFromTree(tree);
+    return newParent ?? null;
+  }
+}
+
+function getMinDepth({ nextItem }: { nextItem: FlattenedItem }) {
+  if (nextItem) {
+    return nextItem.depth;
+  }
 
-  const formattedItem = {
-    ...item,
-    children: item.children.map((child: ItemId) => getChild(child, elements)),
-  };
+  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 formattedItem;
+    return true;
+  });
 };
 
-export { normalizeMenu, formatMenu, formatItem };
+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];
+}
+
+export interface FlattenedItem extends IMenuItem {
+  parentId: UniqueIdentifier | null;
+  depth: number;
+  index: number;
+}
+
+export type TreeItem = IMenuItem;
+
+export { flattenTree, buildTree, removeChildrenOf };