feat(Grid): add auto reset to grid

* feat(grid): add reset function * fix(grid): stop using ref * feat(grid): add autoReset prop * feat(grid): remove reset function * fix(grid): remove reset export Co-authored-by: dorosty <[email protected]>
divar-ir · Apr 17, 2021 · e4464ee · e4464ee
1 parent 806cb00
commit e4464ee
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
diff --git a/src/VirtuosoGrid.tsx b/src/VirtuosoGrid.tsx
@@ -28,14 +28,20 @@ export interface VirtuosoGridProps {
   scrollSeek?: ScrollSeekConfiguration
   endThreshold?: number
   viewportElement: HTMLElement
+  autoReset?: boolean
 }
 
 type VirtuosoGridState = ReturnType<typeof VirtuosoGridEngine>
 
 type VirtuosoGridFCProps = Omit<VirtuosoGridProps, 'overscan'> & { engine: VirtuosoGridState }
 
 export class VirtuosoGrid extends React.PureComponent<VirtuosoGridProps, VirtuosoGridState> {
-  public state = VirtuosoGridEngine(this.props.initialItemCount)
+  constructor(props: VirtuosoGridProps) {
+    super(props)
+
+    const { initialItemCount, autoReset } = props
+    this.state = VirtuosoGridEngine({ initialItemCount, autoReset })
+  }
 
   public static getDerivedStateFromProps(props: VirtuosoGridProps, engine: VirtuosoGridState) {
     engine.overscan(props.overscan || 0)

diff --git a/src/VirtuosoGridEngine.ts b/src/VirtuosoGridEngine.ts
@@ -34,7 +34,7 @@ const calculateItemsPerRow = (viewportWidth: number, itemWidth: number) => hackF
 
 const toRowIndex = (index: number, itemsPerRow: number, roundFunc = floor) => roundFunc(index / itemsPerRow)
 
-export const VirtuosoGridEngine = (initialItemCount = 0) => {
+export const VirtuosoGridEngine = ({ initialItemCount = 0, autoReset = false } = {}) => {
   const itemsRender = subject<any>(false)
   const gridDimensions$ = subject<GridDimensions>([0, 0, undefined, undefined, undefined, undefined])
   const totalCount$ = subject(0)
@@ -46,6 +46,21 @@ export const VirtuosoGridEngine = (initialItemCount = 0) => {
   const scrollToIndex$ = coldSubject<TScrollLocation>()
   const rangeChanged$ = coldSubject<ListRange>()
   const endThreshold$ = subject(0)
+  const currentEndIndex$ = subject<number | null>(null)
+
+  function reset() {
+    currentEndIndex$.next(null)
+  }
+
+  if (autoReset) {
+    let lastTotalCount = -Infinity
+    totalCount$.subscribe(totalCount => {
+      if (totalCount < lastTotalCount) {
+        reset()
+      }
+      lastTotalCount = totalCount
+    })
+  }
 
   combineLatest(gridDimensions$, scrollTop$, overscan$, totalCount$)
     .pipe(withLatestFrom(itemRange$))
@@ -128,20 +143,21 @@ export const VirtuosoGridEngine = (initialItemCount = 0) => {
   const isScrolling$ = buildIsScrolling(scrollTop$)
 
   const endReached$ = coldSubject<number>()
-  let currentEndIndex = 0
 
-  itemRange$.pipe(withLatestFrom(totalCount$, endThreshold$)).subscribe(([[_, endIndex], totalCount, endThreshold]) => {
-    if (totalCount === 0) {
-      return
-    }
+  itemRange$
+    .pipe(withLatestFrom(totalCount$, endThreshold$, currentEndIndex$))
+    .subscribe(([[_, endIndex], totalCount, endThreshold, currentEndIndex]) => {
+      if (totalCount === 0) {
+        return
+      }
 
-    if (endIndex >= totalCount - endThreshold) {
-      if (currentEndIndex !== endIndex) {
-        currentEndIndex = endIndex
-        endReached$.next(endIndex)
+      if (endIndex >= totalCount - endThreshold) {
+        if (currentEndIndex !== endIndex) {
+          currentEndIndex$.next(endIndex)
+          endReached$.next(endIndex)
+        }
       }
-    }
-  })
+    })
 
   const { isSeeking$, scrollSeekConfiguration$ } = scrollSeekEngine({
     scrollTop$,