Merge pull request #1810 from wix/feat/improveInfiniteList

Feat/improve infinite list

Author: Inbal-Tish

src/commons/useCombinedRefs.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const useCombinedRefs = (...refs: React.Ref<any>[]) => {
+  const targetRef = React.useRef();
+
+  React.useEffect(() => {
+    refs.forEach(ref => {
+      if (!ref) {
+        return;
+      }
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current);
+      } else {
+        // @ts-expect-error
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+
+  return targetRef;
+};
+
+export default useCombinedRefs;

src/expandableCalendar/WeekCalendar/new.tsx

@@ -43,14 +43,6 @@ const WeekCalendar = (props: WeekCalendarProps) => {
     return [{width: containerWidth}, props.style];
   }, [containerWidth, props.style]);
 
-  // NOTE: Responsible for sync scroll position after reloading new items
-  useEffect(() => {
-    setTimeout(() => {
-      // @ts-expect-error
-      list.current?.scrollToOffset?.(NUMBER_OF_PAGES * containerWidth, 0, false);
-    }, 0);
-  }, [items]);
-
   useEffect(() => {
     if (updateSource !== UpdateSources.WEEK_SCROLL) {
       const pageIndex = items.findIndex(item => sameWeek(item, date, firstDay));
@@ -76,12 +68,12 @@ const WeekCalendar = (props: WeekCalendarProps) => {
     [items]
   );
 
-  const onReachEdge = useCallback(
+  const reloadPages = useCallback(
     pageIndex => {
       const date = items[pageIndex];
       setItems(getDatesArray(date, firstDay, NUMBER_OF_PAGES));
     },
-    [items, containerWidth]
+    [items]
   );
 
   const renderItem = useCallback(
@@ -123,13 +115,14 @@ const WeekCalendar = (props: WeekCalendarProps) => {
           ref={list}
           data={items}
           renderItem={renderItem}
+          reloadPages={reloadPages}
+          onReachNearEdgeThreshold={Math.round(NUMBER_OF_PAGES * 0.4)}
           extendedState={extraData}
           style={style.current.container}
           initialPageIndex={NUMBER_OF_PAGES}
           pageHeight={48}
           pageWidth={containerWidth}
           onPageChange={onPageChange}
-          onReachEdge={onReachEdge}
           scrollViewProps={{
             showsHorizontalScrollIndicator: false
           }}

src/infinite-list/index.tsx

@@ -1,10 +1,13 @@
 // TODO: Make this a common component for all horizontal lists in this lib
-import React, {forwardRef, useCallback, useMemo, useRef} from 'react';
+import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
 import {ScrollViewProps} from 'react-native';
 import {DataProvider, LayoutProvider, RecyclerListView, RecyclerListViewProps} from 'recyclerlistview';
 import inRange from 'lodash/inRange';
+import debounce from 'lodash/debounce';
+import noop from 'lodash/noop';
 
 import constants from '../commons/constants';
+import useCombinedRefs from '../commons/useCombinedRefs';
 
 const dataProviderMaker = (items: string[]) => new DataProvider((item1, item2) => item1 !== item2).cloneWithRows(items);
 
@@ -20,12 +23,14 @@ export interface InfiniteListProps
   onReachNearEdgeThreshold?: number;
   initialPageIndex?: number;
   scrollViewProps?: ScrollViewProps;
+  reloadPages?: (pageIndex: number) => void;
 }
 
 const InfiniteList = (props: InfiniteListProps, ref: any) => {
   const {
     renderItem,
     data,
+    reloadPages = noop,
     pageWidth = constants.screenWidth,
     pageHeight = constants.screenHeight,
     onPageChange,
@@ -50,13 +55,23 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
     )
   );
 
+  const listRef = useCombinedRefs(ref);
   const pageIndex = useRef<number>();
   const isOnEdge = useRef(false);
   const isNearEdge = useRef(false);
   const scrolledByUser = useRef(false);
+  const reloadPagesDebounce = useCallback(debounce(reloadPages, 500, {leading: false, trailing: true}), [reloadPages]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      // @ts-expect-error
+      listRef.current?.scrollToOffset?.(Math.floor(data.length / 2) * pageWidth, 0, false);
+    }, 0);
+  }, [data]);
 
   const onScroll = useCallback(
     (event, offsetX, offsetY) => {
+      reloadPagesDebounce?.cancel();
       const newPageIndex = Math.round(event.nativeEvent.contentOffset.x / pageWidth);
 
       if (pageIndex.current !== newPageIndex) {
@@ -81,20 +96,22 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
 
       props.onScroll?.(event, offsetX, offsetY);
     },
-    [props.onScroll, onPageChange, data.length]
+    [props.onScroll, onPageChange, data.length, reloadPagesDebounce]
   );
 
   const onMomentumScrollEnd = useCallback(
     event => {
       if (isOnEdge.current) {
         onReachEdge?.(pageIndex.current!);
+        reloadPagesDebounce?.(pageIndex.current);
       } else if (isNearEdge.current) {
+        reloadPagesDebounce?.(pageIndex.current);
         onReachNearEdge?.(pageIndex.current!);
       }
 
       scrollViewProps?.onMomentumScrollEnd?.(event);
     },
-    [scrollViewProps?.onMomentumScrollEnd, onReachEdge, onReachNearEdge]
+    [scrollViewProps?.onMomentumScrollEnd, onReachEdge, onReachNearEdge, reloadPagesDebounce]
   );
 
   const onScrollBeginDrag = useCallback(() => {
@@ -107,7 +124,8 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
 
   return (
     <RecyclerListView
-      ref={ref}
+      // @ts-expect-error
+      ref={listRef}
       isHorizontal
       rowRenderer={renderItem}
       dataProvider={dataProvider}