@blaze-cms/react-page-builder 0.118.0-alpha.2 → 0.118.0-alpha.3
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
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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.118.0-alpha.3](https://github.com/thebyte9/blaze/compare/v0.118.0-alpha.2...v0.118.0-alpha.3) (2022-01-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @blaze-cms/react-page-builder
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
# [0.118.0-alpha.2](https://github.com/thebyte9/blaze/compare/v0.118.0-alpha.1...v0.118.0-alpha.2) (2022-01-14)
|
|
7
15
|
|
|
8
16
|
|
|
@@ -27,6 +27,8 @@ require("core-js/modules/es.array.concat.js");
|
|
|
27
27
|
|
|
28
28
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
29
29
|
|
|
30
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
31
|
+
|
|
30
32
|
var _react = _interopRequireWildcard(require("react"));
|
|
31
33
|
|
|
32
34
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
@@ -39,6 +41,8 @@ var _hooks = require("../../hooks");
|
|
|
39
41
|
|
|
40
42
|
var _constants = require("../../constants");
|
|
41
43
|
|
|
44
|
+
var _excluded = ["children", "collapse", "modifier", "mobileMenuModifier", "mobileMenuChildrenModifier", "mobileIconAlignment", "mobileButtonModifier", "hamburgerIconModifier", "closeIconModifier"];
|
|
45
|
+
|
|
42
46
|
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); }
|
|
43
47
|
|
|
44
48
|
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; }
|
|
@@ -46,7 +50,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
46
50
|
var Menu = function Menu(_ref) {
|
|
47
51
|
var children = _ref.children,
|
|
48
52
|
collapse = _ref.collapse,
|
|
49
|
-
modifier = _ref.modifier
|
|
53
|
+
modifier = _ref.modifier,
|
|
54
|
+
mobileMenuModifier = _ref.mobileMenuModifier,
|
|
55
|
+
mobileMenuChildrenModifier = _ref.mobileMenuChildrenModifier,
|
|
56
|
+
mobileIconAlignment = _ref.mobileIconAlignment,
|
|
57
|
+
mobileButtonModifier = _ref.mobileButtonModifier,
|
|
58
|
+
hamburgerIconModifier = _ref.hamburgerIconModifier,
|
|
59
|
+
closeIconModifier = _ref.closeIconModifier,
|
|
60
|
+
rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
50
61
|
var isMobile = (0, _hooks.useCheckMobileScreen)();
|
|
51
62
|
|
|
52
63
|
var _useState = (0, _react.useState)(false),
|
|
@@ -55,25 +66,47 @@ var Menu = function Menu(_ref) {
|
|
|
55
66
|
setShowMobileMenu = _useState2[1];
|
|
56
67
|
|
|
57
68
|
var shouldDisplayCollapsed = collapse && isMobile;
|
|
58
|
-
var mobileButtonClass = shouldDisplayCollapsed && isMobile ?
|
|
69
|
+
var mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : _constants.HIDDEN;
|
|
59
70
|
var shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;
|
|
60
|
-
var
|
|
61
|
-
|
|
71
|
+
var childrenDesktopModifier = shouldDisplayChildren && !isMobile ? modifier : "".concat(modifier, " ").concat(_constants.HIDDEN);
|
|
72
|
+
var childrenMobileModifier = shouldDisplayChildren && isMobile ? "".concat(mobileMenuChildrenModifier) : " ".concat(_constants.HIDDEN);
|
|
73
|
+
var isMobileMenuExpanded = showMobileMenu ? "".concat(mobileMenuModifier) : '';
|
|
74
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, collapse && /*#__PURE__*/_react["default"].createElement("div", {
|
|
75
|
+
className: "top-0 absolute z-50"
|
|
76
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
77
|
+
className: "flex w-screen z-50 justify-".concat(mobileIconAlignment, " ").concat(isMobileMenuExpanded)
|
|
78
|
+
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
62
79
|
className: mobileButtonClass,
|
|
63
80
|
onClick: function onClick() {
|
|
64
81
|
return setShowMobileMenu(!showMobileMenu);
|
|
65
82
|
}
|
|
66
|
-
}, /*#__PURE__*/_react["default"].createElement("i", null, /*#__PURE__*/_react["default"].createElement(_md.
|
|
67
|
-
className:
|
|
83
|
+
}, /*#__PURE__*/_react["default"].createElement("i", null, showMobileMenu ? /*#__PURE__*/_react["default"].createElement(_md.MdClose, {
|
|
84
|
+
className: closeIconModifier
|
|
85
|
+
}) : /*#__PURE__*/_react["default"].createElement(_md.MdMenu, {
|
|
86
|
+
className: hamburgerIconModifier
|
|
87
|
+
}))))), /*#__PURE__*/_react["default"].createElement("ul", {
|
|
88
|
+
className: isMobile ? childrenMobileModifier : childrenDesktopModifier
|
|
68
89
|
}, children));
|
|
69
90
|
};
|
|
70
91
|
|
|
71
92
|
Menu.propTypes = {
|
|
72
93
|
collapse: _propTypes["default"].bool.isRequired,
|
|
94
|
+
hamburgerIconModifier: _propTypes["default"].string,
|
|
95
|
+
closeIconModifier: _propTypes["default"].string,
|
|
96
|
+
mobileButtonModifier: _propTypes["default"].string,
|
|
97
|
+
mobileMenuModifier: _propTypes["default"].string,
|
|
98
|
+
mobileMenuChildrenModifier: _propTypes["default"].string,
|
|
73
99
|
modifier: _propTypes["default"].string,
|
|
100
|
+
mobileIconAlignment: _propTypes["default"].string,
|
|
74
101
|
children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node])
|
|
75
102
|
};
|
|
76
103
|
Menu.defaultProps = {
|
|
104
|
+
hamburgerIconModifier: '',
|
|
105
|
+
closeIconModifier: '',
|
|
106
|
+
mobileButtonModifier: '',
|
|
107
|
+
mobileIconAlignment: '',
|
|
108
|
+
mobileMenuModifier: '',
|
|
109
|
+
mobileMenuChildrenModifier: '',
|
|
77
110
|
modifier: '',
|
|
78
111
|
children: []
|
|
79
112
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Menu/Menu.js"],"names":["Menu","children","collapse","modifier","isMobile","showMobileMenu","setShowMobileMenu","shouldDisplayCollapsed","mobileButtonClass","HIDDEN","shouldDisplayChildren","
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Menu/Menu.js"],"names":["Menu","children","collapse","modifier","mobileMenuModifier","mobileMenuChildrenModifier","mobileIconAlignment","mobileButtonModifier","hamburgerIconModifier","closeIconModifier","rest","isMobile","showMobileMenu","setShowMobileMenu","shouldDisplayCollapsed","mobileButtonClass","HIDDEN","shouldDisplayChildren","childrenDesktopModifier","childrenMobileModifier","isMobileMenuExpanded","propTypes","PropTypes","bool","isRequired","string","oneOfType","arrayOf","node","defaultProps"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport BlazeButton from '@blaze-react/button';\nimport { MdMenu, MdClose } from 'react-icons/md';\nimport { useCheckMobileScreen } from '../../hooks';\nimport { HIDDEN } from '../../constants';\n\nconst Menu = ({\n children,\n collapse,\n modifier,\n mobileMenuModifier,\n mobileMenuChildrenModifier,\n mobileIconAlignment,\n mobileButtonModifier,\n hamburgerIconModifier,\n closeIconModifier,\n ...rest\n}) => {\n const isMobile = useCheckMobileScreen();\n const [showMobileMenu, setShowMobileMenu] = useState(false);\n\n const shouldDisplayCollapsed = collapse && isMobile;\n const mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : HIDDEN;\n const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;\n const childrenDesktopModifier =\n shouldDisplayChildren && !isMobile ? modifier : `${modifier} ${HIDDEN}`;\n\n const childrenMobileModifier =\n shouldDisplayChildren && isMobile ? `${mobileMenuChildrenModifier}` : ` ${HIDDEN}`;\n\n const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';\n\n return (\n <>\n {collapse && (\n <div className=\"top-0 absolute z-50\">\n <div\n className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>\n <BlazeButton\n className={mobileButtonClass}\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 <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>{children}</ul>\n </>\n );\n};\n\nMenu.propTypes = {\n collapse: PropTypes.bool.isRequired,\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 hamburgerIconModifier: '',\n closeIconModifier: '',\n mobileButtonModifier: '',\n mobileIconAlignment: '',\n mobileMenuModifier: '',\n mobileMenuChildrenModifier: '',\n modifier: '',\n children: []\n};\n\nexport default Menu;\n"],"file":"Menu.js"}
|
|
@@ -1,35 +1,68 @@
|
|
|
1
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
2
|
+
const _excluded = ["children", "collapse", "modifier", "mobileMenuModifier", "mobileMenuChildrenModifier", "mobileIconAlignment", "mobileButtonModifier", "hamburgerIconModifier", "closeIconModifier"];
|
|
1
3
|
import React, { useState } from 'react';
|
|
2
4
|
import PropTypes from 'prop-types';
|
|
3
5
|
import BlazeButton from '@blaze-react/button';
|
|
4
|
-
import { MdMenu } from 'react-icons/md';
|
|
6
|
+
import { MdMenu, MdClose } from 'react-icons/md';
|
|
5
7
|
import { useCheckMobileScreen } from '../../hooks';
|
|
6
8
|
import { HIDDEN } from '../../constants';
|
|
7
9
|
|
|
8
|
-
const Menu =
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
const Menu = _ref => {
|
|
11
|
+
let {
|
|
12
|
+
children,
|
|
13
|
+
collapse,
|
|
14
|
+
modifier,
|
|
15
|
+
mobileMenuModifier,
|
|
16
|
+
mobileMenuChildrenModifier,
|
|
17
|
+
mobileIconAlignment,
|
|
18
|
+
mobileButtonModifier,
|
|
19
|
+
hamburgerIconModifier,
|
|
20
|
+
closeIconModifier
|
|
21
|
+
} = _ref,
|
|
22
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
23
|
+
|
|
13
24
|
const isMobile = useCheckMobileScreen();
|
|
14
25
|
const [showMobileMenu, setShowMobileMenu] = useState(false);
|
|
15
26
|
const shouldDisplayCollapsed = collapse && isMobile;
|
|
16
|
-
const mobileButtonClass = shouldDisplayCollapsed && isMobile ?
|
|
27
|
+
const mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : HIDDEN;
|
|
17
28
|
const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;
|
|
18
|
-
const
|
|
19
|
-
|
|
29
|
+
const childrenDesktopModifier = shouldDisplayChildren && !isMobile ? modifier : `${modifier} ${HIDDEN}`;
|
|
30
|
+
const childrenMobileModifier = shouldDisplayChildren && isMobile ? `${mobileMenuChildrenModifier}` : ` ${HIDDEN}`;
|
|
31
|
+
const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';
|
|
32
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, collapse && /*#__PURE__*/React.createElement("div", {
|
|
33
|
+
className: "top-0 absolute z-50"
|
|
34
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
35
|
+
className: `flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`
|
|
36
|
+
}, /*#__PURE__*/React.createElement(BlazeButton, {
|
|
20
37
|
className: mobileButtonClass,
|
|
21
38
|
onClick: () => setShowMobileMenu(!showMobileMenu)
|
|
22
|
-
}, /*#__PURE__*/React.createElement("i", null,
|
|
23
|
-
className:
|
|
39
|
+
}, /*#__PURE__*/React.createElement("i", null, showMobileMenu ? /*#__PURE__*/React.createElement(MdClose, {
|
|
40
|
+
className: closeIconModifier
|
|
41
|
+
}) : /*#__PURE__*/React.createElement(MdMenu, {
|
|
42
|
+
className: hamburgerIconModifier
|
|
43
|
+
}))))), /*#__PURE__*/React.createElement("ul", {
|
|
44
|
+
className: isMobile ? childrenMobileModifier : childrenDesktopModifier
|
|
24
45
|
}, children));
|
|
25
46
|
};
|
|
26
47
|
|
|
27
48
|
Menu.propTypes = {
|
|
28
49
|
collapse: PropTypes.bool.isRequired,
|
|
50
|
+
hamburgerIconModifier: PropTypes.string,
|
|
51
|
+
closeIconModifier: PropTypes.string,
|
|
52
|
+
mobileButtonModifier: PropTypes.string,
|
|
53
|
+
mobileMenuModifier: PropTypes.string,
|
|
54
|
+
mobileMenuChildrenModifier: PropTypes.string,
|
|
29
55
|
modifier: PropTypes.string,
|
|
56
|
+
mobileIconAlignment: PropTypes.string,
|
|
30
57
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
|
|
31
58
|
};
|
|
32
59
|
Menu.defaultProps = {
|
|
60
|
+
hamburgerIconModifier: '',
|
|
61
|
+
closeIconModifier: '',
|
|
62
|
+
mobileButtonModifier: '',
|
|
63
|
+
mobileIconAlignment: '',
|
|
64
|
+
mobileMenuModifier: '',
|
|
65
|
+
mobileMenuChildrenModifier: '',
|
|
33
66
|
modifier: '',
|
|
34
67
|
children: []
|
|
35
68
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Menu/Menu.js"],"names":["React","useState","PropTypes","BlazeButton","MdMenu","useCheckMobileScreen","HIDDEN","Menu","children","collapse","modifier","isMobile","showMobileMenu","setShowMobileMenu","shouldDisplayCollapsed","mobileButtonClass","shouldDisplayChildren","
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Menu/Menu.js"],"names":["React","useState","PropTypes","BlazeButton","MdMenu","MdClose","useCheckMobileScreen","HIDDEN","Menu","children","collapse","modifier","mobileMenuModifier","mobileMenuChildrenModifier","mobileIconAlignment","mobileButtonModifier","hamburgerIconModifier","closeIconModifier","rest","isMobile","showMobileMenu","setShowMobileMenu","shouldDisplayCollapsed","mobileButtonClass","shouldDisplayChildren","childrenDesktopModifier","childrenMobileModifier","isMobileMenuExpanded","propTypes","bool","isRequired","string","oneOfType","arrayOf","node","defaultProps"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport BlazeButton from '@blaze-react/button';\nimport { MdMenu, MdClose } from 'react-icons/md';\nimport { useCheckMobileScreen } from '../../hooks';\nimport { HIDDEN } from '../../constants';\n\nconst Menu = ({\n children,\n collapse,\n modifier,\n mobileMenuModifier,\n mobileMenuChildrenModifier,\n mobileIconAlignment,\n mobileButtonModifier,\n hamburgerIconModifier,\n closeIconModifier,\n ...rest\n}) => {\n const isMobile = useCheckMobileScreen();\n const [showMobileMenu, setShowMobileMenu] = useState(false);\n\n const shouldDisplayCollapsed = collapse && isMobile;\n const mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : HIDDEN;\n const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;\n const childrenDesktopModifier =\n shouldDisplayChildren && !isMobile ? modifier : `${modifier} ${HIDDEN}`;\n\n const childrenMobileModifier =\n shouldDisplayChildren && isMobile ? `${mobileMenuChildrenModifier}` : ` ${HIDDEN}`;\n\n const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';\n\n return (\n <>\n {collapse && (\n <div className=\"top-0 absolute z-50\">\n <div\n className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>\n <BlazeButton\n className={mobileButtonClass}\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 <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>{children}</ul>\n </>\n );\n};\n\nMenu.propTypes = {\n collapse: PropTypes.bool.isRequired,\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 hamburgerIconModifier: '',\n closeIconModifier: '',\n mobileButtonModifier: '',\n mobileIconAlignment: '',\n mobileMenuModifier: '',\n mobileMenuChildrenModifier: '',\n modifier: '',\n children: []\n};\n\nexport default Menu;\n"],"file":"Menu.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blaze-cms/react-page-builder",
|
|
3
|
-
"version": "0.118.0-alpha.
|
|
3
|
+
"version": "0.118.0-alpha.3",
|
|
4
4
|
"description": "Blaze react page builder",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-es/index.js",
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"lib/*",
|
|
88
88
|
"lib-es/*"
|
|
89
89
|
],
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "9ce5c14d20fe41c7e6b671fd8e8edd5410d704ce"
|
|
91
91
|
}
|
|
@@ -1,42 +1,80 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import BlazeButton from '@blaze-react/button';
|
|
4
|
-
import { MdMenu } from 'react-icons/md';
|
|
4
|
+
import { MdMenu, MdClose } from 'react-icons/md';
|
|
5
5
|
import { useCheckMobileScreen } from '../../hooks';
|
|
6
6
|
import { HIDDEN } from '../../constants';
|
|
7
7
|
|
|
8
|
-
const Menu = ({
|
|
8
|
+
const Menu = ({
|
|
9
|
+
children,
|
|
10
|
+
collapse,
|
|
11
|
+
modifier,
|
|
12
|
+
mobileMenuModifier,
|
|
13
|
+
mobileMenuChildrenModifier,
|
|
14
|
+
mobileIconAlignment,
|
|
15
|
+
mobileButtonModifier,
|
|
16
|
+
hamburgerIconModifier,
|
|
17
|
+
closeIconModifier,
|
|
18
|
+
...rest
|
|
19
|
+
}) => {
|
|
9
20
|
const isMobile = useCheckMobileScreen();
|
|
10
21
|
const [showMobileMenu, setShowMobileMenu] = useState(false);
|
|
11
22
|
|
|
12
23
|
const shouldDisplayCollapsed = collapse && isMobile;
|
|
13
|
-
const mobileButtonClass = shouldDisplayCollapsed && isMobile ?
|
|
24
|
+
const mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : HIDDEN;
|
|
14
25
|
const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;
|
|
15
|
-
const
|
|
26
|
+
const childrenDesktopModifier =
|
|
27
|
+
shouldDisplayChildren && !isMobile ? modifier : `${modifier} ${HIDDEN}`;
|
|
28
|
+
|
|
29
|
+
const childrenMobileModifier =
|
|
30
|
+
shouldDisplayChildren && isMobile ? `${mobileMenuChildrenModifier}` : ` ${HIDDEN}`;
|
|
31
|
+
|
|
32
|
+
const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';
|
|
16
33
|
|
|
17
34
|
return (
|
|
18
35
|
<>
|
|
19
36
|
{collapse && (
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
37
|
+
<div className="top-0 absolute z-50">
|
|
38
|
+
<div
|
|
39
|
+
className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>
|
|
40
|
+
<BlazeButton
|
|
41
|
+
className={mobileButtonClass}
|
|
42
|
+
onClick={() => setShowMobileMenu(!showMobileMenu)}>
|
|
43
|
+
<i>
|
|
44
|
+
{showMobileMenu ? (
|
|
45
|
+
<MdClose className={closeIconModifier} />
|
|
46
|
+
) : (
|
|
47
|
+
<MdMenu className={hamburgerIconModifier} />
|
|
48
|
+
)}
|
|
49
|
+
</i>
|
|
50
|
+
</BlazeButton>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
27
53
|
)}
|
|
28
|
-
<ul className={
|
|
54
|
+
<ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>{children}</ul>
|
|
29
55
|
</>
|
|
30
56
|
);
|
|
31
57
|
};
|
|
32
58
|
|
|
33
59
|
Menu.propTypes = {
|
|
34
60
|
collapse: PropTypes.bool.isRequired,
|
|
61
|
+
hamburgerIconModifier: PropTypes.string,
|
|
62
|
+
closeIconModifier: PropTypes.string,
|
|
63
|
+
mobileButtonModifier: PropTypes.string,
|
|
64
|
+
mobileMenuModifier: PropTypes.string,
|
|
65
|
+
mobileMenuChildrenModifier: PropTypes.string,
|
|
35
66
|
modifier: PropTypes.string,
|
|
67
|
+
mobileIconAlignment: PropTypes.string,
|
|
36
68
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
|
|
37
69
|
};
|
|
38
70
|
|
|
39
71
|
Menu.defaultProps = {
|
|
72
|
+
hamburgerIconModifier: '',
|
|
73
|
+
closeIconModifier: '',
|
|
74
|
+
mobileButtonModifier: '',
|
|
75
|
+
mobileIconAlignment: '',
|
|
76
|
+
mobileMenuModifier: '',
|
|
77
|
+
mobileMenuChildrenModifier: '',
|
|
40
78
|
modifier: '',
|
|
41
79
|
children: []
|
|
42
80
|
};
|