removed old stepper component
Tudor Stanciu
parent
a49a289b2c
commit
6af31bdcca
|
|
@ -1,75 +0,0 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import steps from "./steps";
|
||||
import {
|
||||
Card,
|
||||
Stepper,
|
||||
Step,
|
||||
StepButton,
|
||||
StepLabel,
|
||||
makeStyles
|
||||
} from "@material-ui/core";
|
||||
import { useLocation, useHistory } from "react-router-dom";
|
||||
import CustomStepConnector from "./CustomStepConnector";
|
||||
import StepIcon from "./StepIcon";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const styles = () => ({
|
||||
stepperCard: {
|
||||
margin: "15px"
|
||||
},
|
||||
stepper: {
|
||||
padding: "10px"
|
||||
}
|
||||
});
|
||||
|
||||
const useStyles = makeStyles(styles);
|
||||
|
||||
const ApplicationStepper = () => {
|
||||
const firstStep = steps[0];
|
||||
const [activeStep, setActiveStep] = useState(firstStep);
|
||||
const classes = useStyles();
|
||||
const location = useLocation();
|
||||
const history = useHistory();
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const step = steps.find(z => z.route === location.pathname);
|
||||
if (step) {
|
||||
setActiveStep(step);
|
||||
}
|
||||
}, [location.pathname]);
|
||||
|
||||
const handleStepClick = step => {
|
||||
if (!step) return;
|
||||
setActiveStep(step);
|
||||
if (location.pathname === step.route) return;
|
||||
history.push(step.route);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={classes.stepperCard}>
|
||||
<Stepper
|
||||
className={classes.stepper}
|
||||
activeStep={activeStep.id}
|
||||
orientation="horizontal"
|
||||
connector={<CustomStepConnector />}
|
||||
>
|
||||
{steps.map(step => (
|
||||
<Step key={step.id}>
|
||||
<StepButton
|
||||
id={"appStepper_" + step.title}
|
||||
disabled={step.disabled}
|
||||
onClick={() => handleStepClick(step)}
|
||||
>
|
||||
<StepLabel StepIconComponent={StepIcon}>
|
||||
{t(step.title)}
|
||||
</StepLabel>
|
||||
</StepButton>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApplicationStepper;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import { withStyles } from "@material-ui/core/styles";
|
||||
import StepConnector from "@material-ui/core/StepConnector";
|
||||
|
||||
const CustomStepConnector = withStyles({
|
||||
alternativeLabel: {
|
||||
top: 22
|
||||
},
|
||||
active: {
|
||||
"& $line": {
|
||||
backgroundImage:
|
||||
"linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)"
|
||||
}
|
||||
},
|
||||
completed: {
|
||||
"& $line": {
|
||||
backgroundImage:
|
||||
"linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)"
|
||||
}
|
||||
},
|
||||
line: {
|
||||
height: 3,
|
||||
border: 0,
|
||||
backgroundColor: "#eaeaf0",
|
||||
borderRadius: 1
|
||||
}
|
||||
})(StepConnector);
|
||||
|
||||
export default CustomStepConnector;
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import clsx from "clsx";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import steps from "./steps";
|
||||
|
||||
const useStepIconStyles = makeStyles({
|
||||
root: {
|
||||
backgroundColor: "#ccc",
|
||||
zIndex: 1,
|
||||
color: "#fff",
|
||||
width: 50,
|
||||
height: 50,
|
||||
display: "flex",
|
||||
borderRadius: "50%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
},
|
||||
active: {
|
||||
backgroundImage:
|
||||
"linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)",
|
||||
boxShadow: "0 4px 10px 0 rgba(0,0,0,.25)"
|
||||
},
|
||||
completed: {
|
||||
backgroundImage:
|
||||
"linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)"
|
||||
}
|
||||
});
|
||||
|
||||
function StepIcon(props) {
|
||||
const classes = useStepIconStyles();
|
||||
const { active, completed } = props;
|
||||
|
||||
const getIcon = icon => {
|
||||
const step = steps.find(z => z.id === icon - 1);
|
||||
return step.icon;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(classes.root, {
|
||||
[classes.active]: active,
|
||||
[classes.completed]: completed
|
||||
})}
|
||||
>
|
||||
{getIcon(props.icon)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
StepIcon.propTypes = {
|
||||
/**
|
||||
* Whether this step is active.
|
||||
*/
|
||||
active: PropTypes.bool,
|
||||
/**
|
||||
* Mark the step as completed. Is passed to child components.
|
||||
*/
|
||||
completed: PropTypes.bool,
|
||||
/**
|
||||
* The label displayed in the step icon.
|
||||
*/
|
||||
icon: PropTypes.node
|
||||
};
|
||||
|
||||
export default StepIcon;
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import { Router, VpnKey, Settings } from "@material-ui/icons";
|
||||
|
||||
const steps = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Steps.Login",
|
||||
route: "/",
|
||||
disabled: false,
|
||||
icon: <VpnKey />
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "Steps.Network",
|
||||
route: "/machines",
|
||||
disabled: false,
|
||||
icon: <Router />
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Steps.Settings",
|
||||
route: "/settings",
|
||||
disabled: false,
|
||||
icon: <Settings />
|
||||
}
|
||||
];
|
||||
|
||||
export default steps;
|
||||
Loading…
Reference in New Issue