@carbon/ibm-products
Version:
Carbon for IBM Products
145 lines (143 loc) • 6.52 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_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
const require_scrollableAncestor = require("../../global/js/utils/scrollableAncestor.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _carbon_react = require("@carbon/react");
//#region src/components/PageHeader/PageHeaderUtils.jsx
/**
* Copyright IBM Corp. 2020, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const blockClass = `${require_settings.pkg.prefix}--page-header`;
/**
* Assesses the vertical height of various elements and calls setMetrics with update
* @param {{}} headerRef
* @param {{}} offsetTopMeasuringRef
* @param {object} navigation
* @param {boolean} enableBreadcrumbScroll
* @param {boolean} hasActionBar
* @param {boolean} widthIsNarrow
* @param {()} setMetrics
*/
const utilCheckUpdateVerticalSpace = (headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics) => {
const dynamicRefs = {};
const getDynamicRef = (selector) => {
/* istanbul ignore if */
if (!headerRef.current) return;
else {
let dRef = dynamicRefs[selector];
/* istanbul ignore else */
if (!dRef || dRef.parentNode === null) dynamicRefs[selector] = headerRef.current.querySelector(selector);
}
return dynamicRefs[selector];
};
setMetrics((previous) => {
const update = {};
const breadcrumbTitleEl = getDynamicRef(`.${blockClass}__breadcrumb-title`);
const breadcrumbRowEl = getDynamicRef(`.${blockClass}__breadcrumb-row`);
const titleRowEl = getDynamicRef(`.${blockClass}__title-row`);
const subtitleRowEl = getDynamicRef(`.${blockClass}__subtitle-row`);
const availableRowEl = getDynamicRef(`.${blockClass}__available-row`);
const navigationRowEl = getDynamicRef(`.${blockClass}__navigation-row`);
const pageActionsEl = getDynamicRef(`.${blockClass}__page-actions`);
/* istanbul ignore next */
update.headerHeight = headerRef.current ? headerRef.current.clientHeight : 0;
/* istanbul ignore next */
update.headerWidth = headerRef.current ? headerRef.current.offsetWidth : 0;
const scrollableContainer = require_scrollableAncestor.scrollableAncestor(headerRef.current);
/* istanbul ignore next */ const scrollableContainerTop = scrollableContainer ? scrollableContainer.getBoundingClientRect().top : 0;
/* istanbul ignore next */ const offsetMeasuringTop = offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 0;
update.headerOffset = offsetMeasuringTop !== 0 ? offsetMeasuringTop - scrollableContainerTop : 0;
/* istanbul ignore next */
update.breadcrumbRowHeight = breadcrumbRowEl ? breadcrumbRowEl.clientHeight : 0;
/* istanbul ignore next */
update.breadcrumbRowWidth = breadcrumbRowEl ? breadcrumbRowEl.offsetWidth : 0;
/* istanbul ignore next */
update.breadcrumbTitleHeight = breadcrumbTitleEl ? breadcrumbTitleEl.offsetHeight : 1;
/* istanbul ignore next */
update.titleRowHeight = titleRowEl ? titleRowEl.clientHeight : 0;
/* istanbul ignore next */
update.subtitleRowHeight = subtitleRowEl ? subtitleRowEl.clientHeight : 0;
/* istanbul ignore next */
update.availableRowHeight = availableRowEl ? availableRowEl.clientHeight : 0;
/* istanbul ignore next */
update.navigationRowHeight = navigationRowEl ? navigationRowEl.clientHeight : 1;
update.headerTopValue = -update.headerHeight;
if (navigation) update.headerTopValue += update.navigationRowHeight;
if (!enableBreadcrumbScroll || !navigation) update.headerTopValue += update.breadcrumbRowHeight;
if (enableBreadcrumbScroll) update.headerTopValue -= navigation ? hasActionBar ? 0 : 10 : update.headerHeight;
let val;
/* istanbul ignore if */
if (breadcrumbRowEl) {
val = parseFloat(window.getComputedStyle(breadcrumbRowEl).getPropertyValue("margin-bottom"), 10);
update.breadcrumbRowSpaceBelow = isNaN(val) ? 0 : val;
}
/* istanbul ignore if */
if (titleRowEl) {
val = parseFloat(window.getComputedStyle(titleRowEl).getPropertyValue("margin-top"), 10);
update.titleRowSpaceAbove = isNaN(val) ? 0 : val;
if (pageActionsEl) {
val = parseFloat(window.getComputedStyle(pageActionsEl).getPropertyValue("margin-top"), 10);
update.pageActionsSpaceAbove = titleRowEl.clientHeight - pageActionsEl.clientHeight + update.titleRowSpaceAbove - (isNaN(val) ? 0 : val);
}
}
if (!hasActionBar && pageActionsEl) update.headerTopValue -= update.titleRowSpaceAbove;
return {
...previous,
...update
};
});
};
const utilSetCollapsed = (collapse, headerRef, headerOffset, headerTopValue) => {
/* istanbul ignore else */
let scrollableTarget = require_scrollableAncestor.scrollableAncestor(headerRef.current);
if (collapse) scrollableTarget.scrollTo({
top: headerOffset - headerTopValue,
behavior: "smooth"
});
else scrollableTarget.scrollTo({
top: 0,
behavior: "smooth"
});
};
const utilGetBreadcrumbItemForTitle = (blockClass, collapseTitle, title) => {
let breadcrumbTitle;
if (title) {
if (title.text !== void 0) breadcrumbTitle = {
label: title.loading ? /* @__PURE__ */ react.default.createElement(_carbon_react.SkeletonText, null) : title.text,
title: title.text
};
else if (title.content !== void 0) breadcrumbTitle = {
label: title.breadcrumbContent ?? title.content ?? title.asText,
title: title.asText
};
else breadcrumbTitle = {
label: title,
title
};
if (breadcrumbTitle) {
breadcrumbTitle.key = "breadcrumb-title";
breadcrumbTitle.isCurrentPage = true;
breadcrumbTitle.href = "#";
breadcrumbTitle.className = (0, import_classnames.default)([`${blockClass}__breadcrumb-title`, { [`${blockClass}__breadcrumb-title--pre-collapsed`]: collapseTitle }]);
}
if (title.shortTitle) breadcrumbTitle.shortTitle = title.shortTitle;
return breadcrumbTitle;
}
};
//#endregion
exports.blockClass = blockClass;
exports.utilCheckUpdateVerticalSpace = utilCheckUpdateVerticalSpace;
exports.utilGetBreadcrumbItemForTitle = utilGetBreadcrumbItemForTitle;
exports.utilSetCollapsed = utilSetCollapsed;