Merge pull request #85 from fobbyal/scroll-sync-stories

fobbyal · Jul 29, 2021 · e123d2d · e123d2d
2 parents 206650f + 8eb7262
commit e123d2d
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 3 deletions.
diff --git a/src/stories/flex/flex.stories.js b/src/stories/flex/flex.stories.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 
 import { storiesOf } from '@storybook/react'
 // import { action } from '@storybook/addon-actions'
@@ -18,6 +18,7 @@ import Grid, {
   GridToolContext,
 } from '../../index'
 import FilterDemo from './FilterDemo'
+import ScrollSyncHelper from '../../ScrollSyncHelper'
 
 // const createRow = _ => randomRow(headers)
 
@@ -103,6 +104,50 @@ const OnEditCopyPasteDemo = () => {
   )
 }
 
+const GridWithScrollSync = () => {
+  const gridRef = useRef()
+  const divRef = useRef()
+
+  useEffect(() => {
+    let pane
+    if (gridRef.current && divRef.current) {
+      pane = divRef.current
+      gridRef.current.scrollSync.registerPane(pane, ScrollSyncHelper.HORIZONTAL)
+    }
+    return () => {
+      if (pane) {
+        gridRef.current.scrollSync.unReisterPane(pane)
+      }
+    }
+  }, [])
+
+  return (
+    <div>
+      <div ref={divRef} style={{ overflow: 'auto', width: 800 }}>
+        <div
+          style={{
+            padding: 20,
+            background: 'red',
+            width: headers.map(h => h.width || 150).reduce((sum, val) => sum + val, 0),
+          }}
+        >
+          Scroll Me!!!
+        </div>
+      </div>
+      <Grid
+        ref={gridRef}
+        {...commonProps}
+        render={flexGridRenderer({
+          headerRowHeight: 60,
+          width: 800,
+          height: 400,
+          autoFixColByKey: true,
+        })}
+      />
+    </div>
+  )
+}
+
 storiesOf('Flex Grid', module)
   .add('debug', () => (
     <Grid
@@ -139,6 +184,7 @@ storiesOf('Flex Grid', module)
       })}
     />
   ))
+  .add('Scroll Sync', () => <GridWithScrollSync />)
   .add('Custom Selection Range', () => {
     const CustomSelectionStory = () => {
       const initialRect = { x1: 3, y1: 2, x2: 5, y2: 5 }

diff --git a/src/stories/virtualized/virtualized.stories.js b/src/stories/virtualized/virtualized.stories.js
@@ -69,7 +69,7 @@ const GridWithScrollTrigger = () => {
         <button
           onClick={() => {
             if (gridRef.current && rowNo) {
-              gridRef.current.scrollToCell({ columnIndex: 0, rowIndex: +rowNo })
+              gridRef.current.scrollToCell({ rowIndex: +rowNo })
             }
           }}
         >
@@ -96,6 +96,58 @@ const GridWithScrollTrigger = () => {
   )
 }
 
+const GridWithScrollSync = () => {
+  const gridRef = useRef()
+  const divRef = useRef()
+  return (
+    <div>
+      <div
+        ref={divRef}
+        style={{ overflow: 'auto', width: 1100 }}
+        onScroll={e => {
+          const scrollLeft = e.target.scrollLeft
+          if (scrollLeft && gridRef.current) {
+            gridRef.current.scrollToPosition({ scrollLeft })
+          }
+        }}
+      >
+        <div
+          style={{
+            padding: 20,
+            background: 'red',
+            width: headers.map(h => h.width || 150).reduce((sum, val) => sum + val, 0),
+          }}
+        >
+          Scroll Me!!!
+        </div>
+      </div>
+      <Grid
+        data={data}
+        headers={headers}
+        render={virtualizedGridRenderer({
+          cellRender: props => {
+            const type = props.gridToolProps.headers[props.reactVirtualizedProps.columnIndex].type
+            return defaultVirtualizedCellRender({
+              ...props,
+              editRender: (type === 'date-time' || type === 'date') && dateInputCellEditRender,
+            })
+          },
+          contentGridRef: gridRef,
+          onScroll: ({ scrollLeft }) => {
+            if (scrollLeft && divRef.current) {
+              divRef.current.scrollTo({
+                left: scrollLeft,
+              })
+            }
+          },
+        })}
+        editMode="cell"
+        isEditable={() => true}
+      />
+    </div>
+  )
+}
+
 const data = createData(200)
 storiesOf('Virtualized grid', module)
   .add('Basic', () => (
@@ -132,3 +184,4 @@ storiesOf('Virtualized grid', module)
     </GridToolContext.Provider>
   ))
   .add('Scroll Trigger', () => <GridWithScrollTrigger />)
+  .add('Scroll Sync', () => <GridWithScrollSync />)
diff --git a/src/virtualized/virtualizedRenderer.js b/src/virtualized/virtualizedRenderer.js
@@ -75,6 +75,7 @@ const VirtualizedRender = ({ renderOptions = {}, gridRenderProps }) => {
     cellRender = defaultCellRender,
     rowHeaderRender = defaultRowHeaderRender,
     contentGridRef: externalContentGridRef,
+    onScroll,
     // colHeaderRenderer,
     // pagerRenderer = defaultPagerRenderer,
     // editByRow = true,
@@ -208,7 +209,12 @@ const VirtualizedRender = ({ renderOptions = {}, gridRenderProps }) => {
             rowCount={data.length}
             width={width + scrollbarSize()}
             ref={contentGridRef}
-            onScroll={onMainGridScroll}
+            onScroll={scrollInfo => {
+              onMainGridScroll(scrollInfo)
+              if (onScroll != null) {
+                onScroll(scrollInfo)
+              }
+            }}
           />
         </div>
         {/* fixed headers upper left - corner */}