@krowdy-ui/views/SampleBar/SampleBar.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 _propTypes = _interopRequireDefault(require("prop-types"));

var _core = require("@krowdy-ui/core");

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

var _LineVert = _interopRequireDefault(require("./LineVert"));

var styles = function styles(theme) {
  return {
    bar: {
      backgroundColor: theme.palette.secondary[100],
      borderRadius: 8,
      height: 12,
      minWidth: 100,
      position: 'relative',
      width: '100%'
    },
    endAdornment: {
      alignItems: 'center',
      display: 'flex',
      marginLeft: theme.spacing(1.5)
    },
    root: {
      alignItems: 'center',
      display: 'flex',
      height: 54
    },
    startAdornment: {
      marginRight: theme.spacing(1.5)
    }
  };
};

var SampleBar = function SampleBar(_ref) {
  var _ref$marks = _ref.marks,
      marks = _ref$marks === void 0 ? [] : _ref$marks,
      classes = _ref.classes,
      _ref$template = _ref.template,
      template = _ref$template === void 0 ? function () {} : _ref$template,
      currentMark = _ref.mark,
      IconComponent = _ref.IconComponent,
      customLabel = _ref.customLabel;
  var maxValue = Math.ceil(marks.reduce(function (max, mark) {
    return Math.max(max, mark.value);
  }, 0));
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.root
  }, IconComponent ? /*#__PURE__*/_react["default"].createElement(IconComponent, {
    className: classes.startAdornment,
    color: "primary",
    fontSize: "small"
  }) : null, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.bar
  }, new Array(maxValue >= 1 ? maxValue - 1 : 0).fill(1).map(function (_, index) {
    return /*#__PURE__*/_react["default"].createElement(_LineVert["default"], {
      customLabel: customLabel,
      index: index + 1,
      key: index,
      leftPercent: 100 / maxValue * (index + 1)
    });
  }), marks.map(function (mark) {
    var firstName = mark.firstName,
        _id = mark._id,
        lastName = mark.lastName,
        value = mark.value,
        photo = mark.photo;
    var active = currentMark && _id === currentMark._id;
    return /*#__PURE__*/_react["default"].createElement(_views.UserPoint, {
      active: active,
      firstName: firstName,
      key: _id,
      lastName: lastName,
      leftPercent: value / (maxValue || 1) * 100,
      photo: photo,
      subtitle: template(mark)
    });
  })), IconComponent ? /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.endAdornment
  }, /*#__PURE__*/_react["default"].createElement(IconComponent, {
    color: "primary",
    fontSize: "small"
  }), /*#__PURE__*/_react["default"].createElement(IconComponent, {
    color: "primary",
    fontSize: "default"
  }), /*#__PURE__*/_react["default"].createElement(IconComponent, {
    color: "primary",
    fontSize: "small"
  })) : null);
};

process.env.NODE_ENV !== "production" ? SampleBar.propTypes = {
  IconComponent: _propTypes["default"].elementType,
  classes: _propTypes["default"].object,
  customLabel: _propTypes["default"].func,
  mark: _propTypes["default"].shape({
    _id: _propTypes["default"].string,
    firstName: _propTypes["default"].string,
    lastName: _propTypes["default"].string,
    photo: _propTypes["default"].string,
    value: _propTypes["default"].number
  }),
  marks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    _id: _propTypes["default"].string,
    firstName: _propTypes["default"].string,
    lastName: _propTypes["default"].string,
    photo: _propTypes["default"].string,
    value: _propTypes["default"].number
  })),
  template: _propTypes["default"].func
} : void 0;

var _default = (0, _core.withStyles)(styles, {
  name: 'SampleBar'
})(SampleBar);

exports["default"] = _default;