@eureca/eureca-ui/src/components/Drawer/UserItem.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 { FiLogOut } from 'react-icons/fi';

import { IconContext } from 'react-icons';

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

import { Flex } from '../Flex';
import { Avatar } from '../Avatar';

const useStyles = makeStyles(() => ({
  text_typography: {
    fontSize: '0.875rem',
    lineHeight: '18px',
  },
  text_root: {
    color: colors.gray4,
    cursor: 'pointer',
  },
  item: {
    paddingLeft: 24,
    paddingRight: 24,
    paddingTop: 14,
    paddingBottom: 14,
  },
  item_icon: {
    paddingLeft: 20,
    paddingTop: 14,
    paddingBottom: 14,
  },
  icon: {
    cursor: 'pointer',
    minWidth: 0,
  },
}));

function UserItem({ onlyIcons, user, onClickUser, onLogout }) {
  const classes = useStyles();

  const item_classes = onlyIcons ? classes.item_icon : classes.item;

  function handleUser(e) {
    e.stopPropagation();
    onClickUser(user);
  }

  function handleLogout(e) {
    e.stopPropagation();
    onLogout();
  }

  return (
    <ListItem aria-label="user-item" title={user?.name} classes={{ root: item_classes }}>
      <Flex
        role="button"
        aria-label="Avatar"
        textAlign="center"
        pr={onlyIcons ? 0 : 1.25}
        cursorPointer
        onClick={handleUser}
      >
        <Avatar name="user-avatar" size={30} src={user?.avatar} />
      </Flex>
      {!onlyIcons && (
        <>
          <ListItemText
            role="button"
            aria-label="Avatar"
            onClick={handleUser}
            primary={user?.name}
            classes={{
              root: classes.text_root,
              primary: classes.text_typography,
            }}
          />
          <ListItemIcon
            role="button"
            aria-label="Logout"
            title="Logout"
            onClick={handleLogout}
            classes={{ root: classes.icon }}
          >
            <IconContext.Provider
              value={{
                color: colors.gray4,
                size: 18,
                attr: { 'data-testid': 'logout-icon' },
              }}
            >
              <FiLogOut />
            </IconContext.Provider>
          </ListItemIcon>
        </>
      )}
    </ListItem>
  );
}

UserItem.propTypes = {
  onlyIcons: PropTypes.bool.isRequired,
  user: PropTypes.shape({
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    name: PropTypes.string.isRequired,
    avatar: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  }),
  onClickUser: PropTypes.func,
  onLogout: PropTypes.func,
};

UserItem.defautProps = {
  user: {
    id: null,
    name: '',
    avatar: '',
  },
  onClickUser: () => {},
  onLogout: () => {},
};

export { UserItem };