@vuu-ui/vuu-table 2.1.19-beta.1 → 2.1.19-beta.2

package/src/useTableScroll.mjs

@@ -0,0 +1,382 @@
+import { getColumnsInViewport, itemsChanged } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { getRowElementByAriaIndex, howFarIsRowOutsideViewport } from "./table-dom-utils.mjs";
+const SCROLL_MOVE_CHECK_THRESHOLD = 100;
+const HORIZONTAL_SCROLL_BUFFER = 200;
+const getMaxScroll = (container)=>{
+    const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
+    return [
+        scrollWidth - clientWidth,
+        scrollHeight - clientHeight
+    ];
+};
+const getPctScroll = (container)=>{
+    const { clientHeight, clientWidth, scrollHeight, scrollLeft, scrollTop, scrollWidth } = container;
+    const maxScrollLeft = scrollWidth - clientWidth;
+    const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);
+    const maxScrollTop = scrollHeight - clientHeight;
+    const pctScrollTop = scrollTop / (scrollHeight - clientHeight);
+    return [
+        scrollLeft,
+        pctScrollLeft,
+        maxScrollLeft,
+        scrollTop,
+        pctScrollTop,
+        maxScrollTop
+    ];
+};
+const noScrolling = {
+    scrollToIndex: ()=>void 0,
+    scrollToKey: ()=>void 0
+};
+const useCallbackRef = ({ onAttach, onDetach })=>{
+    const ref = useRef(null);
+    const callbackRef = useCallback((el)=>{
+        if (el) {
+            ref.current = el;
+            onAttach?.(el);
+        } else if (ref.current) {
+            const { current: originalRef } = ref;
+            ref.current = el;
+            onDetach?.(originalRef);
+        }
+    }, [
+        onAttach,
+        onDetach
+    ]);
+    return callbackRef;
+};
+const useTableScroll = ({ cellFocusStateRef, columns, getRowAtPosition, onHorizontalScroll, onVerticalScroll, onVerticalScrollInSitu, rowHeight, scrollingApiRef, setRange, viewportMeasurements })=>{
+    const firstRowRef = useRef(0);
+    const rowHeightRef = useRef(rowHeight);
+    const contentContainerScrolledRef = useRef(false);
+    const contentContainerPosRef = useRef({
+        scrollTop: 0,
+        scrollLeft: 0
+    });
+    const scrollbarContainerScrolledRef = useRef(false);
+    const scrollbarContainerPosRef = useRef({
+        scrollTop: 0,
+        scrollLeft: 0
+    });
+    const scrollbarContainerRef = useRef(null);
+    const contentContainerRef = useRef(null);
+    const lastHorizontalScrollCheckPoint = useRef(0);
+    const { appliedPageSize, isVirtualScroll, rowCount: viewportRowCount, totalHeaderHeight, usesMeasuredHeaderHeight, viewportBodyHeight, viewportWidth } = viewportMeasurements;
+    const columnsWithinViewportRef = useRef([]);
+    const [, forceRefresh] = useState({});
+    const preSpanRef = useRef(0);
+    useMemo(()=>{
+        const [visibleColumns, offset] = getColumnsInViewport(columns, contentContainerPosRef.current.scrollLeft, contentContainerPosRef.current.scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER);
+        preSpanRef.current = offset;
+        columnsWithinViewportRef.current = visibleColumns;
+    }, [
+        viewportWidth,
+        columns
+    ]);
+    const handleHorizontalScroll = useCallback((scrollLeft)=>{
+        contentContainerPosRef.current.scrollLeft = scrollLeft;
+        onHorizontalScroll?.(scrollLeft);
+        if (Math.abs(scrollLeft - lastHorizontalScrollCheckPoint.current) > SCROLL_MOVE_CHECK_THRESHOLD) {
+            lastHorizontalScrollCheckPoint.current = scrollLeft;
+            const [visibleColumns, pre] = getColumnsInViewport(columns, scrollLeft, scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER);
+            if (itemsChanged(columnsWithinViewportRef.current, visibleColumns)) {
+                preSpanRef.current = pre;
+                columnsWithinViewportRef.current = visibleColumns;
+                forceRefresh({});
+            }
+        }
+    }, [
+        columns,
+        onHorizontalScroll,
+        viewportWidth
+    ]);
+    const handleVerticalScroll = useCallback((scrollTop, pctScrollTop)=>{
+        contentContainerPosRef.current.scrollTop = scrollTop;
+        const { current: prevFirstRow } = firstRowRef;
+        onVerticalScroll?.(scrollTop, pctScrollTop);
+        const firstRow = getRowAtPosition(scrollTop);
+        if (firstRow !== prevFirstRow) {
+            firstRowRef.current = firstRow;
+            const lastRow = firstRow + viewportRowCount;
+            setRange({
+                from: firstRow,
+                to: lastRow
+            });
+            const { current: focusState } = cellFocusStateRef;
+            if (focusState.cellPos) {
+                const prevLastRow = prevFirstRow + viewportRowCount;
+                const [row] = focusState.cellPos;
+                const wasInViewport = row >= prevFirstRow && row < prevLastRow;
+                const isInViewport = row >= firstRow && row < lastRow;
+                if (wasInViewport && !isInViewport) {
+                    focusState.placeholderEl?.focus({
+                        preventScroll: true
+                    });
+                    focusState.outsideViewport = row < firstRow ? "above" : "below";
+                } else if (isInViewport && !wasInViewport) focusState.outsideViewport = false;
+            }
+        }
+        onVerticalScrollInSitu?.(0);
+    }, [
+        cellFocusStateRef,
+        getRowAtPosition,
+        onVerticalScroll,
+        onVerticalScrollInSitu,
+        setRange,
+        viewportRowCount
+    ]);
+    const scrollTimerRef = useRef(null);
+    const checkScrollbarScrollPosition = useCallback(()=>{
+        const { current: scrollPos } = scrollbarContainerPosRef;
+        const { current: contentContainer } = contentContainerRef;
+        const { current: scrollbarContainer } = scrollbarContainerRef;
+        if (scrollbarContainer && contentContainer) {
+            const [scrollLeft, pctScrollLeft, , scrollTop, pctScrollTop] = getPctScroll(scrollbarContainer);
+            if (scrollLeft !== scrollPos.scrollLeft || scrollTop !== scrollPos.scrollTop) {
+                scrollbarContainerScrolledRef.current = true;
+                scrollPos.scrollLeft = scrollLeft;
+                scrollPos.scrollTop = scrollTop;
+                const [maxScrollLeft, maxScrollTop] = getMaxScroll(scrollbarContainer);
+                const contentScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+                const contentScrollTop = pctScrollTop * maxScrollTop;
+                contentContainer.scrollTo({
+                    left: contentScrollLeft,
+                    top: contentScrollTop,
+                    behavior: "auto"
+                });
+            }
+            scrollTimerRef.current = null;
+        }
+    }, []);
+    const handleScrollbarContainerScroll = useCallback(()=>{
+        const { current: contentContainer } = contentContainerRef;
+        const { current: scrollbarContainer } = scrollbarContainerRef;
+        const { current: contentContainerScrolled } = contentContainerScrolledRef;
+        const { current: scrollPos } = scrollbarContainerPosRef;
+        if (contentContainerScrolled) contentContainerScrolledRef.current = false;
+        else if (contentContainer && scrollbarContainer) {
+            scrollbarContainerScrolledRef.current = true;
+            const [scrollLeft, pctScrollLeft, , scrollTop, pctScrollTop] = getPctScroll(scrollbarContainer);
+            scrollPos.scrollLeft = scrollLeft;
+            scrollPos.scrollTop = scrollTop;
+            const [maxScrollLeft, maxScrollTop] = getMaxScroll(scrollbarContainer);
+            const contentScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+            const contentScrollTop = pctScrollTop * maxScrollTop;
+            contentContainer.scrollTo({
+                left: contentScrollLeft,
+                top: contentScrollTop,
+                behavior: "auto"
+            });
+        }
+        if (scrollTimerRef.current) clearTimeout(scrollTimerRef.current);
+        scrollTimerRef.current = setTimeout(checkScrollbarScrollPosition, 60);
+        onVerticalScrollInSitu?.(0);
+    }, [
+        checkScrollbarScrollPosition,
+        onVerticalScrollInSitu
+    ]);
+    const handleContentContainerScroll = useCallback(()=>{
+        const { current: scrollbarContainerScrolled } = scrollbarContainerScrolledRef;
+        const { current: contentContainer } = contentContainerRef;
+        const { current: scrollbarContainer } = scrollbarContainerRef;
+        const { current: scrollPos } = contentContainerPosRef;
+        if (contentContainer && scrollbarContainer) {
+            const [scrollLeft, pctScrollLeft, maxScrollLeft, scrollTop, pctScrollTop, maxScrollTop] = getPctScroll(contentContainer);
+            contentContainerScrolledRef.current = true;
+            if (scrollbarContainerScrolled) scrollbarContainerScrolledRef.current = false;
+            else {
+                scrollbarContainer.scrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+                scrollbarContainer.scrollTop = pctScrollTop * maxScrollTop;
+            }
+            if (scrollPos.scrollTop !== scrollTop) handleVerticalScroll(scrollTop, pctScrollTop);
+            if (scrollPos.scrollLeft !== scrollLeft) handleHorizontalScroll(scrollLeft);
+        }
+    }, [
+        handleVerticalScroll,
+        handleHorizontalScroll
+    ]);
+    const handleAttachScrollbarContainer = useCallback((el)=>{
+        scrollbarContainerRef.current = el;
+        el.addEventListener("scroll", handleScrollbarContainerScroll, {
+            passive: true
+        });
+    }, [
+        handleScrollbarContainerScroll
+    ]);
+    const handleDetachScrollbarContainer = useCallback((el)=>{
+        scrollbarContainerRef.current = null;
+        el.removeEventListener("scroll", handleScrollbarContainerScroll);
+    }, [
+        handleScrollbarContainerScroll
+    ]);
+    const handleAttachContentContainer = useCallback((el)=>{
+        contentContainerRef.current = el;
+        el.addEventListener("scroll", handleContentContainerScroll, {
+            passive: true
+        });
+    }, [
+        handleContentContainerScroll
+    ]);
+    const handleDetachContentContainer = useCallback((el)=>{
+        contentContainerRef.current = null;
+        el.removeEventListener("scroll", handleContentContainerScroll);
+    }, [
+        handleContentContainerScroll
+    ]);
+    const contentContainerCallbackRef = useCallbackRef({
+        onAttach: handleAttachContentContainer,
+        onDetach: handleDetachContentContainer
+    });
+    const scrollbarContainerCallbackRef = useCallbackRef({
+        onAttach: handleAttachScrollbarContainer,
+        onDetach: handleDetachScrollbarContainer
+    });
+    const requestScroll = useCallback((scrollRequest)=>{
+        const { current: contentContainer } = contentContainerRef;
+        const { current: scrollbarContainer } = scrollbarContainerRef;
+        if (contentContainer) {
+            const [maxScrollLeft, maxScrollTop] = getMaxScroll(contentContainer);
+            const { scrollLeft, scrollTop } = contentContainer;
+            contentContainerScrolledRef.current = false;
+            switch(scrollRequest.type){
+                case "scroll-top":
+                    if (scrollRequest.instant && 0 === scrollRequest.scrollPos && scrollbarContainer) {
+                        contentContainer.scrollTop = 0;
+                        scrollbarContainer.scrollTop = 0;
+                    } else contentContainer.scrollTo({
+                        top: scrollRequest.scrollPos,
+                        left: scrollLeft,
+                        behavior: "instant"
+                    });
+                    break;
+                case "scroll-bottom":
+                    contentContainer.scrollTo({
+                        top: scrollRequest.scrollPos - (viewportBodyHeight - 2 * rowHeight),
+                        left: scrollLeft,
+                        behavior: "instant"
+                    });
+                    break;
+                case "scroll-row":
+                    {
+                        const activeRow = getRowElementByAriaIndex(contentContainer, scrollRequest.rowIndex);
+                        if (null !== activeRow) {
+                            const [direction, distance] = howFarIsRowOutsideViewport(activeRow, totalHeaderHeight);
+                            if (direction && distance) if (isVirtualScroll) {
+                                const offset = "down" === direction ? 1 : -1;
+                                onVerticalScrollInSitu?.(offset);
+                                const firstRow = firstRowRef.current + offset;
+                                firstRowRef.current = firstRow;
+                                setRange({
+                                    from: firstRow,
+                                    to: firstRow + viewportRowCount
+                                });
+                            } else {
+                                let newScrollLeft = scrollLeft;
+                                let newScrollTop = scrollTop;
+                                if ("up" === direction || "down" === direction) newScrollTop = Math.min(Math.max(0, scrollTop + distance), maxScrollTop);
+                                else newScrollLeft = Math.min(Math.max(0, scrollLeft + distance), maxScrollLeft);
+                                contentContainer.scrollTo({
+                                    top: newScrollTop,
+                                    left: newScrollLeft,
+                                    behavior: "instant"
+                                });
+                            }
+                        }
+                    }
+                    break;
+                case "scroll-page":
+                    {
+                        const { direction } = scrollRequest;
+                        if (isVirtualScroll) {
+                            const offset = "down" === direction ? viewportRowCount : -viewportRowCount;
+                            onVerticalScrollInSitu?.(offset);
+                            const firstRow = firstRowRef.current + offset;
+                            firstRowRef.current = firstRow;
+                            setRange({
+                                from: firstRow,
+                                to: firstRow + viewportRowCount
+                            });
+                        } else {
+                            const scrollBy = "down" === direction ? appliedPageSize : -appliedPageSize;
+                            const newScrollTop = Math.min(Math.max(0, scrollTop + scrollBy), maxScrollTop);
+                            contentContainer.scrollTo({
+                                top: newScrollTop,
+                                left: scrollLeft,
+                                behavior: "auto"
+                            });
+                        }
+                    }
+                    break;
+                case "scroll-end":
+                    {
+                        const { direction } = scrollRequest;
+                        const scrollTo = "end" === direction ? maxScrollTop : 0;
+                        contentContainer.scrollTo({
+                            top: scrollTo,
+                            left: contentContainer.scrollLeft,
+                            behavior: "auto"
+                        });
+                    }
+                    break;
+                default:
+                    console.warn(`unexpected scroll request ${scrollRequest["type"]}`);
+            }
+        }
+    }, [
+        appliedPageSize,
+        isVirtualScroll,
+        onVerticalScrollInSitu,
+        rowHeight,
+        setRange,
+        totalHeaderHeight,
+        viewportBodyHeight,
+        viewportRowCount
+    ]);
+    const scrollHandles = useMemo(()=>({
+            scrollToIndex: (rowIndex)=>{
+                if (scrollbarContainerRef.current) {
+                    const scrollPos = (rowIndex - 30) * 20;
+                    scrollbarContainerRef.current.scrollTop = scrollPos;
+                }
+            },
+            scrollToKey: (rowKey)=>{
+                console.log(`scrollToKey ${rowKey}`);
+            }
+        }), []);
+    useImperativeHandle(scrollingApiRef, ()=>{
+        if (scrollbarContainerRef.current) return scrollHandles;
+        return noScrolling;
+    }, [
+        scrollHandles
+    ]);
+    useEffect(()=>{
+        if (rowHeight !== rowHeightRef.current) {
+            rowHeightRef.current = rowHeight;
+            if (contentContainerPosRef.current.scrollTop > 0) {
+                if (contentContainerRef.current) contentContainerRef.current.scrollTop = 0;
+            }
+        } else if (usesMeasuredHeaderHeight) {
+            const { current: from } = firstRowRef;
+            const rowRange = {
+                from,
+                to: from + viewportRowCount
+            };
+            setRange(rowRange);
+        }
+    }, [
+        rowHeight,
+        setRange,
+        usesMeasuredHeaderHeight,
+        viewportRowCount
+    ]);
+    return {
+        columnsWithinViewport: columnsWithinViewportRef.current,
+        scrollbarContainerRef: scrollbarContainerCallbackRef,
+        contentContainerRef: contentContainerCallbackRef,
+        requestScroll,
+        scrollTop: contentContainerPosRef.current.scrollTop,
+        virtualColSpan: preSpanRef.current
+    };
+};
+export { noScrolling, useTableScroll };

package/src/useTableViewport.mjs

@@ -0,0 +1,120 @@
+import { actualRowPositioning, measurePinnedColumns, virtualRowPositioning } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useRef } from "react";
+const MAX_PIXEL_HEIGHT = 10000000;
+const UNMEASURED_VIEWPORT = {
+    appliedPageSize: 0,
+    contentHeight: 0,
+    contentWidth: 0,
+    getRowAtPosition: ()=>-1,
+    getRowOffset: ()=>-1,
+    horizontalScrollbarHeight: 0,
+    isVirtualScroll: false,
+    pinnedWidthLeft: 0,
+    pinnedWidthRight: 0,
+    rowCount: 0,
+    setInSituRowOffset: ()=>void 0,
+    setScrollTop: ()=>void 0,
+    totalHeaderHeight: 0,
+    usesMeasuredHeaderHeight: false,
+    verticalScrollbarWidth: 0,
+    viewportBodyHeight: 0,
+    viewportWidth: 0
+};
+const getViewportHeightProps = (rowCount, rowHeight, size, showPaginationControls = false)=>{
+    if (showPaginationControls) return {
+        pixelContentHeight: size.height,
+        virtualContentHeight: size.height,
+        virtualisedExtent: 0
+    };
+    {
+        const virtualContentHeight = rowCount * rowHeight;
+        const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);
+        const virtualisedExtent = virtualContentHeight - pixelContentHeight;
+        return {
+            pixelContentHeight,
+            virtualContentHeight,
+            virtualisedExtent
+        };
+    }
+};
+const useTableViewport = ({ columns, headerHeight, rowCount, rowHeight, selectionEndSize = 4, showPaginationControls, size })=>{
+    const inSituRowOffsetRef = useRef(0);
+    const pctScrollTopRef = useRef(0);
+    const { virtualContentHeight, pixelContentHeight, virtualisedExtent } = getViewportHeightProps(rowCount, rowHeight, size, showPaginationControls);
+    const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo(()=>measurePinnedColumns(columns, selectionEndSize), [
+        columns,
+        selectionEndSize
+    ]);
+    const [getRowOffset, getRowAtPosition, isVirtualScroll] = useMemo(()=>{
+        if (!virtualisedExtent) return actualRowPositioning(rowHeight);
+        {
+            const [_getRowOffset, getRowAtPosition, _isVirtual] = virtualRowPositioning(rowHeight, virtualisedExtent, pctScrollTopRef);
+            const getOffset = (dataRow)=>_getRowOffset(dataRow, inSituRowOffsetRef.current);
+            return [
+                getOffset,
+                getRowAtPosition,
+                _isVirtual
+            ];
+        }
+    }, [
+        virtualisedExtent,
+        rowHeight
+    ]);
+    const setScrollTop = useCallback((_, scrollPct)=>{
+        pctScrollTopRef.current = scrollPct;
+    }, []);
+    const setInSituRowOffset = useCallback((rowIndexOffset)=>{
+        if (0 === rowIndexOffset) inSituRowOffsetRef.current = 0;
+        else inSituRowOffsetRef.current = Math.max(0, inSituRowOffsetRef.current + rowIndexOffset);
+    }, []);
+    return useMemo(()=>{
+        if (!size) return UNMEASURED_VIEWPORT;
+        {
+            const scrollbarSize = 10;
+            const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
+            const horizontalScrollbarHeight = contentWidth > size.width ? scrollbarSize : 0;
+            const measuredHeaderHeight = -1 === headerHeight ? 0 : headerHeight;
+            const visibleRows = showPaginationControls ? Math.floor((pixelContentHeight - headerHeight) / rowHeight) : (size.height - headerHeight) / rowHeight;
+            const count = Number.isInteger(visibleRows) ? visibleRows : Math.ceil(visibleRows);
+            const viewportBodyHeight = size.height - measuredHeaderHeight;
+            const verticalScrollbarWidth = showPaginationControls ? 0 : pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;
+            const appliedPageSize = count * rowHeight * (pixelContentHeight / virtualContentHeight);
+            const viewportWidth = size.width;
+            return {
+                usesMeasuredHeaderHeight: -1 !== headerHeight,
+                appliedPageSize,
+                contentHeight: pixelContentHeight,
+                contentWidth,
+                getRowAtPosition,
+                getRowOffset,
+                isVirtualScroll,
+                horizontalScrollbarHeight,
+                pinnedWidthLeft,
+                pinnedWidthRight,
+                rowCount: count,
+                setInSituRowOffset,
+                setScrollTop,
+                totalHeaderHeight: headerHeight,
+                verticalScrollbarWidth,
+                viewportBodyHeight,
+                viewportWidth
+            };
+        }
+    }, [
+        size,
+        pinnedWidthLeft,
+        unpinnedWidth,
+        pinnedWidthRight,
+        headerHeight,
+        rowHeight,
+        showPaginationControls,
+        pixelContentHeight,
+        virtualContentHeight,
+        getRowAtPosition,
+        getRowOffset,
+        isVirtualScroll,
+        setInSituRowOffset,
+        setScrollTop
+    ]);
+};
+export { useTableViewport };