@carbon/ibm-products
Version:
Carbon for IBM Products
149 lines (147 loc) • 6.33 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_devtools = require("../../global/js/utils/devtools.js");
const require_clamp = require("../../global/js/utils/clamp.js");
const require_context = require("./context.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
let _carbon_react_icons = require("@carbon/react/icons");
//#region src/components/InterstitialScreen/InterstitialScreenFooter.tsx
/**
* Copyright IBM Corp. 2024, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const InterstitialScreenFooter = react.default.forwardRef((props, ref) => {
const { className = "", skipButtonLabel = "Skip", previousButtonLabel = "Back", nextButtonLabel = "Next", startButtonLabel = "Get Started", actionButtonRenderer, onAction, ...rest } = props;
const footerBlockClass = `${require_context.blockClass}--footer`;
const { handleClose, progStep, handleGotoStep, stepCount, disableButtonConfig, isFullScreen } = (0, react.useContext)(require_context.InterstitialScreenContext);
const startButtonRef = (0, react.useRef)(null);
const nextButtonRef = (0, react.useRef)(null);
const [loadingAction, setLoadingAction] = (0, react.useState)("");
const carbonPrefix = (0, _carbon_react.usePrefix)();
const isMultiStep = !!stepCount && stepCount > 1;
const progStepFloor = 0;
const progStepCeil = stepCount - 1;
(0, react.useEffect)(() => {
if (progStep + 1 === stepCount && startButtonRef.current) startButtonRef.current.focus();
}, [progStep]);
const handleAction = async (actionType) => {
setLoadingAction(actionType);
const abortContinue = await onAction?.(actionType, {
handleGotoStep,
progStep,
stepCount,
disableButtonConfig
});
setLoadingAction("");
if (abortContinue) return;
if (actionType === "next" || actionType === "back") {
const targetStep = require_clamp.clamp(progStep + (actionType === "next" ? 1 : -1), progStepFloor, progStepCeil);
handleGotoStep?.(targetStep);
} else handleClose?.(actionType);
};
const handleStart = () => handleAction("start");
const handleSkip = () => handleAction("skip");
const handleClickNext = () => handleAction("next");
const handleClickPrev = () => handleAction("back");
const getRenderIcon = (0, react.useMemo)(() => {
if (loadingAction !== "start" && isMultiStep && progStep === progStepCeil) return { renderIcon: _carbon_react_icons.ArrowRight };
return {};
}, [
loadingAction,
isMultiStep,
progStep,
progStepCeil
]);
const getFooterContent = () => /* @__PURE__ */ react.default.createElement(_carbon_react.ButtonSet, null, isMultiStep && skipButtonLabel !== "" && /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
className: `${require_context.blockClass}--skip-btn`,
kind: "ghost",
size: "lg",
title: skipButtonLabel,
onClick: handleSkip,
disabled: disableButtonConfig?.skip
}, skipButtonLabel, loadingAction === "skip" && /* @__PURE__ */ react.default.createElement(_carbon_react.InlineLoading, null)), isMultiStep && progStep > 0 && /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
className: `${require_context.blockClass}--prev-btn`,
kind: "secondary",
size: "lg",
title: previousButtonLabel,
disabled: disableButtonConfig?.back,
onClick: handleClickPrev
}, previousButtonLabel, loadingAction === "back" && /* @__PURE__ */ react.default.createElement(_carbon_react.InlineLoading, null)), isMultiStep && progStep < progStepCeil && /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
className: `${require_context.blockClass}--next-btn`,
renderIcon: loadingAction !== "next" ? _carbon_react_icons.ArrowRight : void 0,
ref: nextButtonRef,
size: "lg",
title: nextButtonLabel,
disabled: disableButtonConfig?.next,
onClick: handleClickNext
}, nextButtonLabel, loadingAction === "next" && /* @__PURE__ */ react.default.createElement(_carbon_react.InlineLoading, null)), (isMultiStep && progStep === progStepCeil || !isMultiStep) && /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
className: `${require_context.blockClass}--start-btn`,
ref: startButtonRef,
size: "lg",
title: startButtonLabel,
disabled: disableButtonConfig?.start,
onClick: handleStart,
...getRenderIcon
}, startButtonLabel, loadingAction === "start" && /* @__PURE__ */ react.default.createElement(_carbon_react.InlineLoading, null)));
const footerContent = actionButtonRenderer ? actionButtonRenderer({
handleGotoStep,
progStep,
stepCount,
disableButtonConfig
}) : getFooterContent();
return isFullScreen ? /* @__PURE__ */ react.default.createElement("div", {
ref,
className: `${footerBlockClass} ${className} ${carbonPrefix}--modal-footer`,
...require_devtools.getDevtoolsProps("InterstitialScreenFooter"),
...rest
}, footerContent) : /* @__PURE__ */ react.default.createElement(_carbon_react.ModalFooter, {
className: `${footerBlockClass} ${className}`,
ref,
...rest
}, footerContent);
});
InterstitialScreenFooter.propTypes = {
/**
* This is an optional callback prop that allows to render your custom footer action buttons.
*/
actionButtonRenderer: prop_types.default.func,
/**
* Provide an optional class to be applied to the containing node.
*/
className: prop_types.default.string,
/**
* The label for the Next button.
*/
nextButtonLabel: prop_types.default.string,
/**
* optional asynchronous callback on action button click (skip, previous, next and start)
* note: this is applicable when not using custom actionButtonRenderer
*/
onAction: prop_types.default.func,
/**
* The label for the Previous button.
*
*/
previousButtonLabel: prop_types.default.string,
/**
* The label for the skip button.
*/
skipButtonLabel: prop_types.default.string,
/**
* The label for the start button.
*/
startButtonLabel: prop_types.default.string
};
//#endregion
exports.default = InterstitialScreenFooter;