Merge pull request #1750 from wix/infra/InfiniteList

Convert HorizontalList to InfiniteList

Author: Inbal-Tish

src/infinite-list/index.tsx

@@ -0,0 +1,121 @@
+// TODO: Make this a common component for all horizontal lists in this lib
+import React, {forwardRef, useCallback, useMemo, useRef} from 'react';
+import {ScrollViewProps} from 'react-native';
+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);
+
+export interface InfiniteListProps
+  extends Omit<RecyclerListViewProps, 'dataProvider' | 'layoutProvider' | 'rowRenderer'> {
+  data: any[];
+  renderItem: RecyclerListViewProps['rowRenderer'];
+  pageWidth?: number;
+  pageHeight?: number;
+  onPageChange?: (pageIndex: number, prevPageIndex: number) => void;
+  onReachEdge?: (pageIndex: number) => void;
+  onReachNearEdge?: (pageIndex: number) => void;
+  onReachNearEdgeThreshold?: number;
+  initialPageIndex?: number;
+  scrollViewProps?: ScrollViewProps;
+}
+
+const InfiniteList = (props: InfiniteListProps, ref: any) => {
+  const {
+    renderItem,
+    data,
+    pageWidth = constants.screenWidth,
+    pageHeight = constants.screenHeight,
+    onPageChange,
+    onReachEdge,
+    onReachNearEdge,
+    onReachNearEdgeThreshold,
+    initialPageIndex = 0,
+    extendedState,
+    scrollViewProps
+  } = props;
+  const dataProvider = useMemo(() => {
+    return dataProviderMaker(data);
+  }, [data]);
+
+  const layoutProvider = useRef(
+    new LayoutProvider(
+      () => 'page',
+      (_type, dim) => {
+        dim.width = pageWidth;
+        dim.height = pageHeight;
+      }
+    )
+  );
+
+  const pageIndex = useRef<number>();
+  const isOnEdge = useRef(false);
+  const isNearEdge = useRef(false);
+
+  const onScroll = useCallback(
+    (event, offsetX, offsetY) => {
+      const newPageIndex = Math.round(event.nativeEvent.contentOffset.x / pageWidth);
+
+      if (pageIndex.current !== newPageIndex) {
+        if (pageIndex.current !== undefined) {
+          onPageChange?.(newPageIndex, pageIndex.current);
+
+          isOnEdge.current = false;
+          isNearEdge.current = false;
+
+          if (newPageIndex === 0 || newPageIndex === data.length - 1) {
+            isOnEdge.current = true;
+          } else if (onReachNearEdgeThreshold && !inRange(newPageIndex, onReachNearEdgeThreshold, data.length - onReachNearEdgeThreshold)) {
+            isNearEdge.current = true;
+          }
+        }
+        pageIndex.current = newPageIndex;
+      }
+
+      props.onScroll?.(event, offsetX, offsetY);
+    },
+    [props.onScroll, onPageChange, data.length]
+  );
+
+  const onMomentumScrollEnd = useCallback(
+    event => {
+      if (isOnEdge.current) {
+        onReachEdge?.(pageIndex.current!);
+      } else if (isNearEdge.current) {
+        onReachNearEdge?.(pageIndex.current!);
+      }
+
+      scrollViewProps?.onMomentumScrollEnd?.(event);
+    },
+    [scrollViewProps?.onMomentumScrollEnd, onReachEdge, onReachNearEdge]
+  );
+
+  const style = useMemo(() => {
+    return {height: pageHeight};
+  }, [pageHeight]);
+
+  return (
+    <RecyclerListView
+      ref={ref}
+      isHorizontal
+      rowRenderer={renderItem}
+      dataProvider={dataProvider}
+      layoutProvider={layoutProvider.current}
+      extendedState={extendedState}
+      initialRenderIndex={initialPageIndex}
+      renderAheadOffset={5 * pageWidth}
+      onScroll={onScroll}
+      style={style}
+      scrollViewProps={{
+        pagingEnabled: true,
+        bounces: false,
+        ...scrollViewProps,
+        onMomentumScrollEnd
+      }}
+    />
+  );
+};
+
+export default forwardRef(InfiniteList);

src/timeline-list/HorizontalList.tsx

@@ -1,13 +1,12 @@
 import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
 // import {Text} from 'react-native';
-import identity from 'lodash/identity';
 import throttle from 'lodash/throttle';
 
 import Context from '../expandableCalendar/Context';
 import {UpdateSources} from '../expandableCalendar/commons';
 import Timeline, {TimelineProps} from '../timeline/Timeline';
-import HorizontalList from './HorizontalList';
-import useTimelinePages, {INITIAL_PAGE} from './useTimelinePages';
+import InfiniteList from '../infinite-list';
+import useTimelinePages, {INITIAL_PAGE, NEAR_EDGE_THRESHOLD} from './useTimelinePages';
 
 export interface TimelineListProps {
   events: {[date: string]: TimelineProps['events']};
@@ -29,7 +28,6 @@ const TimelineList = (props: TimelineListProps) => {
     scrollToPageDebounce,
     shouldResetPages,
     isOutOfRange,
-    isNearEdges
   } = useTimelinePages({date, listRef});
 
   useEffect(() => {
@@ -65,15 +63,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);
   }, []);
@@ -104,16 +102,17 @@ const TimelineList = (props: TimelineListProps) => {
   );
 
   return (
-    <HorizontalList
+    <InfiniteList
       ref={listRef}
       data={pages}
       renderItem={renderPage}
       onPageChange={onPageChange}
+      onReachNearEdge={onReachNearEdge}
+      onReachNearEdgeThreshold={NEAR_EDGE_THRESHOLD}
       onScroll={onScroll}
       extendedState={{todayEvents: events[date], pages}}
       initialPageIndex={INITIAL_PAGE}
       scrollViewProps={{
-        keyExtractor: identity,
         onMomentumScrollEnd
       }}
     />

src/timeline-list/index.tsx

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