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

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';
import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { FaCircle } from 'react-icons/fa';
import { BsCircle } from 'react-icons/bs';
import { IconContext } from 'react-icons';

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

const useStyles = makeStyles(() => ({
  text_typography: {
    fontSize: '0.875rem',
    lineHeight: '18px',
  },
  text: {
    color: colors.gray3,
  },
  text_active: {
    color: colors.white,
  },
  item: {
    minHeight: 32,
    paddingLeft: 24,
    paddingTop: 0,
    paddingBottom: 0,
  },
  item_last: {
    minHeight: 32,
    paddingLeft: 24,
    paddingTop: 0,
    paddingBottom: 0,
    marginBottom: 8,
  },
  item_active: {
    minHeight: 32,
    paddingLeft: 24,
    paddingTop: 0,
    paddingBottom: 0,
    backgroundColor: colors.gray1,
    borderLeft: `1px solid ${colors.green1}`,
  },
  icon: {
    minWidth: 0,
    marginLeft: 6,
    marginRight: 24,
  },
}));

function SubCategoryItem({ isLast, text, active, onlyIcons, onClick, href, linkComponent }) {
  const classes = useStyles();

  const textClasses = active ? classes.text_active : classes.text;

  return (
    <ListItem
      button
      aria-label={text}
      title={text}
      onClick={onClick}
      component={linkComponent}
      href={href}
      selected={active}
      classes={{ root: isLast ? classes.item_last : classes.item, selected: classes.item_active }}
    >
      <ListItemIcon classes={{ root: classes.icon }}>
        <IconContext.Provider
          value={{
            color: active ? colors.white : colors.gray3,
            size: 6,
          }}
        >
          {active ? <FaCircle /> : <BsCircle />}
        </IconContext.Provider>
      </ListItemIcon>
      {!onlyIcons && (
        <ListItemText
          primary={text}
          classes={{
            root: textClasses,
            primary: classes.text_typography,
          }}
        />
      )}
    </ListItem>
  );
}

SubCategoryItem.propTypes = {
  text: PropTypes.string.isRequired,
  active: PropTypes.bool.isRequired,
  onlyIcons: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
  href: PropTypes.string,
  linkComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
};

export { SubCategoryItem };