diff --git a/lib/assets/data/menu.json b/lib/assets/data/menu.json
index 655a46d..23b0446 100644
--- a/lib/assets/data/menu.json
+++ b/lib/assets/data/menu.json
@@ -2,32 +2,32 @@
"menuItems": [
{
"text": "Services",
- "groupImageUrl": "Menu-Banner-Services.png",
+ "groupImageUrl": "https://raw.githubusercontent.com/SSWConsulting/SSW.MegaMenu/main/lib/assets/images/Menu-Banner-Services.png",
"children": []
},
{
"text": "Products",
- "groupImageUrl": "Menu-Banner-Products.png",
+ "groupImageUrl": "https://raw.githubusercontent.com/SSWConsulting/SSW.MegaMenu/main/lib/assets/images/Menu-Banner-Products.png",
"children": []
},
{
"text": "Training",
- "groupImageUrl": "Menu-Banner-Training.png",
+ "groupImageUrl": "https://raw.githubusercontent.com/SSWConsulting/SSW.MegaMenu/main/lib/assets/images/Menu-Banner-Training.png",
"children": []
},
{
"text": "User Group",
- "groupImageUrl": "Menu-Banner-UserGroup.png",
+ "groupImageUrl": "https://raw.githubusercontent.com/SSWConsulting/SSW.MegaMenu/main/lib/assets/images/Menu-Banner-UserGroup.png",
"children": []
},
{
"text": "Rules",
- "groupImageUrl": "Menu-Banner-Standards.png",
+ "groupImageUrl": "https://raw.githubusercontent.com/SSWConsulting/SSW.MegaMenu/main/lib/assets/images/Menu-Banner-Standards.png",
"children": []
},
{
"text": "About Us",
- "groupImageUrl": "Menu-Banner-AboutUs.png",
+ "groupImageUrl": "https://raw.githubusercontent.com/SSWConsulting/SSW.MegaMenu/main/lib/assets/images/Menu-Banner-AboutUs.png",
"children": []
},
{
diff --git a/lib/components/menu/desktop-menu/index.jsx b/lib/components/menu/desktop-menu/index.jsx
index 06c0fa2..a64a9f4 100644
--- a/lib/components/menu/desktop-menu/index.jsx
+++ b/lib/components/menu/desktop-menu/index.jsx
@@ -1,61 +1,49 @@
-import React from 'react';
+import React from "react";
import styles from './index.module.css';
import cs from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
import MenuPanel from './menu-panel';
-class DesktopMenu extends React.Component {
- // getRootUrl() {
- // if (this.props.prefix && typeof window !== 'undefined') {
- // return (
- // window.location.origin
- // ? window.location.origin + '/'
- // : window.location.protocol + '/' + window.location.host + '/') + this.props.prefix + '/';
- // }
- // return '';
- // }
-
- render() {
- return (
-
+ );
}
export default DesktopMenu;
diff --git a/lib/components/menu/index.jsx b/lib/components/menu/index.jsx
index 9c11497..2a847d1 100644
--- a/lib/components/menu/index.jsx
+++ b/lib/components/menu/index.jsx
@@ -6,12 +6,6 @@ import { faBars } from '@fortawesome/free-solid-svg-icons';
import cs from 'classnames';
import menu from '@assets/data/menu.json';
-import services from '@assets/images/Menu-Banner-Services.png';
-import products from '@assets/images/Menu-Banner-Products.png';
-import training from '@assets/images/Menu-Banner-Training.png';
-import user_group from '@assets/images/Menu-Banner-UserGroup.png';
-import rules from '@assets/images/Menu-Banner-Standards.png';
-import about_us from '@assets/images/Menu-Banner-AboutUs.png';
const searchUrl = `https://www.google.com.au/search?q=site:ssw.com.au%20`;
class Menu extends React.Component {
@@ -64,22 +58,26 @@ class Menu extends React.Component {
}
}
-// This is a temporary workaround
-// Ideally the images should be hosted and the image url passed in via https://SSWConsulting.github.io/SSW.Website.Menu.json/menu.json
-const imageLibrary = {
- 'Menu-Banner-Services.png': services,
- 'Menu-Banner-Products.png': products,
- 'Menu-Banner-Training.png': training,
- 'Menu-Banner-UserGroup.png': user_group,
- 'Menu-Banner-Standards.png': rules,
- 'Menu-Banner-AboutUs.png': about_us,
-};
+const parseMenuData = (menuData) => {
+ if (!menuData) {
+ return {};
+ }
+ return {
+ ...menuData,
+ menuItems: menuData.menuItems.map((menuItem) => {
+ return {
+ ...menuItem,
+ src: menuItem.groupImageUrl,
+ };
+ }),
+ }
+}
class Wrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
- menuModel: menu ?? {},
+ menuModel: parseMenuData(menu),
menuLoaded: false,
};
}
@@ -90,15 +88,8 @@ class Wrapper extends React.Component {
.then((res) => res.json())
.then(function (response) {
currentComponent.setState({
- menuModel: {
- ...response,
- menuItems: response.menuItems.map((menuItem) => {
- return {
- ...menuItem,
- src: imageLibrary[menuItem.groupImageUrl],
- };
- }),
- },
+ menuModel: parseMenuData(response),
+ menuLoaded: true,
});
})
.catch(function (error) {
diff --git a/lib/components/mobile-menu/index.jsx b/lib/components/mobile-menu/index.jsx
index ab7d9d0..2dbe71d 100644
--- a/lib/components/mobile-menu/index.jsx
+++ b/lib/components/mobile-menu/index.jsx
@@ -1,114 +1,106 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import styles from './index.module.css';
import cs from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
-class MobileMenu extends React.Component {
- //const DesktopMenu = ({prefix}) => {
- constructor(props) {
- super(props);
- this.state = { menuModel: null };
- }
+const MobileMenu = (props) => {
+ const [menuModel, setMenuModel] = React.useState(null);
- loadMenuModel() {
- if (!this.state.menuModel) {
- let currentComponent = this;
+ useEffect(() => {
+ if (!menuModel) {
fetch('https://SSWConsulting.github.io/SSW.Website.Menu.json/menu.json')
- .then(res => res.json())
- .then(function (response) {
- currentComponent.setState({ menuModel: response });
+ .then(res => res.json())
+ .then((response) => {
+ setMenuModel(response);
})
- .catch(function (error) {
- console.log(error);
+ .catch((error) => {
+ console.error(error);
});
}
- }
-
- componentDidMount() {
- this.loadMenuModel();
- }
+ }, [])
- closeOpenedElements(element) {
- var openedItems = document.getElementsByClassName(cs(styles.dropdown, styles.open));
- for (let item of openedItems) {
- if (item !== element.parentNode?.parentNode) {
- item.className = styles.dropdown;
- }
- }
- }
+ return (
+ openItem(event)}
+ >
+
+
+ {menuModel &&
+ menuModel.menuItems.map((item, index) =>
+
+ )}
+
+
+
+ );
+}
- openElement(element) {
- this.closeOpenedElements(element);
- element.className = cs(styles.dropdown, styles.open);
+const MenuItems = ({ item }) => {
+ if (!item.children || item.navigateUrlOnMobileOnly) {
+ return (
+
+
+ {item.text}
+
+
+ );
+ } else if (item.children) {
+ return (
+
+
+ {item.text}
+
+
+ {item.children.map((item, index) =>
+
+ )}
+
+
+ );
}
- closeElement(element) {
- element.className = styles.dropdown;
- }
+ return <>>;
+}
- openItem(event) {
- if (event.target.parentNode.className === styles.dropdown) {
- this.closeOpenedElements(event.target.parentNode);
- this.openElement(event.target.parentNode);
- } else if (event.target.parentNode.parentNode.className === styles.dropdown) {
- this.closeOpenedElements(event.target.parentNode);
- this.openElement(event.target.parentNode.parentNode);
- } else if (event.target.parentNode.className === cs(styles.dropdown, styles.open)) {
- this.closeElement(event.target.parentNode);
- } else if (
- event.target.parentNode.parentNode.className === cs(styles.dropdown, styles.open)
- ) {
- this.closeElement(event.target.parentNode.parentNode);
+const closeOpenedElements = (element) => {
+ var openedItems = document.getElementsByClassName(cs(styles.dropdown, styles.open));
+ for (let item of openedItems) {
+ if (item !== element.parentNode?.parentNode) {
+ item.className = styles.dropdown;
}
}
+}
- renderMenuItems(item, index) {
- if (!item.children || item.navigateUrlOnMobileOnly) {
- return (
-
-
- {item.text}
-
-
- );
- } else if (item.children) {
- return (
-
-
- {item.text}
-
-
- {item.children.map((item, index) => {
- return this.renderMenuItems(item, index);
- })}
-
-
- );
- }
- }
+const closeElement = (element) => {
+ element.className = styles.dropdown;
+}
- render() {
- return (
- this.openItem(event)}
- >
-
-
- {this.state.menuModel &&
- this.state.menuModel.menuItems.map((item, index) => {
- return this.renderMenuItems(item, index);
- })}
-
-
-
- );
+const openElement = (element) => {
+ closeOpenedElements(element);
+ element.className = cs(styles.dropdown, styles.open);
+}
+
+const openItem = (event) => {
+ if (event.target.parentNode.className === styles.dropdown) {
+ closeOpenedElements(event.target.parentNode);
+ openElement(event.target.parentNode);
+ } else if (event.target.parentNode.parentNode.className === styles.dropdown) {
+ closeOpenedElements(event.target.parentNode);
+ openElement(event.target.parentNode.parentNode);
+ } else if (event.target.parentNode.className === cs(styles.dropdown, styles.open)) {
+ closeElement(event.target.parentNode);
+ } else if (
+ event.target.parentNode.parentNode.className === cs(styles.dropdown, styles.open)
+ ) {
+ closeElement(event.target.parentNode.parentNode);
}
}
+
export default React.forwardRef((props, ref) => );
diff --git a/lib/index.js b/lib/index.js
index 072bf6d..c3dd487 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,4 +1,3 @@
-import 'cross-fetch/polyfill';
import Menu from './components/menu';
import MobileMenu from './components/mobile-menu';
import MenuBar from './components/menu-bar';
diff --git a/package.json b/package.json
index 71066b8..70fb617 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ssw.megamenu",
- "version": "3.1.4",
+ "version": "3.2.0",
"files": [
"dist",
"types",
@@ -13,7 +13,6 @@
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
- "@rollup/plugin-image": "^3.0.2",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
@@ -24,7 +23,6 @@
"@vitejs/plugin-react": "^3.1.0",
"@vitest/coverage-c8": "^0.28.5",
"classnames": "^2.3.2",
- "cross-fetch": "^3.1.5",
"eslint": "^8.30.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
@@ -39,13 +37,17 @@
"stylelint": "^14.16.1",
"stylelint-config-recommended": "^9.0.0",
"typescript": "^4.9.5",
- "use-ssr": "^1.0.24",
"vite": "^4.1.0",
"vitest": "^0.28.5"
},
"peerDependencies": {
+ "@fortawesome/fontawesome-svg-core": "^1.2.35",
+ "@fortawesome/free-solid-svg-icons": "^5.15.3",
+ "@fortawesome/react-fontawesome": "^0.1.14",
+ "classnames": "^2.3.2",
"react": ">=16.9.0",
- "react-dom": ">=16.9.0"
+ "react-dom": ">=16.9.0",
+ "react-useportal": "^1.0.17"
},
"scripts": {
"dev": "vite",
diff --git a/tsconfig.json b/tsconfig.json
index aadbf99..2a64b1e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
"lib/index.js"
],
"compilerOptions": {
- "target": "es5",
+ "target": "es6",
"lib": [
"dom",
"dom.iterable",
diff --git a/vite.config.js b/vite.config.js
index 799bf53..2d657f6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,7 +4,6 @@
import path from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
-import image from '@rollup/plugin-image';
// https://vitejs.dev/config/
export default defineConfig({
@@ -14,12 +13,11 @@ export default defineConfig({
},
},
plugins: [
- { ...image(), enforce: 'pre', apply: 'build' },
{ ...react(), apply: 'serve' },
],
build: {
- target: 'es2015',
- minify: 'esbuild',
+ target: 'es6',
+ minify: "esbuild",
copyPublicDir: false,
lib: {
entry: path.resolve(__dirname, 'lib/index.js'),
@@ -28,7 +26,15 @@ export default defineConfig({
fileName: 'megamenu',
},
rollupOptions: {
- external: ['react', 'react-dom'],
+ external: [
+ 'react',
+ 'react-dom',
+ "classnames",
+ "@fortawesome/fontawesome-svg-core",
+ "@fortawesome/free-solid-svg-icons",
+ "@fortawesome/react-fontawesome",
+ "react-useportal"
+ ],
output: {
globals: {
react: 'React',
diff --git a/yarn.lock b/yarn.lock
index 0968962..287de5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -513,23 +513,6 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"
-"@rollup/plugin-image@^3.0.2":
- version "3.0.2"
- resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-3.0.2.tgz#8a66389510517495c5d10d392140cdefa43b27c2"
- integrity sha512-eGVrD6lummWH5ENo9LWX3JY62uBb9okUNQ2htXkugrG6WjACrMUVhWvss+0wW3fwJWmFYpoEny3yL4spEdh15g==
- dependencies:
- "@rollup/pluginutils" "^5.0.1"
- mini-svg-data-uri "^1.4.4"
-
-"@rollup/pluginutils@^5.0.1":
- version "5.0.2"
- resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
- integrity sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
- dependencies:
- "@types/estree" "^1.0.0"
- estree-walker "^2.0.2"
- picomatch "^2.3.1"
-
"@sinclair/typebox@^0.25.16":
version "0.25.24"
resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
@@ -600,11 +583,6 @@
resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.4.tgz#e913e8175db8307d78b4e8fa690408ba6b65dee4"
integrity sha512-KnRanxnpfpjUTqTCXslZSEdLfXExwgNxYPdiO2WGUj8+HDjFi8R3k5RVKPeSCzLjCcshCAtVO2QBbVuAV4kTnw==
-"@types/estree@^1.0.0":
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
- integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
-
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
version "2.0.4"
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -1184,13 +1162,6 @@ cosmiconfig@^7.1.0:
path-type "^4.0.0"
yaml "^1.10.0"
-cross-fetch@^3.1.5:
- version "3.1.5"
- resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
- integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==
- dependencies:
- node-fetch "2.6.7"
-
cross-spawn@^7.0.0, cross-spawn@^7.0.2:
version "7.0.3"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -1721,11 +1692,6 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
-estree-walker@^2.0.2:
- version "2.0.2"
- resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
- integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
-
esutils@^2.0.2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -2723,11 +2689,6 @@ min-indent@^1.0.0:
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
-mini-svg-data-uri@^1.4.4:
- version "1.4.4"
- resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
- integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
-
minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -2779,13 +2740,6 @@ natural-compare@^1.4.0:
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
-node-fetch@2.6.7:
- version "2.6.7"
- resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
- integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
- dependencies:
- whatwg-url "^5.0.0"
-
node-releases@^2.0.8:
version "2.0.10"
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
@@ -3729,11 +3683,6 @@ tr46@^4.1.1:
dependencies:
punycode "^2.3.0"
-tr46@~0.0.3:
- version "0.0.3"
- resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
- integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
-
trim-newlines@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
@@ -3845,7 +3794,7 @@ url-parse@^1.5.3:
querystringify "^2.1.1"
requires-port "^1.0.0"
-use-ssr@^1.0.24, use-ssr@^1.0.25:
+use-ssr@^1.0.25:
version "1.0.25"
resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.25.tgz#c7f54b59d6e52db26749b1d4115a650101a190bd"
integrity sha512-VYF8kJKI+X7+U4XgGoUER2BUl0vIr+8OhlIhyldgSGE0KHMoDRXPvWeHUUeUktq7ACEOVLzXGq1+QRxcvtwvyQ==
@@ -3939,11 +3888,6 @@ w3c-xmlserializer@^4.0.0:
dependencies:
xml-name-validator "^4.0.0"
-webidl-conversions@^3.0.0:
- version "3.0.1"
- resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
- integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
-
webidl-conversions@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
@@ -3969,14 +3913,6 @@ whatwg-url@^12.0.0, whatwg-url@^12.0.1:
tr46 "^4.1.1"
webidl-conversions "^7.0.0"
-whatwg-url@^5.0.0:
- version "5.0.0"
- resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
- integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
- dependencies:
- tr46 "~0.0.3"
- webidl-conversions "^3.0.0"
-
which-boxed-primitive@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"