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

Contributed React components to UI Kit by the community.

import HvWizardContext from "../WizardContext/WizardContext.js";
import { useClasses } from "./WizardActions.styles.js";
import { useCallback, useContext, useEffect, useMemo, useState } from "react";
import { HvButton, HvDialogActions } from "@hitachivantara/uikit-react-core";
import { jsx, jsxs } from "react/jsx-runtime";
import { Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
//#region src/Wizard/WizardActions/WizardActions.tsx
var 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: "\xA0"
			}),
			/* @__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"
				})]
			})
		]
	});
};
//#endregion
export { HvWizardActions };