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

var Column = function Column(_ref) {
  var candidates = _ref.candidates,
      index = _ref.index,
      divider = _ref.divider,
      maxCandidates = _ref.maxCandidates,
      pricePercent = _ref.pricePercent;
  var classes = useStyles({
    pricePercent: pricePercent
  });
  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("div", {
    className: classes.containerBar
  }, candidates.map(function (candidate, index) {
    return /*#__PURE__*/_react["default"].createElement(_Bar["default"], {
      candidate: candidate,
      index: index,
      key: index,
      max: candidates.length,
      maxCandidates: maxCandidates
    });
  })));
};

var useStyles = (0, _core.makeStyles)(function (theme) {
  return {
    avatar: {},
    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(_ref2) {
        var pricePercent = _ref2.pricePercent;
        return "".concat(pricePercent, "%");
      }
    },
    containerBar: {
      display: 'flex',
      flexDirection: 'column-reverse',
      height: '100%',
      width: '100%'
    },
    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])
    }
  };
}, {
  name: 'Column'
});
var _default = Column;
exports["default"] = _default;