@ubertheme/mega-menu/src/components/MegaMenu/megaMenu.js

UB Mega Menu Module for Magento PWA Studio

import React from 'react';
import { func, number, shape, string } from 'prop-types';
import { mergeClasses } from '@magento/venia-ui/lib/classify';
import Horizontal from '../Horizontal';
import OffCanvas from '../Offcanvas';
import defaultClasses from './megaMenu.module.css';

/**
 * UBMegaMenu component.
 *
 * This component is a renderer of Menus
 *
 * @typedef UBMegaMenu
 * @kind functional component
 *
 * @param {Object} props React component props
 *
 * @returns {React.Element} A React component.
 */
const UBMegaMenu = props => {
    const {
        wrapperClass,
        menuKey,
        menuType,
        onNavigate,
        parentMenuItemId,
        setParentMenuItemId,
        setBackMenuItem,
        setNavTitle
    } = props;

    const classes = mergeClasses(defaultClasses, props.classes);

    const rootClassName = (wrapperClass) ? wrapperClass : 'root';
    const rootClass =
        props.classes && props.classes.root
            ? defaultClasses[props.classes.root]
            : classes[rootClassName];

    let child;
    if (menuType == 'off-canvas') {
        child = (
            <OffCanvas
                menuKey={menuKey}
                onNavigate={onNavigate}
                parentMenuItemId={parentMenuItemId}
                setParentMenuItemId={setParentMenuItemId}
                setBackMenuItem={setBackMenuItem}
                setNavTitle={setNavTitle}
            />
        );
    } else if (menuType == 'horizontal' || menuType == 'vertical') {
        child = <Horizontal menuKey={menuKey} />;
    } else {
        child = (
            <div className={classes.warning}>
                '{menuType}' menu type is not correct. Please update with
                current available menu types: 'horizontal', 'vertical' or
                'off-canvas'.
            </div>
        );
    }

    return <div className={rootClass}>{child}</div>;
};

/**
 * Props for {@link UBMegaMenu}
 *
 * @typedef props
 *
 * @property {Object} classes An object containing the class names for the UBMegaMenu
 * @property {String} classes.root CSS class for the root container element
 * @property {String} html Content
 */
UBMegaMenu.propTypes = {
    classes: shape({
        root: string
    }),
    wrapperClass: string,
    menuKey: string,
    menuType: string,
    onNavigate: func,
    parentMenuItemId: number,
    setParentMenuItemId: func,
    setBackMenuItem: func,
    setNavTitle: func
};

export default UBMegaMenu;