@krowdy-ui/views/esm/GraphicBar/GraphicBar.js

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@krowdy-ui/core';
import Column from './Column';
import Price from './Price';
var interval = 4;
var emptyPrices = new Array(interval);

var parsePrice = function parsePrice(price) {
  return Math.ceil(price / Math.pow(10, price.toString().length - 1)) * Math.pow(10, price.toString().length - 1);
};

var GraphicBar = function GraphicBar(_ref) {
  var _ref$multiplier = _ref.multiplier,
      multiplier = _ref$multiplier === void 0 ? 1 : _ref$multiplier,
      _ref$candidates = _ref.candidates,
      candidates = _ref$candidates === void 0 ? [] : _ref$candidates;
  var divider = candidates.length;
  var max = candidates.map(function (_ref2) {
    var salary = _ref2.salary;
    return salary;
  }).sort(function (a, b) {
    return b - a;
  })[0];
  var prices = Array.from(emptyPrices, function (value, index) {
    return parsePrice(Math.ceil(max - max / 4 * index));
  });
  var classes = useStyles({
    max: prices[0],
    multiplier: multiplier
  });
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.row, classes.container)
  }, /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.column, classes.prices)
  }, prices.map(function (price, index) {
    return /*#__PURE__*/React.createElement(Price, {
      key: index,
      max: prices[0],
      multiplier: multiplier,
      price: price
    });
  })), /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.containerGraphicBar, classes.row)
  }, candidates.map(function (_ref3, index) {
    var salary = _ref3.salary,
        selected = _ref3.selected,
        firstName = _ref3.firstName,
        lastName = _ref3.lastName,
        photo = _ref3.photo;
    return /*#__PURE__*/React.createElement(Column, {
      divider: divider,
      firstName: firstName,
      index: index,
      key: index,
      lastName: lastName,
      max: prices[0],
      multiplier: multiplier,
      photo: photo,
      salary: salary,
      selected: selected
    });
  }))));
};

process.env.NODE_ENV !== "production" ? GraphicBar.propTypes = {
  candidates: PropTypes.arrayOf(PropTypes.shape({
    firstName: PropTypes.string,
    lastName: PropTypes.string,
    photo: PropTypes.string,
    salary: PropTypes.number,
    selected: PropTypes.bool
  })),
  multiplier: PropTypes.number
} : void 0;
var useStyles = makeStyles(function (theme) {
  return {
    column: {
      display: 'flex',
      flexDirection: 'column'
    },
    container: {
      height: '100%',
      marginTop: theme.spacing(1),
      minHeight: 150,
      width: '100%'
    },
    containerGraphicBar: {
      borderBottom: "1px solid ".concat(theme.palette.grey[600]),
      display: 'flex',
      flexDirection: 'row',
      height: 'inherit',
      width: 'inherit'
    },
    price: {
      color: theme.palette.grey[600]
    },
    prices: {
      position: 'relative',
      width: function width(_ref4) {
        var max = _ref4.max,
            multiplier = _ref4.multiplier;
        return (max * multiplier).toString().length * 9;
      }
    },
    root: {
      display: 'flex',
      height: 'calc(100% - 32px)'
    },
    row: {
      display: 'flex',
      flexDirection: 'row'
    }
  };
}, {
  name: 'GraphicBar'
});
export default GraphicBar;