Added stepper

master
Tudor Stanciu 2020-12-16 03:09:24 +02:00
parent 9c0dfd68fb
commit 66721d451a
5 changed files with 96 additions and 2 deletions

6
.prettierrc.json Normal file
View File

@ -0,0 +1,6 @@
{
"trailingComma": "none",
"tabWidth": 2,
"semi": true,
"singleQuote": false
}

View File

@ -1,13 +1,13 @@
import React, { Suspense } from "react";
import "./App.css";
import Switcher from "./components/layout/Switcher";
import Main from "./components/layout/Main";
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<div className="App">
<header className="App-header">
<Switcher />
<Main />
</header>
</div>
</Suspense>

View File

@ -0,0 +1,14 @@
import React from "react";
import Stepper from "./Stepper";
import Switcher from "./Switcher";
const Main = () => {
return (
<>
<Stepper />
<Switcher />
</>
);
};
export default Main;

View File

@ -0,0 +1,58 @@
import React, { useState } from "react";
import steps from "../../constants/steps";
import {
Card,
Grid,
Stepper,
Step,
StepButton,
StepLabel,
makeStyles
} from "@material-ui/core";
import { useLocation, useHistory } from "react-router-dom";
const styles = () => ({
stepperCard: {
padding: "2px",
marginBottom: "15px"
}
});
const useStyles = makeStyles(styles);
const ApplicationStepper = () => {
const [activeStep, setActiveStep] = useState(0);
const classes = useStyles();
const location = useLocation();
const history = useHistory();
const handleStepClick = (step) => {
if (!step) return;
if (location.pathname === step.route) return;
history.push(step.route);
};
return (
<Card className={classes.stepperCard}>
<Grid container alignItems="center" spacing={3}>
<Grid item xs={12}>
<Stepper activeStep={activeStep} orientation="horizontal">
{steps.map((step) => (
<Step key={step.id}>
<StepButton
id={"offerStepper_" + step.title}
disabled={step.disabled}
onClick={() => handleStepClick(step)}
>
<StepLabel>{step.title}</StepLabel>
</StepButton>
</Step>
))}
</Stepper>
</Grid>
</Grid>
</Card>
);
};
export default ApplicationStepper;

16
src/constants/steps.js Normal file
View File

@ -0,0 +1,16 @@
const steps = [
{
id: 0,
title: "Login",
route: "/",
disabled: false
},
{
id: 1,
title: "About",
route: "/about",
disabled: false
}
];
export default steps;