@blaze-cms/react-page-builder 0.146.0-node18-tooltips.35 → 0.146.0-node18-core-styles-tooltips.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +101 -39
- package/lib/components/Menu/Menu.js +4 -1
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/components/Menu/MenuContext.js +2 -1
- package/lib/components/Menu/MenuContext.js.map +1 -1
- package/lib/components/MenuItem/MenuItemRender.js +27 -12
- package/lib/components/MenuItem/MenuItemRender.js.map +1 -1
- package/lib/components/MenuItem/helpers/has-active-child.js +19 -0
- package/lib/components/MenuItem/helpers/has-active-child.js.map +1 -0
- package/lib/components/MenuItem/helpers/index.js +14 -0
- package/lib/components/MenuItem/helpers/index.js.map +1 -1
- package/lib/components/MenuItem/helpers/isUrlPathMatch.js +18 -0
- package/lib/components/MenuItem/helpers/isUrlPathMatch.js.map +1 -0
- package/lib-es/components/Menu/Menu.js +4 -1
- package/lib-es/components/Menu/Menu.js.map +1 -1
- package/lib-es/components/Menu/MenuContext.js +2 -1
- package/lib-es/components/Menu/MenuContext.js.map +1 -1
- package/lib-es/components/MenuItem/MenuItemRender.js +25 -11
- package/lib-es/components/MenuItem/MenuItemRender.js.map +1 -1
- package/lib-es/components/MenuItem/helpers/has-active-child.js +5 -0
- package/lib-es/components/MenuItem/helpers/has-active-child.js.map +1 -0
- package/lib-es/components/MenuItem/helpers/index.js +3 -1
- package/lib-es/components/MenuItem/helpers/index.js.map +1 -1
- package/lib-es/components/MenuItem/helpers/isUrlPathMatch.js +8 -0
- package/lib-es/components/MenuItem/helpers/isUrlPathMatch.js.map +1 -0
- package/package.json +10 -10
- package/src/components/Menu/Menu.js +3 -1
- package/src/components/Menu/MenuContext.js +1 -1
- package/src/components/MenuItem/MenuItemRender.js +40 -12
- package/src/components/MenuItem/helpers/has-active-child.js +10 -0
- package/src/components/MenuItem/helpers/index.js +3 -1
- package/src/components/MenuItem/helpers/isUrlPathMatch.js +10 -0
- package/tests/unit/src/components/MenuItem/MenuItem.test.js +5 -0
- package/tests/unit/src/components/MenuItem/MenuItemRender.test.js +11 -3
- package/tests/unit/src/components/MenuItem/helpers/constants.js +73 -0
- package/tests/unit/src/components/MenuItem/helpers/has-active-child.test.js +35 -0
- package/tests/unit/src/components/MenuItem/helpers/is-url-path-match.test.js +53 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"has-active-child.js","names":["_isUrlPathMatch","_interopRequireDefault","require","_helpers","hasActiveChild","path","children","hasChildren","props","component","items","find","menuItem","isUrlPathMatch","settings","url","_default","exports"],"sources":["../../../../src/components/MenuItem/helpers/has-active-child.js"],"sourcesContent":["import isUrlPathMatch from './isUrlPathMatch';\nimport { hasChildren } from '../../../helpers';\n\nconst hasActiveChild = (path, children) =>\n hasChildren(children) &&\n children.props.children[1][0].props.component.items.find(menuItem =>\n isUrlPathMatch(path, menuItem.settings.url)\n );\n\nexport default hasActiveChild;\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAEA,IAAME,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,IAAI,EAAEC,QAAQ;EAAA,OACpC,IAAAC,oBAAW,EAACD,QAAQ,CAAC,IACrBA,QAAQ,CAACE,KAAK,CAACF,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAACE,KAAK,CAACC,SAAS,CAACC,KAAK,CAACC,IAAI,CAAC,UAAAC,QAAQ;IAAA,OAC/D,IAAAC,0BAAc,EAACR,IAAI,EAAEO,QAAQ,CAACE,QAAQ,CAACC,GAAG,CAAC;EAAA,CAC7C,CAAC;AAAA;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEWb,cAAc","ignoreList":[]}
|
|
@@ -5,11 +5,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
+
Object.defineProperty(exports, "hasActiveChild", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _hasActiveChild["default"];
|
|
12
|
+
}
|
|
13
|
+
});
|
|
8
14
|
Object.defineProperty(exports, "injectHelperIntoTemplate", {
|
|
9
15
|
enumerable: true,
|
|
10
16
|
get: function get() {
|
|
11
17
|
return _injectHelperIntoTemplate["default"];
|
|
12
18
|
}
|
|
13
19
|
});
|
|
20
|
+
Object.defineProperty(exports, "isUrlPathMatch", {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function get() {
|
|
23
|
+
return _isUrlPathMatch["default"];
|
|
24
|
+
}
|
|
25
|
+
});
|
|
14
26
|
var _injectHelperIntoTemplate = _interopRequireDefault(require("./inject-helper-into-template"));
|
|
27
|
+
var _isUrlPathMatch = _interopRequireDefault(require("./isUrlPathMatch"));
|
|
28
|
+
var _hasActiveChild = _interopRequireDefault(require("./has-active-child"));
|
|
15
29
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_injectHelperIntoTemplate","_interopRequireDefault","require"],"sources":["../../../../src/components/MenuItem/helpers/index.js"],"sourcesContent":["import injectHelperIntoTemplate from './inject-helper-into-template';\n\nexport { injectHelperIntoTemplate };\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":["_injectHelperIntoTemplate","_interopRequireDefault","require","_isUrlPathMatch","_hasActiveChild"],"sources":["../../../../src/components/MenuItem/helpers/index.js"],"sourcesContent":["import injectHelperIntoTemplate from './inject-helper-into-template';\nimport isUrlPathMatch from './isUrlPathMatch';\nimport hasActiveChild from './has-active-child';\n\nexport { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,yBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,eAAA,GAAAH,sBAAA,CAAAC,OAAA","ignoreList":[]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.object.define-property.js");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
require("core-js/modules/es.regexp.constructor.js");
|
|
9
|
+
require("core-js/modules/es.regexp.exec.js");
|
|
10
|
+
require("core-js/modules/es.regexp.to-string.js");
|
|
11
|
+
var isUrlPathMatch = function isUrlPathMatch(path, itemUrl) {
|
|
12
|
+
if (!itemUrl || !path) return false;
|
|
13
|
+
var reg = new RegExp(/^[^#?]+/);
|
|
14
|
+
var _path = reg.exec(path)[0];
|
|
15
|
+
return _path === itemUrl || _path === "/".concat(itemUrl);
|
|
16
|
+
};
|
|
17
|
+
var _default = exports["default"] = isUrlPathMatch;
|
|
18
|
+
//# sourceMappingURL=isUrlPathMatch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isUrlPathMatch.js","names":["isUrlPathMatch","path","itemUrl","reg","RegExp","_path","exec","concat","_default","exports"],"sources":["../../../../src/components/MenuItem/helpers/isUrlPathMatch.js"],"sourcesContent":["const isUrlPathMatch = (path, itemUrl) => {\n if (!itemUrl || !path) return false;\n\n const reg = new RegExp(/^[^#?]+/);\n const _path = reg.exec(path)[0];\n\n return _path === itemUrl || _path === `/${itemUrl}`;\n};\n\nexport default isUrlPathMatch;\n"],"mappings":";;;;;;;;;;AAAA,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,IAAI,EAAEC,OAAO,EAAK;EACxC,IAAI,CAACA,OAAO,IAAI,CAACD,IAAI,EAAE,OAAO,KAAK;EAEnC,IAAME,GAAG,GAAG,IAAIC,MAAM,CAAC,SAAS,CAAC;EACjC,IAAMC,KAAK,GAAGF,GAAG,CAACG,IAAI,CAACL,IAAI,CAAC,CAAC,CAAC,CAAC;EAE/B,OAAOI,KAAK,KAAKH,OAAO,IAAIG,KAAK,SAAAE,MAAA,CAASL,OAAO,CAAE;AACrD,CAAC;AAAC,IAAAM,QAAA,GAAAC,OAAA,cAEaT,cAAc","ignoreList":[]}
|
|
@@ -10,6 +10,7 @@ import BlazeLink from '../BlazeLink';
|
|
|
10
10
|
const Menu = ({
|
|
11
11
|
children,
|
|
12
12
|
collapse,
|
|
13
|
+
openActiveSubmenus,
|
|
13
14
|
modifier,
|
|
14
15
|
mobileMenuModifier,
|
|
15
16
|
mobileMenuChildrenModifier,
|
|
@@ -45,7 +46,8 @@ const Menu = ({
|
|
|
45
46
|
});
|
|
46
47
|
return /*#__PURE__*/React.createElement(MenuContext.Provider, {
|
|
47
48
|
value: {
|
|
48
|
-
showMobileMenu
|
|
49
|
+
showMobileMenu,
|
|
50
|
+
openActiveSubmenus
|
|
49
51
|
}
|
|
50
52
|
}, /*#__PURE__*/React.createElement("div", {
|
|
51
53
|
className: menuWrapperClasses
|
|
@@ -83,6 +85,7 @@ const Menu = ({
|
|
|
83
85
|
};
|
|
84
86
|
Menu.propTypes = {
|
|
85
87
|
collapse: PropTypes.bool.isRequired,
|
|
88
|
+
openActiveSubmenus: PropTypes.bool.isRequired,
|
|
86
89
|
logoOnMobile: PropTypes.bool.isRequired,
|
|
87
90
|
logoOnDesktop: PropTypes.bool,
|
|
88
91
|
logoOnMobileUrl: PropTypes.string,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["React","useState","useEffect","PropTypes","BlazeButton","classnames","useRouter","MdMenu","MdClose","Link","MenuContext","BlazeLink","Menu","children","collapse","modifier","mobileMenuModifier","mobileMenuChildrenModifier","mobileIconAlignment","mobileButtonModifier","hamburgerIconModifier","logoOnMobile","logoOnDesktop","logoOnMobileUrl","logoOnMobileAlt","logoOnMobileModifier","logoOnDesktopModifier","closeIconModifier","router","showMobileMenu","setShowMobileMenu","handleRouteChange","events","on","off","shouldDisplayChildren","childModifiers","isMobileMenuExpanded","menuWrapperClasses","createElement","Provider","value","className","onClick","label","href","name","src","alt","propTypes","bool","isRequired","string","oneOfType","arrayOf","node","defaultProps"],"sources":["../../../src/components/Menu/Menu.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport BlazeButton from '@blaze-react/button';\nimport classnames from 'classnames';\nimport { useRouter } from 'next/router';\nimport { MdMenu, MdClose } from 'react-icons/md';\nimport { Link } from '@blaze-cms/nextjs-components';\nimport MenuContext from './MenuContext';\nimport BlazeLink from '../BlazeLink';\n\nconst Menu = ({\n children,\n collapse,\n modifier,\n mobileMenuModifier,\n mobileMenuChildrenModifier,\n mobileIconAlignment,\n mobileButtonModifier,\n hamburgerIconModifier,\n logoOnMobile,\n logoOnDesktop,\n logoOnMobileUrl,\n logoOnMobileAlt,\n logoOnMobileModifier,\n logoOnDesktopModifier,\n closeIconModifier\n}) => {\n const router = useRouter();\n const [showMobileMenu, setShowMobileMenu] = useState(false);\n\n useEffect(() => {\n const handleRouteChange = () => setShowMobileMenu(false);\n router.events.on('routeChangeStart', handleRouteChange);\n\n return () => {\n router.events.off('routeChangeStart', handleRouteChange);\n };\n }, [router.events]);\n\n const shouldDisplayChildren = collapse ? showMobileMenu : true;\n\n const childModifiers = classnames({\n [mobileMenuChildrenModifier]: shouldDisplayChildren,\n [modifier]: !showMobileMenu\n });\n\n const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';\n const menuWrapperClasses = classnames('menu--wrapper', {\n 'menu--wrapper--mobile-open': showMobileMenu,\n 'menu--wrapper--mobile-closed': collapse && !showMobileMenu\n });\n\n return (\n <MenuContext.Provider value={{ showMobileMenu }}>\n <div className={menuWrapperClasses}>\n {collapse && (\n <div className=\"menu--mobile-wrapper\">\n <div\n className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>\n <BlazeButton\n className={`menu--mobile-button ${mobileButtonModifier}`}\n onClick={() => setShowMobileMenu(!showMobileMenu)}\n label={showMobileMenu ? 'Close mobile menu' : 'Open mobile menu'}>\n <i>\n {showMobileMenu ? (\n <MdClose className={closeIconModifier} />\n ) : (\n <MdMenu className={hamburgerIconModifier} />\n )}\n </i>\n </BlazeButton>\n </div>\n </div>\n )}\n {logoOnMobile && !showMobileMenu && (\n <Link href=\"/\" name=\"mobile menu\">\n <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />\n </Link>\n )}\n\n <div className=\"menu--desktop-wrapper\">\n <ul className={childModifiers}>\n {logoOnDesktop && (\n <BlazeLink href=\"/\" className=\"\">\n <img\n src={logoOnMobileUrl}\n alt={logoOnMobileAlt}\n className={logoOnDesktopModifier}\n />\n </BlazeLink>\n )}\n {children}\n </ul>\n </div>\n </div>\n </MenuContext.Provider>\n );\n};\n\nMenu.propTypes = {\n collapse: PropTypes.bool.isRequired,\n logoOnMobile: PropTypes.bool.isRequired,\n logoOnDesktop: PropTypes.bool,\n logoOnMobileUrl: PropTypes.string,\n logoOnMobileAlt: PropTypes.string,\n logoOnMobileModifier: PropTypes.string,\n logoOnDesktopModifier: PropTypes.string,\n hamburgerIconModifier: PropTypes.string,\n closeIconModifier: PropTypes.string,\n mobileButtonModifier: PropTypes.string,\n mobileMenuModifier: PropTypes.string,\n mobileMenuChildrenModifier: PropTypes.string,\n modifier: PropTypes.string,\n mobileIconAlignment: PropTypes.string,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n\nMenu.defaultProps = {\n logoOnDesktop: false,\n logoOnMobileUrl: '',\n logoOnMobileAlt: '',\n logoOnMobileModifier: '',\n logoOnDesktopModifier: '',\n hamburgerIconModifier: '',\n closeIconModifier: '',\n mobileButtonModifier: '',\n mobileIconAlignment: '',\n mobileMenuModifier: '',\n mobileMenuChildrenModifier: '',\n modifier: '',\n children: []\n};\n\nexport default Menu;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,WAAW,MAAM,qBAAqB;AAC7C,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,MAAM,EAAEC,OAAO,QAAQ,gBAAgB;AAChD,SAASC,IAAI,QAAQ,8BAA8B;AACnD,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,SAAS,MAAM,cAAc;AAEpC,MAAMC,IAAI,GAAGA,CAAC;EACZC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,kBAAkB;EAClBC,0BAA0B;EAC1BC,mBAAmB;EACnBC,oBAAoB;EACpBC,qBAAqB;EACrBC,YAAY;EACZC,aAAa;EACbC,eAAe;EACfC,eAAe;EACfC,oBAAoB;EACpBC,qBAAqB;EACrBC;AACF,CAAC,KAAK;EACJ,MAAMC,MAAM,
|
|
1
|
+
{"version":3,"file":"Menu.js","names":["React","useState","useEffect","PropTypes","BlazeButton","classnames","useRouter","MdMenu","MdClose","Link","MenuContext","BlazeLink","Menu","children","collapse","openActiveSubmenus","modifier","mobileMenuModifier","mobileMenuChildrenModifier","mobileIconAlignment","mobileButtonModifier","hamburgerIconModifier","logoOnMobile","logoOnDesktop","logoOnMobileUrl","logoOnMobileAlt","logoOnMobileModifier","logoOnDesktopModifier","closeIconModifier","router","showMobileMenu","setShowMobileMenu","handleRouteChange","events","on","off","shouldDisplayChildren","childModifiers","isMobileMenuExpanded","menuWrapperClasses","createElement","Provider","value","className","onClick","label","href","name","src","alt","propTypes","bool","isRequired","string","oneOfType","arrayOf","node","defaultProps"],"sources":["../../../src/components/Menu/Menu.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport BlazeButton from '@blaze-react/button';\nimport classnames from 'classnames';\nimport { useRouter } from 'next/router';\nimport { MdMenu, MdClose } from 'react-icons/md';\nimport { Link } from '@blaze-cms/nextjs-components';\nimport MenuContext from './MenuContext';\nimport BlazeLink from '../BlazeLink';\n\nconst Menu = ({\n children,\n collapse,\n openActiveSubmenus,\n modifier,\n mobileMenuModifier,\n mobileMenuChildrenModifier,\n mobileIconAlignment,\n mobileButtonModifier,\n hamburgerIconModifier,\n logoOnMobile,\n logoOnDesktop,\n logoOnMobileUrl,\n logoOnMobileAlt,\n logoOnMobileModifier,\n logoOnDesktopModifier,\n closeIconModifier\n}) => {\n const router = useRouter();\n const [showMobileMenu, setShowMobileMenu] = useState(false);\n\n useEffect(() => {\n const handleRouteChange = () => setShowMobileMenu(false);\n router.events.on('routeChangeStart', handleRouteChange);\n\n return () => {\n router.events.off('routeChangeStart', handleRouteChange);\n };\n }, [router.events]);\n\n const shouldDisplayChildren = collapse ? showMobileMenu : true;\n\n const childModifiers = classnames({\n [mobileMenuChildrenModifier]: shouldDisplayChildren,\n [modifier]: !showMobileMenu\n });\n\n const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';\n const menuWrapperClasses = classnames('menu--wrapper', {\n 'menu--wrapper--mobile-open': showMobileMenu,\n 'menu--wrapper--mobile-closed': collapse && !showMobileMenu\n });\n\n return (\n <MenuContext.Provider value={{ showMobileMenu, openActiveSubmenus }}>\n <div className={menuWrapperClasses}>\n {collapse && (\n <div className=\"menu--mobile-wrapper\">\n <div\n className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>\n <BlazeButton\n className={`menu--mobile-button ${mobileButtonModifier}`}\n onClick={() => setShowMobileMenu(!showMobileMenu)}\n label={showMobileMenu ? 'Close mobile menu' : 'Open mobile menu'}>\n <i>\n {showMobileMenu ? (\n <MdClose className={closeIconModifier} />\n ) : (\n <MdMenu className={hamburgerIconModifier} />\n )}\n </i>\n </BlazeButton>\n </div>\n </div>\n )}\n {logoOnMobile && !showMobileMenu && (\n <Link href=\"/\" name=\"mobile menu\">\n <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />\n </Link>\n )}\n\n <div className=\"menu--desktop-wrapper\">\n <ul className={childModifiers}>\n {logoOnDesktop && (\n <BlazeLink href=\"/\" className=\"\">\n <img\n src={logoOnMobileUrl}\n alt={logoOnMobileAlt}\n className={logoOnDesktopModifier}\n />\n </BlazeLink>\n )}\n {children}\n </ul>\n </div>\n </div>\n </MenuContext.Provider>\n );\n};\n\nMenu.propTypes = {\n collapse: PropTypes.bool.isRequired,\n openActiveSubmenus: PropTypes.bool.isRequired,\n logoOnMobile: PropTypes.bool.isRequired,\n logoOnDesktop: PropTypes.bool,\n logoOnMobileUrl: PropTypes.string,\n logoOnMobileAlt: PropTypes.string,\n logoOnMobileModifier: PropTypes.string,\n logoOnDesktopModifier: PropTypes.string,\n hamburgerIconModifier: PropTypes.string,\n closeIconModifier: PropTypes.string,\n mobileButtonModifier: PropTypes.string,\n mobileMenuModifier: PropTypes.string,\n mobileMenuChildrenModifier: PropTypes.string,\n modifier: PropTypes.string,\n mobileIconAlignment: PropTypes.string,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n\nMenu.defaultProps = {\n logoOnDesktop: false,\n logoOnMobileUrl: '',\n logoOnMobileAlt: '',\n logoOnMobileModifier: '',\n logoOnDesktopModifier: '',\n hamburgerIconModifier: '',\n closeIconModifier: '',\n mobileButtonModifier: '',\n mobileIconAlignment: '',\n mobileMenuModifier: '',\n mobileMenuChildrenModifier: '',\n modifier: '',\n children: []\n};\n\nexport default Menu;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContext.js","names":["React","MenuContext","createContext","showMobileMenu"],"sources":["../../../src/components/Menu/MenuContext.js"],"sourcesContent":["import React from 'react';\n\nconst MenuContext = React.createContext({ showMobileMenu: false });\n\nexport default MenuContext;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,WAAW,GAAGD,KAAK,CAACE,aAAa,CAAC;EAAEC,cAAc,EAAE;AAAM,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuContext.js","names":["React","MenuContext","createContext","showMobileMenu","openActiveSubmenus"],"sources":["../../../src/components/Menu/MenuContext.js"],"sourcesContent":["import React from 'react';\n\nconst MenuContext = React.createContext({ showMobileMenu: false, openActiveSubmenus: false });\n\nexport default MenuContext;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,WAAW,GAAGD,KAAK,CAACE,aAAa,CAAC;EAAEC,cAAc,EAAE,KAAK;EAAEC,kBAAkB,EAAE;AAAM,CAAC,CAAC;AAE7F,eAAeH,WAAW","ignoreList":[]}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
+
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
1
2
|
import React, { useState, useContext, useEffect } from 'react';
|
|
2
3
|
import PropTypes from 'prop-types';
|
|
3
4
|
import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
|
|
5
|
+
import classnames from 'classnames';
|
|
4
6
|
import { useRouter } from 'next/router';
|
|
5
7
|
import { useStringTemplate } from '@blaze-cms/utils-handlebars';
|
|
6
|
-
import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
|
|
8
|
+
import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN, CLICK } from '../../constants';
|
|
7
9
|
import { hasChildren } from '../../helpers';
|
|
8
10
|
import BlazeLink from '../BlazeLink';
|
|
9
11
|
import MenuContext from '../Menu/MenuContext';
|
|
10
|
-
import { injectHelperIntoTemplate } from './helpers';
|
|
12
|
+
import { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild } from './helpers';
|
|
11
13
|
const MenuItemRender = ({
|
|
12
14
|
children,
|
|
13
15
|
eventType,
|
|
@@ -16,10 +18,13 @@ const MenuItemRender = ({
|
|
|
16
18
|
url,
|
|
17
19
|
parent
|
|
18
20
|
}) => {
|
|
19
|
-
const
|
|
21
|
+
const router = useRouter();
|
|
20
22
|
const {
|
|
21
|
-
showMobileMenu
|
|
23
|
+
showMobileMenu,
|
|
24
|
+
openActiveSubmenus
|
|
22
25
|
} = useContext(MenuContext);
|
|
26
|
+
const isHoverEvent = eventType === HOVER;
|
|
27
|
+
const isClickEvent = eventType === CLICK;
|
|
23
28
|
const {
|
|
24
29
|
loading: loadingText,
|
|
25
30
|
data: [textToUse]
|
|
@@ -28,19 +33,21 @@ const MenuItemRender = ({
|
|
|
28
33
|
loading: loadingUrl,
|
|
29
34
|
data: [urlToUse]
|
|
30
35
|
} = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
36
|
+
const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;
|
|
37
|
+
const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;
|
|
38
|
+
const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;
|
|
34
39
|
const hasValidChildren = hasChildren(children);
|
|
40
|
+
const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
|
|
35
41
|
useEffect(() => {
|
|
36
|
-
if (!showMobileMenu) setDisplayChildren(false);
|
|
37
|
-
}, [showMobileMenu]);
|
|
42
|
+
if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);
|
|
43
|
+
}, [children, isClickEvent, loadingUrl, openActiveSubmenus, router, shouldPreOpen, showMobileMenu]);
|
|
38
44
|
useEffect(() => {
|
|
39
45
|
if (isHoverEvent) {
|
|
40
46
|
setDisplayChildren(false);
|
|
41
47
|
}
|
|
42
48
|
}, [router.asPath, isHoverEvent]);
|
|
43
49
|
if (loadingUrl || loadingText) return '';
|
|
50
|
+
const childrenDisplayClass = displayChildren ? '' : HIDDEN;
|
|
44
51
|
const handleItemEvent = ({
|
|
45
52
|
type
|
|
46
53
|
}) => {
|
|
@@ -58,18 +65,25 @@ const MenuItemRender = ({
|
|
|
58
65
|
setDisplayChildren(!displayChildren);
|
|
59
66
|
}
|
|
60
67
|
};
|
|
68
|
+
const menuItemLinkClassname = classnames('menu--item--link', {
|
|
69
|
+
'menu--item--link--active': isActive,
|
|
70
|
+
'menu--item--link--active-parent': isActiveParent
|
|
71
|
+
});
|
|
61
72
|
return /*#__PURE__*/React.createElement("li", {
|
|
62
73
|
className: modifier,
|
|
63
74
|
onMouseEnter: handleItemEvent,
|
|
64
75
|
onMouseLeave: handleItemEvent
|
|
65
76
|
}, /*#__PURE__*/React.createElement("div", {
|
|
66
|
-
className:
|
|
77
|
+
className: menuItemLinkClassname,
|
|
67
78
|
onClick: handleMobileClick,
|
|
68
79
|
role: !urlToUse && hasValidChildren ? 'button' : undefined,
|
|
69
80
|
tabIndex: !urlToUse && hasValidChildren ? 0 : undefined
|
|
70
81
|
}, urlToUse ? /*#__PURE__*/React.createElement(BlazeLink, {
|
|
71
82
|
href: urlToUse
|
|
72
|
-
}, textToUse) : /*#__PURE__*/React.createElement("span",
|
|
83
|
+
}, textToUse) : /*#__PURE__*/React.createElement("span", {
|
|
84
|
+
role: "button",
|
|
85
|
+
onClick: handleItemEvent
|
|
86
|
+
}, textToUse), hasValidChildren && /*#__PURE__*/React.createElement("i", {
|
|
73
87
|
role: "button",
|
|
74
88
|
className: "menu--item--link--icon",
|
|
75
89
|
onClick: e => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItemRender.js","names":["React","useState","useContext","useEffect","PropTypes","FaChevronDown","FaChevronUp","useRouter","useStringTemplate","HOVER","MOUSE_ENTER","MOUSE_LEAVE","HIDDEN","hasChildren","BlazeLink","MenuContext","injectHelperIntoTemplate","MenuItemRender","children","eventType","text","modifier","url","parent","
|
|
1
|
+
{"version":3,"file":"MenuItemRender.js","names":["React","useState","useContext","useEffect","PropTypes","FaChevronDown","FaChevronUp","classnames","useRouter","useStringTemplate","HOVER","MOUSE_ENTER","MOUSE_LEAVE","HIDDEN","CLICK","hasChildren","BlazeLink","MenuContext","injectHelperIntoTemplate","isUrlPathMatch","hasActiveChild","MenuItemRender","children","eventType","text","modifier","url","parent","router","showMobileMenu","openActiveSubmenus","isHoverEvent","isClickEvent","loading","loadingText","data","textToUse","loadingUrl","urlToUse","isActive","asPath","isActiveParent","shouldPreOpen","hasValidChildren","displayChildren","setDisplayChildren","childrenDisplayClass","handleItemEvent","type","handleMobileClick","menuItemLinkClassname","createElement","className","onMouseEnter","onMouseLeave","onClick","role","undefined","tabIndex","href","e","stopPropagation","propTypes","string","isRequired","object","oneOfType","arrayOf","node","defaultProps"],"sources":["../../../src/components/MenuItem/MenuItemRender.js"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useState, useContext, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { FaChevronDown, FaChevronUp } from 'react-icons/fa';\nimport classnames from 'classnames';\nimport { useRouter } from 'next/router';\nimport { useStringTemplate } from '@blaze-cms/utils-handlebars';\nimport { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN, CLICK } from '../../constants';\nimport { hasChildren } from '../../helpers';\nimport BlazeLink from '../BlazeLink';\nimport MenuContext from '../Menu/MenuContext';\nimport { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild } from './helpers';\n\nconst MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {\n const router = useRouter();\n const { showMobileMenu, openActiveSubmenus } = useContext(MenuContext);\n\n const isHoverEvent = eventType === HOVER;\n const isClickEvent = eventType === CLICK;\n\n const {\n loading: loadingText,\n data: [textToUse]\n } = useStringTemplate(parent, [text]);\n const {\n loading: loadingUrl,\n data: [urlToUse]\n } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);\n\n const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;\n const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;\n const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;\n const hasValidChildren = hasChildren(children);\n\n const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);\n\n useEffect(() => {\n if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);\n }, [\n children,\n isClickEvent,\n loadingUrl,\n openActiveSubmenus,\n router,\n shouldPreOpen,\n showMobileMenu\n ]);\n\n useEffect(() => {\n if (isHoverEvent) {\n setDisplayChildren(false);\n }\n }, [router.asPath, isHoverEvent]);\n\n if (loadingUrl || loadingText) return '';\n\n const childrenDisplayClass = displayChildren ? '' : HIDDEN;\n\n const handleItemEvent = ({ type }) => {\n if (isHoverEvent) {\n if (type === MOUSE_ENTER) {\n setDisplayChildren(true);\n }\n if (type === MOUSE_LEAVE) {\n setDisplayChildren(false);\n }\n }\n };\n\n const handleMobileClick = () => {\n if (!urlToUse && hasValidChildren) {\n setDisplayChildren(!displayChildren);\n }\n };\n\n const menuItemLinkClassname = classnames('menu--item--link', {\n 'menu--item--link--active': isActive,\n 'menu--item--link--active-parent': isActiveParent\n });\n\n return (\n <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>\n <div\n className={menuItemLinkClassname}\n onClick={handleMobileClick}\n role={!urlToUse && hasValidChildren ? 'button' : undefined}\n tabIndex={!urlToUse && hasValidChildren ? 0 : undefined}>\n {urlToUse ? (\n <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>\n ) : (\n <span role=\"button\" onClick={handleItemEvent}>\n {textToUse}\n </span>\n )}\n {hasValidChildren && (\n <i\n role=\"button\"\n className=\"menu--item--link--icon\"\n onClick={e => {\n e.stopPropagation();\n setDisplayChildren(!displayChildren);\n }}\n tabIndex={0}>\n {displayChildren ? <FaChevronUp /> : <FaChevronDown />}\n </i>\n )}\n </div>\n\n {hasValidChildren && (\n <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>\n )}\n </li>\n );\n};\n\nMenuItemRender.propTypes = {\n modifier: PropTypes.string,\n text: PropTypes.string,\n url: PropTypes.string,\n eventType: PropTypes.string.isRequired,\n parent: PropTypes.object,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n\nMenuItemRender.defaultProps = {\n url: '',\n modifier: '',\n text: '',\n children: null,\n parent: {}\n};\n\nexport default MenuItemRender;\n"],"mappings":"AAAA;AACA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,UAAU,EAAEC,SAAS,QAAQ,OAAO;AAC9D,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,aAAa,EAAEC,WAAW,QAAQ,gBAAgB;AAC3D,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,KAAK,EAAEC,WAAW,EAAEC,WAAW,EAAEC,MAAM,EAAEC,KAAK,QAAQ,iBAAiB;AAChF,SAASC,WAAW,QAAQ,eAAe;AAC3C,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,WAAW,MAAM,qBAAqB;AAC7C,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,cAAc,QAAQ,WAAW;AAEpF,MAAMC,cAAc,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,GAAG;EAAEC;AAAO,CAAC,KAAK;EAC/E,MAAMC,MAAM,GAAGpB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEqB,cAAc;IAAEC;EAAmB,CAAC,GAAG5B,UAAU,CAACe,WAAW,CAAC;EAEtE,MAAMc,YAAY,GAAGR,SAAS,KAAKb,KAAK;EACxC,MAAMsB,YAAY,GAAGT,SAAS,KAAKT,KAAK;EAExC,MAAM;IACJmB,OAAO,EAAEC,WAAW;IACpBC,IAAI,EAAE,CAACC,SAAS;EAClB,CAAC,GAAG3B,iBAAiB,CAACkB,MAAM,EAAE,CAACH,IAAI,CAAC,CAAC;EACrC,MAAM;IACJS,OAAO,EAAEI,UAAU;IACnBF,IAAI,EAAE,CAACG,QAAQ;EACjB,CAAC,GAAG7B,iBAAiB,CAACkB,MAAM,EAAE,CAACT,wBAAwB,CAACQ,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC;EAE5E,MAAMa,QAAQ,GAAGX,MAAM,GAAGT,cAAc,CAACS,MAAM,CAACY,MAAM,EAAEF,QAAQ,CAAC,GAAG,KAAK;EACzE,MAAMG,cAAc,GAAGb,MAAM,GAAGR,cAAc,CAACQ,MAAM,CAACY,MAAM,EAAElB,QAAQ,CAAC,GAAG,KAAK;EAC/E,MAAMoB,aAAa,GAAGZ,kBAAkB,IAAIW,cAAc,IAAIT,YAAY;EAC1E,MAAMW,gBAAgB,GAAG5B,WAAW,CAACO,QAAQ,CAAC;EAE9C,MAAM,CAACsB,eAAe,EAAEC,kBAAkB,CAAC,GAAG5C,QAAQ,CAACyC,aAAa,CAAC;EAErEvC,SAAS,CAAC,MAAM;IACd,IAAI,CAAC0B,cAAc,IAAI,CAACa,aAAa,EAAEG,kBAAkB,CAAC,KAAK,CAAC;EAClE,CAAC,EAAE,CACDvB,QAAQ,EACRU,YAAY,EACZK,UAAU,EACVP,kBAAkB,EAClBF,MAAM,EACNc,aAAa,EACbb,cAAc,CACf,CAAC;EAEF1B,SAAS,CAAC,MAAM;IACd,IAAI4B,YAAY,EAAE;MAChBc,kBAAkB,CAAC,KAAK,CAAC;IAC3B;EACF,CAAC,EAAE,CAACjB,MAAM,CAACY,MAAM,EAAET,YAAY,CAAC,CAAC;EAEjC,IAAIM,UAAU,IAAIH,WAAW,EAAE,OAAO,EAAE;EAExC,MAAMY,oBAAoB,GAAGF,eAAe,GAAG,EAAE,GAAG/B,MAAM;EAE1D,MAAMkC,eAAe,GAAGA,CAAC;IAAEC;EAAK,CAAC,KAAK;IACpC,IAAIjB,YAAY,EAAE;MAChB,IAAIiB,IAAI,KAAKrC,WAAW,EAAE;QACxBkC,kBAAkB,CAAC,IAAI,CAAC;MAC1B;MACA,IAAIG,IAAI,KAAKpC,WAAW,EAAE;QACxBiC,kBAAkB,CAAC,KAAK,CAAC;MAC3B;IACF;EACF,CAAC;EAED,MAAMI,iBAAiB,GAAGA,CAAA,KAAM;IAC9B,IAAI,CAACX,QAAQ,IAAIK,gBAAgB,EAAE;MACjCE,kBAAkB,CAAC,CAACD,eAAe,CAAC;IACtC;EACF,CAAC;EAED,MAAMM,qBAAqB,GAAG3C,UAAU,CAAC,kBAAkB,EAAE;IAC3D,0BAA0B,EAAEgC,QAAQ;IACpC,iCAAiC,EAAEE;EACrC,CAAC,CAAC;EAEF,oBACEzC,KAAA,CAAAmD,aAAA;IAAIC,SAAS,EAAE3B,QAAS;IAAC4B,YAAY,EAAEN,eAAgB;IAACO,YAAY,EAAEP;EAAgB,gBACpF/C,KAAA,CAAAmD,aAAA;IACEC,SAAS,EAAEF,qBAAsB;IACjCK,OAAO,EAAEN,iBAAkB;IAC3BO,IAAI,EAAE,CAAClB,QAAQ,IAAIK,gBAAgB,GAAG,QAAQ,GAAGc,SAAU;IAC3DC,QAAQ,EAAE,CAACpB,QAAQ,IAAIK,gBAAgB,GAAG,CAAC,GAAGc;EAAU,GACvDnB,QAAQ,gBACPtC,KAAA,CAAAmD,aAAA,CAACnC,SAAS;IAAC2C,IAAI,EAAErB;EAAS,GAAEF,SAAqB,CAAC,gBAElDpC,KAAA,CAAAmD,aAAA;IAAMK,IAAI,EAAC,QAAQ;IAACD,OAAO,EAAER;EAAgB,GAC1CX,SACG,CACP,EACAO,gBAAgB,iBACf3C,KAAA,CAAAmD,aAAA;IACEK,IAAI,EAAC,QAAQ;IACbJ,SAAS,EAAC,wBAAwB;IAClCG,OAAO,EAAEK,CAAC,IAAI;MACZA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBhB,kBAAkB,CAAC,CAACD,eAAe,CAAC;IACtC,CAAE;IACFc,QAAQ,EAAE;EAAE,GACXd,eAAe,gBAAG5C,KAAA,CAAAmD,aAAA,CAAC7C,WAAW,MAAE,CAAC,gBAAGN,KAAA,CAAAmD,aAAA,CAAC9C,aAAa,MAAE,CACpD,CAEF,CAAC,EAELsC,gBAAgB,iBACf3C,KAAA,CAAAmD,aAAA;IAAKC,SAAS,EAAE,uBAAuBN,oBAAoB;EAAG,GAAExB,QAAc,CAE9E,CAAC;AAET,CAAC;AAEDD,cAAc,CAACyC,SAAS,GAAG;EACzBrC,QAAQ,EAAErB,SAAS,CAAC2D,MAAM;EAC1BvC,IAAI,EAAEpB,SAAS,CAAC2D,MAAM;EACtBrC,GAAG,EAAEtB,SAAS,CAAC2D,MAAM;EACrBxC,SAAS,EAAEnB,SAAS,CAAC2D,MAAM,CAACC,UAAU;EACtCrC,MAAM,EAAEvB,SAAS,CAAC6D,MAAM;EACxB3C,QAAQ,EAAElB,SAAS,CAAC8D,SAAS,CAAC,CAAC9D,SAAS,CAAC+D,OAAO,CAAC/D,SAAS,CAACgE,IAAI,CAAC,EAAEhE,SAAS,CAACgE,IAAI,CAAC;AACnF,CAAC;AAED/C,cAAc,CAACgD,YAAY,GAAG;EAC5B3C,GAAG,EAAE,EAAE;EACPD,QAAQ,EAAE,EAAE;EACZD,IAAI,EAAE,EAAE;EACRF,QAAQ,EAAE,IAAI;EACdK,MAAM,EAAE,CAAC;AACX,CAAC;AAED,eAAeN,cAAc","ignoreList":[]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import isUrlPathMatch from './isUrlPathMatch';
|
|
2
|
+
import { hasChildren } from '../../../helpers';
|
|
3
|
+
const hasActiveChild = (path, children) => hasChildren(children) && children.props.children[1][0].props.component.items.find(menuItem => isUrlPathMatch(path, menuItem.settings.url));
|
|
4
|
+
export default hasActiveChild;
|
|
5
|
+
//# sourceMappingURL=has-active-child.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"has-active-child.js","names":["isUrlPathMatch","hasChildren","hasActiveChild","path","children","props","component","items","find","menuItem","settings","url"],"sources":["../../../../src/components/MenuItem/helpers/has-active-child.js"],"sourcesContent":["import isUrlPathMatch from './isUrlPathMatch';\nimport { hasChildren } from '../../../helpers';\n\nconst hasActiveChild = (path, children) =>\n hasChildren(children) &&\n children.props.children[1][0].props.component.items.find(menuItem =>\n isUrlPathMatch(path, menuItem.settings.url)\n );\n\nexport default hasActiveChild;\n"],"mappings":"AAAA,OAAOA,cAAc,MAAM,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,kBAAkB;AAE9C,MAAMC,cAAc,GAAGA,CAACC,IAAI,EAAEC,QAAQ,KACpCH,WAAW,CAACG,QAAQ,CAAC,IACrBA,QAAQ,CAACC,KAAK,CAACD,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAACC,KAAK,CAACC,SAAS,CAACC,KAAK,CAACC,IAAI,CAACC,QAAQ,IAC/DT,cAAc,CAACG,IAAI,EAAEM,QAAQ,CAACC,QAAQ,CAACC,GAAG,CAC5C,CAAC;AAEH,eAAeT,cAAc","ignoreList":[]}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import injectHelperIntoTemplate from './inject-helper-into-template';
|
|
2
|
-
|
|
2
|
+
import isUrlPathMatch from './isUrlPathMatch';
|
|
3
|
+
import hasActiveChild from './has-active-child';
|
|
4
|
+
export { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild };
|
|
3
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["injectHelperIntoTemplate"],"sources":["../../../../src/components/MenuItem/helpers/index.js"],"sourcesContent":["import injectHelperIntoTemplate from './inject-helper-into-template';\n\nexport { injectHelperIntoTemplate };\n"],"mappings":"AAAA,OAAOA,wBAAwB,MAAM,+BAA+B;
|
|
1
|
+
{"version":3,"file":"index.js","names":["injectHelperIntoTemplate","isUrlPathMatch","hasActiveChild"],"sources":["../../../../src/components/MenuItem/helpers/index.js"],"sourcesContent":["import injectHelperIntoTemplate from './inject-helper-into-template';\nimport isUrlPathMatch from './isUrlPathMatch';\nimport hasActiveChild from './has-active-child';\n\nexport { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild };\n"],"mappings":"AAAA,OAAOA,wBAAwB,MAAM,+BAA+B;AACpE,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,cAAc,MAAM,oBAAoB;AAE/C,SAASF,wBAAwB,EAAEC,cAAc,EAAEC,cAAc","ignoreList":[]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
const isUrlPathMatch = (path, itemUrl) => {
|
|
2
|
+
if (!itemUrl || !path) return false;
|
|
3
|
+
const reg = new RegExp(/^[^#?]+/);
|
|
4
|
+
const _path = reg.exec(path)[0];
|
|
5
|
+
return _path === itemUrl || _path === `/${itemUrl}`;
|
|
6
|
+
};
|
|
7
|
+
export default isUrlPathMatch;
|
|
8
|
+
//# sourceMappingURL=isUrlPathMatch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isUrlPathMatch.js","names":["isUrlPathMatch","path","itemUrl","reg","RegExp","_path","exec"],"sources":["../../../../src/components/MenuItem/helpers/isUrlPathMatch.js"],"sourcesContent":["const isUrlPathMatch = (path, itemUrl) => {\n if (!itemUrl || !path) return false;\n\n const reg = new RegExp(/^[^#?]+/);\n const _path = reg.exec(path)[0];\n\n return _path === itemUrl || _path === `/${itemUrl}`;\n};\n\nexport default isUrlPathMatch;\n"],"mappings":"AAAA,MAAMA,cAAc,GAAGA,CAACC,IAAI,EAAEC,OAAO,KAAK;EACxC,IAAI,CAACA,OAAO,IAAI,CAACD,IAAI,EAAE,OAAO,KAAK;EAEnC,MAAME,GAAG,GAAG,IAAIC,MAAM,CAAC,SAAS,CAAC;EACjC,MAAMC,KAAK,GAAGF,GAAG,CAACG,IAAI,CAACL,IAAI,CAAC,CAAC,CAAC,CAAC;EAE/B,OAAOI,KAAK,KAAKH,OAAO,IAAIG,KAAK,KAAK,IAAIH,OAAO,EAAE;AACrD,CAAC;AAED,eAAeF,cAAc","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blaze-cms/react-page-builder",
|
|
3
|
-
"version": "0.146.0-node18-tooltips.
|
|
3
|
+
"version": "0.146.0-node18-core-styles-tooltips.43",
|
|
4
4
|
"description": "Blaze react page builder",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-es/index.js",
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
},
|
|
28
28
|
"license": "GPL-3.0",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@blaze-cms/core-auth-ui": "0.146.0-node18-tooltips.
|
|
31
|
-
"@blaze-cms/core-errors": "0.146.0-node18-tooltips.
|
|
32
|
-
"@blaze-cms/core-errors-ui": "0.146.0-node18-tooltips.
|
|
30
|
+
"@blaze-cms/core-auth-ui": "0.146.0-node18-core-styles-tooltips.38",
|
|
31
|
+
"@blaze-cms/core-errors": "0.146.0-node18-core-styles-tooltips.3",
|
|
32
|
+
"@blaze-cms/core-errors-ui": "0.146.0-node18-core-styles-tooltips.3",
|
|
33
33
|
"@blaze-cms/image-cdn-react": "0.3.0-alpha.7",
|
|
34
|
-
"@blaze-cms/nextjs-components": "0.146.0-node18-tooltips.32",
|
|
35
|
-
"@blaze-cms/plugin-search-ui": "0.146.0-node18-tooltips.
|
|
36
|
-
"@blaze-cms/setup-ui": "0.146.0-node18-tooltips.
|
|
37
|
-
"@blaze-cms/utils": "0.146.0-node18-tooltips.
|
|
38
|
-
"@blaze-cms/utils-handlebars": "0.146.0-node18-tooltips.32",
|
|
34
|
+
"@blaze-cms/nextjs-components": "0.146.0-node18-core-styles-tooltips.32",
|
|
35
|
+
"@blaze-cms/plugin-search-ui": "0.146.0-node18-core-styles-tooltips.42",
|
|
36
|
+
"@blaze-cms/setup-ui": "0.146.0-node18-core-styles-tooltips.3",
|
|
37
|
+
"@blaze-cms/utils": "0.146.0-node18-core-styles-tooltips.38",
|
|
38
|
+
"@blaze-cms/utils-handlebars": "0.146.0-node18-core-styles-tooltips.32",
|
|
39
39
|
"@blaze-react/badge": "^0.7.0",
|
|
40
40
|
"@blaze-react/breadcrumb": "0.8.0-alpha.60",
|
|
41
41
|
"@blaze-react/button": "0.8.0-alpha.82",
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
"lib/*",
|
|
93
93
|
"lib-es/*"
|
|
94
94
|
],
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "9a441e54bcf76f099426d278c3a481b9d67dbeec"
|
|
96
96
|
}
|
|
@@ -11,6 +11,7 @@ import BlazeLink from '../BlazeLink';
|
|
|
11
11
|
const Menu = ({
|
|
12
12
|
children,
|
|
13
13
|
collapse,
|
|
14
|
+
openActiveSubmenus,
|
|
14
15
|
modifier,
|
|
15
16
|
mobileMenuModifier,
|
|
16
17
|
mobileMenuChildrenModifier,
|
|
@@ -51,7 +52,7 @@ const Menu = ({
|
|
|
51
52
|
});
|
|
52
53
|
|
|
53
54
|
return (
|
|
54
|
-
<MenuContext.Provider value={{ showMobileMenu }}>
|
|
55
|
+
<MenuContext.Provider value={{ showMobileMenu, openActiveSubmenus }}>
|
|
55
56
|
<div className={menuWrapperClasses}>
|
|
56
57
|
{collapse && (
|
|
57
58
|
<div className="menu--mobile-wrapper">
|
|
@@ -99,6 +100,7 @@ const Menu = ({
|
|
|
99
100
|
|
|
100
101
|
Menu.propTypes = {
|
|
101
102
|
collapse: PropTypes.bool.isRequired,
|
|
103
|
+
openActiveSubmenus: PropTypes.bool.isRequired,
|
|
102
104
|
logoOnMobile: PropTypes.bool.isRequired,
|
|
103
105
|
logoOnDesktop: PropTypes.bool,
|
|
104
106
|
logoOnMobileUrl: PropTypes.string,
|
|
@@ -1,17 +1,23 @@
|
|
|
1
|
+
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
1
2
|
import React, { useState, useContext, useEffect } from 'react';
|
|
2
3
|
import PropTypes from 'prop-types';
|
|
3
4
|
import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
|
|
5
|
+
import classnames from 'classnames';
|
|
4
6
|
import { useRouter } from 'next/router';
|
|
5
7
|
import { useStringTemplate } from '@blaze-cms/utils-handlebars';
|
|
6
|
-
import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
|
|
8
|
+
import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN, CLICK } from '../../constants';
|
|
7
9
|
import { hasChildren } from '../../helpers';
|
|
8
10
|
import BlazeLink from '../BlazeLink';
|
|
9
11
|
import MenuContext from '../Menu/MenuContext';
|
|
10
|
-
import { injectHelperIntoTemplate } from './helpers';
|
|
12
|
+
import { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild } from './helpers';
|
|
11
13
|
|
|
12
14
|
const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
|
|
13
|
-
const
|
|
14
|
-
const { showMobileMenu } = useContext(MenuContext);
|
|
15
|
+
const router = useRouter();
|
|
16
|
+
const { showMobileMenu, openActiveSubmenus } = useContext(MenuContext);
|
|
17
|
+
|
|
18
|
+
const isHoverEvent = eventType === HOVER;
|
|
19
|
+
const isClickEvent = eventType === CLICK;
|
|
20
|
+
|
|
15
21
|
const {
|
|
16
22
|
loading: loadingText,
|
|
17
23
|
data: [textToUse]
|
|
@@ -21,14 +27,24 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
|
|
|
21
27
|
data: [urlToUse]
|
|
22
28
|
} = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
|
|
23
29
|
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
const
|
|
30
|
+
const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;
|
|
31
|
+
const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;
|
|
32
|
+
const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;
|
|
27
33
|
const hasValidChildren = hasChildren(children);
|
|
28
34
|
|
|
35
|
+
const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
|
|
36
|
+
|
|
29
37
|
useEffect(() => {
|
|
30
|
-
if (!showMobileMenu) setDisplayChildren(false);
|
|
31
|
-
}, [
|
|
38
|
+
if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);
|
|
39
|
+
}, [
|
|
40
|
+
children,
|
|
41
|
+
isClickEvent,
|
|
42
|
+
loadingUrl,
|
|
43
|
+
openActiveSubmenus,
|
|
44
|
+
router,
|
|
45
|
+
shouldPreOpen,
|
|
46
|
+
showMobileMenu
|
|
47
|
+
]);
|
|
32
48
|
|
|
33
49
|
useEffect(() => {
|
|
34
50
|
if (isHoverEvent) {
|
|
@@ -38,6 +54,8 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
|
|
|
38
54
|
|
|
39
55
|
if (loadingUrl || loadingText) return '';
|
|
40
56
|
|
|
57
|
+
const childrenDisplayClass = displayChildren ? '' : HIDDEN;
|
|
58
|
+
|
|
41
59
|
const handleItemEvent = ({ type }) => {
|
|
42
60
|
if (isHoverEvent) {
|
|
43
61
|
if (type === MOUSE_ENTER) {
|
|
@@ -55,15 +73,25 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
|
|
|
55
73
|
}
|
|
56
74
|
};
|
|
57
75
|
|
|
76
|
+
const menuItemLinkClassname = classnames('menu--item--link', {
|
|
77
|
+
'menu--item--link--active': isActive,
|
|
78
|
+
'menu--item--link--active-parent': isActiveParent
|
|
79
|
+
});
|
|
80
|
+
|
|
58
81
|
return (
|
|
59
82
|
<li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
|
|
60
83
|
<div
|
|
61
|
-
className=
|
|
84
|
+
className={menuItemLinkClassname}
|
|
62
85
|
onClick={handleMobileClick}
|
|
63
86
|
role={!urlToUse && hasValidChildren ? 'button' : undefined}
|
|
64
87
|
tabIndex={!urlToUse && hasValidChildren ? 0 : undefined}>
|
|
65
|
-
{urlToUse ?
|
|
66
|
-
|
|
88
|
+
{urlToUse ? (
|
|
89
|
+
<BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
|
|
90
|
+
) : (
|
|
91
|
+
<span role="button" onClick={handleItemEvent}>
|
|
92
|
+
{textToUse}
|
|
93
|
+
</span>
|
|
94
|
+
)}
|
|
67
95
|
{hasValidChildren && (
|
|
68
96
|
<i
|
|
69
97
|
role="button"
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import isUrlPathMatch from './isUrlPathMatch';
|
|
2
|
+
import { hasChildren } from '../../../helpers';
|
|
3
|
+
|
|
4
|
+
const hasActiveChild = (path, children) =>
|
|
5
|
+
hasChildren(children) &&
|
|
6
|
+
children.props.children[1][0].props.component.items.find(menuItem =>
|
|
7
|
+
isUrlPathMatch(path, menuItem.settings.url)
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
export default hasActiveChild;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import injectHelperIntoTemplate from './inject-helper-into-template';
|
|
2
|
+
import isUrlPathMatch from './isUrlPathMatch';
|
|
3
|
+
import hasActiveChild from './has-active-child';
|
|
2
4
|
|
|
3
|
-
export { injectHelperIntoTemplate };
|
|
5
|
+
export { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild };
|
|
@@ -19,6 +19,11 @@ jest.mock('next/router', () => ({
|
|
|
19
19
|
useRouter: () => ({ asPath: '/' })
|
|
20
20
|
}));
|
|
21
21
|
|
|
22
|
+
// todo: add extra tests to support this util
|
|
23
|
+
jest.mock('../../../../../src/components/MenuItem/helpers/has-active-child', () =>
|
|
24
|
+
jest.fn(() => false)
|
|
25
|
+
);
|
|
26
|
+
|
|
22
27
|
const componentProps = {
|
|
23
28
|
id: 'id',
|
|
24
29
|
name: 'mock name',
|
|
@@ -11,14 +11,22 @@ const MENU_ITEM_CHILDREN_CLASS = 'menu--item-children';
|
|
|
11
11
|
|
|
12
12
|
let mockAsPathValue = '/';
|
|
13
13
|
|
|
14
|
-
jest.mock('next/router', () =>
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
jest.mock('next/router', () => {
|
|
15
|
+
const router = { asPath: mockAsPathValue };
|
|
16
|
+
return {
|
|
17
|
+
useRouter: () => router
|
|
18
|
+
};
|
|
19
|
+
});
|
|
17
20
|
|
|
18
21
|
jest.mock('@blaze-cms/utils-handlebars', () => ({
|
|
19
22
|
useStringTemplate: jest.fn((parent, [title]) => ({ loading: false, data: [title] }))
|
|
20
23
|
}));
|
|
21
24
|
|
|
25
|
+
// todo: add extra tests to support this util
|
|
26
|
+
jest.mock('../../../../../src/components/MenuItem/helpers/has-active-child', () =>
|
|
27
|
+
jest.fn(() => false)
|
|
28
|
+
);
|
|
29
|
+
|
|
22
30
|
describe('MenuRender component', () => {
|
|
23
31
|
it('renders menu item with link when URL is provided', () => {
|
|
24
32
|
const { getByText } = render(<MenuRender eventType="click" text="Home" url="/home" />);
|