@awsui/components-react/table/use-sticky-header.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { useLayoutEffect, useCallback } from 'react';
import { getOverflowParents } from '../internal/utils/scrollable-containers';
import { useResizeObserver } from '../internal/hooks/container-queries/use-resize-observer';
import { CONTAINER_ROOT_BORDER } from '../container/use-sticky-header';
function syncSizes(from, to) {
    var fromCells = Array.prototype.slice.apply(from.children);
    var toCells = Array.prototype.slice.apply(to.children);
    for (var i = 0; i < fromCells.length; i++) {
        toCells[i].style.width = fromCells[i].style.width || fromCells[i].offsetWidth + "px";
    }
}
export var useStickyHeader = function (theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, stickyHeader) {
    var getPrimaryThead = useCallback(function () { return theadRef.current; }, [theadRef]);
    var syncColumnHeaderWidths = useCallback(function () {
        if (stickyHeader &&
            theadRef.current &&
            secondaryTheadRef.current &&
            secondaryTableRef.current &&
            tableWrapperRef.current) {
            syncSizes(theadRef.current, secondaryTheadRef.current);
            secondaryTableRef.current.style.width = theadRef.current.offsetWidth + "px";
            tableWrapperRef.current.style.marginTop = "-" + theadRef.current.offsetHeight + "px";
        }
    }, [stickyHeader, theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef]);
    useLayoutEffect(function () {
        syncColumnHeaderWidths();
        setTimeout(function () { return syncColumnHeaderWidths(); }, 0);
        return function () {
            if (secondaryTableRef.current) {
                secondaryTableRef.current.style.width = '';
            }
            if (tableWrapperRef.current) {
                tableWrapperRef.current.style.marginTop = '';
            }
        };
    });
    useResizeObserver(getPrimaryThead, syncColumnHeaderWidths);
    var scrollParent = !!tableWrapperRef.current && getOverflowParents(tableWrapperRef.current)[0];
    var scrollUpBy = function (pxDistance) {
        if (scrollParent) {
            scrollParent.scrollTop -= pxDistance;
        }
        else {
            window.scrollTo && window.scrollTo(window.pageXOffset, window.pageYOffset - pxDistance);
        }
    };
    var scrollToTop = function () {
        if (stickyHeader && theadRef.current && secondaryTheadRef.current) {
            var containerTop = theadRef.current.getBoundingClientRect().top;
            var stickyTop = secondaryTheadRef.current.getBoundingClientRect().top;
            var scrollDist = stickyTop - containerTop + CONTAINER_ROOT_BORDER;
            if (scrollDist > 0) {
                scrollUpBy(scrollDist);
            }
        }
    };
    var scrollToRow = function (itemNode) {
        if (stickyHeader && itemNode && secondaryTheadRef.current) {
            var rowTop = itemNode.getBoundingClientRect().top;
            var stickyBottom = secondaryTheadRef.current.getBoundingClientRect().bottom;
            var scrollDist = stickyBottom - rowTop;
            if (scrollDist > 0) {
                scrollUpBy(scrollDist);
            }
        }
    };
    return { scrollToRow: scrollToRow, scrollToTop: scrollToTop };
};