@krowdy-ui/views/UserPoint/UserPoint.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 _core = require("@material-ui/core");

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

var styles = {
  avatar: {},
  point: {
    backgroundColor: 'white',
    borderRadius: '50%',
    height: function height(_ref) {
      var _ref$size = _ref.size,
          size = _ref$size === void 0 ? 8 : _ref$size;
      return size;
    },
    width: function width(_ref2) {
      var _ref2$size = _ref2.size,
          size = _ref2$size === void 0 ? 8 : _ref2$size;
      return size;
    }
  },
  root: {
    '& $avatar': {
      display: 'none'
    },
    '& $point': {},
    '&:hover': {
      '& $avatar': {
        display: 'block'
      },
      '& $point': {
        display: 'none'
      }
    },
    alignItems: 'center',
    bottom: function bottom(_ref3) {
      var _ref3$bottom = _ref3.bottom,
          _bottom = _ref3$bottom === void 0 ? 0 : _ref3$bottom;

      return _bottom;
    },
    display: 'flex',
    height: 12,
    justifyContent: 'center',
    left: function left(_ref4) {
      var _ref4$leftPercent = _ref4.leftPercent,
          leftPercent = _ref4$leftPercent === void 0 ? 0 : _ref4$leftPercent;
      return "calc(".concat(leftPercent, "% - 6px)");
    },
    position: 'absolute',
    width: 12
  },
  tooltipTitle: {
    fontSize: 12,
    fontWeight: 'bold'
  }
};

var UserPoint = function UserPoint(_ref5) {
  var classes = _ref5.classes,
      _ref5$subtitle = _ref5.subtitle,
      subtitle = _ref5$subtitle === void 0 ? '' : _ref5$subtitle,
      photo = _ref5.photo,
      _ref5$active = _ref5.active,
      active = _ref5$active === void 0 ? false : _ref5$active,
      _ref5$firstName = _ref5.firstName,
      firstName = _ref5$firstName === void 0 ? '' : _ref5$firstName,
      _ref5$lastName = _ref5.lastName,
      lastName = _ref5$lastName === void 0 ? '' : _ref5$lastName;
  if (active) return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
    arrow: true,
    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,
    size: "small",
    user: {
      firstName: firstName,
      lastName: lastName,
      photo: photo
    }
  }))));
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.avatar
  }, /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
    arrow: true,
    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)),
    TransitionProps: {
      timeout: 0
    }
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_views.AvatarUser, {
    active: false,
    size: "small",
    user: {
      firstName: firstName,
      lastName: lastName,
      photo: photo
    }
  })))), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.point
  }));
};

process.env.NODE_ENV !== "production" ? UserPoint.propTypes = {
  active: _propTypes["default"].bool,
  firstName: _propTypes["default"].string,
  lastName: _propTypes["default"].string,
  leftPercent: _propTypes["default"].number,
  photo: _propTypes["default"].string,
  size: _propTypes["default"].number,
  subtitle: _propTypes["default"].string
} : void 0;

var _default = (0, _core.withStyles)(styles, {
  name: 'UserPoint'
})(UserPoint);

exports["default"] = _default;