@griddo/ax 11.1.6 → 11.1.7

package/package.json

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

package/src/components/ConfigPanel/Form/style.tsx

@@ -22,7 +22,7 @@ const TabsWrapper = styled.div<{ headerHeight: number }>`
   background-color: ${(p) => p.theme.color.uiBackground01};
   position: sticky;
   top: ${(p) => (p.headerHeight ? `calc(63px + ${p.headerHeight}px)` : "63px")};
-  z-index: 3;
+  z-index: 2;
 `;
 
 export { Wrapper, FieldWrapper, Link, TabsWrapper };

package/src/forms/validators.tsx

@@ -1,5 +1,4 @@
 import {
-  dateToString,
   getDeactivatedModules,
   getDefaultSchema,
   getSchema,
@@ -55,28 +54,12 @@ const VALIDATORS = {
         return { isValid, errorCode: "ERR004" };
       }
       case "fullURL": {
-        const re = new RegExp(
-          "^(https?:\\/\\/)" + // protocol
-            "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
-            "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
-            "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
-            "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
-            "(\\#[-a-z\\d_]*)?$",
-          "i"
-        );
+        const re = /^(https?:\/\/)?([\w.-]+)\.([a-z]{2,6})(:[0-9]{1,5})?(\/[^?]*)?(\?([^#]*))?(#(.*))?$/i;
         const isValid = re.test(val);
         return { isValid, errorCode: "ERR005" };
       }
       case "URL": {
-        const re = new RegExp(
-          "^(https?:\\/\\/)?" + // protocol
-            "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
-            "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
-            "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
-            "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
-            "(\\#[-a-z\\d_]*)?$",
-          "i"
-        );
+        const re = /^(https?:\/\/)?([\w.-]+)\.([a-z]{2,6})(:[0-9]{1,5})?(\/[^?]*)?(\?([^#]*))?(#(.*))?$/i;
         const isValid = re.test(val);
         return { isValid, errorCode: "ERR006" };
       }
@@ -372,7 +355,7 @@ const findPackagesActivationErrors = (
   let isCurrentTemplateActivated = true;
   let hasDeactivatedModules = false;
 
-  const { template } = pageEditor?.editorContent;
+  const { template } = pageEditor?.editorContent || {};
 
   if (template && !isGlobal) {
     const mainContentModules = template?.mainContent?.modules;

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

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React from "react";
 import { connect } from "react-redux";
 
 import { menuActions } from "@ax/containers/Navigation";
@@ -99,6 +99,4 @@ interface IDispatchProps {
 
 type IProps = IDispatchProps & IStateProps & IFormProps;
 
-const memoizedForm = memo(Form);
-
-export default connect(mapStateToProps, mapDispatchToProps)(memoizedForm);
+export default connect(mapStateToProps, mapDispatchToProps)(Form);

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

@@ -1,4 +1,4 @@
-import { ItemId, TreeData, TreeItem } from "@atlaskit/tree";
+import { ItemId, mutateTree, TreeData, TreeDestinationPosition, TreeItem, TreeSourcePosition } from "@atlaskit/tree";
 import { isEmptyObj } from "@ax/helpers";
 import { IMenuItem } from "@ax/types";
 
@@ -85,4 +85,34 @@ const formatItem = (item: any, tree: TreeData) => {
   return formattedItem;
 };
 
-export { normalizeMenu, formatMenu, formatItem };
+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 };

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

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Tree, {
   mutateTree,
-  moveItemOnTree,
   RenderItemParams,
   TreeItem,
   TreeData,
@@ -18,7 +17,7 @@ import { Loading, ErrorToast, IconAction } from "@ax/components";
 import { RouteLeavingGuard } from "@ax/guards";
 import { IMenuItem, IRootState } from "@ax/types";
 
-import { formatItem, formatMenu, normalizeMenu } from "./helpers";
+import { customMoveItemOnTree, formatItem, formatMenu, normalizeMenu } from "./helpers";
 import Header from "./Header";
 import Item from "./Item";
 import * as S from "./style";
@@ -82,13 +81,12 @@ const ItemList = (props: IItemList): JSX.Element => {
   };
 
   const onDragEnd = (source: TreeSourcePosition, destination?: TreeDestinationPosition) => {
-    if (!destination) return;
+    if (!destination || (source.parentId === destination.parentId && source.index === destination.index)) return;
 
-    const newTree = moveItemOnTree(tree, source, destination);
+    const newTree = customMoveItemOnTree(tree, source, destination);
     const { parentId } = destination;
     newTree.items[parentId].isExpanded = true;
     setTree(newTree);
-
     const newMenu = formatMenu(newTree);
     reorderMenu(newMenu);
   };