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

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@krowdy-ui/core';
import { UserPoint } from '@krowdy-ui/views';
import LineVert from './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.createElement("div", {
    className: classes.root
  }, IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
    className: classes.startAdornment,
    color: "primary",
    fontSize: "small"
  }) : null, /*#__PURE__*/React.createElement("div", {
    className: classes.bar
  }, new Array(maxValue >= 1 ? maxValue - 1 : 0).fill(1).map(function (_, index) {
    return /*#__PURE__*/React.createElement(LineVert, {
      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.createElement(UserPoint, {
      active: active,
      firstName: firstName,
      key: _id,
      lastName: lastName,
      leftPercent: value / (maxValue || 1) * 100,
      photo: photo,
      subtitle: template(mark)
    });
  })), IconComponent ? /*#__PURE__*/React.createElement("div", {
    className: classes.endAdornment
  }, /*#__PURE__*/React.createElement(IconComponent, {
    color: "primary",
    fontSize: "small"
  }), /*#__PURE__*/React.createElement(IconComponent, {
    color: "primary",
    fontSize: "default"
  }), /*#__PURE__*/React.createElement(IconComponent, {
    color: "primary",
    fontSize: "small"
  })) : null);
};

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