@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
72 lines • 3.84 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDataTableStickyDividers = void 0;
const react_1 = __importDefault(require("react"));
const resizeObserver_1 = require("../../../utils/resizeObserver/resizeObserver");
const hasScroll_1 = require("../../../utils/scroll/hasScroll");
const useDataTableStickyDividers = ({ ref, }) => {
react_1.default.useEffect(() => {
const scrollableContainer = ref.current?.querySelector('[data-datatable-scrollable-container]');
let resizeObserver;
if (scrollableContainer instanceof HTMLElement) {
const handleElementResize = (element) => {
const _hasHorizontalScroll = (0, hasScroll_1.hasHorizontalScroll)(element);
// If there are sticky left cells:
// -> dividers should be sticky to the left too
// -> left and right datatable shadows should remain under the divider (z-index in the divider should be greather than the z-index of the shadows)
// If there are not sticky left cells:
// -> dividers with should be updated with the offset width of the table in order to have a width of 100% (in case the datatable has horizontal scroll)
const dividers = element.querySelectorAll('[data-table-divider]');
const stickyLeft = element.querySelectorAll('[data-sticky="left"]').length > 0;
// Calc shadow z-index when sticky left
let shadowZIndex = 0;
// Calc divider width when !sticky left
let dividerWidth = 0;
if (stickyLeft) {
const leftBoxShadowContainer = ref.current?.querySelector('[data-datatable-left-shadow]');
if (leftBoxShadowContainer) {
const shadowContainerStyle = window.getComputedStyle(leftBoxShadowContainer);
const _shadowZIndex = shadowContainerStyle.getPropertyValue('z-index');
if (_shadowZIndex) {
shadowZIndex = parseInt(_shadowZIndex, 10);
}
}
}
else {
const rows = element.querySelectorAll('[data-table-row]');
rows.forEach(row => {
if (row instanceof HTMLElement) {
dividerWidth = Math.max(dividerWidth, row.offsetWidth);
}
});
}
dividers.forEach(divider => {
if (divider instanceof HTMLElement) {
if (stickyLeft) {
divider.style.position = _hasHorizontalScroll ? 'sticky' : '';
divider.style.left = _hasHorizontalScroll ? '0' : '';
divider.style.zIndex = _hasHorizontalScroll ? `${shadowZIndex + 1}` : '';
}
else {
divider.style.width = _hasHorizontalScroll ? `${dividerWidth}px` : '';
}
}
});
};
handleElementResize(scrollableContainer);
resizeObserver = new resizeObserver_1.ResizeObserver(() => {
handleElementResize(scrollableContainer);
});
resizeObserver.observe(scrollableContainer);
}
return () => {
resizeObserver?.disconnect();
};
}, []);
return {};
};
exports.useDataTableStickyDividers = useDataTableStickyDividers;
//# sourceMappingURL=useDataTableStickyDividers.js.map