@eureca/eureca-ui/src/components/Drawer/CategoryItem.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import { List, ListItem, ListItemIcon, ListItemText, Divider, Collapse } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { IconContext } from 'react-icons';

import { colors } from '../../theme/colors';

import { SubCategoryItem } from './SubCategoryItem';

const useStyles = makeStyles(() => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: colors.gray2,
  },
  divider: {
    backgroundColor: 'rgba(46, 202, 175, 0.2)',
  },
  text_typography: {
    fontSize: '0.875rem',
    lineHeight: '18px',
  },
  text: {
    color: colors.gray3,
  },
  text_active: {
    color: colors.white,
  },
  item: {
    paddingLeft: 24,
    paddingTop: 10,
    paddingBottom: 10,
    minHeight: 45,
  },
  sub_item: {
    paddingLeft: 24,
    paddingTop: 14,
    paddingBottom: 14,
  },
  icon: {
    minWidth: 0,
    marginLeft: 0,
    marginRight: 18,
  },
}));

function CategoryItem({
  id,
  icon,
  text,
  activeItem,
  subCategories,
  onlyIcons,
  onClick,
  href,
  linkComponent,
}) {
  const classes = useStyles();

  const [activeCategory, activeSubcategory] = activeItem ? activeItem.split('.') : [];

  const isActive = activeCategory === id;
  const textClasses = isActive ? classes.text_active : classes.text;

  return (
    <>
      <ListItem
        button
        aria-label={text}
        title={text}
        onClick={event => {
          event.stopPropagation();
          onClick(id);
        }}
        component={linkComponent}
        href={href}
        classes={{ root: classes.item }}
      >
        <ListItemIcon aria-label={text} classes={{ root: classes.icon }}>
          <IconContext.Provider
            value={{
              color: isActive ? colors.green1 : colors.gray3,
              size: 18,
              attr: { 'data-testid': 'category-item-icon' },
            }}
          >
            {icon}
          </IconContext.Provider>
        </ListItemIcon>
        {!onlyIcons && (
          <ListItemText
            aria-label={text}
            primary={text}
            classes={{
              root: textClasses,
              primary: classes.text_typography,
            }}
          />
        )}
      </ListItem>
      <Collapse in={Boolean(isActive && activeSubcategory)} unmountOnExit>
        <List component="nav" disablePadding className={classes.root}>
          {subCategories.map((category, index) => (
            <SubCategoryItem
              key={category.id}
              isLast={index === subCategories.length - 1}
              text={category.text}
              active={activeSubcategory === category.id}
              onlyIcons={onlyIcons}
              onClick={() => onClick(`${id}.${category.id}`)}
              href={category.href}
              linkComponent={linkComponent}
            />
          ))}
        </List>
      </Collapse>
      <Divider className={classes.divider} />
    </>
  );
}

CategoryItem.propTypes = {
  id: PropTypes.string.isRequired,
  icon: PropTypes.object.isRequired,
  text: PropTypes.string.isRequired,
  activeItem: PropTypes.string.isRequired,
  subCategories: PropTypes.array.isRequired,
  onlyIcons: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
  href: PropTypes.string,
  linkComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
};

export { CategoryItem };