{"size": 2766, "ext": "js", "max_stars_repo_path": "resources/js/src/@coremat/CmtNavigation/Horizontal/NavCollapse.js", "max_stars_repo_name": "ProDeveloper0412/Laravel-React-Demo", "max_stars_repo_stars_event_min_datetime": "2021-09-21T02:28:24.000Z", "max_stars_repo_stars_event_max_datetime": "2021-10-19T07:57:11.000Z", "max_issues_repo_path": "resources/js/src/@coremat/CmtNavigation/Horizontal/NavCollapse.js", "max_issues_repo_name": "ProDeveloper0412/Laravel-React-Demo", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "resources/js/src/@coremat/CmtNavigation/Horizontal/NavCollapse.js", "max_forks_repo_name": "ProDeveloper0412/Laravel-React-Demo", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.7333333333, "max_line_length": 124, "alphanum_fraction": 0.6167751265}
import React, { cloneElement, isValidElement, useEffect, useMemo } from 'react';
import { List, ListItem } from '@material-ui/core';
import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import { useHistory } from 'react-router-dom';
import NavMenuItem from './NavMenuItem';
import useStyles from './NavCollapse.style';
import clsx from 'clsx';
import Box from '@material-ui/core/Box';
import { isUrlInChildren } from '../../CmtHelpers/JssHelper';

const NavCollapse = props => {
  const history = useHistory();
  const classes = useStyles();

  const { name, icon, className, children = [] } = props;
  const isExpandable = useMemo(() => children.length, [children]);
  const [open, setOpen] = React.useState(false);

  useEffect(() => {
    if (isUrlInChildren(props, history.location.pathname)) {
      setOpen(true);
    } else {
      setOpen(false);
    }

    const removeHistoryListening = history.listen(location => {
      if (isUrlInChildren(props, location.pathname)) {
        setOpen(true);
      } else {
        setOpen(false);
      }
    });

    return () => {
      removeHistoryListening();
    };
  }, [props, history]);

  const renderIcon = () => {
    if (icon && isValidElement(icon)) {
      return cloneElement(icon, {
        className: clsx(classes.iconRoot, 'Cmt-icon-root'),
      });
    }

    return null;
  };

  const MenuItemChildren = isExpandable ? (
    <List component="div" disablePadding className={classes.navCollapseItem}>
      {children.map((item, index) => {
        switch (item.type) {
          case 'collapse':
            return <NavCollapse {...item} key={index} className={classes.subCollapse} />;
          case 'item':
            return <NavMenuItem {...item} key={index} />;
          default:
            return null;
        }
      })}
    </List>
  ) : null;

  const MenuCollapse = (
    <ListItem
      component="div"
      disableGutters
      className={clsx(classes.navCollapseBtn, `${open ? 'active' : ''}`, 'Cmt-navCollapseBtn')}>
      <Box component="span" className={classes.navCollapseBtnInner}>
        {renderIcon()}
        <Box component="span" className={classes.navText}>
          {name}
        </Box>
        {/* Display the expand menu if the item has children */}
        {isExpandable && !open && <ArrowDropDownIcon className={classes.navArrow} />}
        {isExpandable && open && <ArrowDropUpIcon className={classes.navArrow} />}
        {/* Display an icon if any */}
      </Box>
      {MenuItemChildren}
    </ListItem>
  );

  return (
    <Box className={clsx(classes.navCollapse, 'Cmt-navCollapse', className, `${open ? 'active' : ''}`)}>{MenuCollapse}</Box>
  );
};

export default NavCollapse;
