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

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _clsx = _interopRequireDefault(require("clsx"));

var _core = require("@krowdy-ui/core");

var _views = require("@krowdy-ui/views");

var Avatar = function Avatar(props) {
  var subtitle = props.subtitle,
      photo = props.photo,
      active = props.active,
      selected = props.selected,
      firstName = props.firstName,
      lastName = props.lastName,
      classes = props.classes;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.hover
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.root, !selected && classes.unselected)
  }, /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
    arrow: true,
    placement: "top",
    title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
      className: classes.tooltipTitle
    }, firstName, " ", lastName), /*#__PURE__*/_react["default"].createElement(_core.Typography, null, subtitle))
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_views.AvatarUser, {
    active: active,
    hover: true,
    size: "small",
    user: {
      firstName: firstName,
      lastName: lastName,
      photo: photo
    }
  })))));
};

process.env.NODE_ENV !== "production" ? Avatar.propTypes = {
  active: _propTypes["default"].bool,
  classes: _propTypes["default"].shape({
    avatar: _propTypes["default"].string,
    hover: _propTypes["default"].string,
    point: _propTypes["default"].string,
    root: _propTypes["default"].string,
    tooltipTitle: _propTypes["default"].string,
    unselected: _propTypes["default"].string
  }),
  firstName: _propTypes["default"].string,
  lastName: _propTypes["default"].string,
  photo: _propTypes["default"].string,
  selected: _propTypes["default"].bool,
  subtitle: _propTypes["default"].string
} : void 0;

var _default = (0, _core.withStyles)(function () {
  return {
    avatar: {},
    hover: {
      '&:hover': {
        '& $unselected': {
          visibility: 'visible'
        }
      }
    },
    point: {
      backgroundColor: 'white',
      borderRadius: '50%',
      height: function height(_ref) {
        var _ref$size = _ref.size,
            size = _ref$size === void 0 ? 0 : _ref$size;
        return size;
      },
      width: function width(_ref2) {
        var _ref2$size = _ref2.size,
            size = _ref2$size === void 0 ? 0 : _ref2$size;
        return size;
      }
    },
    root: {
      '& $avatar': {
        display: 'none'
      },
      '& $point': {},
      '&:hover': {
        '& $avatar': {
          display: 'block'
        },
        '& $point': {
          display: 'none'
        }
      },
      alignItems: 'center',
      display: 'flex',
      height: 28,
      justifyContent: 'center',
      left: function left(_ref3) {
        var _ref3$leftPercent = _ref3.leftPercent,
            leftPercent = _ref3$leftPercent === void 0 ? 0 : _ref3$leftPercent;
        return "calc(".concat(leftPercent, "% - 6px)");
      },
      width: 28
    },
    tooltipTitle: {
      fontSize: 12,
      fontWeight: 'bold'
    },
    unselected: {
      visibility: 'hidden'
    }
  };
}, {
  name: 'Avatar'
})(Avatar);

exports["default"] = _default;