@krowdy-ui/views/Stepper/StepConnector.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 _core = require("@material-ui/core");

var _react = _interopRequireDefault(require("react"));

var StepConnector = function StepConnector(_ref) {
  var totalSteps = _ref.totalSteps,
      index = _ref.index,
      activeIndex = _ref.activeIndex;
  var classes = useStyles({
    activeIndex: activeIndex,
    index: index,
    totalSteps: totalSteps
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.root
  });
};

var useStyles = (0, _core.makeStyles)(function (theme) {
  return {
    root: {
      background: function background(_ref2) {
        var activeIndex = _ref2.activeIndex,
            index = _ref2.index;
        return index < activeIndex ? theme.palette.primary.main : theme.palette.grey[400];
      },
      height: 2,
      left: function left(_ref3) {
        var totalSteps = _ref3.totalSteps,
            index = _ref3.index;
        return "calc(((100% - ".concat(32 * totalSteps, "px) / ").concat(totalSteps - 1, " + 32px) * ").concat(index, " + 32px)");
      },
      position: 'absolute',
      top: 10.5,
      width: function width(_ref4) {
        var totalSteps = _ref4.totalSteps;
        return "calc((100% - ".concat(32 * totalSteps, "px) / ").concat(totalSteps - 1, ")");
      }
    }
  };
}, {
  name: 'StepConnector'
});
var _default = StepConnector;
exports["default"] = _default;