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

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

var Bar = function Bar(_ref) {
  var candidate = _ref.candidate,
      maxCandidates = _ref.maxCandidates,
      index = _ref.index,
      max = _ref.max;
  var percent = 100 / maxCandidates;
  var classes = useStyles({
    index: index,
    max: max,
    percent: percent
  });
  var firstName = candidate.firstName,
      lastName = candidate.lastName,
      salary = candidate.salary,
      photo = candidate.photo,
      selected = candidate.selected;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.bar
  }, /*#__PURE__*/_react["default"].createElement(_views.UserPoint, {
    active: selected,
    bottom: '50%',
    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 {
    bar: {
      backgroundColor: theme.palette.primary[100],
      // borderTop      : ({ avarage }) => `${avarage <= 1 ? 1 : 0}px solid ${theme.palette.primary[600]}`,
      height: function height(_ref2) {
        var percent = _ref2.percent;
        return "".concat(percent, "%");
      },
      position: 'relative',
      width: '100%',
      zIndex: function zIndex(_ref3) {
        var index = _ref3.index,
            max = _ref3.max;
        return max - index;
      }
    }
  };
});
var _default = Bar;
exports["default"] = _default;