Wizard

import { useCallback, useContext, useState } from "react";


export default function Demo() {
  const [show, setShow] = useState(false);
  const [loading, setLoading] = useState(false);
  const title = "Cross browser test";
  const labels = {
    previous: "Go Back",
    next: "Go Forward",
  };
  const mockSubmit = useCallback(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setShow(false);
    }, 2000);
  }, []);


  return (
    <>
      <HvButton onClick={() => setShow(true)}>Show Wizard</HvButton>
      <HvWizard
        open={show}
        onClose={() => setShow(false)}
        skippable={false}
        title={title}
        hasSummary={false}
        labels={labels}
        fixedHeight
        loading={loading}
        handleSubmit={mockSubmit}
        // This will only appear if hasSummary is true
        summaryContent={<div>Small summary example</div>}
      >
        <div data-title="Review Model">
          <HvTypography variant="title2" component="h2">
            1. API details
          </HvTypography>
          <HvTypography variant="body" component="p">
            Some text explaining what this section is about. It can be multiline
            but 2 lines are the maximum recommended.
          </HvTypography>
        </div>
        <RandomFormComponent data-title="randomForm" mustValidate />
        <div data-title="Review Parameters">
          <HvTypography variant="title2" component="h2">
            2. Deployment details
          </HvTypography>
          <br />
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in
          justo erat. In vestibulum ultricies libero, non ornare lacus. Vivamus
          dictum erat justo, maximus fringilla dolor feugiat vel. Nunc sit amet
          suscipit sem. Nullam eu erat consequat, commodo ipsum a, tempor
          lectus. Curabitur aliquet hendrerit laoreet. Nunc rutrum, ligula quis
          hendrerit dictum, augue felis vestibulum metus, sed blandit metus
          tellus ac risus. Nunc dignissim fermentum varius. Donec convallis sed
          enim in iaculis. Phasellus vitae felis sed dui dignissim auctor ac sit
          amet enim.
        </div>
        <div data-title="last">Last</div>
      </HvWizard>
    </>
  );
}


const RandomFormComponent = (props: Record<string, any>) => {
  const { context, setContext, tab } = useContext(HvWizardContext);
  const [formData, setFormData] = useState({});


  const [text, setText] = useState(context[tab]?.form.name ?? "");
  const [isValid, setIsValid] = useState(!!context[tab]?.valid);


  const parseStatus = () => {
    return isValid ? "valid" : "invalid";
  };


  const parseStatusMessage = () => {
    return isValid ? "" : "This field is required";
  };


  const toggleContextValid = useCallback(
    (valid: boolean) =>
      setContext({ ...context, [tab]: { ...context[tab], valid } }),
    [context, setContext, tab],
  );


  const handleFieldValue = (fieldName: string, fieldValue: string) => {
    let valid = false;
    setText(fieldValue);


    if (fieldValue !== "") {
      valid = true;
      toggleContextValid(true);
    } else {
      toggleContextValid(false);
    }


    setIsValid(valid);
    setFormData((fd) => {
      const updatedForm = { ...fd, [fieldName]: fieldValue };
      return updatedForm;
    });
    setContext((c) => ({
      ...c,
      [tab]: {
        ...c[tab],
        form: { ...formData, [fieldName]: fieldValue },
        valid,
      },
    }));
  };


  return (
    <form noValidate {...props}>
      <HvGrid container>
        <HvGrid item xs={12}>
          <HvInput
            inputProps={{ autoComplete: "off" }}
            label="Name"
            value={text}
            placeholder="Type the name"
            status={parseStatus()}
            statusMessage={parseStatusMessage()}
            onChange={(evt, value) => handleFieldValue("name", value)}
            required
          />
        </HvGrid>
      </HvGrid>
    </form>
  );
};