@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
63 lines • 3.5 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDataTableStickyRightColumns = void 0;
const react_1 = __importDefault(require("react"));
const resizeObserver_1 = require("../../../utils/resizeObserver/resizeObserver");
const hasScroll_1 = require("../../../utils/scroll/hasScroll");
const useDataTableStickyRightColumns = ({ ref, }) => {
react_1.default.useEffect(() => {
const scrollableContainer = ref.current?.querySelector('[data-datatable-scrollable-container]');
const rightBoxShadowContainer = ref.current?.querySelector('[data-datatable-right-shadow]');
let resizeObserver;
if (scrollableContainer instanceof HTMLElement) {
const handleElementResize = (element) => {
const _hasHorizontalScroll = (0, hasScroll_1.hasHorizontalScroll)(element);
// For each row, set the right position of its sticky cells
const rows = element.querySelectorAll('[data-table-row]');
// used to calc rightBoxShadowContainer position
let maxStickyRightWidth = 0;
rows.forEach(row => {
if (row instanceof HTMLElement) {
// Retrieve all the cell with sticky attribute
const stickyCells = Array.from(
// deprecated - delete [data-sticky="true"] after boolean is deleted from the sticky type
row.querySelectorAll('[data-sticky="true"], [data-sticky="right"]')).reverse();
let right = 0;
stickyCells.forEach(stickyCell => {
if (stickyCell instanceof HTMLElement) {
stickyCell.style.right = _hasHorizontalScroll ? `${right}px` : 'auto';
right += stickyCell.offsetWidth;
}
});
maxStickyRightWidth = Math.max(maxStickyRightWidth, right);
}
});
// Once the sticky position have been added, set the position of the rightBoxShadowContainer
// This position should be the same as the max width of the sticky cells
if (rightBoxShadowContainer instanceof HTMLElement) {
// If vertical scroll, add scroll bar size to maxStickyRightWidth
const _hasVerticalScroll = (0, hasScroll_1.hasVerticalScroll)(element);
if (_hasVerticalScroll) {
const scrollBarSize = element.offsetWidth - element.clientWidth;
maxStickyRightWidth += scrollBarSize;
}
rightBoxShadowContainer.style.right = `${maxStickyRightWidth}px`;
}
};
handleElementResize(scrollableContainer);
resizeObserver = new resizeObserver_1.ResizeObserver(() => {
handleElementResize(scrollableContainer);
});
resizeObserver.observe(scrollableContainer);
}
return () => {
resizeObserver?.disconnect();
};
}, []);
return {};
};
exports.useDataTableStickyRightColumns = useDataTableStickyRightColumns;
//# sourceMappingURL=useDataTableStickyRightColumns.js.map