@blaze-cms/react-page-builder 0.146.0-node18-tooltips.11 → 0.146.0-node18-core-styles-tooltips.20

package/src/components/MenuItem/MenuItemRender.js

@@ -1,17 +1,23 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import classnames from 'classnames';
 import { useRouter } from 'next/router';
 import { useStringTemplate } from '@blaze-cms/utils-handlebars';
-import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN, CLICK } from '../../constants';
 import { hasChildren } from '../../helpers';
 import BlazeLink from '../BlazeLink';
 import MenuContext from '../Menu/MenuContext';
-import { injectHelperIntoTemplate } from './helpers';
+import { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild } from './helpers';
 
 const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
-  const [displayChildren, setDisplayChildren] = useState(false);
-  const { showMobileMenu } = useContext(MenuContext);
+  const router = useRouter();
+  const { showMobileMenu, openActiveSubmenus } = useContext(MenuContext);
+
+  const isHoverEvent = eventType === HOVER;
+  const isClickEvent = eventType === CLICK;
+
   const {
     loading: loadingText,
     data: [textToUse]
@@ -21,14 +27,24 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     data: [urlToUse]
   } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
 
-  const router = useRouter();
-  const isHoverEvent = eventType === HOVER;
-  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+  const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;
+  const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;
+  const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;
   const hasValidChildren = hasChildren(children);
 
+  const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
+
   useEffect(() => {
-    if (!showMobileMenu) setDisplayChildren(false);
-  }, [showMobileMenu]);
+    if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);
+  }, [
+    children,
+    isClickEvent,
+    loadingUrl,
+    openActiveSubmenus,
+    router,
+    shouldPreOpen,
+    showMobileMenu
+  ]);
 
   useEffect(() => {
     if (isHoverEvent) {
@@ -38,6 +54,8 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
 
   if (loadingUrl || loadingText) return '';
 
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+
   const handleItemEvent = ({ type }) => {
     if (isHoverEvent) {
       if (type === MOUSE_ENTER) {
@@ -55,15 +73,25 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     }
   };
 
+  const menuItemLinkClassname = classnames('menu--item--link', {
+    'menu--item--link--active': isActive,
+    'menu--item--link--active-parent': isActiveParent
+  });
+
   return (
     <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
       <div
-        className="menu--item--link"
+        className={menuItemLinkClassname}
         onClick={handleMobileClick}
         role={!urlToUse && hasValidChildren ? 'button' : undefined}
         tabIndex={!urlToUse && hasValidChildren ? 0 : undefined}>
-        {urlToUse ? <BlazeLink href={urlToUse}>{textToUse}</BlazeLink> : <span>{textToUse}</span>}
-
+        {urlToUse ? (
+          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
+        ) : (
+          <span role="button" onClick={handleItemEvent}>
+            {textToUse}
+          </span>
+        )}
         {hasValidChildren && (
           <i
             role="button"

package/src/components/MenuItem/helpers/has-active-child.js

@@ -0,0 +1,10 @@
+import isUrlPathMatch from './isUrlPathMatch';
+import { hasChildren } from '../../../helpers';
+
+const hasActiveChild = (path, children) =>
+  hasChildren(children) &&
+  children.props.children[1][0].props.component.items.find(menuItem =>
+    isUrlPathMatch(path, menuItem.settings.url)
+  );
+
+export default hasActiveChild;

package/src/components/MenuItem/helpers/index.js

@@ -1,3 +1,5 @@
 import injectHelperIntoTemplate from './inject-helper-into-template';
+import isUrlPathMatch from './isUrlPathMatch';
+import hasActiveChild from './has-active-child';
 
-export { injectHelperIntoTemplate };
+export { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild };

package/src/components/MenuItem/helpers/isUrlPathMatch.js

@@ -0,0 +1,10 @@
+const isUrlPathMatch = (path, itemUrl) => {
+  if (!itemUrl || !path) return false;
+
+  const reg = new RegExp(/^[^#?]+/);
+  const _path = reg.exec(path)[0];
+
+  return _path === itemUrl || _path === `/${itemUrl}`;
+};
+
+export default isUrlPathMatch;

package/tests/unit/src/components/MenuItem/MenuItem.test.js

@@ -19,6 +19,11 @@ jest.mock('next/router', () => ({
   useRouter: () => ({ asPath: '/' })
 }));
 
+// todo: add extra tests to support this util
+jest.mock('../../../../../src/components/MenuItem/helpers/has-active-child', () =>
+  jest.fn(() => false)
+);
+
 const componentProps = {
   id: 'id',
   name: 'mock name',

package/tests/unit/src/components/MenuItem/MenuItemRender.test.js

@@ -11,14 +11,22 @@ const MENU_ITEM_CHILDREN_CLASS = 'menu--item-children';
 
 let mockAsPathValue = '/';
 
-jest.mock('next/router', () => ({
-  useRouter: () => ({ asPath: mockAsPathValue })
-}));
+jest.mock('next/router', () => {
+  const router = { asPath: mockAsPathValue };
+  return {
+    useRouter: () => router
+  };
+});
 
 jest.mock('@blaze-cms/utils-handlebars', () => ({
   useStringTemplate: jest.fn((parent, [title]) => ({ loading: false, data: [title] }))
 }));
 
+// todo: add extra tests to support this util
+jest.mock('../../../../../src/components/MenuItem/helpers/has-active-child', () =>
+  jest.fn(() => false)
+);
+
 describe('MenuRender component', () => {
   it('renders menu item with link when URL is provided', () => {
     const { getByText } = render(<MenuRender eventType="click" text="Home" url="/home" />);

package/tests/unit/src/components/MenuItem/helpers/constants.js

@@ -0,0 +1,73 @@
+export const mockMenuProps = {
+  props: {
+    children: [
+      false,
+      [
+        {
+          props: {
+            component: {
+              items: [
+                {
+                  type: 'menuitem',
+                  settings: {
+                    name: 'menuitem-card',
+                    url: 'card',
+                    text: 'Card'
+                  },
+                  id: 'menuitem-card-1',
+                  items: [],
+                  name: 'menuitem-card-1'
+                },
+                {
+                  type: 'menuitem',
+                  settings: {
+                    name: 'menuitem-Card',
+
+                    url: 'card',
+                    text: 'Card'
+                  },
+                  id: 'menuitem-Card-1',
+                  items: [],
+                  name: 'menuitem-Card-1'
+                },
+                {
+                  type: 'menuitem',
+                  settings: {
+                    name: 'menuitem-card-Carousel',
+                    url: 'card-carousel',
+                    text: 'Card Carousel'
+                  },
+                  id: 'menuitem-card-carousel-1',
+                  items: [],
+                  name: 'menuitem-card-carousel-1'
+                },
+                {
+                  type: 'menuitem',
+                  settings: {
+                    eventType: 'hover',
+                    name: 'menuitem-Content-Group',
+                    modifier: null,
+                    url: 'content-group',
+                    text: 'Content Group',
+                    variant: null,
+                    gtmClassName: null,
+                    entities: [],
+                    filterByProperty: [],
+                    filterByFeatured: 'off',
+                    filterBySponsored: 'off',
+                    operator: 'AND',
+                    filterBy: [],
+                    sortProperties: []
+                  },
+                  id: 'menuitem-Content-Group-1',
+                  items: [],
+                  name: 'menuitem-Content-Group-1'
+                }
+              ]
+            }
+          }
+        }
+      ]
+    ]
+  }
+};

package/tests/unit/src/components/MenuItem/helpers/has-active-child.test.js

@@ -0,0 +1,35 @@
+/* eslint-disable no-unused-vars */
+import '@testing-library/jest-dom/extend-expect';
+import { hasActiveChild } from '../../../../../../src/components/MenuItem/helpers';
+import { mockMenuProps } from './constants';
+
+describe('hasActiveChild', () => {
+  const structuredClone = val => JSON.parse(JSON.stringify(val));
+
+  it('should return true for finding active menu-item child', () => {
+    const activePath = '/card';
+    const menuProps = mockMenuProps;
+    const result = !!hasActiveChild(activePath, menuProps);
+    expect(result).toBe(true);
+  });
+
+  it('shoul return false for findng no exact match', () => {
+    const activePath = '/carousel';
+    const menuProps = mockMenuProps;
+
+    const result = !!hasActiveChild(activePath, menuProps);
+    expect(result).toBe(false);
+  });
+
+  it('should return false for empty children-items', () => {
+    const activePath = '/carousel';
+    const menuWithNoChildrenProps = (() => {
+      const obj = structuredClone(mockMenuProps);
+      obj.props.children[1][0].props.component.items = [];
+      return obj;
+    }).call();
+
+    const result = !!hasActiveChild(activePath, menuWithNoChildrenProps);
+    expect(result).toBe(false);
+  });
+});

package/tests/unit/src/components/MenuItem/helpers/is-url-path-match.test.js

@@ -0,0 +1,53 @@
+import '@testing-library/jest-dom/extend-expect';
+import { isUrlPathMatch } from '../../../../../../src/components/MenuItem/helpers';
+
+describe('isUrlPathMatch', () => {
+  it('should return true since path and itemUrl match', () => {
+    const path = '/button';
+    const itemUrl = 'button';
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeTruthy();
+  });
+
+  it('should match since path and itemUrl do not match', () => {
+    const path = '/card';
+    const itemUrl = 'button';
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeFalsy();
+  });
+
+  it('should not match since path and itemUrl is a partial match', () => {
+    const path = '/button-card';
+    const itemUrl = 'button';
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeFalsy();
+  });
+
+  it('should not match since nested path and itemUrl is a partial match', () => {
+    const path = '/button/child';
+    const itemUrl = 'button';
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeFalsy();
+  });
+
+  it('should match with uri-with-fragment', () => {
+    const path = '/button#dark';
+    const itemUrl = 'button';
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeTruthy();
+  });
+
+  it('should match with uri-with-parameters', () => {
+    const path = '/button?paramater=value';
+    const itemUrl = 'button';
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeTruthy();
+  });
+
+  it('should not match with empty itemUrl', () => {
+    const path = '/';
+    const itemUrl = null;
+    const result = isUrlPathMatch(path, itemUrl);
+    expect(result).toBeFalsy();
+  });
+});

package/tests/unit/src/components/PlaceholderIcon/__snapshots__/index.test.js.snap

@@ -1,82 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Placeholder component should render PlaceholderIcon 1`] = `
-<DocumentFragment>
-  <div
-    class="editor-view__placeholder"
-    data-testid="placeholder-icon"
-  >
-    <svg
-      height="25px"
-      version="1.1"
-      viewBox="0 0 20 20"
-      width="25px"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <title>
-        card
-      </title>
-      <g
-        fill="none"
-        fill-rule="evenodd"
-        id="Icons"
-        stroke="none"
-        stroke-width="1"
-      >
-        <g
-          id="card"
-          transform="translate(-259, -214)"
-        >
-          <g
-            transform="translate(259, 214)"
-          >
-            <g
-              id="Group-7"
-              transform="translate(1, 1)"
-            >
-              <path
-                d="M1.07,10 C3.04212623,8.18723771 4.14171262,7.28085657 4.36875916,7.28085657 C4.79707626,7.28085657 7,9 7.5,9 C8.40867615,9 12.0764465,4.56171314 12.9,4.56171314 C13.4490356,4.56171314 14.8390356,5.81447543 17.07,8.32"
-                fill-rule="nonzero"
-                id="Path-3"
-                stroke-width="1.3"
-              />
-              <path
-                d="M5.00003877,4.07973585 C5.00003879,3.4834142 5.50109477,3 6.11917864,3 C6.73726251,3 7.2383185,3.4834142 7.2383185,4.07973585 C7.2383185,4.6760575 6.73726252,5.15947172 6.11917864,5.15947172 C5.82268209,5.15728623 5.53857972,5.04442179 5.32645457,4.84454876 C5.11586241,4.64208328 4.99827309,4.36656405 5.00003877,4.07973585 Z"
-                fill-rule="nonzero"
-                id="Path"
-              />
-              <path
-                d="M3.375,14.625 C3.375,14.3143398 3.62683983,14.0625 3.9375,14.0625 L14.0625,14.0625 C14.3731602,14.0625 14.625,14.3143398 14.625,14.625 C14.625,14.9356602 14.3731602,15.1875 14.0625,15.1875 L3.9375,15.1875 C3.62683983,15.1875 3.375,14.9356602 3.375,14.625 Z"
-                fill-rule="nonzero"
-                id="Shape"
-              />
-              <rect
-                height="16.7"
-                id="Rectangle"
-                rx="2"
-                stroke-width="1.3"
-                width="16.7"
-                x="0.65"
-                y="0.65"
-              />
-              <line
-                id="Line-2"
-                stroke-linecap="square"
-                stroke-width="1.3"
-                x1="1"
-                x2="16.5625"
-                y1="11.8125"
-                y2="11.8125"
-              />
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-    <span>
-      card
-    </span>
-  </div>
-</DocumentFragment>
-`;

package/tests/unit/src/components/PlaceholderIcon/index.test.js

@@ -1,20 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { render } from '@blaze-cms/tools/test-helpers/test-functions';
-
-import { CardIcon } from '@blaze-cms/plugin-page-builder-ui/src/Icons';
-import PlaceholderIcon from '@blaze-cms/plugin-page-builder-ui/src/components/EditorView/Placeholders';
-
-const mockedProps = {
-  type: 'card',
-  icon: CardIcon
-};
-
-describe('Placeholder component', () => {
-  it('should render PlaceholderIcon', () => {
-    const { asFragment, getByTestId } = render(PlaceholderIcon, mockedProps);
-    expect(getByTestId('placeholder-icon')).toBeDefined();
-    expect(asFragment()).toMatchSnapshot();
-  });
-});