@carbon/ibm-products
Version:
Carbon for IBM Products
101 lines (97 loc) • 3.99 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.
*/
import { usePrefix, ModalHeader, ProgressIndicator, ProgressStep } from '@carbon/react';
import React__default from 'react';
import PropTypes from '../../_virtual/index.js';
import { pkg } from '../../settings.js';
import cx from 'classnames';
import { InterstitialScreenContext } from './InterstitialScreen.js';
import { useId } from '../../global/js/utils/useId.js';
const InterstitialScreenHeader = /*#__PURE__*/React__default.forwardRef(props => {
var _h, _h2;
const {
className = '',
headerTitle,
headerSubTitle,
closeIconDescription,
hideProgressIndicator,
children
} = props;
const {
bodyChildrenData,
isFullScreen,
progStep,
handleClose,
stepCount
} = React__default.useContext(InterstitialScreenContext);
const blockClass = `${pkg.prefix}--interstitial-screen`;
const headerBlockClass = `${blockClass}--internal-header`;
const _useId = useId();
const carbonPrefix = usePrefix();
const headerContent = () => {
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (headerTitle || headerSubTitle) && /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}--titleContainer`
}, headerTitle && (_h || (_h = /*#__PURE__*/React__default.createElement("h1", null, headerTitle))), headerSubTitle && (_h2 || (_h2 = /*#__PURE__*/React__default.createElement("h2", null, headerSubTitle)))), children, !hideProgressIndicator && bodyChildrenData && Array.isArray(bodyChildrenData) && /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}--progress`
}, /*#__PURE__*/React__default.createElement(ProgressIndicator, {
vertical: false,
currentIndex: progStep
}, bodyChildrenData?.map((child, idx) => {
if (/*#__PURE__*/React__default.isValidElement(child)) {
const stepKey = `${_useId}_${child.props?.stepTitle?.replace(/\s+/g, '') || idx}`;
return /*#__PURE__*/React__default.createElement(ProgressStep, {
key: stepKey,
label: child.props.stepTitle || '',
translateWithId: child.props.translateWithId
});
}
})), /*#__PURE__*/React__default.createElement("div", {
"aria-live": "polite",
"aria-atomic": "true",
className: `${carbonPrefix}--visually-hidden`
}, "Step ", progStep + 1, " of ", stepCount)));
};
return isFullScreen ? /*#__PURE__*/React__default.createElement("header", {
className: cx(headerBlockClass, className, {
[`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children
})
}, headerContent()) : /*#__PURE__*/React__default.createElement(ModalHeader, {
className: cx(headerBlockClass, className, {
[`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children
}),
closeModal: handleClose,
iconDescription: closeIconDescription
}, headerContent());
});
InterstitialScreenHeader.propTypes = {
/**
* Provide the optional content for header section and will be render after header titles and before progress indicator.
* People can make use of this if they want to have custom header.
*/
children: PropTypes.node,
/**
* Provide an optional class to be applied to the containing node.
*/
className: PropTypes.string,
/**
* Tooltip text and aria label for the Close button icon.
*/
closeIconDescription: PropTypes.string,
/**
* Provide an optional sub title to be applied to the header >.
*/
headerSubTitle: PropTypes.string,
/**
* Provide an optional title to be applied to the header >.
*/
headerTitle: PropTypes.string,
/**
* Optional parameter to hide the progress indicator when multiple steps are used.
*/
hideProgressIndicator: PropTypes.bool
};
export { InterstitialScreenHeader as default };