tdesign-react
Version:
TDesign Component for React
230 lines (224 loc) • 10.8 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var slicedToArray = require('../../_chunks/dep-e17e2d31.js');
var React = require('react');
var _util_listener = require('../../_util/listener.js');
require('../../_chunks/dep-b7d577ac.js');
require('../../_chunks/dep-3f65dfe7.js');
require('../../_chunks/dep-3e2d2665.js');
require('../../_chunks/dep-f0379c5f.js');
require('../../_chunks/dep-6d4d8660.js');
require('../../_chunks/dep-028b759d.js');
require('../../_chunks/dep-ddacd27a.js');
function useAffix(props, _ref) {
var showElement = _ref.showElement;
var tableContentRef = React.useRef(null);
var affixHeaderRef = React.useRef(null);
var affixFooterRef = React.useRef(null);
var horizontalScrollbarRef = React.useRef(null);
var paginationRef = React.useRef(null);
var _useState = React.useState(true),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
showAffixHeader = _useState2[0],
setShowAffixHeader = _useState2[1];
var _useState3 = React.useState(true),
_useState4 = slicedToArray._slicedToArray(_useState3, 2),
showAffixFooter = _useState4[0],
setShowAffixFooter = _useState4[1];
var _useState5 = React.useState(true),
_useState6 = slicedToArray._slicedToArray(_useState5, 2),
showAffixPagination = _useState6[0],
setShowAffixPagination = _useState6[1];
var isVirtualScroll = React.useMemo(function () {
return props.scroll && props.scroll.type === "virtual" && (props.scroll.threshold || 100) < props.data.length;
}, [props.data.length, props.scroll]);
var isAffixed = React.useMemo(function () {
return !!(props.headerAffixedTop || props.footerAffixedBottom || props.horizontalScrollAffixedBottom);
}, [props.footerAffixedBottom, props.headerAffixedTop, props.horizontalScrollAffixedBottom]);
var lastScrollLeft = 0;
var onHorizontalScroll = function onHorizontalScroll(scrollElement) {
if (!isAffixed && !isVirtualScroll) return;
var target = scrollElement;
if (!target && tableContentRef.current) {
lastScrollLeft = 0;
target = tableContentRef.current;
}
if (!target) return;
var left = target.scrollLeft;
if (lastScrollLeft === left) return;
lastScrollLeft = left;
var toUpdateScrollElement = [tableContentRef.current, affixHeaderRef.current, affixFooterRef.current, horizontalScrollbarRef.current];
for (var i = 0, len = toUpdateScrollElement.length; i < len; i++) {
if (toUpdateScrollElement[i] && scrollElement !== toUpdateScrollElement[i]) {
toUpdateScrollElement[i].scrollLeft = left;
}
}
};
var isAffixedBottomElementShow = function isAffixedBottomElementShow(elementRect, tableRect, headerHeight) {
return tableRect.top + headerHeight < elementRect.top && elementRect.top > elementRect.height;
};
var getOffsetTop = function getOffsetTop(props2) {
if (typeof props2 === "boolean") return 0;
return props2.offsetTop || 0;
};
var updateAffixHeaderOrFooter = function updateAffixHeaderOrFooter() {
var _tableContentRef$curr, _tableContentRef$curr2, _affixFooterRef$curre;
if (!isAffixed && !isVirtualScroll) return;
var pos = (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.getBoundingClientRect();
if (!pos) return;
var headerRect = (_tableContentRef$curr2 = tableContentRef.current) === null || _tableContentRef$curr2 === void 0 || (_tableContentRef$curr2 = _tableContentRef$curr2.querySelector("thead")) === null || _tableContentRef$curr2 === void 0 ? void 0 : _tableContentRef$curr2.getBoundingClientRect();
var headerHeight = (headerRect === null || headerRect === void 0 ? void 0 : headerRect.height) || 0;
var footerRect = (_affixFooterRef$curre = affixFooterRef.current) === null || _affixFooterRef$curre === void 0 ? void 0 : _affixFooterRef$curre.getBoundingClientRect();
if ((props.headerAffixedTop || isVirtualScroll) && affixHeaderRef.current) {
var offsetTop = getOffsetTop(props.headerAffixProps || props.headerAffixedTop);
var footerHeight = (footerRect === null || footerRect === void 0 ? void 0 : footerRect.height) || 0;
var r = Math.abs(pos.top) < pos.height - headerHeight - offsetTop - footerHeight;
if (isVirtualScroll) {
r = pos.top > -1 * headerRect.height;
}
setShowAffixHeader(r);
}
if (props.footerAffixedBottom && affixFooterRef.current) {
var show = isAffixedBottomElementShow(footerRect, pos, headerHeight);
setShowAffixFooter(show);
} else if (props.horizontalScrollAffixedBottom && horizontalScrollbarRef.current) {
var horizontalScrollbarRect = horizontalScrollbarRef.current.getBoundingClientRect();
var _show = isAffixedBottomElementShow(horizontalScrollbarRect, pos, headerHeight);
setShowAffixFooter(_show);
}
if (props.paginationAffixedBottom && paginationRef.current) {
var pageRect = paginationRef.current.getBoundingClientRect();
var _show2 = isAffixedBottomElementShow(pageRect, pos, headerHeight);
setShowAffixPagination(_show2);
}
};
var onDocumentScroll = function onDocumentScroll() {
updateAffixHeaderOrFooter();
};
var onFootScroll = function onFootScroll() {
onHorizontalScroll(affixFooterRef.current);
};
var onHeaderScroll = function onHeaderScroll() {
onHorizontalScroll(affixHeaderRef.current);
};
var horizontalScrollbarScroll = function horizontalScrollbarScroll() {
onHorizontalScroll(horizontalScrollbarRef.current);
};
var onTableContentScroll = function onTableContentScroll() {
onHorizontalScroll(tableContentRef.current);
};
var onFootMouseEnter = function onFootMouseEnter() {
_util_listener.on(affixFooterRef.current, "scroll", onFootScroll);
};
var onFootMouseLeave = function onFootMouseLeave() {
_util_listener.off(affixFooterRef.current, "scroll", onFootScroll);
};
var onHeaderMouseEnter = function onHeaderMouseEnter() {
_util_listener.on(affixHeaderRef.current, "scroll", onHeaderScroll);
};
var onHeaderMouseLeave = function onHeaderMouseLeave() {
_util_listener.off(affixHeaderRef.current, "scroll", onHeaderScroll);
};
var onScrollbarMouseEnter = function onScrollbarMouseEnter() {
_util_listener.on(horizontalScrollbarRef.current, "scroll", horizontalScrollbarScroll);
};
var onScrollbarMouseLeave = function onScrollbarMouseLeave() {
_util_listener.off(horizontalScrollbarRef.current, "scroll", horizontalScrollbarScroll);
};
var onTableContentMouseEnter = function onTableContentMouseEnter() {
_util_listener.on(tableContentRef.current, "scroll", onTableContentScroll);
};
var onTableContentMouseLeave = function onTableContentMouseLeave() {
_util_listener.off(tableContentRef.current, "scroll", onTableContentScroll);
};
var addHorizontalScrollListeners = function addHorizontalScrollListeners() {
if (affixHeaderRef.current) {
_util_listener.on(affixHeaderRef.current, "mouseenter", onHeaderMouseEnter);
_util_listener.on(affixHeaderRef.current, "mouseleave", onHeaderMouseLeave);
}
if (props.footerAffixedBottom && affixFooterRef.current) {
_util_listener.on(affixFooterRef.current, "mouseenter", onFootMouseEnter);
_util_listener.on(affixFooterRef.current, "mouseleave", onFootMouseLeave);
}
if (props.horizontalScrollAffixedBottom && horizontalScrollbarRef.current) {
_util_listener.on(horizontalScrollbarRef.current, "mouseenter", onScrollbarMouseEnter);
_util_listener.on(horizontalScrollbarRef.current, "mouseleave", onScrollbarMouseLeave);
}
if ((isAffixed || isVirtualScroll) && tableContentRef.current) {
_util_listener.on(tableContentRef.current, "mouseenter", onTableContentMouseEnter);
_util_listener.on(tableContentRef.current, "mouseleave", onTableContentMouseLeave);
}
};
var removeHorizontalScrollListeners = function removeHorizontalScrollListeners() {
if (affixHeaderRef.current) {
_util_listener.off(affixHeaderRef.current, "mouseenter", onHeaderMouseEnter);
_util_listener.off(affixHeaderRef.current, "mouseleave", onHeaderMouseLeave);
}
if (affixFooterRef.current) {
_util_listener.off(affixFooterRef.current, "mouseenter", onFootMouseEnter);
_util_listener.off(affixFooterRef.current, "mouseleave", onFootMouseLeave);
}
if (tableContentRef.current) {
_util_listener.off(tableContentRef.current, "mouseenter", onTableContentMouseEnter);
_util_listener.off(tableContentRef.current, "mouseleave", onTableContentMouseLeave);
}
if (horizontalScrollbarRef.current) {
_util_listener.off(horizontalScrollbarRef.current, "mouseenter", onScrollbarMouseEnter);
_util_listener.off(horizontalScrollbarRef.current, "mouseleave", onScrollbarMouseLeave);
}
};
var addVerticalScrollListener = function addVerticalScrollListener() {
if (typeof document === "undefined") return;
if (!isAffixed && !props.paginationAffixedBottom) return;
var timer = setTimeout(function () {
if (isAffixed || props.paginationAffixedBottom) {
_util_listener.on(document, "scroll", onDocumentScroll);
} else {
_util_listener.off(document, "scroll", onDocumentScroll);
}
clearTimeout(timer);
});
};
React.useEffect(function () {
var timer = setTimeout(function () {
addHorizontalScrollListeners();
onHorizontalScroll();
updateAffixHeaderOrFooter();
clearTimeout(timer);
});
return removeHorizontalScrollListeners;
}, [affixHeaderRef, affixFooterRef, horizontalScrollbarRef, tableContentRef, showElement]);
React.useEffect(function () {
addVerticalScrollListener();
return function () {
_util_listener.off(document, "scroll", onDocumentScroll);
};
}, [isAffixed]);
React.useEffect(function () {
addHorizontalScrollListeners();
onHorizontalScroll();
}, [props.data, props.columns, props.headerAffixedTop, props.footerAffixedBottom, props.horizontalScrollAffixedBottom, props.lazyLoad]);
var setTableContentRef = function setTableContentRef(tableContent) {
tableContentRef.current = tableContent;
addVerticalScrollListener();
};
return {
showAffixHeader: showAffixHeader,
showAffixFooter: showAffixFooter,
showAffixPagination: showAffixPagination,
affixHeaderRef: affixHeaderRef,
affixFooterRef: affixFooterRef,
horizontalScrollbarRef: horizontalScrollbarRef,
paginationRef: paginationRef,
onHorizontalScroll: onHorizontalScroll,
setTableContentRef: setTableContentRef,
updateAffixHeaderOrFooter: updateAffixHeaderOrFooter
};
}
exports["default"] = useAffix;
//# sourceMappingURL=useAffix.js.map