SPRINT-12: added stepper card and link on table widgets

This commit is contained in:
Tim Chamberlain
2022-09-29 13:39:43 -05:00
parent 3ce6a8858e
commit 34d3164087
6 changed files with 558 additions and 137 deletions

View File

@ -0,0 +1,137 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* 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 <https://www.gnu.org/licenses/>.
*/
import {Check, Pending, RocketLaunch} from "@mui/icons-material";
import {StepConnector} from "@mui/material";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Stepper from "@mui/material/Stepper";
import {withStyles} from "@mui/styles";
import {NavLink} from "react-router-dom";
import MDBox from "qqq/components/Temporary/MDBox";
/////////////////////////////////////////////
// structure of expected stepper card data //
/////////////////////////////////////////////
export interface StepperCardData
{
title: string;
activeStep: number;
steps: {
icon: string;
label: string;
linkText: string;
linkURL: string;
}[];
}
////////////////////////////////////
// define properties and defaults //
////////////////////////////////////
interface Props
{
data: StepperCardData;
}
function StepperCard({data}: Props): JSX.Element
{
const activeStep = data && data.activeStep ? data.activeStep : 0;
const CustomizedConnector = withStyles({
line: {
color: "#344767",
marginTop: "9px",
marginRight: "30px",
marginLeft: "30px",
},
"& .MuiStepConnector-completed":
{
color: "red !important"
}
})(StepConnector);
return (
<Stepper connector={<CustomizedConnector />} activeStep={activeStep} alternativeLabel sx={{paddingBottom: "0px", boxShadow: "none", background: "white"}}>
{
data && (
data.steps.map((step, index) => (
<Step key={step.label} sx={{color: "red"}}>
{
index < activeStep && (
<MDBox>
<StepLabel icon={<Check />} sx={{
color: "green",
fontSize: "35px",
"& .MuiStepLabel-label.Mui-completed.MuiStepLabel-alternativeLabel":
{
color: "green !important",
}
}}>{step.label}</StepLabel>
</MDBox>
)
}
{
index > activeStep && (
<MDBox>
<StepLabel icon={<Pending />} sx={{
color: "#ced4da",
fontSize: "35px",
"& .MuiStepLabel-label.MuiStepLabel-alternativeLabel":
{
color: "#ced4da !important",
}
}}>{step.label}</StepLabel>
</MDBox>
)
}
{
index === activeStep && (
<MDBox>
<StepLabel icon={<RocketLaunch />} sx={{
color: "#04aaef",
fontSize: "35px",
"& .MuiStepLabel-label.MuiStepLabel-alternativeLabel":
{
color: "#344767 !important", // Just text label (COMPLETED)
}
}}>{step.label}</StepLabel>
{
step.linkURL && (
<MDBox sx={{textAlign: "center", fontSize: "14px"}}>
<NavLink to={step.linkURL}>{step.linkText}</NavLink>
</MDBox>
)
}
</MDBox>
)
}
</Step>
))
)
}
</Stepper>
);
}
export default StepperCard;