@krowdy-ui/views/es/AvatarUser/AvatarUser.js

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { withStyles } from '@krowdy-ui/styles';
import { HighlightOff as HighlightOffIcon } from '@material-ui/icons';
export const styles = theme => ({
  big: {
    height: 44,
    width: 44
  },
  'default': {
    height: 36,
    width: 36
  },
  defaultAvatar: {
    alignItems: 'center',
    backgroundColor: 'white',
    border: `solid 1px ${theme.palette.primary.main}`,
    borderRadius: '50%',
    display: 'flex',
    fontSize: 14,
    justifyContent: 'center' // marginRight: theme.spacing(2),

  },
  defaultAvatarNothing: {
    background: theme.palette.grey[400]
  },
  deleteIcon: {
    backgroundColor: theme.palette.primary[500],
    borderRadius: '50%',
    color: 'white',
    cursor: 'pointer',
    display: 'none',
    height: theme.spacing(1.5),
    padding: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    width: theme.spacing(1.5)
  },
  hover: {
    '&:hover': {
      border: `solid 3px ${theme.palette.primary[300]}`
    }
  },
  image: {
    border: `solid 3px ${theme.palette.primary[300]}`,
    borderRadius: '50%' // marginRight: theme.spacing(2),

  },
  imageActive: {
    border: `solid 3px ${theme.palette.primary.main}`
  },
  imageDefault: {
    border: `solid 3px ${theme.palette.grey[300]}`
  },
  root: {
    '&:hover': {
      '& $deleteIcon': {
        display: 'block'
      }
    },
    position: 'relative'
  },
  small: {
    height: 28,
    width: 28
  }
});

function AvatarUser(props) {
  const {
    user,
    classes,
    active,
    hover,
    size = 'default',
    onDelete
  } = props;
  const acro = `${user.firstName && typeof user.firstName === 'string' ? user.firstName.charAt() : ''}${user.lastName && typeof user.lastName === 'string' ? user.lastName.charAt() : ''}`;

  const _handleClickDelete = () => onDelete();

  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, user ? user.photo ? /*#__PURE__*/React.createElement("img", {
    alt: acro,
    className: clsx(classes.image, active ? classes.imageActive : hover && classes.hover, active === undefined && classes.imageDefault, {
      default: classes.default,
      small: classes.small,
      big: classes.big
    }[size]),
    src: user.photo
  }) : /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.defaultAvatar, {
      default: classes.default,
      small: classes.small,
      big: classes.big
    }[size])
  }, acro) : null // <div className={clsx(classes.defaultAvatar, classes.defaultAvatarNothing )} />
  , onDelete && /*#__PURE__*/React.createElement(HighlightOffIcon, {
    className: classes.deleteIcon,
    fontSize: "small",
    onClick: _handleClickDelete
  }));
}

process.env.NODE_ENV !== "production" ? AvatarUser.propTypes = {
  active: PropTypes.bool,
  classes: PropTypes.object,
  hover: PropTypes.bool,
  size: PropTypes.string,
  user: PropTypes.shape({
    firstName: PropTypes.string,
    lastName: PropTypes.string,
    photo: PropTypes.string
  })
} : void 0;
AvatarUser.muiName = 'AvatarUser';
export default withStyles(styles, {
  name: 'AvatarUser'
})(AvatarUser);