Support onEdge and onNearEdge callbacks for inifinitelist

Author: ethanshar

src/infinite-list/index.tsx

@@ -1,6 +1,8 @@
 // TODO: Make this a common component for all horizontal lists in this lib
 import React, {forwardRef, useCallback, useMemo, useRef} from 'react';
 import {DataProvider, LayoutProvider, RecyclerListView, RecyclerListViewProps} from 'recyclerlistview';
+import inRange from 'lodash/inRange';
+
 import constants from '../commons/constants';
 
 const dataProviderMaker = (items: string[]) => new DataProvider((item1, item2) => item1 !== item2).cloneWithRows(items);
@@ -12,6 +14,9 @@ export interface InfiniteListProps
   pageWidth?: number;
   pageHeight?: number;
   onPageChange?: (pageIndex: number, prevPageIndex: number) => void;
+  onReachEdge?: (pageIndex: number) => void;
+  onReachNearEdge?: (pageIndex: number) => void;
+  nearEdgeThreshold?: number;
   initialPageIndex?: number;
 }
 
@@ -20,8 +25,11 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
     renderItem,
     data,
     pageWidth = constants.screenWidth,
-    pageHeight = constants.screenHeight, 
+    pageHeight = constants.screenHeight,
     onPageChange,
+    onReachEdge,
+    onReachNearEdge,
+    nearEdgeThreshold,
     initialPageIndex = 0,
     extendedState,
     scrollViewProps
@@ -49,15 +57,25 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
       if (pageIndex.current !== currPageIndex) {
         if (pageIndex.current !== undefined) {
           onPageChange?.(currPageIndex, pageIndex.current);
+
+          if (currPageIndex === 0 || currPageIndex === data.length - 1) {
+            onReachEdge?.(currPageIndex);
+          } else if (nearEdgeThreshold && !inRange(currPageIndex, nearEdgeThreshold, data.length - nearEdgeThreshold)) {
+            onReachNearEdge?.(currPageIndex);
+          }
         }
         pageIndex.current = currPageIndex;
       }
 
       props.onScroll?.(event, offsetX, offsetY);
     },
-    [props.onScroll]
+    [props.onScroll, data.length]
   );
 
+  const style = useMemo(() => {
+    return {height: pageHeight};
+  }, [pageHeight]);
+
   return (
     <RecyclerListView
       ref={ref}
@@ -69,6 +87,7 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
       initialRenderIndex={initialPageIndex}
       renderAheadOffset={5 * pageWidth}
       onScroll={onScroll}
+      style={style}
       scrollViewProps={{
         pagingEnabled: true,
         bounces: false,

src/timeline-list/index.tsx

@@ -7,7 +7,7 @@ import Context from '../expandableCalendar/Context';
 import {UpdateSources} from '../expandableCalendar/commons';
 import Timeline, {TimelineProps} from '../timeline/Timeline';
 import InfiniteList from '../infinite-list';
-import useTimelinePages, {INITIAL_PAGE} from './useTimelinePages';
+import useTimelinePages, {INITIAL_PAGE, NEAR_EDGE_THRESHOLD} from './useTimelinePages';
 
 export interface TimelineListProps {
   events: {[date: string]: TimelineProps['events']};
@@ -65,15 +65,15 @@ const TimelineList = (props: TimelineListProps) => {
       const newDate = pagesRef.current[pageIndex];
       if (newDate !== prevDate.current) {
         setDate(newDate, UpdateSources.LIST_DRAG);
-
-        if (isNearEdges(pageIndex)) {
-          shouldResetPages.current = isNearEdges(pageIndex);
-        }
       }
     }, 0),
     []
   );
 
+  const onReachNearEdge = useCallback(() => {
+    shouldResetPages.current = true;
+  }, []);
+
   const onTimelineOffsetChange = useCallback(offset => {
     setTimelineOffset(offset);
   }, []);
@@ -109,6 +109,8 @@ const TimelineList = (props: TimelineListProps) => {
       data={pages}
       renderItem={renderPage}
       onPageChange={onPageChange}
+      onReachNearEdge={onReachNearEdge}
+      nearEdgeThreshold={NEAR_EDGE_THRESHOLD}
       onScroll={onScroll}
       extendedState={{todayEvents: events[date], pages}}
       initialPageIndex={INITIAL_PAGE}

src/timeline-list/useTimelinePages.ts

@@ -7,8 +7,8 @@ import debounce from 'lodash/debounce';
 import constants from '../commons/constants';
 import {generateDay} from '../dateutils';
 
-const PAGES_COUNT = 100;
-const NEAR_EDGE_THRESHOLD = 10;
+const PAGES_COUNT = 30;
+export const NEAR_EDGE_THRESHOLD = 10;
 export const INITIAL_PAGE = Math.floor(PAGES_COUNT / 2);