@krowdy-ui/views/esm/Stepper/StepConnector.js

React components that implement Google's Material Design.

import { makeStyles } from '@material-ui/core';
import React from '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.createElement("div", {
    className: classes.root
  });
};

var useStyles = 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'
});
export default StepConnector;