@material-ui/core#MobileStepper TypeScript Examples

public render(): React.ReactNode {
        return (
            <Dialog open={this.props.show} style={{ userSelect: 'none' }}>
                {this.state.pages
                    .filter((_, index) => this.state.currentIndex === index)
                    .map(Page => (
                        <Page
                            index={this.state.currentIndex}
                            next={this.increment}
                            previous={this.decrement}
                            key={this.state.currentIndex}
                            addPage={this.addPage}
                            removePage={this.removePage}
                        />
                    ))}
                <MobileStepper
                    variant="dots"
                    steps={this.count()}
                    position="static"
                    activeStep={this.state.currentIndex}
                    nextButton={<Box mx={5} my={2} />}
                    backButton={
                        this.state.currentIndex !== 0 ? (
                            <Button size="small" onClick={this.decrement}>
                                <KeyboardArrowLeft />
                                Back
                            </Button>
                        ) : (
                            <Box mx={5} my={2} />
                        )
                    }
                />
            </Dialog>
        )
    }

ProductGallery: React.VFC<Props> = ({ product }) => {
  const styles = useStyles();
  const mobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'));

  const [activeStep, setActiveStep] = useState(0);

  return mobile ? (
    <div className={styles.galleryStepper}>
      <SwipeableViews
        enableMouseEvents
        axis="x"
        index={activeStep}
        onChangeIndex={(index) => setActiveStep(index)}
      >
        <div>
          <Image className={styles.galleryStepperImage} mediaItem={product.image} next={false} />
        </div>
        {product.galleryImages?.nodes?.map(
          (mediaItem) =>
            mediaItem != null && (
              <div key={mediaItem.id}>
                <Image className={styles.galleryStepperImage} mediaItem={mediaItem} next={false} />
              </div>
            ),
        )}
      </SwipeableViews>
      <MobileStepper
        steps={(product.galleryImages?.nodes?.length ?? 0) + 1}
        variant="dots"
        position="static"
        activeStep={activeStep}
        nextButton={<div />}
        backButton={<div />}
      />
    </div>
  ) : (
    <div className={styles.gallery}>
      <figure className={styles.galleryImage}>
        <Image mediaItem={product.image} next={false} />
        <figcaption>{product.image?.caption}</figcaption>
      </figure>
      {product.galleryImages?.nodes?.map(
        (mediaItem) =>
          mediaItem != null && (
            <figure className={styles.galleryImage}>
              <Image key={mediaItem.id} mediaItem={mediaItem} next={false} />
              <figcaption>{mediaItem.caption}</figcaption>
            </figure>
          ),
      )}
    </div>
  );
}

export default function WizardDialog({
  title,
  steps,
  onFinish,
  ...props
}: IWizardDialogProps) {
  const classes = useStyles();
  const theme = useTheme();
  const isXs = useMediaQuery(theme.breakpoints.down("xs"));

  const [step, setStep] = useState(0);
  const currentStep = steps[step];

  const handleNext = () =>
    step < steps.length - 1 ? setStep((s) => s + 1) : onFinish();
  const handleBack = () =>
    step > 0 ? setStep((s) => s - 1) : props.onClose?.({}, "escapeKeyDown");

  return (
    <Dialog
      TransitionComponent={SlideTransitionMui}
      aria-labelledby="wizard-title"
      aria-describedby="wizard-step-description"
      fullWidth
      maxWidth="md"
      disableBackdropClick
      fullScreen={isXs}
      {...props}
      classes={{
        root: clsx(classes.root, props.classes?.root),
        paper: clsx(classes.paper, props.classes?.paper),
        ...(props.classes ?? {}),
      }}
    >
      <IconButton
        aria-label="Close"
        onClick={props.onClose as any}
        className={classes.closeButton}
        color="secondary"
      >
        <CloseIcon />
      </IconButton>

      <Grid
        container
        spacing={3}
        alignItems="flex-end"
        className={classes.titleRow}
      >
        <Grid item xs>
          <DialogTitle
            color="textPrimary"
            id="wizard-title"
            disableTypography
            className={classes.titleContainer}
          >
            <Typography
              className={classes.title}
              component="h2"
              color="textPrimary"
            >
              {title}
              {currentStep.title && `: ${currentStep.title}`}
            </Typography>
          </DialogTitle>
        </Grid>

        <Grid item>
          <MobileStepper
            variant="dots"
            position="static"
            steps={steps.length}
            activeStep={step}
            classes={{
              root: classes.stepper,
              dot: classes.stepperDot,
              dotActive: classes.stepperDotActive,
            }}
            nextButton={
              <IconButton
                aria-label="Next"
                onClick={handleNext}
                className={classes.stepperButton}
                disabled={currentStep.disableNext}
              >
                <ChevronRightIcon />
              </IconButton>
            }
            backButton={
              <IconButton
                aria-label="Back"
                onClick={handleBack}
                disabled={step <= 0}
                className={classes.stepperButton}
              >
                <ChevronLeftIcon />
              </IconButton>
            }
          />
        </Grid>
      </Grid>

      <DialogContent className={classes.content}>
        {currentStep.description && (
          <Typography
            color="textSecondary"
            id="wizard-step-description"
            component={
              typeof currentStep.description === "string" ? "p" : "div"
            }
          >
            {currentStep.description}
          </Typography>
        )}

        {currentStep.content}
      </DialogContent>

      <Grid
        container
        spacing={2}
        justify="center"
        alignItems="center"
        className={classes.actions}
      >
        <Grid item>
          <Button onClick={handleBack}>{step > 0 ? "Back" : "Cancel"}</Button>
        </Grid>
        <Grid item>
          <Button
            variant="contained"
            onClick={handleNext}
            disabled={currentStep.disableNext}
          >
            {step === steps.length - 1 ? "Finish" : "Continue"}
          </Button>
        </Grid>
      </Grid>
    </Dialog>
  );
}

TourAnchor = React.forwardRef((props: {
  anchorId?: string;
  className?: string;
  children?: React.ReactNode | ((
    next: (() => void),
    isActive: boolean,
    // If your element is not listed, freely add it here,
    // The type system of RefObject is weird as it doesn't accept a generic type of PopperReferenceObject
    anchorRef: React.RefObject<PopperReferenceObject & HTMLElement & HTMLDivElement & HTMLInputElement & HTMLSpanElement & HTMLButtonElement & HTMLAnchorElement>,
  ) => React.ReactNode);
  disablePortal?: React.ComponentProps<typeof ClosablePopper>['disablePortal'];
  zIndex?: React.ComponentProps<typeof ClosablePopper>['zIndex'];
  placement?: React.ComponentProps<typeof ClosablePopper>['placement'];
  ClosablePopperProps?: Partial<Omit<React.ComponentProps<typeof ClosablePopper>, 'anchor' | 'anchorType'>>;
  DivProps?: Partial<React.HTMLAttributes<HTMLDivElement>>;
}, ref: React.Ref<TourAnchorHandle>) => {
  const { tour, onGuideCompleted } = useContext(TourContext) || {};
  const classes = useStyles();
  const anchorRef = useRef<any>(null);
  const dispatch: ThunkDispatch<ReduxStateTour, undefined, AllTourActions> = useDispatch();
  const history = useHistory();
  const location = useLocation();

  const activeGuideId = useSelector<ReduxStateTour, string | undefined>(state => state.tour.activeStep?.guideId, shallowEqual);
  const activeGuide = !!activeGuideId ? tour?.guides[activeGuideId] : undefined;
  const activeStepId = useSelector<ReduxStateTour, string | undefined>(state => state.tour.activeStep?.stepId, shallowEqual);
  const activeStep = !!activeStepId ? activeGuide?.steps[activeStepId] : undefined;
  const activeAnchorId = activeStep?.anchorId;
  const isActive = !!props.anchorId && !!activeStep && (activeStep?.anchorId === props.anchorId);
  var nextStepId = activeStep?.overrideNextStepId;
  if (isActive && !nextStepId && activeGuide) {
    const stepIds = Object.keys(activeGuide.steps);
    const activeIndex = stepIds.findIndex(stepId => stepId === activeStepId);
    if (activeIndex !== -1 && activeIndex < stepIds.length) {
      nextStepId = stepIds[activeIndex + 1];
    }
  }
  const nextStep = !!nextStepId ? activeGuide?.steps[nextStepId] : undefined;

  const next = () => {
    if (!isActive || !activeGuideId || !activeGuide || !onGuideCompleted) return;
    setStep(dispatch, history, location, activeGuideId, activeGuide, onGuideCompleted, nextStepId, nextStep);
  };
  const complete = () => {
    if (!isActive || !activeGuideId || !activeGuide || !onGuideCompleted) return;
    setStep(dispatch, history, location, activeGuideId, activeGuide, onGuideCompleted, undefined, undefined);
  };
  React.useImperativeHandle(ref, () => ({ next }),
    [activeAnchorId, activeGuideId, activeStep, location.pathname, nextStepId]); // eslint-disable-line react-hooks/exhaustive-deps

  var popper;
  if (isActive && !!activeStep && !!activeGuide) {
    const stepsTotal = Object.keys(activeGuide.steps).length;
    const stepIndex = Object.keys(activeGuide.steps).findIndex(stepId => stepId === activeStepId);
    popper = (
      <ClosablePopper
        anchorType='ref'
        anchor={anchorRef}
        open
        onClose={() => dispatch({ type: 'tourSetStep', payload: { activeStep: undefined } })}
        arrow
        closeButtonPosition='disable'
        paperClassName={classes.anchorPaper}
        {...props.ClosablePopperProps}
        disablePortal={props.disablePortal}
        placement={activeStep.placement || props.placement || props.ClosablePopperProps?.placement || 'bottom'}
        zIndex={activeStep.zIndex !== undefined ? activeStep.zIndex
          : (props.zIndex !== undefined ? props.zIndex : props.ClosablePopperProps?.zIndex)}
      >
        {!!activeStep.title && (
          <Typography variant='h6'>{activeStep.title}</Typography>
        )}
        {!!activeStep.description && (
          <Typography variant='body1' color='textSecondary'>{activeStep.description}</Typography>
        )}
        <div className={classes.actionArea}>
          {stepsTotal > 1 && stepIndex !== undefined && (
            <MobileStepper
              className={classes.stepper}
              variant='dots'
              position='static'
              steps={stepsTotal}
              activeStep={stepIndex}
              backButton={null}
              nextButton={null}
            />
          )}
          <div className={classes.flexGrow} />
          {!!activeStep.showButtonNext && (
            <Button color='primary' onClick={next}>
              {typeof activeStep.showButtonNext === 'string' ? activeStep.showButtonNext : (!!nextStepId ? 'Next' : 'Finish')}
            </Button>
          )}
          {!!activeStep.showButtonComplete && (
            <Button color='primary' onClick={complete}>
              {typeof activeStep.showButtonComplete === 'string' ? activeStep.showButtonComplete : 'Finish'}
            </Button>
          )}
        </div>
      </ClosablePopper>
    );
  }

  const scrollTo = isActive && !!activeStep?.scrollTo ? (
    <ScrollAnchor scrollOnMount />
  ) : null;

  var content = (
    <>
      {typeof props.children === 'function' ? props.children(next, isActive, anchorRef) : props.children}
      {scrollTo}
      {popper}
    </>
  );

  if (typeof props.children !== 'function') {
    content = (
      <span ref={anchorRef} className={props.className} {...props.DivProps}>
        {content}
      </span>
    );
  }

  return content;
})