@hitachivantara/uikit-react-lab/dist/esm/Wizard/WizardActions/WizardActions.js

Contributed React components for the NEXT UI Kit.

import { jsxs, jsx } from "react/jsx-runtime";
import { useContext, useState, useEffect, useCallback, useMemo } from "react";
import { HvDialogActions, HvButton } from "@hitachivantara/uikit-react-core";
import { Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
import { useClasses } from "./WizardActions.styles.js";
import { staticClasses } from "./WizardActions.styles.js";
import HvWizardContext from "../WizardContext/WizardContext.js";
const HvWizardActions = ({
  classes: classesProp,
  handleClose,
  handleSubmit,
  loading = false,
  skippable = false,
  labels = {
    cancel: "Cancel",
    next: "Next",
    previous: "Previous",
    skip: "Skip",
    submit: "Submit"
  },
  handleBeforeNext,
  handleBeforePrevious
}) => {
  const { classes, css, cx } = useClasses(classesProp);
  const { context, setContext, tab, setTab } = useContext(HvWizardContext);
  const [pages, setPages] = useState(0);
  const [canSubmit, setCanSubmit] = useState(false);
  useEffect(() => {
    const contextEntries = Object.entries(context);
    if (contextEntries.length) {
      setPages(contextEntries.length);
      const validWizard = Object.entries(context).every(
        ([, value]) => value?.valid
      );
      if (validWizard !== canSubmit) {
        setCanSubmit(validWizard);
      }
    }
  }, [context, canSubmit, setCanSubmit, setPages]);
  const lastPage = pages - 1;
  const isLastPage = tab >= lastPage;
  const handleSkip = useCallback(() => {
    setContext(
      (c) => Object.entries(c).reduce((acc, [key, child]) => {
        acc[+key] = {
          ...child,
          valid: child?.valid !== false
        };
        return acc;
      }, {})
    );
    setTab(lastPage);
  }, [setTab, lastPage, setContext]);
  const handleSubmitInternal = useCallback(
    () => handleSubmit(context),
    [handleSubmit, context]
  );
  const nextDisabled = useMemo(() => {
    if (loading) return true;
    return !skippable && !context?.[tab]?.valid;
  }, [context, loading, skippable, tab]);
  return /* @__PURE__ */ jsxs(HvDialogActions, { className: classes.actionsContainer, children: [
    /* @__PURE__ */ jsx(
      HvButton,
      {
        variant: "secondaryGhost",
        onClick: handleClose,
        className: classes.buttonWidth,
        children: labels.cancel ?? "Cancel"
      }
    ),
    skippable && /* @__PURE__ */ jsx(
      HvButton,
      {
        variant: "secondaryGhost",
        disabled: isLastPage,
        className: classes.buttonWidth,
        onClick: handleSkip,
        children: labels.skip ?? "Skip"
      }
    ),
    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: css({ flex: 1 }), children: " " }),
    /* @__PURE__ */ jsxs("div", { className: classes.buttonsContainer, children: [
      /* @__PURE__ */ jsx(
        HvButton,
        {
          variant: "secondaryGhost",
          className: classes.buttonWidth,
          disabled: tab <= 0,
          onClick: () => {
            if (handleBeforePrevious) {
              handleBeforePrevious();
            } else {
              setTab((t) => t - 1);
            }
          },
          startIcon: /* @__PURE__ */ jsx(Backwards, {}),
          children: labels.previous ?? "Previous"
        }
      ),
      isLastPage ? /* @__PURE__ */ jsx(
        HvButton,
        {
          variant: "primary",
          className: classes.buttonWidth,
          disabled: loading || !canSubmit,
          onClick: handleSubmitInternal,
          children: labels.submit ?? "Submit"
        }
      ) : /* @__PURE__ */ jsx(
        HvButton,
        {
          variant: "secondaryGhost",
          className: cx(classes.buttonWidth, classes.buttonSpacing),
          onClick: () => {
            if (handleBeforeNext) {
              handleBeforeNext();
            } else {
              setTab((t) => t + 1);
            }
          },
          disabled: nextDisabled,
          endIcon: /* @__PURE__ */ jsx(Forwards, {}),
          children: labels.next ?? "Next"
        }
      )
    ] })
  ] });
};
export {
  HvWizardActions,
  staticClasses as wizardActionsClasses
};