blob: 8cd788a8030c30c53aa30426e75f643510700d83 [file] [log] [blame]
Adrià Vilanova Martínezf19ea432024-01-23 20:20:52 +01001// Copyright 2021 The Chromium Authors
Copybara854996b2021-09-07 19:36:02 +00002// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +02005import React, {useEffect} from 'react';
Copybara854996b2021-09-07 19:36:02 +00006import {createTheme} from '@material-ui/core/styles';
7import {makeStyles} from '@material-ui/styles';
8import MobileStepper from '@material-ui/core/MobileStepper';
9import Button from '@material-ui/core/Button';
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020010import Box from '@material-ui/core/Box';
Copybara854996b2021-09-07 19:36:02 +000011import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
12import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020013import {ConfirmBackModal} from './ConfirmBackModal.tsx';
Copybara854996b2021-09-07 19:36:02 +000014
15const theme: Theme = createTheme();
16
17const useStyles = makeStyles({
18 root: {
19 width: '100%',
20 flexGrow: 1,
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020021 padding: '8px 0px',
22 },
23 back: {
24 padding: '6px 0px',
Copybara854996b2021-09-07 19:36:02 +000025 },
26}, {defaultTheme: theme});
27
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020028type Props = {
29 nextEnabled: boolean,
30 activeStep: number,
31 setActiveStep: Function,
32 onSubmit?: Function,
33}
Copybara854996b2021-09-07 19:36:02 +000034/**
35 * `<DotMobileStepper />`
36 *
37 * React component for rendering the linear dot stepper of the issue wizard.
38 *
39 * @return ReactElement.
40 */
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020041export default function DotsMobileStepper(props: Props) : React.ReactElement {
42
43 const {nextEnabled, activeStep, setActiveStep, onSubmit} = props;
Copybara854996b2021-09-07 19:36:02 +000044 const classes = useStyles();
45
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020046 const [showConfirmModal, setShowConfirmModal] = React.useState(false);
47
Copybara854996b2021-09-07 19:36:02 +000048 const handleNext = () => {
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020049 setActiveStep(activeStep + 1);
Copybara854996b2021-09-07 19:36:02 +000050 };
51
52 const handleBack = () => {
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020053 if (activeStep === 2) {
54 setShowConfirmModal(true);
55 } else {
56 setActiveStep(activeStep - 1);
57 }
Copybara854996b2021-09-07 19:36:02 +000058 };
59
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020060 const onSubmitIssue = () => {
61 if (onSubmit) {
62 onSubmit();
63 }
Copybara854996b2021-09-07 19:36:02 +000064 }
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020065
66 const onBrowserBackButtonEvent = (e: Event) => {
67 e.preventDefault();
68 if (activeStep === 0) {
69 window.history.back();
70 } else {
71 setActiveStep(activeStep-1);
72 }
73 }
74
75 useEffect(() => {
76 window.history.pushState(null, '', window.location.pathname);
77 window.addEventListener('popstate', onBrowserBackButtonEvent);
78 return () => {
79 window.removeEventListener('popstate', onBrowserBackButtonEvent);
80 };
81 }, [activeStep]);
82
83 let nextButton;
84 if (activeStep === 2){
85 nextButton = (<Button aria-label="nextButton" size="medium" onClick={onSubmitIssue} disabled={!nextEnabled}>{'Submit'}</Button>);
86 } else {
87 nextButton =
88 (<Button aria-label="nextButton" size="medium" onClick={handleNext} disabled={!nextEnabled}>
89 {'Next'}
90 <KeyboardArrowRight />
91 </Button>);
92 }
93
94 const backButton = activeStep === 0 ? <Box></Box> :
95 (<Button aria-label="backButton" size="medium" onClick={handleBack} disabled={activeStep === 0} className={classes.back}>
96 <KeyboardArrowLeft />
97 Back
98 </Button>);
99
Copybara854996b2021-09-07 19:36:02 +0000100 return (
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200101 <>
102 <MobileStepper
103 id="mobile-stepper"
104 variant="dots"
105 steps={3}
106 position="static"
107 activeStep={activeStep}
108 className={classes.root}
109 nextButton={nextButton}
110 backButton={backButton}
111 />
112 <ConfirmBackModal
113 enable={showConfirmModal}
114 setEnable={setShowConfirmModal}
115 confirmBack={()=>{setActiveStep(activeStep-1);}}
116 />
117 </>
Copybara854996b2021-09-07 19:36:02 +0000118 );
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +0200119}