@krowdy-ui/views/esm/Histogram/Bar.js

React components that implement Google's Material Design.

import React from 'react';
import { makeStyles } from '@krowdy-ui/core';
import { UserPoint } from '@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.createElement("div", {
    className: classes.bar
  }, /*#__PURE__*/React.createElement(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 = 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;
      }
    }
  };
});
export default Bar;