@material-ui/core#StepContent JavaScript Examples

VaccinesOverview = () => {
  const classes = useStyles()
  return (
    <div className={classes.root}>
      <Typography variant='h3' component='h2' gutterBottom>
        Phases of Vaccine Development
      </Typography>
      <Stepper activeStep={steps.length - 1} orientation='vertical'>
        {steps.map(({ label, info }) => (
          <Step key={label} expanded>
            <StepLabel>{label}</StepLabel>
            <StepContent>
              <Typography>{info}</Typography>
            </StepContent>
          </Step>
        ))}
      </Stepper>
    </div>
  )
}

CustomizedStepper = ({ steps, activeStep }) => {
  const styles = useStyles();

  return (
    <div className={styles.root}>
      <Stepper activeStep={activeStep} orientation='vertical'>
        {stepsLabels.map((label, index) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
            <StepContent>{steps[index]}</StepContent>
          </Step>
        ))}
      </Stepper>
    </div>
  );
}

CreateEditSteps = (props) => {
  const { collection, handleChange, activeStep, storeConfig } = props;

  const steps = [
    "Title and Products",
    "Cover Image"
  ];

  const getStepContent = (step) => {
    switch (step) {
      case 0:
        return <CollectionStep1
            collection={collection}
            handleChange={handleChange}
            storeConfig={storeConfig}
          />;
      case 1:
        return <CollectionStep2
            collection={collection}
            handleChange={handleChange}
            saveConfig={props.saveConfig}
          />;
      default:
        return 'ya done goofed';
    }
  }

  return (
    <Stepper activeStep={activeStep} orientation="vertical">
      {steps.map((label, index) => (
        <Step key={label}>
          <StepLabel>{label}</StepLabel>
          <StepContent>
            <div>{getStepContent(index)}</div>
            <CreateEditButtons
              activeStep={activeStep}
              setActiveStep={props.setActiveStep}
              handleNext={props.handleNext}
              steps={steps}
            />
          </StepContent>
        </Step>
      ))}
    </Stepper>
  );
}

CreateEditSteps = (props) => {
  const { product, handleChange, activeStep } = props;

  const steps = [
    "Name and Description",
    "Product Variations",
    "Price",
    "Photos"
  ];

  const getStepContent = (step) => {
    switch (step) {
      case 0:
        return <ProductStep1 product={product} handleChange={handleChange} />;
      case 1:
        return <ProductStep2 product={product} handleChange={handleChange} />;
      case 2:
        return <ProductStep3
            product={product}
            skus={props.skus}
            setSkus={props.setSkus}
          />;
      case 3:
        return <ProductStep4
            product={product}
            handleChange={handleChange}
            saveConfig={props.saveConfig}
          />;
      default:
        return 'ya done goofed';
    }
  }

  return (
    <div>
      <ExampleWrapper>
        <ExampleProductImage />
      </ExampleWrapper>

      <Stepper activeStep={activeStep} orientation="vertical">
        {steps.map((label, index) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
            <StepContent>
              <div>{getStepContent(index)}</div>
              <CreateEditButtons
                activeStep={activeStep}
                setActiveStep={props.setActiveStep}
                handleNext={props.handleNext}
                product={product}
                steps={steps}
              />
            </StepContent>
          </Step>
        ))}
      </Stepper>
    </div>
  );
}

SurveyPageView = props => {
  const {
    onAnswer,
    surveyList,
    reDoSurvey,
    isLoading,
    surveyComplete,
    submitResults,
    recommendedZaps,
    activeStep,
    moveToStep,
    answers,
    isResultsDisabled,
    stats
  } = props;

  const getZap = () => {
    return (
      <>
        <br /> <br />
        <h4>
          You might find these Zaps useful: <br />
        </h4>
        <Row className="justify-content-center">
          {recommendedZaps.map(zap => {
            if (stats)
              stats.forEach(stat => {
                if (zaps[zap].name === stat.name) zaps[zap].stats = stat;
              });
            return <Zap key={zaps[zap].name} {...zaps[zap]} />;
          })}
        </Row>
        <br />
        <Row className="justify-content-center pb-3">
          <Button
            variant="info"
            target="_blank"
            size="lg"
            href="https://defizap.typeform.com/to/UZSZg5"
            type="link"
            className="m-3"
            block
            onClick={() =>
              registerEvent({
                category: GENERATE_ZAP,
                action: SURVEY_PAGE
              })
            }
          >
            Don&apos;t see your Zap? Submit a request and we will create one!
          </Button>
        </Row>
        <Row>
          <h5 style={{ fontSize: 15 }} className="mx-3">
            DISCLOSURE:
            <p>
              Please note that DeFiZap is an experimental project. DeFiZap is
              not providing any investment advisory or recommendation service.
              By using DeFiZap or its services, you agree that you are using the
              Services at your own risk and that you will not and do not hold
              DeFiZap or its team members liable should the services not perform
              as per your expectation.
            </p>
            <p>
              DeFiZap is not a licensed financial advisor under any law. Please
              consult your own independent investment advisor before making any
              investment decisions.
            </p>
          </h5>
        </Row>
      </>
    );
  };

  const generateResult = () => {
    return (
      <>
        <Button
          variant="outline-primary"
          onClick={reDoSurvey}
          className="mx-1 my-3 px-1"
          size="lg"
        >
          Start Over
        </Button>
        <Button
          disabled={isResultsDisabled}
          variant="primary"
          onClick={submitResults}
          className="mx-3 my-3 px-3"
          size="lg"
        >
          Get Results
        </Button>
        {isLoading ? (
          <>
            <Spinner animation="grow" />
            <Spinner animation="grow" />
          </>
        ) : null}
      </>
    );
  };

  const surveySteps = () => {
    return (
      <Collapse in={!surveyComplete}>
        <Stepper
          activeStep={activeStep}
          nonLinear
          orientation="vertical"
          style={{ backgroundColor: 'inherit' }}
        >
          {surveyList.map(question => {
            return (
              <Step
                key={question.questionNumber}
                completed={!isEmpty(answers[question.questionNumber])}
              >
                <StepLabel onClick={() => moveToStep(question.questionNumber)}>
                  <h5>{question.question}</h5>
                  <p className="text-monospace text-uppercase">
                    {answers[question.questionNumber]}
                  </p>
                </StepLabel>
                <StepContent>
                  {question.options.map(option => {
                    return (
                      <Button
                        key={option.value}
                        variant="outline-primary"
                        size="auto"
                        onClick={() => onAnswer(option.key)}
                        className="shadow"
                        block
                      >
                        {option.value}
                      </Button>
                    );
                  })}
                </StepContent>
              </Step>
            );
          })}
        </Stepper>
      </Collapse>
    );
  };

  return (
    <Container>
      <NavigationBar />
      <h4>
        Answer a few multiple choice questions to see which Zap might fit your
        needs
      </h4>
      {surveySteps()}
      {activeStep === 4 ? generateResult() : null}
      {surveyComplete ? getZap() : null}
    </Container>
  );
}

UIWizard = ({
    steps,
    getStepContent,
    result,
    isWizardValid,
    handleFinish,
    handleResetValidator,
}) => {

    const classes = useStyles();
    const [activeStep, setActiveStep] = React.useState(0);

    const handleNext = () => {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };

    const handleBack = () => {
        handleResetValidator();
        setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };

    const handleReset = () => {
        setActiveStep(0);
    };

    return (
        <div className={classes.root}>
            <Stepper activeStep={activeStep} orientation="vertical">
                {steps.map((label, index) => (
                    <Step key={label}>
                        <StepLabel>{label}</StepLabel>
                        <StepContent>
                            {getStepContent(index)}
                            <div className={classes.actionsContainer}>
                                <div>
                                    <Button
                                        disabled={activeStep === 0}
                                        onClick={handleBack}
                                        className={classes.button}>
                                        Back
                                    </Button>
                                    {activeStep === steps.length - 1 && (
                                        <Button
                                            variant="contained"
                                            color="primary"
                                            onClick={() => {
                                                handleNext();
                                                handleFinish();
                                            }}
                                            className={classes.button}
                                            disabled={!isWizardValid}>
                                            Finish
                                        </Button>)}
                                    {activeStep !== steps.length - 1 && (
                                        <Button
                                            variant="contained"
                                            color="primary"
                                            onClick={handleNext}
                                            className={classes.button}
                                            disabled={!isWizardValid}>
                                            Next
                                        </Button>
                                    )}
                                </div>
                            </div>
                        </StepContent>
                    </Step>
                ))}
            </Stepper>
            {activeStep === steps.length && (
                <Paper square elevation={0} className={classes.resetContainer}>
                    {result}
                    <Button onClick={handleReset}
                        variant="contained"
                        color="primary"
                        className={classes.button}>
                        Reset
                    </Button>
                </Paper>
            )}
        </div>
    );

}

ClaimStepper = React.memo(({
  classes, messages, pendingReward, onClaim, onDone, claim,
}) => {
  const [step, setStep] = useState(0);
  const [isClaiming, setIsClaiming] = useState(false);
  const [isDone, setIsDone] = useState(false);

  useEffect(() => {
    checkAsyncClaimIsDone(step, isClaiming, claim, setIsClaiming, setIsDone, setStep);
  }, [step, isClaiming, claim, setIsClaiming, setIsDone, setStep]);

  useEffect(() => {
    autoRedirect(isDone, onDone);
  }, [isDone, onDone]);

  return (
    <div className={classes.root}>
      <Stepper activeStep={step} orientation="vertical">
        <Step>
          <StepLabel>{messages['Are you sure?']}</StepLabel>
          <StepContent>
            <Typography>{messages['All your pending reward will be transferred to your stake and your stake age will be reset to today (this does not affect the age to withdraw).']}</Typography>
            <div className={classes.actionsContainer}>
              <div>
                <Button
                  disabled
                  className={classes.button}
                >
                  {messages.Back}
                </Button>
                <Button
                  disabled={!pendingReward}
                  variant="contained"
                  color="primary"
                  onClick={() => setStep(STEP.CLAIM)}
                  className={classes.button}
                >
                  {messages['I understand']}
                </Button>
              </div>
            </div>
          </StepContent>
        </Step>
        <Step>
          <StepLabel>{messages.Claim}</StepLabel>
          <StepContent>
            <Typography>
              <span className={`font-weight-bold ${classes.spanAmount}`}>
                {numeral(pendingReward).format('(0.00a)')}
                {' '}
                LRC
              </span>
              {messages['$LRC_AMOUNT will be transferred from your pending reward to your current stake.'].split('$LRC_AMOUNT')[1]}
            </Typography>
            <div className={classes.actionsContainer}>
              <div className={classes.divBackAndConfirm}>
                <Button
                  onClick={() => setStep(STEP.DISCLAIMER)}
                  className={classes.button}
                >
                  {messages.Back}
                </Button>
                <div className={classes.wrapper}>
                  <Button
                    disabled={claim.isLoading}
                    variant="contained"
                    color="primary"
                    onClick={onClaim}
                    className={classes.button}
                  >
                    { claim.isLoading && messages.Claiming }
                    { !claim.isLoading && messages.Claim }
                  </Button>
                  { claim.isLoading
                  && (<CircularProgress size={24} className={classes.buttonProgress} />)}
                </div>
              </div>
            </div>
          </StepContent>
        </Step>
        <Step>
          <StepLabel>{messages.Done}</StepLabel>
          <StepContent>
            <Typography color="primary">
              {messages['Your pending rewards are now staked.']}
            </Typography>
          </StepContent>
        </Step>
      </Stepper>
    </div>
  );
})

DepositStepper = React.memo(({
  classes, messages, maxAmount, onApprove, onStake, allowance, stake, approve, onDone,
}) => {
  const [step, setStep] = useState(0);
  const [amount, setAmount] = useState('0');
  const [isStaking, setIsStaking] = useState(false);
  const [isDone, setIsDone] = useState(false);
  const { width, height } = useWindowSize();

  useEffect(() => {
    checkEnoughAllowanceRedirectToStakeStep(amount, allowance, step, setStep);
  }, [amount, allowance, step, setStep]);

  useEffect(() => {
    checkAsyncStakeIsDone(step, isStaking, stake, setIsStaking, setIsDone, setStep);
  }, [step, isStaking, stake, setIsStaking, setIsDone, setStep]);

  useEffect(() => {
    timeoutConfetti(isDone, onDone);
  }, [isDone, onDone]);

  return (
    <div className={classes.root}>
      <Stepper activeStep={step} orientation="vertical">
        <Step>
          <StepLabel>{messages['Are you sure?']}</StepLabel>
          <StepContent>
            <Typography>{messages['Your tokens will be locked until your stake age is older than 90 day. If you add new tokens into your stake, your age will be weighted by the amount of tokens.']}</Typography>
            <div className={classes.actionsContainer}>
              <div>
                <Button
                  disabled
                  className={classes.button}
                >
                  {messages.Back}
                </Button>
                <Button
                  variant="contained"
                  color="primary"
                  onClick={() => setStep(STEP.AMOUNT)}
                  className={classes.button}
                >
                  {messages['I understand']}
                </Button>
              </div>
            </div>
          </StepContent>
        </Step>
        <Step>
          <StepLabel>{messages['Select amount']}</StepLabel>
          <StepContent>
            <Typography>{messages['Please fill in the amount of LRC you want to stake.']}</Typography>
            <TextField
              value={amount}
              variant="outlined"
              label="Amount"
              fullWidth
              type="number"
              placeholder={safeAmountToPrint(maxAmount)}
              className={classes.inputLRC}
              onChange={(e) => setAmount(safeAmount(e.target.value || 0)
                .isLessThanOrEqualTo(maxAmount)
                ? e.target.value : safeAmountToPrint(maxAmount))}
            />
            <Slider
              value={safeAmount(maxAmount).isZero()
                ? 0 : safeAmount(amount).div(maxAmount).multipliedBy(100).toFixed(0) * 1}
              defaultValue={0}
              valueLabelFormat={(value) => `${value}%`}
              getAriaValueText={() => '%'}
              aria-labelledby="discrete-slider-restrict"
              step={null}
              valueLabelDisplay="auto"
              marks={[{ label: '0%', value: 0 }, { label: '25%', value: 25 }, { label: '50%', value: 50 }, { label: '75%', value: 75 }, { label: '100%', value: 100 }]}
              className={classes.sliderAmount}
              onChange={(_, value) => setAmount(safeAmountToPrint(safeAmount(maxAmount)
                .multipliedBy(value / 100)))}
            />
            <div className={classes.actionsContainer}>
              <div>
                <Button
                  onClick={() => setStep(STEP.DISCLAIMER)}
                  className={classes.button}
                >
                  {messages.Back}
                </Button>
                <Button
                  disabled={safeAmount(amount).isLessThanOrEqualTo(0)}
                  variant="contained"
                  color="primary"
                  onClick={() => setStep(STEP.APPROVAL)}
                  className={classes.button}
                >
                  {messages.Next}
                </Button>
              </div>
            </div>
          </StepContent>
        </Step>
        <Step>
          <StepLabel>{messages.Approve}</StepLabel>
          <StepContent>
            <Typography>
              {messages['You need to allow the staking pool to take $LRC_AMOUNT from your wallet.'].split('$LRC_AMOUNT')[0]}
              <span className={`font-weight-bold ${classes.spanAmount}`}>
                {numeral(amount).format('(0.00a)')}
                {' '}
                LRC
              </span>
              {messages['You need to allow the staking pool to take $LRC_AMOUNT from your wallet.'].split('$LRC_AMOUNT')[1]}
            </Typography>
            <div className={classes.actionsContainer}>
              <div className={classes.divBackAndConfirm}>
                <Button
                  onClick={() => setStep(STEP.AMOUNT)}
                  className={classes.button}
                >
                  {messages.Back}
                </Button>
                <div className={classes.wrapper}>
                  <Button
                    disabled={approve.isLoading}
                    variant="contained"
                    color="primary"
                    onClick={() => onApprove(safeAmountFixed(amount))}
                    className={classes.button}
                  >
                    { approve.isLoading && messages.Approving }
                    { !approve.isLoading && messages.Approve }
                  </Button>
                  { approve.isLoading
                  && (<CircularProgress size={24} className={classes.buttonProgress} />)}
                </div>
              </div>
            </div>
          </StepContent>
        </Step>
        <Step>
          <StepLabel>{messages.Stake}</StepLabel>
          <StepContent>
            <Typography>{messages['You can now deposit your LRC to the staking pool.']}</Typography>
            <div className={classes.actionsContainer}>
              <div className={classes.divBackAndConfirm}>
                <Button
                  onClick={() => setStep(STEP.AMOUNT)}
                  className={classes.button}
                >
                  {messages.Back}
                </Button>
                <div className={classes.wrapper}>
                  <Button
                    disabled={stake.isLoading}
                    variant="contained"
                    color="primary"
                    onClick={() => onStake(safeAmountFixed(amount))}
                    className={classes.button}
                  >
                    { stake.isLoading && messages.Staking }
                    { !stake.isLoading && messages.Stake }
                  </Button>
                  { stake.isLoading
                  && (<CircularProgress size={24} className={classes.buttonProgress} />)}
                </div>
              </div>
            </div>
          </StepContent>
        </Step>
        <Step>
          <StepLabel>{messages.Done}</StepLabel>
          <StepContent>
            <Typography color="primary" className="animated infinite heartBeat delay-1s">
              {messages['Your Loopring token are now staked and you will start collecting fees on all trades !']}
            </Typography>
            <div className={classes.divConfetti}>
              <Confetti
                width={width}
                height={height}
              />
            </div>
          </StepContent>
        </Step>
      </Stepper>
    </div>
  );
})

WithdrawStepper = React.memo(({
  classes, messages, maxAmount, onWithdraw, withdraw, onDone,
}) => {
  const [step, setStep] = useState(0);
  const [amount, setAmount] = useState('0');
  const [isWithdrawing, setIsWithdrawing] = useState(false);
  const [isDone, setIsDone] = useState(false);

  useEffect(() => {
    checkAsyncWithdrawIsDone(step, isWithdrawing, withdraw, setIsWithdrawing, setIsDone, setStep);
  }, [step, isWithdrawing, withdraw, setIsWithdrawing, setIsDone, setStep]);

  useEffect(() => {
    timeoutRedirect(isDone, onDone);
  }, [isDone, onDone]);

  return (
    <div className={classes.root}>
      <Stepper activeStep={step} orientation="vertical">
        <Step>
          <StepLabel>{messages['Are you sure?']}</StepLabel>
          <StepContent>
            <Typography>{messages['When you make a withdrawal, the pending rewards will automatically be added to your stake which will result in resetting the age of your stake to today (this does not impact the age to make a withdrawal).']}</Typography>
            <div className={classes.actionsContainer}>
              <div>
                <Button
                  disabled
                  className={classes.button}
                >
                  {messages.Back}
                </Button>
                <Button
                  variant="contained"
                  color="primary"
                  onClick={() => setStep(STEP.AMOUNT)}
                  className={classes.button}
                >
                  {messages['I understand']}
                </Button>
              </div>
            </div>
          </StepContent>
        </Step>
        <Step>
          <StepLabel>{messages['Select amount']}</StepLabel>
          <StepContent>
            <Typography>{messages['Please fill in the amount of LRC you want to withdraw.']}</Typography>
            <TextField
              value={amount}
              variant="outlined"
              label="Amount"
              fullWidth
              type="number"
              placeholder={safeAmountToPrint(maxAmount)}
              className={classes.inputLRC}
              onChange={(e) => setAmount(safeAmount(e.target.value || 0)
                .isLessThanOrEqualTo(maxAmount)
                ? e.target.value : safeAmountToPrint(maxAmount))}
            />
            <Slider
              value={safeAmount(maxAmount).isZero()
                ? 0 : safeAmount(amount).div(maxAmount).multipliedBy(100).toFixed(0) * 1}
              defaultValue={0}
              valueLabelFormat={(value) => `${value}%`}
              getAriaValueText={() => '%'}
              aria-labelledby="discrete-slider-restrict"
              step={null}
              valueLabelDisplay="auto"
              marks={[{ label: '0%', value: 0 }, { label: '25%', value: 25 }, { label: '50%', value: 50 }, { label: '75%', value: 75 }, { label: '100%', value: 100 }]}
              className={classes.sliderAmount}
              onChange={(_, value) => setAmount(safeAmountToPrint(safeAmount(maxAmount)
                .multipliedBy(value / 100)))}
            />
            <div className={classes.actionsContainer}>
              <div>
                <Button
                  onClick={() => setStep(STEP.DISCLAIMER)}
                  className={classes.button}
                >
                  {messages.Back}
                </Button>
                <Button
                  disabled={safeAmount(amount).isLessThanOrEqualTo(0)}
                  variant="contained"
                  color="primary"
                  onClick={() => setStep(STEP.WITHDRAW)}
                  className={classes.button}
                >
                  {messages.Next}
                </Button>
              </div>
            </div>
          </StepContent>
        </Step>
        <Step>
          <StepLabel>{messages.Withdraw}</StepLabel>
          <StepContent>
            <Typography>
              <span className={`font-weight-bold ${classes.spanAmount}`}>
                {numeral(amount).format('(0.00a)')}
                {' '}
                LRC
              </span>
              {messages['$LRC_AMOUNT will be transferred from your stake to your wallet.'].split('$LRC_AMOUNT')[1]}
            </Typography>
            <div className={classes.actionsContainer}>
              <div className={classes.divBackAndConfirm}>
                <Button
                  onClick={() => setStep(STEP.AMOUNT)}
                  className={classes.button}
                >
                  {messages.Back}
                </Button>
                <div className={classes.wrapper}>
                  <Button
                    disabled={withdraw.isLoading}
                    variant="contained"
                    color="primary"
                    onClick={() => onWithdraw(safeAmountFixed(amount))}
                    className={classes.button}
                  >
                    { withdraw.isLoading && messages.Withdrawing }
                    { !withdraw.isLoading && messages.Withdraw }
                  </Button>
                  { withdraw.isLoading
                  && (<CircularProgress size={24} className={classes.buttonProgress} />)}
                </div>
              </div>
            </div>
          </StepContent>
        </Step>
        <Step>
          <StepLabel>{messages.Done}</StepLabel>
          <StepContent>
            <Typography color="primary">
              {messages['Your withdrawal has been processed, we hope to see you soon :(']}
            </Typography>
          </StepContent>
        </Step>
      </Stepper>
    </div>
  );
})