add scrollOffsetBottom and fix pointer events

basehub-ai · Sep 20, 2024 · 6f0a661 · 6f0a661
1 parent a364127
commit 6f0a661
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 19 deletions.
diff --git a/packages/core/src/data-editor-all.tsx b/packages/core/src/data-editor-all.tsx
@@ -27,6 +27,7 @@ const DataEditorAllImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEdito
             imageWindowLoader={imageWindowLoader}
             scrollerRef={p.scrollerRef}
             scrollOffsetTop={p.scrollOffsetTop}
+            scrollOffsetBottom={p.scrollOffsetBottom}
         />
     );
 };

diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx
@@ -4023,6 +4023,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 <DataGridSearch
                     scrollerRef={p.scrollerRef}
                     scrollOffsetTop={p.scrollOffsetTop}
+                    scrollOffsetBottom={p.scrollOffsetBottom}
                     fillHandle={fillHandle}
                     drawFocusRing={drawFocusRing}
                     experimental={experimental}

diff --git a/packages/core/src/docs/examples/add-column.stories.tsx b/packages/core/src/docs/examples/add-column.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef } from "react";
 import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
 import {
     BeautifulWrapper,
@@ -34,61 +34,64 @@ interface AddColumnsProps {
     columnsCount: number;
 }
 
-const rowCount = 10_000;
+const rowCount = 150;
 
 export const AddColumns: React.FC<AddColumnsProps> = p => {
     const { cols, getCellContent } = useMockDataGenerator(p.columnsCount);
     const scrollerRef = useRef<HTMLDivElement>(null);
-    const [scrollOffsetTop, setScrollOffsetTop] = useState(0);
     const headerRef = useRef<HTMLElement>(null);
 
-    useEffect(() => {
-        setScrollOffsetTop(headerRef.current?.offsetHeight ?? 0);
-    }, []);
+    const offsetBottom = 150;
+    const height = "500px";
+    const rowHeight = 32;
 
     return (
         <div
             style={{
                 background: "red",
                 overflow: "auto",
-                height: "80vh",
+                height,
             }}
             ref={scrollerRef}>
             <style>{`
             .hackygrid {
                 position: sticky;
                 top: 0;
+                height: ${height} !important;
             }
             .dvn-scroller {
                 overflow: hidden !important;
             }
+                .sizer, .sizer-clip, .sizer-clip > div {
+                height: ${height} !important;
+                max-height: ${height} !important;
+                }
                 `}</style>
             <header ref={headerRef}>
-                <h1
-                    contentEditable
-                    style={{ margin: 0 }}
-                    onInput={() => {
-                        setScrollOffsetTop(headerRef.current?.offsetHeight ?? 0);
-                    }}>
+                <h1 contentEditable style={{ margin: 0 }}>
                     This is the article title
                 </h1>
                 <div style={{ margin: 0 }}>something something nav</div>
             </header>
             <div
                 style={{
-                    height: `${(rowCount + 1) * 33.5}px`,
+                    height: `${(rowCount + 1) * rowHeight + offsetBottom}px`,
+                    paddingBottom: offsetBottom,
                 }}>
                 <DataEditor
                     {...defaultProps}
-                    height={"80vh"}
+                    rowHeight={rowHeight}
+                    headerHeight={rowHeight}
+                    height={"500px"}
                     rowMarkers="number"
                     className="hackygrid"
                     getCellContent={getCellContent}
                     experimental={{ strict: true }}
                     columns={cols}
                     rows={rowCount}
                     scrollerRef={scrollerRef}
-                    scrollOffsetTop={scrollOffsetTop}
+                    scrollOffsetTop={55.5}
+                    scrollOffsetBottom={offsetBottom}
                 />
             </div>
         </div>

diff --git a/packages/core/src/internal/data-grid-search/data-grid-search.tsx b/packages/core/src/internal/data-grid-search/data-grid-search.tsx
@@ -549,6 +549,7 @@ const DataGridSearch: React.FunctionComponent<DataGridSearchProps> = p => {
                 resizeIndicator={p.resizeIndicator}
                 scrollerRef={p.scrollerRef}
                 scrollOffsetTop={p.scrollOffsetTop}
+                scrollOffsetBottom={p.scrollOffsetBottom}
             />
             {searchbox}
         </>

diff --git a/packages/core/src/internal/scrolling-data-grid/infinite-scroller.tsx b/packages/core/src/internal/scrolling-data-grid/infinite-scroller.tsx
@@ -26,6 +26,7 @@ interface Props {
     readonly update: (region: Rectangle & { paddingRight: number }) => void;
     readonly scrollerRef?: React.RefObject<HTMLDivElement>;
     readonly scrollOffsetTop?: number;
+    readonly scrollOffsetBottom?: number;
 }
 
 const ScrollRegionStyle = styled.div<{ isSafari: boolean }>`
@@ -128,6 +129,7 @@ export const InfiniteScroller: React.FC<Props> = p => {
         initialSize,
         scrollerRef: explicitScrollerRef,
         scrollOffsetTop,
+        scrollOffsetBottom,
     } = p;
     const padders: React.ReactNode[] = [];
 
@@ -179,11 +181,19 @@ export const InfiniteScroller: React.FC<Props> = p => {
             const dy = scrollTop - lastScrollTop;
 
             const stickyTop = scrollOffsetTop ?? 0;
+            const stickyBottom = scrollOffsetBottom ?? 0;
 
             if (stickyTop) {
                 scrollTop = Math.max(0, scrollTop - stickyTop);
             }
 
+            if (stickyBottom) {
+                const scrollRemaining = el.scrollHeight - scrollTop - el.clientHeight - stickyTop;
+                if (scrollRemaining < stickyBottom) {
+                    scrollTop = el.scrollHeight - stickyTop - el.clientHeight - stickyBottom;
+                }
+            }
+
             if (
                 hasTouches &&
                 dx !== 0 &&
@@ -235,7 +245,16 @@ export const InfiniteScroller: React.FC<Props> = p => {
                 paddingRight: rightWrapRef.current?.clientWidth ?? 0,
             });
         },
-        [paddingBottom, paddingRight, scrollHeight, update, preventDiagonalScrolling, hasTouches, scrollOffsetTop]
+        [
+            scrollOffsetTop,
+            scrollOffsetBottom,
+            hasTouches,
+            preventDiagonalScrolling,
+            scrollHeight,
+            update,
+            paddingRight,
+            paddingBottom,
+        ]
     );
 
     useKineticScroll(kineticScrollPerfHack && browserIsSafari.value, onScroll, scroller);
@@ -258,7 +277,7 @@ export const InfiniteScroller: React.FC<Props> = p => {
             const instance = explicitScrollerRef?.current ?? _instance;
             scroller.current = instance;
             if (scrollRef !== undefined) {
-                scrollRef.current = instance;
+                scrollRef.current = _instance;
             }
         },
         [scrollRef, explicitScrollerRef]

diff --git a/packages/core/src/internal/scrolling-data-grid/scrolling-data-grid.tsx b/packages/core/src/internal/scrolling-data-grid/scrolling-data-grid.tsx
@@ -69,6 +69,7 @@ export interface ScrollingDataGridProps extends Props {
     readonly nonGrowWidth: number;
     readonly scrollerRef?: React.RefObject<HTMLDivElement>;
     readonly scrollOffsetTop?: number;
+    readonly scrollOffsetBottom?: number;
 }
 
 const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
@@ -266,7 +267,8 @@ const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
             update={onScrollUpdate}
             initialSize={initialSize}
             scrollerRef={scrollerRef}
-            scrollOffsetTop={p.scrollOffsetTop}>
+            scrollOffsetTop={p.scrollOffsetTop}
+            scrollOffsetBottom={p.scrollOffsetBottom}>
             <DataGridDnd
                 eventTargetRef={scrollRef}
                 width={clientWidth}