@blaze-cms/react-page-builder 0.124.0-alpha.35 → 0.124.0-alpha.36
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 +11 -0
- package/lib/components/Menu/Menu.js +18 -19
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib-es/components/Menu/Menu.js +33 -35
- package/lib-es/components/Menu/Menu.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Menu/Menu.js +17 -20
- package/tests/unit/src/components/Menu/__snapshots__/Menu.test.js.snap +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.124.0-alpha.36](https://github.com/thebyte9/blaze/compare/v0.124.0-alpha.35...v0.124.0-alpha.36) (2022-06-28)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* make menu responsive using css ([#3526](https://github.com/thebyte9/blaze/issues/3526)) ([e8a7f45](https://github.com/thebyte9/blaze/commit/e8a7f45e22d4e31a106bff1b06ab25775a2a13ce))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [0.124.0-alpha.35](https://github.com/thebyte9/blaze/compare/v0.124.0-alpha.34...v0.124.0-alpha.35) (2022-06-27)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -25,9 +25,9 @@ exports["default"] = void 0;
|
|
|
25
25
|
|
|
26
26
|
require("core-js/modules/es.array.concat.js");
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
29
29
|
|
|
30
|
-
var
|
|
30
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
31
31
|
|
|
32
32
|
var _react = _interopRequireWildcard(require("react"));
|
|
33
33
|
|
|
@@ -35,23 +35,23 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
35
35
|
|
|
36
36
|
var _button = _interopRequireDefault(require("@blaze-react/button"));
|
|
37
37
|
|
|
38
|
+
var _classnames2 = _interopRequireDefault(require("classnames"));
|
|
39
|
+
|
|
38
40
|
var _router = require("next/router");
|
|
39
41
|
|
|
40
42
|
var _md = require("react-icons/md");
|
|
41
43
|
|
|
42
|
-
var
|
|
43
|
-
|
|
44
|
-
var _constants = require("../../constants");
|
|
44
|
+
var _nextjsComponents = require("@blaze-cms/nextjs-components");
|
|
45
45
|
|
|
46
46
|
var _MenuContext = _interopRequireDefault(require("./MenuContext"));
|
|
47
47
|
|
|
48
|
-
var _excluded = ["children", "collapse", "modifier", "mobileMenuModifier", "mobileMenuChildrenModifier", "mobileIconAlignment", "mobileButtonModifier", "hamburgerIconModifier", "logoOnMobile", "logoOnDesktop", "logoOnMobileUrl", "logoOnMobileAlt", "logoOnMobileModifier", "logoOnDesktopModifier", "logoOnDesktopAlignment", "closeIconModifier"];
|
|
49
|
-
|
|
50
48
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
51
49
|
|
|
52
50
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
53
51
|
|
|
54
52
|
var Menu = function Menu(_ref) {
|
|
53
|
+
var _classnames;
|
|
54
|
+
|
|
55
55
|
var children = _ref.children,
|
|
56
56
|
collapse = _ref.collapse,
|
|
57
57
|
modifier = _ref.modifier,
|
|
@@ -67,10 +67,8 @@ var Menu = function Menu(_ref) {
|
|
|
67
67
|
logoOnMobileModifier = _ref.logoOnMobileModifier,
|
|
68
68
|
logoOnDesktopModifier = _ref.logoOnDesktopModifier,
|
|
69
69
|
logoOnDesktopAlignment = _ref.logoOnDesktopAlignment,
|
|
70
|
-
closeIconModifier = _ref.closeIconModifier
|
|
71
|
-
rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
70
|
+
closeIconModifier = _ref.closeIconModifier;
|
|
72
71
|
var router = (0, _router.useRouter)();
|
|
73
|
-
var isMobile = (0, _hooks.useCheckMobileScreen)();
|
|
74
72
|
|
|
75
73
|
var _useState = (0, _react.useState)(false),
|
|
76
74
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
@@ -87,24 +85,25 @@ var Menu = function Menu(_ref) {
|
|
|
87
85
|
router.events.off('routeChangeStart', handleRouteChange);
|
|
88
86
|
};
|
|
89
87
|
}, [router.events]);
|
|
90
|
-
var
|
|
91
|
-
var
|
|
92
|
-
var shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;
|
|
93
|
-
var childrenDesktopModifier = shouldDisplayChildren && !isMobile ? modifier : "".concat(modifier, " ").concat(_constants.HIDDEN);
|
|
94
|
-
var childrenMobileModifier = shouldDisplayChildren && isMobile ? "".concat(mobileMenuChildrenModifier) : " ".concat(_constants.HIDDEN);
|
|
88
|
+
var shouldDisplayChildren = collapse ? showMobileMenu : true;
|
|
89
|
+
var childModifiers = (0, _classnames2["default"])((_classnames = {}, (0, _defineProperty2["default"])(_classnames, mobileMenuChildrenModifier, shouldDisplayChildren), (0, _defineProperty2["default"])(_classnames, modifier, !showMobileMenu), _classnames));
|
|
95
90
|
var isMobileMenuExpanded = showMobileMenu ? "".concat(mobileMenuModifier) : '';
|
|
91
|
+
var menuWrapperClasses = (0, _classnames2["default"])('menu--wrapper', {
|
|
92
|
+
'menu--wrapper--mobile-open': showMobileMenu,
|
|
93
|
+
'menu--wrapper--mobile-closed': collapse && !showMobileMenu
|
|
94
|
+
});
|
|
96
95
|
return /*#__PURE__*/_react["default"].createElement(_MenuContext["default"].Provider, {
|
|
97
96
|
value: {
|
|
98
97
|
showMobileMenu: showMobileMenu
|
|
99
98
|
}
|
|
100
99
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
101
|
-
className:
|
|
100
|
+
className: menuWrapperClasses
|
|
102
101
|
}, collapse && /*#__PURE__*/_react["default"].createElement("div", {
|
|
103
102
|
className: "menu--mobile-wrapper"
|
|
104
103
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
105
104
|
className: "flex w-screen z-50 justify-".concat(mobileIconAlignment, " ").concat(isMobileMenuExpanded)
|
|
106
105
|
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
107
|
-
className:
|
|
106
|
+
className: "menu--mobile-button ".concat(mobileButtonModifier),
|
|
108
107
|
onClick: function onClick() {
|
|
109
108
|
return setShowMobileMenu(!showMobileMenu);
|
|
110
109
|
}
|
|
@@ -112,7 +111,7 @@ var Menu = function Menu(_ref) {
|
|
|
112
111
|
className: closeIconModifier
|
|
113
112
|
}) : /*#__PURE__*/_react["default"].createElement(_md.MdMenu, {
|
|
114
113
|
className: hamburgerIconModifier
|
|
115
|
-
}))))), logoOnMobile && !showMobileMenu && /*#__PURE__*/_react["default"].createElement(
|
|
114
|
+
}))))), logoOnMobile && !showMobileMenu && /*#__PURE__*/_react["default"].createElement(_nextjsComponents.Link, {
|
|
116
115
|
href: "/"
|
|
117
116
|
}, /*#__PURE__*/_react["default"].createElement("img", {
|
|
118
117
|
src: logoOnMobileUrl,
|
|
@@ -121,7 +120,7 @@ var Menu = function Menu(_ref) {
|
|
|
121
120
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
122
121
|
className: "menu--desktop-wrapper"
|
|
123
122
|
}, /*#__PURE__*/_react["default"].createElement("ul", {
|
|
124
|
-
className:
|
|
123
|
+
className: childModifiers
|
|
125
124
|
}, logoOnDesktop && /*#__PURE__*/_react["default"].createElement("a", {
|
|
126
125
|
href: "/",
|
|
127
126
|
className: ""
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["Menu","children","collapse","modifier","mobileMenuModifier","mobileMenuChildrenModifier","mobileIconAlignment","mobileButtonModifier","hamburgerIconModifier","logoOnMobile","logoOnDesktop","logoOnMobileUrl","logoOnMobileAlt","logoOnMobileModifier","logoOnDesktopModifier","logoOnDesktopAlignment","closeIconModifier","
|
|
1
|
+
{"version":3,"file":"Menu.js","names":["Menu","children","collapse","modifier","mobileMenuModifier","mobileMenuChildrenModifier","mobileIconAlignment","mobileButtonModifier","hamburgerIconModifier","logoOnMobile","logoOnDesktop","logoOnMobileUrl","logoOnMobileAlt","logoOnMobileModifier","logoOnDesktopModifier","logoOnDesktopAlignment","closeIconModifier","router","useRouter","useState","showMobileMenu","setShowMobileMenu","useEffect","handleRouteChange","events","on","off","shouldDisplayChildren","childModifiers","classnames","isMobileMenuExpanded","menuWrapperClasses","propTypes","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';\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 logoOnDesktopAlignment,\n closeIconModifier\n}) => {\n const router = useRouter();\n const [showMobileMenu, setShowMobileMenu] = useState(false);\n\n useEffect(\n () => {\n const handleRouteChange = () => setShowMobileMenu(false);\n router.events.on('routeChangeStart', handleRouteChange);\n\n return () => {\n router.events.off('routeChangeStart', handleRouteChange);\n };\n },\n [router.events]\n );\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 <i>\n {showMobileMenu ? (\n <MdClose className={closeIconModifier} />\n ) : (\n <MdMenu className={hamburgerIconModifier} />\n )}\n </i>\n </BlazeButton>\n </div>\n </div>\n )}\n {logoOnMobile &&\n !showMobileMenu && (\n <Link href=\"/\">\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 <a href=\"/\" className=\"\">\n <img\n src={logoOnMobileUrl}\n alt={logoOnMobileAlt}\n className={logoOnDesktopModifier}\n />\n </a>\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 logoOnDesktopAlignment: 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 logoOnDesktopAlignment: 'left',\n modifier: '',\n children: []\n};\n\nexport default Menu;\n"],"mappings":"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"}
|
|
@@ -1,37 +1,31 @@
|
|
|
1
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
2
|
-
const _excluded = ["children", "collapse", "modifier", "mobileMenuModifier", "mobileMenuChildrenModifier", "mobileIconAlignment", "mobileButtonModifier", "hamburgerIconModifier", "logoOnMobile", "logoOnDesktop", "logoOnMobileUrl", "logoOnMobileAlt", "logoOnMobileModifier", "logoOnDesktopModifier", "logoOnDesktopAlignment", "closeIconModifier"];
|
|
3
1
|
import React, { useState, useEffect } from 'react';
|
|
4
2
|
import PropTypes from 'prop-types';
|
|
5
3
|
import BlazeButton from '@blaze-react/button';
|
|
4
|
+
import classnames from 'classnames';
|
|
6
5
|
import { useRouter } from 'next/router';
|
|
7
6
|
import { MdMenu, MdClose } from 'react-icons/md';
|
|
8
|
-
import {
|
|
9
|
-
import { HIDDEN } from '../../constants';
|
|
7
|
+
import { Link } from '@blaze-cms/nextjs-components';
|
|
10
8
|
import MenuContext from './MenuContext';
|
|
11
9
|
|
|
12
|
-
const Menu =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
} = _ref,
|
|
31
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
32
|
-
|
|
10
|
+
const Menu = ({
|
|
11
|
+
children,
|
|
12
|
+
collapse,
|
|
13
|
+
modifier,
|
|
14
|
+
mobileMenuModifier,
|
|
15
|
+
mobileMenuChildrenModifier,
|
|
16
|
+
mobileIconAlignment,
|
|
17
|
+
mobileButtonModifier,
|
|
18
|
+
hamburgerIconModifier,
|
|
19
|
+
logoOnMobile,
|
|
20
|
+
logoOnDesktop,
|
|
21
|
+
logoOnMobileUrl,
|
|
22
|
+
logoOnMobileAlt,
|
|
23
|
+
logoOnMobileModifier,
|
|
24
|
+
logoOnDesktopModifier,
|
|
25
|
+
logoOnDesktopAlignment,
|
|
26
|
+
closeIconModifier
|
|
27
|
+
}) => {
|
|
33
28
|
const router = useRouter();
|
|
34
|
-
const isMobile = useCheckMobileScreen();
|
|
35
29
|
const [showMobileMenu, setShowMobileMenu] = useState(false);
|
|
36
30
|
useEffect(() => {
|
|
37
31
|
const handleRouteChange = () => setShowMobileMenu(false);
|
|
@@ -41,30 +35,34 @@ const Menu = _ref => {
|
|
|
41
35
|
router.events.off('routeChangeStart', handleRouteChange);
|
|
42
36
|
};
|
|
43
37
|
}, [router.events]);
|
|
44
|
-
const
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
38
|
+
const shouldDisplayChildren = collapse ? showMobileMenu : true;
|
|
39
|
+
const childModifiers = classnames({
|
|
40
|
+
[mobileMenuChildrenModifier]: shouldDisplayChildren,
|
|
41
|
+
[modifier]: !showMobileMenu
|
|
42
|
+
});
|
|
49
43
|
const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';
|
|
44
|
+
const menuWrapperClasses = classnames('menu--wrapper', {
|
|
45
|
+
'menu--wrapper--mobile-open': showMobileMenu,
|
|
46
|
+
'menu--wrapper--mobile-closed': collapse && !showMobileMenu
|
|
47
|
+
});
|
|
50
48
|
return /*#__PURE__*/React.createElement(MenuContext.Provider, {
|
|
51
49
|
value: {
|
|
52
50
|
showMobileMenu
|
|
53
51
|
}
|
|
54
52
|
}, /*#__PURE__*/React.createElement("div", {
|
|
55
|
-
className:
|
|
53
|
+
className: menuWrapperClasses
|
|
56
54
|
}, collapse && /*#__PURE__*/React.createElement("div", {
|
|
57
55
|
className: "menu--mobile-wrapper"
|
|
58
56
|
}, /*#__PURE__*/React.createElement("div", {
|
|
59
57
|
className: `flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`
|
|
60
58
|
}, /*#__PURE__*/React.createElement(BlazeButton, {
|
|
61
|
-
className:
|
|
59
|
+
className: `menu--mobile-button ${mobileButtonModifier}`,
|
|
62
60
|
onClick: () => setShowMobileMenu(!showMobileMenu)
|
|
63
61
|
}, /*#__PURE__*/React.createElement("i", null, showMobileMenu ? /*#__PURE__*/React.createElement(MdClose, {
|
|
64
62
|
className: closeIconModifier
|
|
65
63
|
}) : /*#__PURE__*/React.createElement(MdMenu, {
|
|
66
64
|
className: hamburgerIconModifier
|
|
67
|
-
}))))), logoOnMobile && !showMobileMenu && /*#__PURE__*/React.createElement(
|
|
65
|
+
}))))), logoOnMobile && !showMobileMenu && /*#__PURE__*/React.createElement(Link, {
|
|
68
66
|
href: "/"
|
|
69
67
|
}, /*#__PURE__*/React.createElement("img", {
|
|
70
68
|
src: logoOnMobileUrl,
|
|
@@ -73,7 +71,7 @@ const Menu = _ref => {
|
|
|
73
71
|
})), /*#__PURE__*/React.createElement("div", {
|
|
74
72
|
className: "menu--desktop-wrapper"
|
|
75
73
|
}, /*#__PURE__*/React.createElement("ul", {
|
|
76
|
-
className:
|
|
74
|
+
className: childModifiers
|
|
77
75
|
}, logoOnDesktop && /*#__PURE__*/React.createElement("a", {
|
|
78
76
|
href: "/",
|
|
79
77
|
className: ""
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["React","useState","useEffect","PropTypes","BlazeButton","useRouter","MdMenu","MdClose","
|
|
1
|
+
{"version":3,"file":"Menu.js","names":["React","useState","useEffect","PropTypes","BlazeButton","classnames","useRouter","MdMenu","MdClose","Link","MenuContext","Menu","children","collapse","modifier","mobileMenuModifier","mobileMenuChildrenModifier","mobileIconAlignment","mobileButtonModifier","hamburgerIconModifier","logoOnMobile","logoOnDesktop","logoOnMobileUrl","logoOnMobileAlt","logoOnMobileModifier","logoOnDesktopModifier","logoOnDesktopAlignment","closeIconModifier","router","showMobileMenu","setShowMobileMenu","handleRouteChange","events","on","off","shouldDisplayChildren","childModifiers","isMobileMenuExpanded","menuWrapperClasses","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';\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 logoOnDesktopAlignment,\n closeIconModifier\n}) => {\n const router = useRouter();\n const [showMobileMenu, setShowMobileMenu] = useState(false);\n\n useEffect(\n () => {\n const handleRouteChange = () => setShowMobileMenu(false);\n router.events.on('routeChangeStart', handleRouteChange);\n\n return () => {\n router.events.off('routeChangeStart', handleRouteChange);\n };\n },\n [router.events]\n );\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 <i>\n {showMobileMenu ? (\n <MdClose className={closeIconModifier} />\n ) : (\n <MdMenu className={hamburgerIconModifier} />\n )}\n </i>\n </BlazeButton>\n </div>\n </div>\n )}\n {logoOnMobile &&\n !showMobileMenu && (\n <Link href=\"/\">\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 <a href=\"/\" className=\"\">\n <img\n src={logoOnMobileUrl}\n alt={logoOnMobileAlt}\n className={logoOnDesktopModifier}\n />\n </a>\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 logoOnDesktopAlignment: 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 logoOnDesktopAlignment: 'left',\n modifier: '',\n children: []\n};\n\nexport default Menu;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blaze-cms/react-page-builder",
|
|
3
|
-
"version": "0.124.0-alpha.
|
|
3
|
+
"version": "0.124.0-alpha.36",
|
|
4
4
|
"description": "Blaze react page builder",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-es/index.js",
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"lib/*",
|
|
86
86
|
"lib-es/*"
|
|
87
87
|
],
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "288a5e42aa52b3cf13e04a0c310dab5729b248f7"
|
|
89
89
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import BlazeButton from '@blaze-react/button';
|
|
4
|
+
import classnames from 'classnames';
|
|
4
5
|
import { useRouter } from 'next/router';
|
|
5
6
|
import { MdMenu, MdClose } from 'react-icons/md';
|
|
6
|
-
import {
|
|
7
|
-
import { HIDDEN } from '../../constants';
|
|
7
|
+
import { Link } from '@blaze-cms/nextjs-components';
|
|
8
8
|
import MenuContext from './MenuContext';
|
|
9
9
|
|
|
10
10
|
const Menu = ({
|
|
@@ -23,11 +23,9 @@ const Menu = ({
|
|
|
23
23
|
logoOnMobileModifier,
|
|
24
24
|
logoOnDesktopModifier,
|
|
25
25
|
logoOnDesktopAlignment,
|
|
26
|
-
closeIconModifier
|
|
27
|
-
...rest
|
|
26
|
+
closeIconModifier
|
|
28
27
|
}) => {
|
|
29
28
|
const router = useRouter();
|
|
30
|
-
const isMobile = useCheckMobileScreen();
|
|
31
29
|
const [showMobileMenu, setShowMobileMenu] = useState(false);
|
|
32
30
|
|
|
33
31
|
useEffect(
|
|
@@ -42,29 +40,28 @@ const Menu = ({
|
|
|
42
40
|
[router.events]
|
|
43
41
|
);
|
|
44
42
|
|
|
45
|
-
const
|
|
43
|
+
const shouldDisplayChildren = collapse ? showMobileMenu : true;
|
|
46
44
|
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
const childrenDesktopModifier =
|
|
52
|
-
shouldDisplayChildren && !isMobile ? modifier : `${modifier} ${HIDDEN}`;
|
|
53
|
-
|
|
54
|
-
const childrenMobileModifier =
|
|
55
|
-
shouldDisplayChildren && isMobile ? `${mobileMenuChildrenModifier}` : ` ${HIDDEN}`;
|
|
45
|
+
const childModifiers = classnames({
|
|
46
|
+
[mobileMenuChildrenModifier]: shouldDisplayChildren,
|
|
47
|
+
[modifier]: !showMobileMenu
|
|
48
|
+
});
|
|
56
49
|
|
|
57
50
|
const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';
|
|
51
|
+
const menuWrapperClasses = classnames('menu--wrapper', {
|
|
52
|
+
'menu--wrapper--mobile-open': showMobileMenu,
|
|
53
|
+
'menu--wrapper--mobile-closed': collapse && !showMobileMenu
|
|
54
|
+
});
|
|
58
55
|
|
|
59
56
|
return (
|
|
60
57
|
<MenuContext.Provider value={{ showMobileMenu }}>
|
|
61
|
-
<div className=
|
|
58
|
+
<div className={menuWrapperClasses}>
|
|
62
59
|
{collapse && (
|
|
63
60
|
<div className="menu--mobile-wrapper">
|
|
64
61
|
<div
|
|
65
62
|
className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>
|
|
66
63
|
<BlazeButton
|
|
67
|
-
className={
|
|
64
|
+
className={`menu--mobile-button ${mobileButtonModifier}`}
|
|
68
65
|
onClick={() => setShowMobileMenu(!showMobileMenu)}>
|
|
69
66
|
<i>
|
|
70
67
|
{showMobileMenu ? (
|
|
@@ -79,13 +76,13 @@ const Menu = ({
|
|
|
79
76
|
)}
|
|
80
77
|
{logoOnMobile &&
|
|
81
78
|
!showMobileMenu && (
|
|
82
|
-
<
|
|
79
|
+
<Link href="/">
|
|
83
80
|
<img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />
|
|
84
|
-
</
|
|
81
|
+
</Link>
|
|
85
82
|
)}
|
|
86
83
|
|
|
87
84
|
<div className="menu--desktop-wrapper">
|
|
88
|
-
<ul className={
|
|
85
|
+
<ul className={childModifiers}>
|
|
89
86
|
{logoOnDesktop && (
|
|
90
87
|
<a href="/" className="">
|
|
91
88
|
<img
|