@ubertheme/mega-menu/src/targets/wrapUBMegaMenuTargetable.js

UB Mega Menu Module for Magento PWA Studio

module.exports = (targetables, options = {}) => {
  const moduleOptions = {
    menuKey: null,
    mobileMenuKey: null,
    ...options
  };
  const { menuKey, mobileMenuKey } = moduleOptions;

    /**
     * 1. Integration of UB Horizontal menu
     */
    // 1.1. Load core Header component
    const HeaderComponent = targetables.reactComponent(
        '@magento/venia-ui/lib/components/Header/header.js'
        );

    // 1.2. Add a import of UB Mega Menu to the HeaderComponent
    const UBMegaMenu = HeaderComponent.addImport(
        "{UBMegaMenu} from '@ubertheme/mega-menu'"
    );

    // 1.3. Replace MegaMenu component by UBMegaMenu component
    HeaderComponent.replaceJSX('<MegaMenu />', `<${UBMegaMenu} />`)
        .setJSXProps(`UBMegaMenu`, {
            'menuKey': `"${menuKey}"`,
            'menuType': '"horizontal"',
            'wrapperClass': '"stickyRoot"'
        });
    //Other way: insert a new component and remove old component
    /*HeaderComponent.insertAfterJSX('<MegaMenu />', `<${UBMegaMenu} />`)
        .setJSXProps(`UBMegaMenu`, {
            'menuKey': `"${menuKey}"`,
            'menuType': '"horizontal"',
            'wrapperClass': '"stickyRoot"'
        });
    HeaderComponent.removeJSX('<MegaMenu />');*/

    /**
     * 2. Integration of UB Offcanvas menu
     */
    const offCanvasMenuKey = (mobileMenuKey) ? mobileMenuKey : menuKey;
    // 2.1 Load core Navigation component
    const AppComponent = targetables.reactComponent(
        '@magento/venia-ui/lib/components/App/app.js'
        );
    // 2.2 Add a import of UB Navigation to the app
    const UBNav = AppComponent.addImport(
        "{UBNav} from '@ubertheme/mega-menu'"
    );
    AppComponent.replaceJSX('<Navigation />', `<${UBNav} />`)
        .setJSXProps(`UBNav`, {
        'menuKey': `"${offCanvasMenuKey}"`,
    });
};