fix(infiniteAgendaList): fixes (#2311)

* Fix _onMomentumScrollEnd not called after first scroll, prevent scrollToIndex if same date as current

* Fix _onMomentumScrollEnd not called after first scroll, prevent scrollToIndex if same date as current

* Fix _onMomentumScrollEnd not called after first scroll, prevent scrollToIndex if same date as current

* Revert "Allow passing listStyle to the infiniteAgendaList to allow control the RecyclerListView style (#2286)"

This reverts commit c4bd90f.

* Prevent jump on onEndReach

Author: yakirza17

src/expandableCalendar/agendaList.tsx

@@ -21,8 +21,7 @@ import {
   NativeScrollEvent,
   LayoutChangeEvent,
   ViewToken,
-  TextProps,
-  StyleProp
+  TextProps
 } from 'react-native';
 
 import {useDidUpdate} from '../hooks';
@@ -70,7 +69,6 @@ export interface AgendaListProps extends SectionListProps<any, DefaultSectionT>
     titleHeight?: number;
     visibleIndicesChangedDebounce?: number;
     renderFooter?: () => React.ReactElement | null;
-    style?: StyleProp<ViewStyle>;
   };
 }
 

src/expandableCalendar/infiniteAgendaList.tsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import isUndefined from 'lodash/isUndefined';
 import debounce from 'lodash/debounce';
-import InfiniteList, {InfiniteListProps} from '../infinite-list';
+import InfiniteList from '../infinite-list';
 
 import XDate from 'xdate';
 
@@ -58,12 +58,14 @@ const InfiniteAgendaList = (props: AgendaListProps) => {
   const didScroll = useRef(false);
   const sectionScroll = useRef(false);
   const [data, setData] = useState([] as any[]);
+  const dataRef = useRef(data);
 
   useEffect(() => {
     const items = sections.reduce((acc: any, cur: any) => {
       return [...acc, {title: cur.title, isTitle: true}, ...cur.data];
     }, []);
     setData(items);
+    dataRef.current = items;
 
     if (date !== _topSection.current) {
       setTimeout(() => {
@@ -128,29 +130,34 @@ const InfiniteAgendaList = (props: AgendaListProps) => {
     return sectionTitle;
   }, []);
 
-  const scrollToSection = useCallback(debounce((d) => {
-    const sectionIndex = scrollToNextEvent ? getNextSectionIndex(d) : getSectionIndex(d);
+  const scrollToSection = useCallback(debounce((requestedDate) => {
+    const sectionIndex = scrollToNextEvent ? getNextSectionIndex(requestedDate) : getSectionIndex(requestedDate);
     if (isUndefined(sectionIndex)) {
       return;
     }
 
     if (list?.current && sectionIndex !== undefined) {
       sectionScroll.current = true; // to avoid setDate() in _onVisibleIndicesChanged
-      _topSection.current = sections[findItemTitleIndex(sectionIndex)]?.title;
+      if (requestedDate !== _topSection.current) {
+        _topSection.current = sections[findItemTitleIndex(sectionIndex)]?.title;
+        list.current?.scrollToIndex(sectionIndex, true);
+      }
 
-      list.current?.scrollToIndex(sectionIndex, true);
+      setTimeout(() => {
+        _onMomentumScrollEnd(); // the RecyclerListView doesn't trigger onMomentumScrollEnd when calling scrollToSection
+      }, 500);
     }
-  }, 1000, {leading: false, trailing: true}), [ sections]);
+  }, 1000, {leading: false, trailing: true}), [sections]);
 
   const layoutProvider = useMemo(
     () => new LayoutProvider(
-      (index) => data[index]?.isTitle ? 'title': 'page',
+      (index) => dataRef.current[index]?.isTitle ? 'title': 'page',
       (type, dim) => {
         dim.width = constants.screenWidth;
         dim.height = type === 'title' ? infiniteListProps?.titleHeight ?? 60 : infiniteListProps?.itemHeight ?? 80;
       }
     ),
-    [data]
+    []
   );
 
   const _onScroll = useCallback((rawEvent: any) => {
@@ -233,7 +240,7 @@ const InfiniteAgendaList = (props: AgendaListProps) => {
       ref={list}
       renderItem={_renderItem}
       data={data}
-      style={infiniteListProps?.style as InfiniteListProps['style']}
+      style={style.current.container}
       layoutProvider={layoutProvider}
       onScroll={_onScroll}
       onVisibleIndicesChanged={_onVisibleIndicesChanged}

src/infinite-list/index.tsx

@@ -53,7 +53,6 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
     onScroll,
     onEndReached,
     renderFooter,
-    style,
   } = props;
 
   const dataProvider = useMemo(() => {
@@ -161,9 +160,9 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
     };
   }, [onScrollBeginDrag, onMomentumScrollEnd, scrollViewProps, isHorizontal]);
 
-  const _style = useMemo(() => {
-    return [{height: pageHeight}, style];
-  }, [pageHeight, style]);
+  const style = useMemo(() => {
+    return {height: pageHeight};
+  }, [pageHeight]);
 
   return (
     <RecyclerListView
@@ -177,7 +176,7 @@ const InfiniteList = (props: InfiniteListProps, ref: any) => {
       initialRenderIndex={initialPageIndex}
       renderAheadOffset={5 * pageWidth}
       onScroll={_onScroll}
-      style={_style}
+      style={style}
       scrollViewProps={scrollViewPropsMemo}
       onEndReached={onEndReached}
       onEndReachedThreshold={onEndReachedThreshold}