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

React components that implement Google's Material Design.

import React from 'react';
import clsx from 'clsx';
import { makeStyles, Tooltip, Typography } from '@krowdy-ui/core';
import { UserPoint } from '@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.createElement("div", {
    className: clsx(classes.columnContainer, index === 0 && classes.leftLine, index === divider - 1 && classes.rightLine, index > 0 && index < divider - 1 && classes.centerLine)
  }, /*#__PURE__*/React.createElement(Tooltip, {
    arrow: true,
    placement: "top",
    title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
      className: classes.tooltipTitle
    }, firstName, " ", lastName), /*#__PURE__*/React.createElement(Typography, null, "S/ ".concat(salary)))
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.bar
  })), /*#__PURE__*/React.createElement(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 = 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'
});
export default Column;