use-funnel
Version:
82 lines (81 loc) • 3.99 kB
JavaScript
;
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var useStickyColumns = function (tableRef, _a) {
var _b = _a === void 0 ? {} : _a, _c = _b.numLeftSticky, numLeftSticky = _c === void 0 ? 2 : _c, _d = _b.numRightSticky, numRightSticky = _d === void 0 ? 2 : _d, _e = _b.stickyZIndex, stickyZIndex = _e === void 0 ? 10 : _e, _f = _b.leftShadow, leftShadow = _f === void 0 ? "inset -2px 0 0 0 rgba(0, 0, 0, 0.1)" : _f, _g = _b.rightShadow, rightShadow = _g === void 0 ? "inset 2px 0 0 0 rgba(0, 0, 0, 0.1)" : _g, _h = _b.deps, deps = _h === void 0 ? [] : _h;
(0, react_1.useEffect)(function () {
var table = tableRef.current;
if (!table)
return;
var cleanupStickyStyles = function () {
var allStickyCells = table.querySelectorAll("th, td");
allStickyCells.forEach(function (cell) {
var el = cell;
el.style.position = "";
el.style.left = "";
el.style.right = "";
el.style.zIndex = "";
el.style.boxShadow = "";
});
};
var updateStickyColumns = function () {
if (!table)
return;
cleanupStickyStyles(); // Clean before applying new styles
var leftOffset = 0;
var rightOffset = 0;
var _loop_1 = function (i) {
var cells = table.querySelectorAll("thead th:nth-child(".concat(i + 1, "), tbody td:nth-child(").concat(i + 1, ")"));
if (cells.length > 0) {
var width = cells[0].getBoundingClientRect().width;
cells.forEach(function (cell) {
var el = cell;
el.style.position = "sticky";
el.style.left = "".concat(leftOffset, "px");
el.style.zIndex = "".concat(stickyZIndex);
el.style.boxShadow = i === numLeftSticky - 1 ? leftShadow : "none";
});
leftOffset += width;
}
};
// LEFT sticky columns
for (var i = 0; i < numLeftSticky; i++) {
_loop_1(i);
}
var _loop_2 = function (i) {
var cells = table.querySelectorAll("thead th:nth-last-child(".concat(i + 1, "), tbody td:nth-last-child(").concat(i + 1, ")"));
if (cells.length > 0) {
var width_1 = cells[0].getBoundingClientRect().width;
rightOffset += width_1;
cells.forEach(function (cell) {
var el = cell;
el.style.position = "sticky";
el.style.right = "".concat(rightOffset - width_1, "px");
el.style.zIndex = "".concat(stickyZIndex);
el.style.boxShadow = i === numRightSticky - 1 ? rightShadow : "none";
});
}
};
// RIGHT sticky columns
for (var i = 0; i < numRightSticky; i++) {
_loop_2(i);
}
};
updateStickyColumns();
window.addEventListener("resize", updateStickyColumns);
return function () {
cleanupStickyStyles();
window.removeEventListener("resize", updateStickyColumns);
};
}, __spreadArray([tableRef, numLeftSticky, numRightSticky, stickyZIndex, leftShadow, rightShadow], deps, true));
};
exports.default = useStickyColumns;