Merge f601d31 into 4bdfe38

glideapps · Feb 9, 2024 · 153b5c2 · 153b5c2
2 parents 4bdfe38 + f601d31
commit 153b5c2
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "root",
-    "version": "6.0.4-alpha01",
+    "version": "6.0.4-alpha02",
     "scripts": {
         "start": "npm run storybook",
         "version": "./update-version.sh",

diff --git a/packages/cells/package.json b/packages/cells/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid-cells",
-    "version": "6.0.4-alpha01",
+    "version": "6.0.4-alpha02",
     "description": "Extra cells for glide-data-grid",
     "sideEffects": [
         "**/*.css"
@@ -50,7 +50,7 @@
         "canvas"
     ],
     "dependencies": {
-        "@glideapps/glide-data-grid": "6.0.4-alpha01",
+        "@glideapps/glide-data-grid": "6.0.4-alpha02",
         "@linaria/react": "^4.5.3",
         "@toast-ui/editor": "3.1.10",
         "@toast-ui/react-editor": "3.1.10",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid",
-    "version": "6.0.4-alpha01",
+    "version": "6.0.4-alpha02",
     "description": "React data grid for beautifully displaying and editing large amounts of data with amazing performance.",
     "sideEffects": [
         "**/*.css"

diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx
@@ -126,6 +126,7 @@ type Props = Partial<
         | "getRowThemeOverride"
         | "gridRef"
         | "groupHeaderHeight"
+        | "setScrollRef"
         | "headerHeight"
         | "isFilling"
         | "isFocused"
@@ -1140,17 +1141,29 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     const [visibleRegion, setVisibleRegion, empty] = useStateWithReactiveInput<VisibleRegion>(visibleRegionInput);
     visibleRegionRef.current = visibleRegion;
 
-    const vScrollReady = (visibleRegion.height ?? 1) > 1;
-    React.useLayoutEffect(() => {
-        if (scrollOffsetY !== undefined && scrollRef.current !== null && vScrollReady) {
-            if (scrollRef.current.scrollTop === scrollOffsetY) return;
-            scrollRef.current.scrollTop = scrollOffsetY;
-            if (scrollRef.current.scrollTop !== scrollOffsetY) {
-                empty();
+    const setScrollRef = React.useCallback(
+        (scrollEl: HTMLDivElement | null) => {
+            if (scrollEl !== null && scrollRef.current !== scrollEl && scrollOffsetY !== undefined) {
+                scrollEl.scrollTop = scrollOffsetY;
+                hasJustScrolled.current = true;
             }
-            hasJustScrolled.current = true;
-        }
-    }, [scrollOffsetY, vScrollReady, empty]);
+
+            scrollRef.current = scrollEl;
+        },
+        [scrollOffsetY]
+    );
+
+    // const vScrollReady = (visibleRegion.height ?? 1) > 1;
+    // React.useLayoutEffect(() => {
+    //     if (scrollOffsetY !== undefined && scrollRef.current !== null && vScrollReady) {
+    //         if (scrollRef.current.scrollTop === scrollOffsetY) return;
+    //         scrollRef.current.scrollTop = scrollOffsetY;
+    //         if (scrollRef.current.scrollTop !== scrollOffsetY) {
+    //             empty();
+    //         }
+    //         hasJustScrolled.current = true;
+    //     }
+    // }, [scrollOffsetY, vScrollReady, empty]);
 
     const hScrollReady = (visibleRegion.width ?? 1) > 1;
     React.useLayoutEffect(() => {
@@ -4099,6 +4112,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                     onSearchValueChange={onSearchValueChange}
                     rows={mangledRows}
                     scrollRef={scrollRef}
+                    setScrollRef={setScrollRef}
                     selection={gridSelection}
                     translateX={visibleRegion.tx}
                     translateY={visibleRegion.ty}

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
@@ -509,6 +509,7 @@ const DataGridSearch: React.FunctionComponent<DataGridSearchProps> = p => {
                 rowHeight={p.rowHeight}
                 rows={p.rows}
                 scrollRef={p.scrollRef}
+                setScrollRef={p.setScrollRef}
                 selection={p.selection}
                 theme={p.theme}
                 freezeTrailingRows={p.freezeTrailingRows}

diff --git a/packages/core/src/internal/scrolling-data-grid/infinite-scroller.tsx b/packages/core/src/internal/scrolling-data-grid/infinite-scroller.tsx
@@ -22,7 +22,7 @@ interface Props {
     };
     readonly rightElement?: React.ReactNode;
     readonly kineticScrollPerfHack?: boolean;
-    readonly scrollRef?: React.MutableRefObject<HTMLDivElement | null>;
+    readonly scrollRef?: (el: HTMLDivElement | null) => void;
     readonly update: (region: Rectangle & { paddingRight: number }) => void;
 }
 
@@ -246,7 +246,7 @@ export const InfiniteScroller: React.FC<Props> = p => {
         (instance: HTMLDivElement | null) => {
             scroller.current = instance;
             if (scrollRef !== undefined) {
-                scrollRef.current = instance;
+                scrollRef(instance);
             }
         },
         [scrollRef]
@@ -263,6 +263,7 @@ export const InfiniteScroller: React.FC<Props> = p => {
 
     const { ref, width, height } = useResizeDetector<HTMLDivElement>(initialSize);
 
+    // this is done so that the visible region gets updated in the DataEditor any time the size changes
     if (typeof window !== "undefined" && (lastProps.current?.height !== height || lastProps.current?.width !== width)) {
         window.setTimeout(() => onScrollRef.current(), 0);
         lastProps.current = { width, height };

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
@@ -19,6 +19,8 @@ export interface ScrollingDataGridProps extends Props {
         | undefined;
     readonly scrollRef: React.MutableRefObject<HTMLDivElement | null> | undefined;
 
+    readonly setScrollRef: (ref: HTMLDivElement | null) => void;
+
     /**
      * 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
@@ -84,6 +86,7 @@ const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
         className,
         onVisibleRegionChanged,
         scrollRef,
+        setScrollRef,
         preventDiagonalScrolling,
         rightElement,
         rightElementProps,
@@ -248,7 +251,7 @@ const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
 
     return (
         <InfiniteScroller
-            scrollRef={scrollRef}
+            scrollRef={setScrollRef}
             className={className}
             kineticScrollPerfHack={experimental?.kineticScrollPerfHack}
             preventDiagonalScrolling={preventDiagonalScrolling}

diff --git a/packages/source/package.json b/packages/source/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid-source",
-    "version": "6.0.4-alpha01",
+    "version": "6.0.4-alpha02",
     "description": "Useful data source hooks for Glide Data Grid",
     "sideEffects": false,
     "type": "module",
@@ -42,7 +42,7 @@
         "canvas"
     ],
     "dependencies": {
-        "@glideapps/glide-data-grid": "6.0.4-alpha01"
+        "@glideapps/glide-data-grid": "6.0.4-alpha02"
     },
     "peerDependencies": {
         "lodash": "^4.17.19",