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