@krowdy-ui/views/BubbleChart/Circle.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 Circle = function Circle(props) {
  var _props$firstName = props.firstName,
      firstName = _props$firstName === void 0 ? '' : _props$firstName,
      _props$lastName = props.lastName,
      lastName = _props$lastName === void 0 ? '' : _props$lastName,
      subtitle = props.subtitle,
      _props$max = props.max,
      max = _props$max === void 0 ? 4 : _props$max,
      _props$size = props.size,
      size = _props$size === void 0 ? 4 : _props$size,
      _props$selected = props.selected,
      selected = _props$selected === void 0 ? false : _props$selected;
  var classes = useStyles({
    max: max,
    size: size
  });
  return /*#__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", {
    className: (0, _clsx["default"])(classes.root, selected ? classes.select : [classes.hover, classes.unselect])
  }));
};

process.env.NODE_ENV !== "production" ? Circle.propTypes = {
  firstName: _propTypes["default"].string,
  lastName: _propTypes["default"].string,
  max: _propTypes["default"].number,
  selected: _propTypes["default"].bool,
  size: _propTypes["default"].number,
  subtitle: _propTypes["default"].string
} : void 0;
var useStyles = (0, _core.makeStyles)(function (theme) {
  return {
    hover: {
      '&:hover': {
        backgroundColor: theme.palette.primary[300]
      }
    },
    root: {
      borderRadius: '50%',
      height: function height(_ref) {
        var size = _ref.size,
            max = _ref.max;
        return 6 / (max - 1) * size * 4;
      },
      width: function width(_ref2) {
        var size = _ref2.size,
            max = _ref2.max;
        return 6 / (max - 1) * size * 4;
      }
    },
    select: {
      backgroundColor: theme.palette.primary[500]
    },
    unselect: {
      backgroundColor: function backgroundColor(_ref3) {
        var size = _ref3.size;
        return theme.palette.secondary[size > 1 ? 100 : 0];
      }
    }
  };
});
var _default = Circle;
exports["default"] = _default;