@krowdy-ui/views/GraphicBar/Column.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 _clsx = _interopRequireDefault(require("clsx"));

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

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

var Column = function Column(_ref) {
  var index = _ref.index,
      divider = _ref.divider,
      max = _ref.max,
      salary = _ref.salary,
      multiplier = _ref.multiplier,
      firstName = _ref.firstName,
      lastName = _ref.lastName,
      photo = _ref.photo,
      selected = _ref.selected;
  var avarage = salary / max / multiplier;
  var classes = useStyles({
    avarage: avarage,
    divider: divider,
    percent: (avarage <= 1 ? avarage : 1) * 100
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.columnContainer, index === 0 && classes.leftLine, index === divider - 1 && classes.rightLine, index > 0 && index < divider - 1 && classes.centerLine)
  }, /*#__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, "S/ ".concat(salary)))
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.bar
  })), /*#__PURE__*/_react["default"].createElement(_views.UserPoint, {
    active: selected,
    bottom: -30,
    classes: {
      avatar: classes.avatar,
      point: classes.point
    },
    firstName: firstName,
    lastName: lastName,
    leftPercent: 50,
    photo: photo,
    subtitle: "S/ ".concat(salary)
  }));
};

var useStyles = (0, _core.makeStyles)(function (theme) {
  return {
    avatar: {},
    bar: {
      backgroundColor: theme.palette.primary[100],
      borderTop: function borderTop(_ref2) {
        var avarage = _ref2.avarage;
        return "".concat(avarage <= 1 ? 1 : 0, "px solid ").concat(theme.palette.primary[600]);
      },
      height: function height(_ref3) {
        var percent = _ref3.percent;
        return "".concat(percent, "%");
      },
      width: '100%'
    },
    centerLine: {
      borderLeft: "1px solid ".concat(theme.palette.grey[200]),
      borderRight: "1px solid ".concat(theme.palette.grey[200])
    },
    columnContainer: {
      '& $point': {
        backgroundColor: theme.palette.grey[300]
      },
      '&:hover': {
        '& $avatar': {
          display: 'block'
        },
        '& $point': {
          display: 'none'
        }
      },
      alignItems: 'flex-end',
      display: 'flex',
      height: 'inherit',
      justifyContent: 'center',
      position: 'relative',
      width: function width(_ref4) {
        var divider = _ref4.divider;
        return "".concat(100 / divider, "%");
      }
    },
    hide: {
      display: 'none'
    },
    leftLine: {
      borderLeft: "2px solid ".concat(theme.palette.grey[200]),
      borderRight: "1px solid ".concat(theme.palette.grey[200])
    },
    point: {},
    rightLine: {
      borderLeft: "1px solid ".concat(theme.palette.grey[200]),
      borderRight: "2px solid ".concat(theme.palette.grey[200])
    },
    show: {
      display: 'block'
    },
    tooltipTitle: {
      fontSize: 12,
      fontWeight: 'bold'
    }
  };
}, {
  name: 'Column'
});
var _default = Column;
exports["default"] = _default;