@carbon/ibm-products
Version:
Carbon for IBM Products
114 lines (112 loc) • 5.04 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_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_utilities = require("@carbon/utilities");
//#region src/components/InterstitialScreen/InterstitialScreenBody.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 InterstitialScreenBody = react.default.forwardRef((props, ref) => {
const { className = "", contentRenderer, ...rest } = props;
const bodyBlockClass = `${require_context.blockClass}--internal-body`;
const [stepType, setStepType] = (0, react.useState)();
const { setBodyChildrenData, bodyChildrenData, isFullScreen, setProgStep, bodyScrollRef, handleGotoStep, progStep, setStepCount, disableButtonConfig, setDisableButtonConfig } = (0, react.useContext)(require_context.InterstitialScreenContext);
const carouselContainerRef = (0, react.useRef)(null);
const carouselInitRef = (0, react.useRef)(null);
(0, react.useEffect)(() => {
const _bodyContent = contentRenderer?.({
handleGotoStep,
progStep,
disableActionButton
}) ?? props.children;
const children = (0, react.isValidElement)(_bodyContent) && _bodyContent.props.children != null ? _bodyContent.props.children : _bodyContent;
const validChildren = react.default.Children.toArray(children).filter(react.isValidElement);
if (validChildren.length > 1) {
setStepType("multi");
setStepCount?.(validChildren.length);
setBodyChildrenData?.(validChildren);
} else {
setStepType("single");
setStepCount?.(1);
setBodyChildrenData?.(_bodyContent);
}
}, [props.children, contentRenderer]);
(0, react.useEffect)(() => {
if (stepType !== "multi" || !carouselContainerRef.current || !bodyChildrenData) return;
carouselInitRef.current?.destroyEvents?.();
carouselInitRef.current = (0, _carbon_utilities.initCarousel)(carouselContainerRef.current, {
onViewChangeStart: () => {},
onViewChangeEnd: ({ currentIndex }) => {
setProgStep?.(currentIndex);
},
excludeSwipeSupport: true,
useMaxHeight: true
});
return () => {
carouselInitRef.current?.destroyEvents?.();
carouselInitRef.current = null;
};
}, [stepType]);
(0, react.useEffect)(() => {
if (stepType === "multi" && typeof progStep === "number") {
const activeIndex = (carouselInitRef.current?.getActiveItem?.())?.index ?? -1;
if (activeIndex !== -1 && activeIndex < progStep) carouselInitRef.current?.next?.();
else if (activeIndex !== -1 && activeIndex > progStep) carouselInitRef.current?.prev?.();
}
}, [progStep, stepType]);
const disableActionButton = (config) => {
setDisableButtonConfig?.({
...disableButtonConfig,
...config
});
};
const renderBody = () => /* @__PURE__ */ react.default.createElement("div", {
className: `${require_context.blockClass}--body ${className}`,
ref: isFullScreen ? bodyScrollRef ?? ref : ref,
...require_devtools.getDevtoolsProps("InterstitialScreenBody"),
...isFullScreen ? rest : {}
}, /* @__PURE__ */ react.default.createElement("div", { className: `${require_context.blockClass}--content` }, stepType === "multi" ? /* @__PURE__ */ react.default.createElement("div", {
className: `${require_context.blockClass}__carousel `,
ref: (node) => {
carouselContainerRef.current = node;
}
}, react.default.Children.map(bodyChildrenData, (child, index) => (0, react.isValidElement)(child) ? /* @__PURE__ */ react.default.createElement("div", { "data-index": index }, child) : null)) : stepType === "single" ? bodyChildrenData : ""));
return isFullScreen ? renderBody() : /* @__PURE__ */ react.default.createElement(_carbon_react.ModalBody, {
ref: bodyScrollRef ?? ref,
className: bodyBlockClass,
...rest
}, renderBody());
});
InterstitialScreenBody.propTypes = {
/**
* Optional static content for body
*/
children: prop_types.default.node,
/**
* Provide an optional class to be applied to the containing node.
*/
className: prop_types.default.string,
/**
*You can provide content either through a callback (contentRenderer) or as static children—but not both.
* If both are provided, contentRenderer always takes precedence. This optional callback should return the content
* to be rendered in the body section, which can be either a single element or an array of elements based on your needs.
* If internal state access isn’t required, you can simply use static children instead
*/
contentRenderer: prop_types.default.func
};
//#endregion
exports.default = InterstitialScreenBody;