@e-group/material-module/BottomNavigationMenu/BottomNavigationMenu.js

EGroup Team react component modules.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _reactRouterDom = require("react-router-dom");

var _core = require("@material-ui/core");

const NavLinkWrapper = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/_react.default.createElement(_reactRouterDom.NavLink, (0, _extends2.default)({
  innerRef: ref
}, props)));
const useStyles = (0, _core.makeStyles)(theme => ({
  root: {
    bottom: '0',
    left: '0',
    position: 'fixed',
    zIndex: theme.zIndex.appBar
  }
}));

const BottomNavigationMenu = props => {
  const pathname = props.pathname,
        routes = props.routes,
        _props$rootPath = props.rootPath,
        rootPath = _props$rootPath === void 0 ? '/' : _props$rootPath;
  const classes = useStyles(props);

  const _useState = (0, _react.useState)(pathname),
        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
        value = _useState2[0],
        setValue = _useState2[1];

  (0, _react.useEffect)(() => {
    const firstPath = pathname.split('/')[2];

    if (firstPath) {
      setValue("".concat(rootPath, "/").concat(firstPath));
    } else {
      setValue(rootPath);
    }
  }, [pathname, rootPath]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react.default.createElement(_core.BottomNavigation, {
    value: value
  }, routes.map(route => {
    if (route.breadcrumbName) {
      return /*#__PURE__*/_react.default.createElement(_core.BottomNavigationAction, {
        key: route.path,
        label: route.breadcrumbName,
        value: route.path,
        icon: route.icon,
        component: NavLinkWrapper,
        exact: route.exact,
        to: route.path
      });
    }

    return null;
  })));
};

var _default = BottomNavigationMenu;
exports.default = _default;