From b238bad5444d9c030f66fdd52d1c9145bb0aac2a Mon Sep 17 00:00:00 2001 From: Harry Ross Date: Wed, 6 Sep 2023 18:00:50 +1000 Subject: [PATCH 1/5] Reduced bundle size via peer dependencies, converted mobile menu to FC --- lib/components/menu/desktop-menu/index.jsx | 92 +++++------ lib/components/mobile-menu/index.jsx | 176 ++++++++++----------- lib/index.js | 1 - package.json | 7 +- tsconfig.json | 2 +- vite.config.js | 12 +- yarn.lock | 34 +--- 7 files changed, 141 insertions(+), 183 deletions(-) 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/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} +
    + +
    • + ); } - 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} -
    - -
    • - ); - } - } +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..14eb384 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,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,11 +38,15 @@ "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-useportal": "^1.0.17", "react": ">=16.9.0", "react-dom": ">=16.9.0" }, 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..efc1cb5 100644 --- a/vite.config.js +++ b/vite.config.js @@ -18,7 +18,7 @@ export default defineConfig({ { ...react(), apply: 'serve' }, ], build: { - target: 'es2015', + target: 'es2022', minify: 'esbuild', copyPublicDir: false, lib: { @@ -28,7 +28,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..192ee74 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1184,13 +1184,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" @@ -2779,13 +2772,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 +3715,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 +3826,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 +3920,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 +3945,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" From 972c0cd9b9b003e3def0c4ee77ea6f0d8a811b3f Mon Sep 17 00:00:00 2001 From: Harry Ross Date: Mon, 11 Sep 2023 11:22:19 +1000 Subject: [PATCH 2/5] Removed imported images, changed to only src value --- lib/components/menu/index.jsx | 19 +------------------ package.json | 5 ++--- vite.config.js | 6 ++---- yarn.lock | 32 -------------------------------- 4 files changed, 5 insertions(+), 57 deletions(-) diff --git a/lib/components/menu/index.jsx b/lib/components/menu/index.jsx index 9c11497..7df4be1 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,17 +58,6 @@ 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, -}; - class Wrapper extends React.Component { constructor(props) { super(props); @@ -95,7 +78,7 @@ class Wrapper extends React.Component { menuItems: response.menuItems.map((menuItem) => { return { ...menuItem, - src: imageLibrary[menuItem.groupImageUrl], + src: menuItem.groupImageUrl, }; }), }, diff --git a/package.json b/package.json index 14eb384..bc8e9c0 100644 --- a/package.json +++ b/package.json @@ -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", @@ -46,9 +45,9 @@ "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/react-fontawesome": "^0.1.14", "classnames": "^2.3.2", - "react-useportal": "^1.0.17", "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/vite.config.js b/vite.config.js index efc1cb5..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: 'es2022', - minify: 'esbuild', + target: 'es6', + minify: "esbuild", copyPublicDir: false, lib: { entry: path.resolve(__dirname, 'lib/index.js'), diff --git a/yarn.lock b/yarn.lock index 192ee74..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" @@ -1714,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" @@ -2716,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" From ba8c7a720da9c99b148fa067203c09a4e73d0001 Mon Sep 17 00:00:00 2001 From: Harry Ross Date: Mon, 11 Sep 2023 11:40:12 +1000 Subject: [PATCH 3/5] Added new images to menu.json, added better abstracted parsing method --- lib/assets/data/menu.json | 12 ++++++------ lib/components/menu/index.jsx | 25 +++++++++++++++---------- 2 files changed, 21 insertions(+), 16 deletions(-) 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/index.jsx b/lib/components/menu/index.jsx index 7df4be1..8c55737 100644 --- a/lib/components/menu/index.jsx +++ b/lib/components/menu/index.jsx @@ -58,11 +58,23 @@ class Menu extends React.Component { } } +const parseMenuData = (menuData) => { + 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, }; } @@ -73,15 +85,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: menuItem.groupImageUrl, - }; - }), - }, + menuModel: parseMenuData(response), + menuLoaded: true, }); }) .catch(function (error) { From 9784f0e10b4652cc31814b799ae4b6426331c50d Mon Sep 17 00:00:00 2001 From: Harry Ross Date: Mon, 11 Sep 2023 11:44:37 +1000 Subject: [PATCH 4/5] added back previous null logic --- lib/components/menu/index.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/components/menu/index.jsx b/lib/components/menu/index.jsx index 8c55737..2a847d1 100644 --- a/lib/components/menu/index.jsx +++ b/lib/components/menu/index.jsx @@ -59,6 +59,9 @@ class Menu extends React.Component { } const parseMenuData = (menuData) => { + if (!menuData) { + return {}; + } return { ...menuData, menuItems: menuData.menuItems.map((menuItem) => { From 61c765052f47502acb248b57e04f17df323e04b2 Mon Sep 17 00:00:00 2001 From: Harry Ross Date: Mon, 11 Sep 2023 15:13:58 +1000 Subject: [PATCH 5/5] updated version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bc8e9c0..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",