@krowdy-ui/views/SampleBar/LineVert.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("@material-ui/core");

var useStyles = (0, _core.makeStyles)(function (theme) {
  return {
    bar: {
      backgroundColor: 'white',
      height: 12,
      top: 0,
      width: 2
    },
    root: {
      left: function left(_ref) {
        var leftPercent = _ref.leftPercent;
        return "".concat(leftPercent, "%");
      },
      position: 'absolute'
    },
    rootLabel: {
      bottom: -theme.spacing(3),
      color: theme.palette.grey[600],
      fontSize: 12,
      left: function left(_ref2) {
        var leftPercent = _ref2.leftPercent;
        return "calc(".concat(leftPercent, "% - 4px)");
      }
    }
  };
});

var LineVert = function LineVert(_ref3) {
  var _ref3$leftPercent = _ref3.leftPercent,
      leftPercent = _ref3$leftPercent === void 0 ? 0 : _ref3$leftPercent,
      index = _ref3.index,
      customLabel = _ref3.customLabel;
  var classes = useStyles({
    leftPercent: leftPercent
  });
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.root, classes.bar)
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.root, classes.rootLabel)
  }, customLabel ? customLabel(index) : index));
};

var _default = LineVert;
exports["default"] = _default;