160 lines
4.0 KiB
TypeScript
160 lines
4.0 KiB
TypeScript
// This file is part of MinIO Console Server
|
|
// Copyright (c) 2021 MinIO, Inc.
|
|
//
|
|
// This program is free software: you can redistribute it and/or modify
|
|
// it under the terms of the GNU Affero General Public License as published by
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
// (at your option) any later version.
|
|
//
|
|
// This program is distributed in the hope that it will be useful,
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
// GNU Affero General Public License for more details.
|
|
//
|
|
// You should have received a copy of the GNU Affero General Public License
|
|
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
import React, { useState } from "react";
|
|
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
|
|
import { IWizardMain } from "./types";
|
|
import WizardPage from "./WizardPage";
|
|
import { Grid } from "@material-ui/core";
|
|
|
|
const styles = (theme: Theme) =>
|
|
createStyles({
|
|
wizardMain: {
|
|
display: "flex",
|
|
width: "100%",
|
|
height: "100%",
|
|
flexGrow: 1,
|
|
},
|
|
wizFromContainer: {
|
|
height: "calc(100vh - 365px)",
|
|
minHeight: 450,
|
|
padding: "0 30px",
|
|
},
|
|
wizardSteps: {
|
|
minWidth: 180,
|
|
marginRight: 10,
|
|
borderRight: "#eaeaea 1px solid",
|
|
display: "flex",
|
|
flexGrow: 1,
|
|
flexDirection: "column",
|
|
height: "100%",
|
|
"& ul": {
|
|
padding: "0 15px 0 40px",
|
|
marginTop: "0px",
|
|
|
|
"& li": {
|
|
listStyle: "lower-roman",
|
|
marginBottom: 12,
|
|
},
|
|
},
|
|
},
|
|
buttonList: {
|
|
backgroundColor: "transparent",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
"&:not(:disabled):hover": {
|
|
textDecoration: "underline",
|
|
},
|
|
"&:selected, &:active, &:focus, &:focus:active": {
|
|
border: "none",
|
|
outline: 0,
|
|
boxShadow: "none",
|
|
},
|
|
},
|
|
paddedContentGrid: {
|
|
padding: "0 10px",
|
|
},
|
|
stepsLabel: {
|
|
fontSize: 20,
|
|
color: "#393939",
|
|
fontWeight: 600,
|
|
margin: "15px 12px",
|
|
},
|
|
});
|
|
|
|
const GenericWizard = ({ classes, wizardSteps }: IWizardMain) => {
|
|
const [currentStep, setCurrentStep] = useState<number>(0);
|
|
|
|
const pageChange = (toElement: string | number) => {
|
|
const lastPage = wizardSteps.length - 1;
|
|
|
|
if (toElement === "++") {
|
|
let nextPage = currentStep + 1;
|
|
|
|
if (nextPage > lastPage) {
|
|
nextPage = lastPage;
|
|
}
|
|
|
|
setCurrentStep(nextPage);
|
|
}
|
|
|
|
if (toElement === "--") {
|
|
let prevPage = currentStep - 1;
|
|
|
|
if (prevPage < 0) {
|
|
prevPage = 0;
|
|
}
|
|
|
|
setCurrentStep(prevPage);
|
|
}
|
|
|
|
if (typeof toElement === "number") {
|
|
let pg = toElement;
|
|
if (toElement < 0) {
|
|
pg = 0;
|
|
}
|
|
|
|
if (toElement > lastPage) {
|
|
pg = lastPage;
|
|
}
|
|
|
|
setCurrentStep(pg);
|
|
}
|
|
};
|
|
|
|
if (wizardSteps.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Grid container className={classes.wizFromContainer}>
|
|
<Grid item xs={12} sm={3} md={3} lg={3} xl={2}>
|
|
<div className={classes.wizardSteps}>
|
|
<span className={classes.stepsLabel}>Steps</span>
|
|
<ul>
|
|
{wizardSteps.map((step, index) => {
|
|
return (
|
|
<li key={`wizard-${index.toString()}`}>
|
|
<button
|
|
onClick={() => pageChange(index)}
|
|
disabled={index > currentStep}
|
|
className={classes.buttonList}
|
|
>
|
|
{step.label}
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</Grid>
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sm={9}
|
|
md={9}
|
|
lg={9}
|
|
xl={10}
|
|
className={classes.paddedContentGrid}
|
|
>
|
|
<WizardPage page={wizardSteps[currentStep]} pageChange={pageChange} />
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default withStyles(styles)(GenericWizard);
|