Merge pull request #83 from fobbyal/allow-pass-gridref-externally

feat(virtualizedRenderer): allow to pass content grid ref as property
fobbyal · Jul 19, 2021 · e643f8b · e643f8b
2 parents 706513e + 9f1498d
commit e643f8b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/src/stories/virtualized/virtualized.stories.js b/src/stories/virtualized/virtualized.stories.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef, useState } from 'react'
 import { storiesOf } from '@storybook/react'
 import R from 'ramda'
 import Grid, {
@@ -59,6 +59,43 @@ export const dateInputCellEditRender = ({ getInputProps }) => (
   <CellInputEditor type="date" {...getInputProps({ refKey: 'innerRef' })} />
 )
 
+const GridWithScrollTrigger = () => {
+  const [rowNo, setRowNo] = useState()
+  const gridRef = useRef()
+  return (
+    <div>
+      <div style={{ margin: 10 }}>
+        <input type="number" value={rowNo} onChange={e => setRowNo(e.target.value)} />
+        <button
+          onClick={() => {
+            if (gridRef.current && rowNo) {
+              gridRef.current.scrollToCell({ columnIndex: 0, rowIndex: +rowNo })
+            }
+          }}
+        >
+          Scroll To
+        </button>
+      </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,
+        })}
+        editMode="cell"
+        isEditable={() => true}
+      />
+    </div>
+  )
+}
+
 const data = createData(200)
 storiesOf('Virtualized grid', module)
   .add('Basic', () => (
@@ -94,3 +131,4 @@ storiesOf('Virtualized grid', module)
       />
     </GridToolContext.Provider>
   ))
+  .add('Scroll Trigger', () => <GridWithScrollTrigger />)
diff --git a/src/virtualized/virtualizedRenderer.js b/src/virtualized/virtualizedRenderer.js
@@ -48,7 +48,7 @@ const handleSelectionScroll = ({ contentGrid, x2, y2, previousPosition, fixedHea
 //
 //
 const VirtualizedRender = ({ renderOptions = {}, gridRenderProps }) => {
-  const contentGridRef = useRef()
+  const internalContentGridRef = useRef()
   const rowHeaderGridRef = useRef()
   const columnHeaderGridRef = useRef()
   const positionRef = useRef()
@@ -74,13 +74,16 @@ const VirtualizedRender = ({ renderOptions = {}, gridRenderProps }) => {
     autoFixColByKey,
     cellRender = defaultCellRender,
     rowHeaderRender = defaultRowHeaderRender,
+    contentGridRef: externalContentGridRef,
     // colHeaderRenderer,
     // pagerRenderer = defaultPagerRenderer,
     // editByRow = true,
     // editByCell = false,
     // fixedScrollHeightAdjustment = 6,
   } = renderOptions
 
+  const contentGridRef = externalContentGridRef || internalContentGridRef
+
   const {
     scrollY,
     scrollX,