From 91f6e04a9a23dcba6484434a23d295c073b548a0 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sat, 19 Dec 2020 01:47:14 +0200 Subject: [PATCH] stepper configurable icons --- .prettierrc.json | 3 ++- .../layout/stepper/ApplicationStepper.js | 8 ++++---- src/components/layout/stepper/StepIcon.js | 15 ++++----------- src/constants/steps.js | 9 +++++++-- 4 files changed, 17 insertions(+), 18 deletions(-) diff --git a/.prettierrc.json b/.prettierrc.json index fca24df..4ed2da0 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -2,5 +2,6 @@ "trailingComma": "none", "tabWidth": 2, "semi": true, - "singleQuote": false + "singleQuote": false, + "arrowParens": "avoid" } diff --git a/src/components/layout/stepper/ApplicationStepper.js b/src/components/layout/stepper/ApplicationStepper.js index f455498..bdcc495 100644 --- a/src/components/layout/stepper/ApplicationStepper.js +++ b/src/components/layout/stepper/ApplicationStepper.js @@ -22,20 +22,20 @@ const styles = () => ({ const useStyles = makeStyles(styles); const ApplicationStepper = () => { - const firstStep = steps.find((z) => z.id === 0); + const firstStep = steps[0]; const [activeStep, setActiveStep] = useState(firstStep); const classes = useStyles(); const location = useLocation(); const history = useHistory(); useEffect(() => { - const step = steps.find((z) => z.route === location.pathname); + const step = steps.find(z => z.route === location.pathname); if (step) { setActiveStep(step); } }, [location.pathname]); - const handleStepClick = (step) => { + const handleStepClick = step => { if (!step) return; setActiveStep(step); if (location.pathname === step.route) return; @@ -49,7 +49,7 @@ const ApplicationStepper = () => { orientation="horizontal" connector={} > - {steps.map((step) => ( + {steps.map(step => ( , - 2: , - 3: - }; - - const getIcon = (icon) => { - return icons[String(icon)]; + const getIcon = icon => { + const step = steps.find(z => z.id === icon - 1); + return step.icon; }; return ( diff --git a/src/constants/steps.js b/src/constants/steps.js index 0a003a2..1f4a3ea 100644 --- a/src/constants/steps.js +++ b/src/constants/steps.js @@ -1,15 +1,20 @@ +import SettingsIcon from "@material-ui/icons/Settings"; +import GroupAddIcon from "@material-ui/icons/GroupAdd"; + const steps = [ { id: 0, title: "Login", route: "/", - disabled: false + disabled: false, + icon: }, { id: 1, title: "About", route: "/about", - disabled: false + disabled: false, + icon: } ];