Skip to content

Commit

Permalink
Merge pull request #41 from SSWConsulting/bundle-reduction-experiment
Browse files Browse the repository at this point in the history
Reduce Package Size
  • Loading branch information
Harry-Ross authored Sep 11, 2023
2 parents 062ef9d + 61c7650 commit a6ad6cf
Show file tree
Hide file tree
Showing 9 changed files with 167 additions and 253 deletions.
12 changes: 6 additions & 6 deletions lib/assets/data/menu.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": []
},
{
Expand Down
92 changes: 40 additions & 52 deletions lib/components/menu/desktop-menu/index.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className={cs(styles.menuDrop, styles.hiddenXs, styles.hiddenSm)}>
<ul>
{this.props.menuModel &&
this.props.menuModel.menuItems.map((item, index) => {
return (
<li key={index}>
{!item.children && (
<a
href={item.navigateUrl ? item.navigateUrl : null}
className={cs(styles.ignore, 'unstyled')}
const DesktopMenu = (props) => {
return (
<div className={cs(styles.menuDrop, styles.hiddenXs, styles.hiddenSm)}>
<ul>
{props.menuModel &&
props.menuModel.menuItems.map((item, index) => {
return (
<li key={index}>
{!item.children && (
<a
href={item.navigateUrl ? item.navigateUrl : null}
className={cs(styles.ignore, 'unstyled')}
>
{item.text}
</a>
)}{' '}
{item.children && (
<>
<div
role="presentation"
className={cs(
styles.ignore,
styles['cursor-pointer'],
styles['inline-block'],
'unstyled',
)}
>
{item.text}
</a>
)}{' '}
{item.children && (
<>
<div
role="presentation"
className={cs(
styles.ignore,
styles['cursor-pointer'],
styles['inline-block'],
'unstyled',
)}
>
{item.text} <FontAwesomeIcon icon={faAngleDown} />
</div>
<div className={styles.Menu}>
<MenuPanel item={item} prefix={this.props.prefix} />
</div>
</>
)}
</li>
);
})}
</ul>
</div>
);
}
{item.text} <FontAwesomeIcon icon={faAngleDown} />
</div>
<div className={styles.Menu}>
<MenuPanel item={item} prefix={props.prefix} />
</div>
</>
)}
</li>
);
})}
</ul>
</div>
);
}
export default DesktopMenu;
43 changes: 17 additions & 26 deletions lib/components/menu/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
};
}
Expand All @@ -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) {
Expand Down
Loading

0 comments on commit a6ad6cf

Please sign in to comment.