@carbon/ibm-products
Version:
Carbon for IBM Products
165 lines (158 loc) • 6.23 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 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.
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var settings = require('../../settings.js');
var index = require('../../_virtual/index.js');
var InterstitialScreen = require('./InterstitialScreen.js');
var react = require('@carbon/react');
var clamp = require('../../global/js/utils/clamp.js');
var icons = require('@carbon/react/icons');
var _InlineLoading, _InlineLoading2, _InlineLoading3, _InlineLoading4;
const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef(props => {
const {
className = '',
skipButtonLabel = 'Skip',
previousButtonLabel = 'Back',
nextButtonLabel = 'Next',
startButtonLabel = 'Get Started',
actionButtonRenderer,
onAction
} = props;
const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
const {
handleClose,
progStep,
handleGotoStep,
stepCount,
disableButtonConfig,
isFullScreen
} = React.useContext(InterstitialScreen.InterstitialScreenContext);
const startButtonRef = React.useRef(undefined);
const nextButtonRef = React.useRef(undefined);
const [loadingAction, setLoadingAction] = React.useState('');
const isMultiStep = !!stepCount;
const progStepFloor = 0;
const progStepCeil = stepCount - 1;
//this will focus the start button on last step when next button is hidden and start button is shown
React.useEffect(() => {
if (progStep + 1 === stepCount && startButtonRef.current) {
startButtonRef.current.focus();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [progStep]);
const handleAction = async actionType => {
setLoadingAction(actionType);
await onAction?.(actionType, {
handleGotoStep,
progStep,
stepCount,
disableButtonConfig
});
setLoadingAction('');
if (actionType === 'next' || actionType === 'back') {
const stepDelta = actionType === 'next' ? 1 : -1;
const targetStep = clamp.clamp(progStep + stepDelta, progStepFloor, progStepCeil);
handleGotoStep?.(targetStep);
} else {
handleClose?.(actionType);
}
};
// Usage
const handleStart = () => handleAction('start');
const handleSkip = () => handleAction('skip');
const handleClickNext = () => handleAction('next');
const handleClickPrev = () => handleAction('back');
const getRenderIcon = React.useMemo(() => {
if (loadingAction !== 'start' && isMultiStep && progStep === progStepCeil) {
return {
renderIcon: icons.ArrowRight
};
}
return {};
}, [loadingAction, isMultiStep, progStep, progStepCeil]);
const getFooterContent = () => /*#__PURE__*/React.createElement("div", {
className: `${blockClass}--footer ${className}`
}, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React.createElement(react.Button, {
className: `${blockClass}--skip-btn`,
kind: "ghost",
size: "lg",
title: skipButtonLabel,
onClick: handleSkip,
disabled: disableButtonConfig?.skip
}, skipButtonLabel, loadingAction === 'skip' && (_InlineLoading || (_InlineLoading = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), /*#__PURE__*/React.createElement("div", {
className: `${blockClass}--footer-controls`
}, isMultiStep && progStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
className: `${blockClass}--prev-btn`,
kind: "secondary",
size: "lg",
title: previousButtonLabel,
disabled: disableButtonConfig?.back,
onClick: handleClickPrev
}, previousButtonLabel, loadingAction === 'back' && (_InlineLoading2 || (_InlineLoading2 = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), isMultiStep && progStep < progStepCeil && /*#__PURE__*/React.createElement(react.Button, {
className: `${blockClass}--next-btn`,
renderIcon: loadingAction !== 'next' ? icons.ArrowRight : null,
ref: nextButtonRef,
size: "lg",
title: nextButtonLabel,
disabled: disableButtonConfig?.next,
onClick: handleClickNext
}, nextButtonLabel, loadingAction === 'next' && (_InlineLoading3 || (_InlineLoading3 = /*#__PURE__*/React.createElement(react.InlineLoading, null)))), (isMultiStep && progStep === progStepCeil || !isMultiStep) && /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
className: `${blockClass}--start-btn`,
ref: startButtonRef,
size: "lg",
title: startButtonLabel,
disabled: disableButtonConfig?.start,
onClick: handleStart
}, getRenderIcon), startButtonLabel, loadingAction === 'start' && (_InlineLoading4 || (_InlineLoading4 = /*#__PURE__*/React.createElement(react.InlineLoading, null))))));
if (actionButtonRenderer) {
return /*#__PURE__*/React.createElement("div", {
className: `${blockClass}--footer`
}, actionButtonRenderer({
handleGotoStep,
progStep,
stepCount,
disableButtonConfig
}));
}
return isFullScreen ? getFooterContent() : /*#__PURE__*/React.createElement(react.ModalFooter, null, getFooterContent());
});
InterstitialScreenFooter.propTypes = {
/**
* This is an optional callback prop that allows to render your custom footer action buttons.
*/
actionButtonRenderer: index.default.func,
/**
* Provide an optional class to be applied to the containing node.
*/
className: index.default.string,
/**
* The label for the Next button.
*/
nextButtonLabel: index.default.string,
/**
* optional asynchronous callback on action button click (skip, previous, next and start)
* note: this is applicable when not using custom actionButtonRenderer
*/
onAction: index.default.func,
/**
* The label for the Previous button.
*
*/
previousButtonLabel: index.default.string,
/**
* The label for the skip button.
*/
skipButtonLabel: index.default.string,
/**
* The label for the start button.
*/
startButtonLabel: index.default.string
};
exports.default = InterstitialScreenFooter;