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

React components that implement Google's Material Design.

import { makeStyles } from '@material-ui/core';
import React from 'react';

const StepConnector = ({
  totalSteps,
  index,
  activeIndex
}) => {
  const classes = useStyles({
    activeIndex,
    index,
    totalSteps
  });
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  });
};

const useStyles = makeStyles(theme => ({
  root: {
    background: ({
      activeIndex,
      index
    }) => index < activeIndex ? theme.palette.primary.main : theme.palette.grey[400],
    height: 2,
    left: ({
      totalSteps,
      index
    }) => `calc(((100% - ${32 * totalSteps}px) / ${totalSteps - 1} + 32px) * ${index} + 32px)`,
    position: 'absolute',
    top: 10.5,
    width: ({
      totalSteps
    }) => `calc((100% - ${32 * totalSteps}px) / ${totalSteps - 1})`
  }
}), {
  name: 'StepConnector'
});
export default StepConnector;