@krowdy-ui/views/es/BubbleChart/Avatar.js

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { withStyles, Tooltip, Typography } from '@krowdy-ui/core';
import { AvatarUser } from '@krowdy-ui/views';

const Avatar = props => {
  const {
    subtitle,
    photo,
    active,
    selected,
    firstName,
    lastName,
    classes
  } = props;
  return /*#__PURE__*/React.createElement("div", {
    className: classes.hover
  }, /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.root, !selected && classes.unselected)
  }, /*#__PURE__*/React.createElement(Tooltip, {
    arrow: true,
    placement: "top",
    title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
      className: classes.tooltipTitle
    }, firstName, " ", lastName), /*#__PURE__*/React.createElement(Typography, null, subtitle))
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AvatarUser, {
    active: active,
    hover: true,
    size: "small",
    user: {
      firstName,
      lastName,
      photo
    }
  })))));
};

process.env.NODE_ENV !== "production" ? Avatar.propTypes = {
  active: PropTypes.bool,
  classes: PropTypes.shape({
    avatar: PropTypes.string,
    hover: PropTypes.string,
    point: PropTypes.string,
    root: PropTypes.string,
    tooltipTitle: PropTypes.string,
    unselected: PropTypes.string
  }),
  firstName: PropTypes.string,
  lastName: PropTypes.string,
  photo: PropTypes.string,
  selected: PropTypes.bool,
  subtitle: PropTypes.string
} : void 0;
export default withStyles(() => ({
  avatar: {},
  hover: {
    '&:hover': {
      '& $unselected': {
        visibility: 'visible'
      }
    }
  },
  point: {
    backgroundColor: 'white',
    borderRadius: '50%',
    height: ({
      size = 0
    }) => size,
    width: ({
      size = 0
    }) => size
  },
  root: {
    '& $avatar': {
      display: 'none'
    },
    '& $point': {},
    '&:hover': {
      '& $avatar': {
        display: 'block'
      },
      '& $point': {
        display: 'none'
      }
    },
    alignItems: 'center',
    display: 'flex',
    height: 28,
    justifyContent: 'center',
    left: ({
      leftPercent = 0
    }) => `calc(${leftPercent}% - 6px)`,
    width: 28
  },
  tooltipTitle: {
    fontSize: 12,
    fontWeight: 'bold'
  },
  unselected: {
    visibility: 'hidden'
  }
}), {
  name: 'Avatar'
})(Avatar);