@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
71 lines • 3.51 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDataTableShadow = void 0;
const react_1 = __importDefault(require("react"));
const useDataTableShadow = ({ ref, headBoxShadow, leftBoxShadow, rightBoxShadow, }) => {
react_1.default.useEffect(() => {
const wrapper = ref.current;
const scrollableContainer = wrapper?.querySelector('[data-datatable-scrollable-container]');
const updateShadow = () => {
if (!scrollableContainer) {
return;
}
// Apply shadow on sticky head
const tableHead = scrollableContainer.querySelector('[data-table-head]');
if (tableHead instanceof HTMLElement &&
tableHead.hasAttribute('data-sticky') &&
headBoxShadow) {
if (scrollableContainer.scrollTop) {
tableHead.style.boxShadow = headBoxShadow;
}
else {
tableHead.style.boxShadow = '';
}
}
// Apply shadow when sticky column is active to the left
if (leftBoxShadow) {
// Apply shadow effect to the left border
// In order to not be hidden by the inner content, it has to be applied in the TableLeftBorderShadowStyled div
const leftBoxShadowContainer = wrapper?.querySelector('[data-datatable-left-shadow]');
if (leftBoxShadowContainer instanceof HTMLElement) {
if (scrollableContainer.scrollLeft) {
leftBoxShadowContainer.style.boxShadow = leftBoxShadow;
// height can be ajusted to not show the shadow over the scrollbar
leftBoxShadowContainer.style.height = `${scrollableContainer.clientHeight}px`;
}
else {
leftBoxShadowContainer.style.boxShadow = '';
}
}
}
if (rightBoxShadow) {
// Apply shadow effect to the sticky box container column
const rightBoxShadowContainer = wrapper?.querySelector('[data-datatable-right-shadow]');
if (rightBoxShadowContainer instanceof HTMLElement) {
if (scrollableContainer.scrollLeft + scrollableContainer.clientWidth <
scrollableContainer.scrollWidth) {
rightBoxShadowContainer.style.boxShadow = rightBoxShadow;
// height can be ajusted to not show the shadow over the scrollbar
rightBoxShadowContainer.style.height = `${scrollableContainer.clientHeight}px`;
}
else {
rightBoxShadowContainer.style.boxShadow = '';
}
}
}
};
updateShadow();
scrollableContainer?.addEventListener('scroll', updateShadow);
window.addEventListener('resize', updateShadow);
return () => {
scrollableContainer?.removeEventListener('scroll', updateShadow);
window.removeEventListener('resize', updateShadow);
};
}, []);
return {};
};
exports.useDataTableShadow = useDataTableShadow;
//# sourceMappingURL=useDataTableShadow.js.map