Untitled
unknown
plain_text
a year ago
11 kB
3
Indexable
Never
import React, { useState } from "react"; import { Select, ImageList, ImageListItem, Grid } from '@mui/material'; import { Typography, TextField, Button, Stepper, Step, StepLabel, } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles"; import { useForm, Controller, FormProvider, useFormContext, } from "react-hook-form"; const itemData = [ { img: "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80", title: "picture" } ] const useStyles = makeStyles((theme) => ({ button: { marginRight: theme.spacing(1), }, textField: { border: "2px solid green" } })); function getSteps() { return [ "Personal information", "Student Information", "Payment", "Confirmation" ]; } const GetStepContent=(step) =>{ const classes = useStyles(); switch (step) { case 0: return ( <> <TextField id="first-name" label="First Name" variant="outlined" placeholder="Enter Your First Name" width="75%" margin="normal" className={classes.textField} name="firstName" /> <TextField id="last-name" label="Last Name" variant="outlined" placeholder="Enter Your Last Name" // fullWidth width="50%" margin="normal" name="lastName" /> <TextField required id="phone-number" label="Phone Number" variant="outlined" placeholder="Enter Your Phone Number" fullWidth margin="normal" name="phoneNumber" /> <TextField required id="email" label="E-mail" variant="outlined" placeholder="Enter Your E-mail Address" fullWidth margin="normal" name="emailAddress" /> <TextField required id="address1" label="Address 1" variant="outlined" placeholder="Enter Your Address 1" fullWidth margin="normal" name="address1" /> <TextField required id="address2" label="Address 2" variant="outlined" placeholder="Enter Your Address 2" fullWidth margin="normal" name="address2" /> <TextField required id="address3" label="Address 3" variant="outlined" placeholder="Enter Your Address 3" fullWidth margin="normal" name="address2" /> <TextField required id="country" label="Country" variant="outlined" placeholder="Enter Your Country Name" fullWidth margin="normal" name="country" /> <TextField required id="postal-code" label="Postal Code" variant="outlined" placeholder="Enter your Postal code" margin="normal" name="postalCode" /> </> ); case 1: return ( <> <TextField required id="rollNo" label="Roll Number" variant="outlined" placeholder="Enter Your Roll Number" fullWidth margin="normal" name="rollNo" /> <TextField required id="regNo" label="Reg. ID Number" variant="outlined" placeholder="Enter Your Reg. ID Number" fullWidth margin="normal" name="regNo" /> <TextField required id="year" label="Year" variant="outlined" placeholder="Enter Your Year" fullWidth margin="normal" name="year" /> <TextField required id="branch" label="Branch" variant="outlined" placeholder="Enter Your Branch" fullWidth margin="normal" name="branch" /> <TextField required id="divion" label="Divion" variant="outlined" placeholder="Enter Your Divion" fullWidth margin="normal" name="divion" /> <TextField required id="waNumber" label="Whatsapp Number" variant="outlined" placeholder="Enter Your Whatsapp Number" fullWidth margin="normal" name="waNumber" /> <TextField required id="altNumber" label="Alternate Number" variant="outlined" placeholder="Enter Your Alternate Number" fullWidth margin="normal" name="altNumber" /> </> ); case 2: return ( <> <TextField required id="reason" label="Reason to join PASC" variant="outlined" placeholder="Why do you want to join PASC?" fullWidth margin="normal" multiLine="true" rows={2} name="reason" /> <TextField required id="expectation" label="Expectations from PASC" variant="outlined" placeholder="Your expectations from PASC?" fullWidth margin="normal" multiLine="true" rows={2} name="expectation" /> <Grid container justify="center"> <Grid item xs={6}> <div>Scan QR code</div> </Grid> <Grid item xs={4}> <ImageList sx={{ width: 200, height: 200 }} cols={1} rowHeight={200}> {itemData.map((item) => ( <ImageListItem key={item.img}> <img src={`${item.img}?w=200&h=200&fit=crop&auto=format`} srcSet={`${item.img}?w=200&h=200&fit=crop&auto=format&dpr=2 2x`} alt={item.title} loading="lazy" /> </ImageListItem> ))} </ImageList> </Grid> </Grid> <div>Upload Payment Screenshot</div> <Button variant="contained" component="label" color="primary" > Upload <input type="file" hidden /> </Button> <TextField required id="cardNumber" label="Card Number" variant="outlined" placeholder="Enter Your Card Number" fullWidth margin="normal" name="cardNumber" /> <TextField required id="cardMonth" label="Card Month" variant="outlined" placeholder="Enter Your Card Month" fullWidth margin="normal" name="cardMonth" /> <TextField required id="cardYear" label="Card Year" variant="outlined" placeholder="Enter Your Card Year" fullWidth margin="normal" name="cardYear" /> option for handling screen shot </> ); case 3: return ( <> Confirmation Detail </> ); default: return "unknown step"; } } const LinaerStepper = () => { const classes = useStyles(); const [activeStep, setActiveStep] = useState(0); const [skippedSteps, setSkippedSteps] = useState([]); const steps = getSteps(); const isStepOptional = (step) => { return step === 1 || step === 2; }; const isStepSkipped = (step) => { return skippedSteps.includes(step); }; const handleNext = () => { setActiveStep(activeStep + 1); setSkippedSteps(skippedSteps.filter((skipItem) => skipItem !== activeStep)); }; const handleBack = () => { setActiveStep(activeStep - 1); }; const handleSkip = () => { if (!isStepSkipped(activeStep)) { setSkippedSteps([...skippedSteps, activeStep]); } setActiveStep(activeStep + 1); }; return ( <div> <Stepper alternativeLabel activeStep={activeStep}> {steps.map((step, index) => { const labelProps = {}; const stepProps = {}; if (isStepOptional(index)) { labelProps.optional = ( <Typography variant="caption" align="center" style={{ display: "block" }} > optional </Typography> ); } if (isStepSkipped(index)) { stepProps.completed = false; } return ( <Step {...stepProps} key={index}> <StepLabel {...labelProps}>{step}</StepLabel> </Step> ); })} </Stepper> {activeStep === steps.length ? ( <Typography variant="h3" align="center"> Thank You </Typography> ) : ( <> <form>{GetStepContent(activeStep)}</form> <Button className={classes.button} disabled={activeStep === 0} onClick={handleBack} > back </Button> {isStepOptional(activeStep) && ( <Button className={classes.button} variant="contained" color="primary" onClick={handleSkip} > skip </Button> )} <Button className={classes.button} variant="contained" color="primary" onClick={handleNext} > {activeStep === steps.length - 1 ? "Finish" : "Next"} </Button> </> )} </div> ); }; export default LinaerStepper;