@hitachivantara/uikit-react-lab
Version:
Contributed React components for the NEXT UI Kit.
133 lines (132 loc) • 4.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
const WizardActions_styles = require("./WizardActions.styles.cjs");
const WizardContext = require("../WizardContext/WizardContext.cjs");
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 } = WizardActions_styles.useClasses(classesProp);
const { context, setContext, tab, setTab } = react.useContext(WizardContext.default);
const [pages, setPages] = react.useState(0);
const [canSubmit, setCanSubmit] = react.useState(false);
react.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 = react.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 = react.useCallback(
() => handleSubmit(context),
[handleSubmit, context]
);
const nextDisabled = react.useMemo(() => {
if (loading) return true;
return !skippable && !context?.[tab]?.valid;
}, [context, loading, skippable, tab]);
return /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvDialogActions, { className: classes.actionsContainer, children: [
/* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvButton,
{
variant: "secondaryGhost",
onClick: handleClose,
className: classes.buttonWidth,
children: labels.cancel ?? "Cancel"
}
),
skippable && /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvButton,
{
variant: "secondaryGhost",
disabled: isLastPage,
className: classes.buttonWidth,
onClick: handleSkip,
children: labels.skip ?? "Skip"
}
),
/* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: css({ flex: 1 }), children: " " }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.buttonsContainer, children: [
/* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvButton,
{
variant: "secondaryGhost",
className: classes.buttonWidth,
disabled: tab <= 0,
onClick: () => {
if (handleBeforePrevious) {
handleBeforePrevious();
} else {
setTab((t) => t - 1);
}
},
startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {}),
children: labels.previous ?? "Previous"
}
),
isLastPage ? /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvButton,
{
variant: "primary",
className: classes.buttonWidth,
disabled: loading || !canSubmit,
onClick: handleSubmitInternal,
children: labels.submit ?? "Submit"
}
) : /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvButton,
{
variant: "secondaryGhost",
className: cx(classes.buttonWidth, classes.buttonSpacing),
onClick: () => {
if (handleBeforeNext) {
handleBeforeNext();
} else {
setTab((t) => t + 1);
}
},
disabled: nextDisabled,
endIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {}),
children: labels.next ?? "Next"
}
)
] })
] });
};
exports.wizardActionsClasses = WizardActions_styles.staticClasses;
exports.HvWizardActions = HvWizardActions;