@griddo/ax 11.1.11 → 11.1.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.1.11",
+  "version": "11.1.12",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -225,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e530dd1b7e1bd547d7e969dfb808a56f78abdfa6"
+  "gitHead": "3cf8c664e60c6b5e2f2eadddaca55eb1867ce11b"
 }

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

@@ -19,7 +19,17 @@ const DragButton = ({ dragHandleProps }: any) => (
 );
 
 const Item = (props: IItemProps): JSX.Element => {
-  const { item, deleteMenuItem, resetItemValues, setItemValue, updateFormValue, icon, dragHandleProps, depth } = props;
+  const {
+    item,
+    deleteMenuItem,
+    resetItemValues,
+    setItemValue,
+    updateFormValue,
+    icon,
+    dragHandleProps,
+    depth,
+    isDragging,
+  } = props;
   const deleteItem = (item: IMenuItem, deleteChildren?: boolean) => deleteMenuItem(item.id, deleteChildren);
   const hasChildren = !!item.children.length;
 
@@ -56,10 +66,12 @@ const Item = (props: IItemProps): JSX.Element => {
   };
 
   const openModal = () => {
-    resetValues();
-    setItem(item);
-    setIsOpenedSecond(false);
-    toggleModal();
+    if (!isDragging) {
+      resetValues();
+      setItem(item);
+      setIsOpenedSecond(false);
+      toggleModal();
+    }
   };
 
   const openConfigModal = () => {
@@ -116,6 +128,7 @@ interface IProps {
   icon: JSX.Element;
   dragHandleProps: any;
   depth: number;
+  isDragging: boolean;
 }
 
 interface IDispatchProps {

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

@@ -1,4 +1,4 @@
-import { ItemId, mutateTree, TreeData, TreeDestinationPosition, TreeItem, TreeSourcePosition } from "@atlaskit/tree";
+import { ItemId, TreeData, TreeItem } from "@atlaskit/tree";
 import { isEmptyObj } from "@ax/helpers";
 import { IMenuItem } from "@ax/types";
 
@@ -32,11 +32,15 @@ const normalizeMenu = (menu: IMenuItem[], tree: TreeData) => {
       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;
     }
   };
 
@@ -85,34 +89,4 @@ const formatItem = (item: any, tree: TreeData) => {
   return formattedItem;
 };
 
-const hasLoadedChildren = (item: TreeItem) => !!item.hasChildren && item.children.length > 0;
-const isLeafItem = (item: TreeItem) => !item.children.length;
-
-const customMoveItemOnTree = (tree: TreeData, from: TreeSourcePosition, to: TreeDestinationPosition) => {
-  const sourceParent = tree.items[from.parentId];
-  const newSourceChildren = [...sourceParent.children];
-  const itemRemoved = newSourceChildren.splice(from.index, 1)[0];
-  const treeWithoutSource = mutateTree(tree, from.parentId, {
-    children: newSourceChildren,
-    hasChildren: newSourceChildren.length > 0,
-    isExpanded: newSourceChildren.length > 0 && sourceParent.isExpanded,
-  });
-
-  const destinationParent = treeWithoutSource.items[to.parentId];
-  const newDestinationChildren = [...destinationParent.children];
-
-  if (typeof to.index === "undefined") {
-    if (hasLoadedChildren(destinationParent) || isLeafItem(destinationParent)) {
-      newDestinationChildren.push(itemRemoved);
-    }
-  } else {
-    newDestinationChildren.splice(to.index, 0, itemRemoved);
-  }
-
-  return mutateTree(treeWithoutSource, to.parentId, {
-    children: newDestinationChildren,
-    hasChildren: true,
-  });
-};
-
-export { normalizeMenu, formatMenu, formatItem, customMoveItemOnTree };
+export { normalizeMenu, formatMenu, formatItem };

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

@@ -9,6 +9,7 @@ import Tree, {
   ItemId,
   TreeSourcePosition,
   TreeDestinationPosition,
+  moveItemOnTree,
 } from "@atlaskit/tree";
 
 import { menuActions } from "@ax/containers/Navigation";
@@ -17,7 +18,7 @@ import { Loading, ErrorToast, IconAction } from "@ax/components";
 import { RouteLeavingGuard } from "@ax/guards";
 import { IMenuItem, IRootState } from "@ax/types";
 
-import { customMoveItemOnTree, formatItem, formatMenu, normalizeMenu } from "./helpers";
+import { formatItem, formatMenu, normalizeMenu } from "./helpers";
 import Header from "./Header";
 import Item from "./Item";
 import * as S from "./style";
@@ -25,6 +26,7 @@ import * as S from "./style";
 const ItemList = (props: IItemList): JSX.Element => {
   const { menu, reorderMenu } = props;
   const [tree, setTree] = useState<TreeData>({ rootId: "root", items: {} });
+  const [itemDragging, setItemDragging] = useState<ItemId | null>(null);
 
   useEffect(() => {
     setTree(normalizeMenu(menu, tree));
@@ -54,6 +56,7 @@ const ItemList = (props: IItemList): JSX.Element => {
   };
 
   const renderItem = ({ item, onExpand, onCollapse, provided, depth }: RenderItemParams) => {
+    const isDragging = !!itemDragging && itemDragging !== item.id;
     return (
       <S.Draggable ref={provided.innerRef} {...provided.draggableProps}>
         <Item
@@ -61,6 +64,7 @@ const ItemList = (props: IItemList): JSX.Element => {
           icon={getIcon(item, onExpand, onCollapse)}
           dragHandleProps={provided.dragHandleProps}
           depth={depth}
+          isDragging={isDragging}
         />
       </S.Draggable>
     );
@@ -80,15 +84,21 @@ const ItemList = (props: IItemList): JSX.Element => {
     reorderMenu(newMenu);
   };
 
+  const onDragStart = (item: ItemId) => setItemDragging(item);
+
   const onDragEnd = (source: TreeSourcePosition, destination?: TreeDestinationPosition) => {
-    if (!destination || (source.parentId === destination.parentId && source.index === destination.index)) return;
+    if (!destination || (source.parentId === destination.parentId && source.index === destination.index)) {
+      setItemDragging(null);
+      return;
+    }
 
-    const newTree = customMoveItemOnTree(tree, source, destination);
+    const newTree = moveItemOnTree(tree, source, destination);
     const { parentId } = destination;
     newTree.items[parentId].isExpanded = true;
     setTree(newTree);
     const newMenu = formatMenu(newTree);
     reorderMenu(newMenu);
+    setItemDragging(null);
   };
 
   return (
@@ -98,6 +108,7 @@ const ItemList = (props: IItemList): JSX.Element => {
         renderItem={renderItem}
         onExpand={onExpand}
         onCollapse={onCollapse}
+        onDragStart={onDragStart}
         onDragEnd={onDragEnd}
         isDragEnabled
         isNestingEnabled

package/src/types/index.tsx

@@ -382,9 +382,9 @@ export interface IMenuItem {
   name: string;
   editorID?: number;
   label: string;
-  url: any;
+  url: string;
   auxText: string;
-  children: any[];
+  children: IMenuItem[];
   image?: IImage | string | null;
   isExpanded?: boolean;
   config: IMenuItemConfig | null;