@glideappsfinal/glide-data-grid 6.0.9

package/src/internal/scrolling-data-grid/scrolling-data-grid.tsx

@@ -0,0 +1,353 @@
+import DataGridDnd, { type DataGridDndProps } from "../data-grid-dnd/data-grid-dnd.js";
+import type { Rectangle } from "../data-grid/data-grid-types.js";
+import { InfiniteScroller } from "./infinite-scroller.js";
+import { getTotalGroupHeaderHeight } from "../data-grid/render/data-grid-render.walk.js";
+import { useMappedColumns } from "../data-grid/render/data-grid-lib.js";
+import React from "react";
+
+type Props = Omit<DataGridDndProps, "width" | "height" | "eventTargetRef">;
+
+export interface ScrollingDataGridProps extends Props {
+    readonly className: string | undefined;
+    readonly onVisibleRegionChanged:
+        | ((
+              range: Rectangle,
+              clientWidth: number,
+              clientHeight: number,
+              rightElWidth: number,
+              tx: number,
+              ty: number
+          ) => void)
+        | undefined;
+    readonly scrollRef: React.MutableRefObject<HTMLDivElement | null> | undefined;
+
+    /**
+     * The overscroll properties are used to allow the grid to scroll past the logical end of the content by a fixed
+     * number of pixels. This is useful particularly on the X axis if you allow for resizing columns as it can make
+     * resizing the final column significantly easier.
+     *
+     * @group Advanced
+     */
+    readonly overscrollX: number | undefined;
+    /** {@inheritDoc overscrollX}
+     * @group Advanced
+     */
+    readonly overscrollY: number | undefined;
+    /**
+     * Provides an initial size for the grid which can prevent a flicker on load if the initial size is known prior to
+     * layout.
+     *
+     * @group Advanced
+     */
+    readonly initialSize: readonly [width: number, height: number] | undefined;
+    /**
+     * Set to true to prevent any diagonal scrolling.
+     * @group Advanced
+     */
+    readonly preventDiagonalScrolling: boolean | undefined;
+
+    /**
+     * If `rightElementProps.sticky` is set to true the right element will be visible at all times, otherwise the user
+     * will need to scroll to the end to reveal it.
+     *
+     * If `rightElementProps.fill` is set, the right elements container will fill to consume all remaining space (if
+     * any) at the end of the grid. This does not play nice with growing columns.
+     *
+     * @group Advanced
+     */
+    readonly rightElementProps:
+        | {
+              readonly sticky?: boolean;
+              readonly fill?: boolean;
+          }
+        | undefined;
+    /**
+     * The right element is a DOM node which can be inserted at the end of the horizontal scroll region. This can be
+     * used to create a right handle panel, make a big add button, or display messages.
+     * @group Advanced
+     */
+    readonly rightElement: React.ReactNode | undefined;
+    readonly clientSize: readonly [number, number, number]; // [width, height, rightElSize]
+    readonly nonGrowWidth: number;
+}
+
+const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
+    const {
+        columns,
+        rows,
+        rowHeight,
+        headerHeight,
+        groupHeaderHeight,
+        enableGroups,
+        freezeColumns,
+        experimental,
+        nonGrowWidth,
+        clientSize,
+        className,
+        onVisibleRegionChanged,
+        scrollRef,
+        preventDiagonalScrolling,
+        rightElement,
+        rightElementProps,
+        overscrollX,
+        overscrollY,
+        initialSize,
+        smoothScrollX = false,
+        smoothScrollY = false,
+        isDraggable,
+    } = p;
+    const { paddingRight, paddingBottom } = experimental ?? {};
+
+    const [clientWidth, clientHeight] = clientSize;
+    const last = React.useRef<Rectangle | undefined>(undefined);
+    const lastX = React.useRef<number | undefined>(undefined);
+    const lastY = React.useRef<number | undefined>(undefined);
+    const lastSize = React.useRef<readonly [number, number] | undefined>(undefined);
+
+    const width = nonGrowWidth + Math.max(0, overscrollX ?? 0);
+
+    const mappedColumns = useMappedColumns(columns, freezeColumns ?? 0);
+    const groupHeights = enableGroups ? getTotalGroupHeaderHeight(groupHeaderHeight, mappedColumns) : 0;
+    let height = headerHeight + groupHeights;
+    if (typeof rowHeight === "number") {
+        height += rows * rowHeight;
+    } else {
+        for (let r = 0; r < rows; r++) {
+            height += rowHeight(r);
+        }
+    }
+    if (overscrollY !== undefined) {
+        height += overscrollY;
+    }
+
+    const lastArgs = React.useRef<(Rectangle & { paddingRight: number }) | undefined>(undefined);
+
+    const processArgs = React.useCallback(() => {
+        if (lastArgs.current === undefined) return;
+        const args = { ...lastArgs.current };
+
+        let x = 0;
+        let tx = args.x < 0 ? -args.x : 0;
+        let cellRight = 0;
+        let cellX = 0;
+
+        args.x = args.x < 0 ? 0 : args.x;
+
+        let stickyColWidth = 0;
+        for (let i = 0; i < freezeColumns; i++) {
+            stickyColWidth += columns[i].width;
+        }
+
+        for (const c of columns) {
+            const cx = x - stickyColWidth;
+            if (args.x >= cx + c.width) {
+                x += c.width;
+                cellX++;
+                cellRight++;
+            } else if (args.x > cx) {
+                x += c.width;
+                if (smoothScrollX) {
+                    tx += cx - args.x;
+                } else {
+                    cellX++;
+                }
+                cellRight++;
+            } else if (args.x + args.width > cx) {
+                x += c.width;
+                cellRight++;
+            } else {
+                break;
+            }
+        }
+
+        let ty = 0;
+        let cellY = 0;
+        let cellBottom = 0;
+        if (typeof rowHeight === "number") {
+            if (smoothScrollY) {
+                cellY = Math.floor(args.y / rowHeight);
+                ty = cellY * rowHeight - args.y;
+            } else {
+                cellY = Math.ceil(args.y / rowHeight);
+            }
+            cellBottom = Math.ceil(args.height / rowHeight) + cellY;
+            if (ty < 0) cellBottom++;
+        } else {
+            let y = 0;
+            for (let row = 0; row < rows; row++) {
+                const rh = rowHeight(row);
+                const cy = y + (smoothScrollY ? 0 : rh / 2);
+                if (args.y >= y + rh) {
+                    y += rh;
+                    cellY++;
+                    cellBottom++;
+                } else if (args.y > cy) {
+                    y += rh;
+                    if (smoothScrollY) {
+                        ty += cy - args.y;
+                    } else {
+                        cellY++;
+                    }
+                    cellBottom++;
+                } else if (args.y + args.height > rh / 2 + y) {
+                    y += rh;
+                    cellBottom++;
+                } else {
+                    break;
+                }
+            }
+        }
+
+        // Ensure cellY and cellBottom never exceed the actual row count
+        // This is a safeguard to prevent unexpected out-of-bounds access with large datasets
+        cellY = Math.max(0, Math.min(cellY, rows - 1));
+        cellBottom = Math.max(cellY, Math.min(cellBottom, rows));
+
+        const rect: Rectangle = {
+            x: cellX,
+            y: cellY,
+            width: cellRight - cellX,
+            height: cellBottom - cellY,
+        };
+
+        const oldRect = last.current;
+
+        if (
+            oldRect === undefined ||
+            oldRect.y !== rect.y ||
+            oldRect.x !== rect.x ||
+            oldRect.height !== rect.height ||
+            oldRect.width !== rect.width ||
+            lastX.current !== tx ||
+            lastY.current !== ty ||
+            args.width !== lastSize.current?.[0] ||
+            args.height !== lastSize.current?.[1]
+        ) {
+            onVisibleRegionChanged?.(
+                {
+                    x: cellX,
+                    y: cellY,
+                    width: cellRight - cellX,
+                    height: cellBottom - cellY,
+                },
+                args.width,
+                args.height,
+                args.paddingRight ?? 0,
+                tx,
+                ty
+            );
+            last.current = rect;
+            lastX.current = tx;
+            lastY.current = ty;
+            lastSize.current = [args.width, args.height];
+        }
+    }, [columns, rowHeight, rows, onVisibleRegionChanged, freezeColumns, smoothScrollX, smoothScrollY]);
+
+    const onScrollUpdate = React.useCallback(
+        (args: Rectangle & { paddingRight: number }) => {
+            lastArgs.current = args;
+            processArgs();
+        },
+        [processArgs]
+    );
+
+    React.useEffect(() => {
+        processArgs();
+    }, [processArgs]);
+
+    return (
+        <InfiniteScroller
+            scrollRef={scrollRef}
+            className={className}
+            kineticScrollPerfHack={experimental?.kineticScrollPerfHack}
+            preventDiagonalScrolling={preventDiagonalScrolling}
+            draggable={isDraggable === true || typeof isDraggable === "string"}
+            scrollWidth={width + (paddingRight ?? 0)}
+            scrollHeight={height + (paddingBottom ?? 0)}
+            clientHeight={clientHeight}
+            rightElement={rightElement}
+            paddingBottom={paddingBottom}
+            paddingRight={paddingRight}
+            rightElementProps={rightElementProps}
+            update={onScrollUpdate}
+            initialSize={initialSize}>
+            <DataGridDnd
+                eventTargetRef={scrollRef}
+                width={clientWidth}
+                height={clientHeight}
+                accessibilityHeight={p.accessibilityHeight}
+                canvasRef={p.canvasRef}
+                cellXOffset={p.cellXOffset}
+                cellYOffset={p.cellYOffset}
+                columns={p.columns}
+                disabledRows={p.disabledRows}
+                enableGroups={p.enableGroups}
+                fillHandle={p.fillHandle}
+                firstColAccessible={p.firstColAccessible}
+                fixedShadowX={p.fixedShadowX}
+                fixedShadowY={p.fixedShadowY}
+                freezeColumns={p.freezeColumns}
+                getCellContent={p.getCellContent}
+                getCellRenderer={p.getCellRenderer}
+                getGroupDetails={p.getGroupDetails}
+                getRowThemeOverride={p.getRowThemeOverride}
+                groupHeaderHeight={p.groupHeaderHeight}
+                headerHeight={p.headerHeight}
+                highlightRegions={p.highlightRegions}
+                imageWindowLoader={p.imageWindowLoader}
+                isFilling={p.isFilling}
+                isFocused={p.isFocused}
+                lockColumns={p.lockColumns}
+                maxColumnWidth={p.maxColumnWidth}
+                minColumnWidth={p.minColumnWidth}
+                onHeaderMenuClick={p.onHeaderMenuClick}
+                onHeaderIndicatorClick={p.onHeaderIndicatorClick}
+                onMouseMove={p.onMouseMove}
+                prelightCells={p.prelightCells}
+                rowHeight={p.rowHeight}
+                rows={p.rows}
+                selection={p.selection}
+                theme={p.theme}
+                freezeTrailingRows={p.freezeTrailingRows}
+                hasAppendRow={p.hasAppendRow}
+                translateX={p.translateX}
+                translateY={p.translateY}
+                onColumnProposeMove={p.onColumnProposeMove}
+                verticalBorder={p.verticalBorder}
+                drawFocusRing={p.drawFocusRing}
+                drawHeader={p.drawHeader}
+                drawGroupHeader={p.drawGroupHeader}
+                drawCell={p.drawCell}
+                experimental={p.experimental}
+                gridRef={p.gridRef}
+                headerIcons={p.headerIcons}
+                isDraggable={p.isDraggable}
+                onCanvasBlur={p.onCanvasBlur}
+                onCanvasFocused={p.onCanvasFocused}
+                onCellFocused={p.onCellFocused}
+                onColumnMoved={p.onColumnMoved}
+                onColumnResize={p.onColumnResize}
+                onColumnResizeEnd={p.onColumnResizeEnd}
+                onColumnResizeStart={p.onColumnResizeStart}
+                onContextMenu={p.onContextMenu}
+                onDragEnd={p.onDragEnd}
+                onDragLeave={p.onDragLeave}
+                onDragOverCell={p.onDragOverCell}
+                onDragStart={p.onDragStart}
+                onDrop={p.onDrop}
+                onItemHovered={p.onItemHovered}
+                onKeyDown={p.onKeyDown}
+                onKeyUp={p.onKeyUp}
+                onMouseDown={p.onMouseDown}
+                onMouseUp={p.onMouseUp}
+                onRowMoved={p.onRowMoved}
+                smoothScrollX={p.smoothScrollX}
+                smoothScrollY={p.smoothScrollY}
+                resizeIndicator={p.resizeIndicator}
+                setScrollDir={p.setScrollDir}
+            />
+        </InfiniteScroller>
+    );
+};
+
+export default GridScroller;

package/src/internal/scrolling-data-grid/use-kinetic-scroll.ts

@@ -0,0 +1,78 @@
+import { useEffect, useRef } from "react";
+
+const useKineticScroll = (
+    isEnabled: boolean,
+    callback: (scrollLeft: number, scrollTop: number) => void,
+    targetScroller: React.MutableRefObject<HTMLDivElement | null>
+) => {
+    const rafId = useRef<number | null>(null);
+    const isTouching = useRef<boolean | null>(null);
+    const lastScrollPosition = useRef<readonly [number, number] | null>(null);
+    const sameCount = useRef(0);
+
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+
+    const scrollEl = targetScroller.current;
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (isTouching.current === false && scrollEl !== null) {
+                const currentScrollPosition = [scrollEl.scrollLeft, scrollEl.scrollTop] as const;
+                if (
+                    lastScrollPosition.current?.[0] === currentScrollPosition[0] &&
+                    lastScrollPosition.current?.[1] === currentScrollPosition[1]
+                ) {
+                    if (sameCount.current > 10) {
+                        // Scroll position hasn't changed, stop the animation frame
+                        lastScrollPosition.current = null;
+                        isTouching.current = null;
+                        return;
+                    } else {
+                        sameCount.current++;
+                    }
+                } else {
+                    sameCount.current = 0;
+                    callbackRef.current(currentScrollPosition[0], currentScrollPosition[1]);
+                    lastScrollPosition.current = currentScrollPosition;
+                }
+
+                rafId.current = window.setTimeout(handleScroll, 1000 / 120);
+            }
+        };
+
+        const startTouch = () => {
+            isTouching.current = true;
+            lastScrollPosition.current = null; // Reset last scroll position on touch start
+            if (rafId.current !== null) {
+                window.clearTimeout(rafId.current);
+                rafId.current = null;
+            }
+        };
+
+        const endTouch = (event: TouchEvent) => {
+            if (event.touches.length === 0) {
+                // All touches have ended
+                isTouching.current = false;
+                sameCount.current = 0;
+                rafId.current = window.setTimeout(handleScroll, 1000 / 120);
+            }
+        };
+
+        if (isEnabled && scrollEl !== null) {
+            const element = scrollEl;
+            element.addEventListener("touchstart", startTouch);
+            element.addEventListener("touchend", endTouch);
+
+            return () => {
+                element.removeEventListener("touchstart", startTouch);
+                element.removeEventListener("touchend", endTouch);
+                if (rafId.current !== null) {
+                    window.clearTimeout(rafId.current);
+                }
+            };
+        }
+    }, [isEnabled, scrollEl]);
+};
+
+export default useKineticScroll;

package/src/stories/story-utils.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { styled } from "@linaria/react";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+
+interface Props {
+    width: number;
+    height: number;
+    useMoreTopPadding?: boolean;
+    figmaDoc?: string;
+    context?: any;
+}
+
+const BuilderWrapper = styled.div<Pick<Props, "width" | "height">>`
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    position: relative;
+
+    & > .content {
+        display: block;
+
+        width: ${p => p.width}px;
+        height: ${p => p.height}px;
+        align-self: center;
+
+        position: relative;
+
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+        user-select: none;
+
+        box-sizing: border-box;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: inherit;
+        }
+    }
+`;
+
+const SimpleWrapper = styled.div`
+    box-sizing: border-box;
+
+    *,
+    *::before,
+    *::after {
+        box-sizing: inherit;
+    }
+`;
+
+export class BuilderThemeWrapper extends React.PureComponent<React.PropsWithChildren<Props>> {
+    public render(): React.ReactNode {
+        const { context, children, ...rest } = this.props;
+        return (
+            <>
+                <BuilderWrapper {...rest}>
+                    <div className="content">{children}</div>
+                </BuilderWrapper>
+                <div id="portal" />
+            </>
+        );
+    }
+}
+
+export const SimpleThemeWrapper: React.FC<React.PropsWithChildren> = p => {
+    return (
+        <SimpleWrapper>
+            <div className="content">{p.children}</div>
+        </SimpleWrapper>
+    );
+};

package/test/animation-manager.test.ts

@@ -0,0 +1,147 @@
+import { AnimationManager, type HoverValues } from "../src/internal/data-grid/animation-manager.js";
+import { vi, expect, describe, it, beforeEach, afterEach } from "vitest";
+
+// const OG_RAF = window.requestAnimationFrame;
+// const OG_CAF = window.cancelAnimationFrame;
+
+describe("Animation manager", () => {
+    beforeEach(() => {
+        // Mock rAF with setTimeout. Not perfect by any means, but at least it mocks the asynchronicity.
+        vi.useFakeTimers();
+
+        // window.requestAnimationFrame = f => {
+        //     const timeoutID = setTimeout(() => {
+        //         const timestamp = performance.now();
+        //         f(timestamp);
+        //     }, 0);
+        //     return timeoutID as unknown as number;
+        // };
+
+        // window.cancelAnimationFrame = (rafID: number) => {
+        //     clearTimeout(rafID);
+        // };
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+
+        // window.requestAnimationFrame = OG_RAF;
+        // window.cancelAnimationFrame = OG_CAF;
+    });
+
+    it("hovers an element from 0 to 1", async () => {
+        // As we call the handler, keep track of all the hover amounts we were called with.
+        // We can't use spy.mock.calls cause we're passing the same reference with different values
+        // so all the calls see the last state of the hover values.
+        const hoverAmountsInCallingOrder: number[] = [];
+        const spy = vi.fn((hoverValues: HoverValues) => {
+            hoverAmountsInCallingOrder.push(hoverValues[0].hoverAmount);
+        });
+
+        const manager = new AnimationManager(spy);
+
+        manager.setHovered([1, 2]);
+        expect(spy).not.toHaveBeenCalled();
+
+        vi.runAllTimers();
+
+        // Check that we called the handler with the right cell
+        expect(spy).toHaveBeenCalledWith([{ item: [1, 2], hoverAmount: 1 }]);
+
+        // Check that we called the handler many times. More than 3, idk.
+        expect(hoverAmountsInCallingOrder.length).toBeGreaterThan(3);
+
+        // Now check that each successive call yielded a greater hover amount.
+        let previousHoverAmount = 0;
+        for (const hoverAmount of hoverAmountsInCallingOrder) {
+            expect(hoverAmount).toBeGreaterThanOrEqual(previousHoverAmount);
+            previousHoverAmount = hoverAmount;
+        }
+    });
+
+    it("unhovers an element back to 0", async () => {
+        // Don't track calls while setting up everything
+        let trackCalls = false;
+        const hoverAmountsInCallingOrder: number[] = [];
+        const spy = vi.fn((hoverValues: HoverValues) => {
+            if (trackCalls) {
+                hoverAmountsInCallingOrder.push(hoverValues[0].hoverAmount);
+            }
+        });
+
+        const manager = new AnimationManager(spy);
+
+        manager.setHovered([1, 2]);
+        vi.runAllTimers();
+
+        // Make sure that the item is right, and that it hovered up to 1.
+        expect(spy).toHaveBeenCalledWith([{ item: [1, 2], hoverAmount: 1 }]);
+
+        trackCalls = true;
+
+        manager.setHovered(undefined);
+        vi.runAllTimers();
+
+        expect(hoverAmountsInCallingOrder.length).toBeGreaterThan(3);
+
+        let previousHoverAmount = 1;
+        for (const hoverAmount of hoverAmountsInCallingOrder) {
+            // due to easing you might get thez
+            expect(hoverAmount).toBeLessThanOrEqual(previousHoverAmount);
+            previousHoverAmount = hoverAmount;
+        }
+
+        // Make sure the last call was done with 0 hover amount. We don't want to end up in a partially hovered state.
+        const lastCallHoverAmount = hoverAmountsInCallingOrder[hoverAmountsInCallingOrder.length - 1];
+        expect(lastCallHoverAmount).toBe(0);
+    });
+
+    it("Crossfades two items", async () => {
+        type ItemsHoverAmount = { one: number; two: number };
+
+        let trackCalls = false;
+        const hoverAmountsInCallingOrder: ItemsHoverAmount[] = [];
+        const spy = vi.fn((hoverValues: HoverValues) => {
+            if (trackCalls) {
+                const hoverForOne = hoverValues.find(item => item.item[0] === 1)?.hoverAmount ?? 0;
+                const hoverForTwo = hoverValues.find(item => item.item[0] === 2)?.hoverAmount ?? 0;
+
+                hoverAmountsInCallingOrder.push({
+                    one: hoverForOne,
+                    two: hoverForTwo,
+                });
+            }
+        });
+
+        const manager = new AnimationManager(spy);
+
+        manager.setHovered([1, 1]);
+        vi.runAllTimers();
+
+        // Make sure that the first item is fully hovered, to start with
+        expect(spy).toHaveBeenCalledWith([{ item: [1, 1], hoverAmount: 1 }]);
+
+        trackCalls = true;
+
+        manager.setHovered([2, 2]);
+        vi.runAllTimers();
+
+        // Check that we started with one > two
+        const { one: startingOne, two: startingTwo } = hoverAmountsInCallingOrder[0];
+        expect(startingOne).toBeGreaterThan(startingTwo);
+
+        // Check that we ended with one < one
+        const { one: lastOne, two: lastTwo } = hoverAmountsInCallingOrder[hoverAmountsInCallingOrder.length - 1];
+        expect(lastOne).toBeLessThan(lastTwo);
+
+        // Now check that both moved monotonically
+        let previousOneHoverAmount = 1;
+        let previousTwoHoverAmount = 0;
+        for (const hoverAmount of hoverAmountsInCallingOrder) {
+            const { one, two } = hoverAmount;
+            expect(one).toBeLessThanOrEqual(previousOneHoverAmount);
+            previousOneHoverAmount = one;
+            expect(two).toBeGreaterThanOrEqual(previousTwoHoverAmount);
+            previousTwoHoverAmount = two;
+        }
+    });
+});