feat(AgendaList): allow user to control debounce in scrollToSection

Author: saurabhjarial-smartdings

docsRNC/docs/Components/AgendaList.md

@@ -46,6 +46,11 @@ Whether to block the date change in calendar (and calendar context provider) whe
 Whether to enable scrolling the agenda list to the next date with content when pressing a day without content  
 <span style={{color: 'grey'}}>boolean</span>
 
+### scrollToSectionDebounce
+
+Delay applied when scrolling to the next date in the agenda after selecting a day, ensuring smooth navigation
+<span style={{color: 'grey'}}>number</span>
+
 ### viewOffset
 
 Offset scroll to the section  

src/expandableCalendar/AgendaListsCommon.tsx

@@ -23,6 +23,8 @@ export interface AgendaListProps extends SectionListProps<any, DefaultSectionT>
   viewOffset?: number;
   /** enable scrolling the agenda list to the next date with content when pressing a day without content */
   scrollToNextEvent?: boolean;
+  /** debounce in scroll to section. Default = 1000 */
+  scrollToSectionDebounce?: number;
   /**
    * @experimental
    * If defined, uses InfiniteList instead of SectionList. This feature is experimental and subject to change.

src/expandableCalendar/agendaList.api.json

@@ -47,6 +47,11 @@
       "type": "boolean",
       "description": "Whether to enable scrolling the agenda list to the next date with content when pressing a day without content"
     },
+    {
+      "name": "scrollToSectionDebounce",
+      "type": "number",
+      "description": "Delay applied when scrolling to the next date in the agenda after selecting a day, ensuring smooth navigation."
+    },
     {
       "name": "viewOffset",
       "type": "number",

src/expandableCalendar/agendaList.tsx

@@ -64,6 +64,7 @@ const AgendaList = (props: AgendaListProps) => {
     useMoment,
     markToday = true,
     onViewableItemsChanged,
+    scrollToSectionDebounce = 1000
   } = props;
 
   const {date, updateSource, setDate, setDisabled} = useContext(Context);
@@ -159,7 +160,7 @@ const AgendaList = (props: AgendaListProps) => {
         viewOffset: (constants.isAndroid ? sectionHeight.current : 0) + viewOffset
       });
     }
-  }, 1000, {leading: false, trailing: true}), [viewOffset, sections]);
+  }, scrollToSectionDebounce, {leading: false, trailing: true}), [viewOffset, sections]);
 
   const _onViewableItemsChanged = useCallback((info: {viewableItems: Array<ViewToken>; changed: Array<ViewToken>}) => {
     if (info?.viewableItems && !sectionScroll.current) {
@@ -256,5 +257,6 @@ AgendaList.propTypes = {
   useMoment: PropTypes.bool,
   markToday: PropTypes.bool,
   sectionStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-  avoidDateUpdates: PropTypes.bool
+  avoidDateUpdates: PropTypes.bool,
+  scrollToSectionDebounce: PropTypes.number
 };

src/expandableCalendar/infiniteAgendaList.tsx

@@ -46,6 +46,7 @@ const InfiniteAgendaList = ({
   renderItem,
   onEndReached,
   onEndReachedThreshold,
+  scrollToSectionDebounce = 1000,
   ...others
 }: Omit<AgendaListProps, 'viewOffset'>) => {
   const {date, updateSource, setDate} = useContext(Context);
@@ -145,7 +146,7 @@ const InfiniteAgendaList = ({
         _onMomentumScrollEnd(); // the RecyclerListView doesn't trigger onMomentumScrollEnd when calling scrollToSection
       }, 500);
     }
-  }, 1000, {leading: false, trailing: true}), [sections]);
+  }, scrollToSectionDebounce, {leading: false, trailing: true}), [sections]);
 
   const layoutProvider = useMemo(
     () => new LayoutProvider(
@@ -261,5 +262,6 @@ InfiniteAgendaList.propTypes = {
   useMoment: PropTypes.bool,
   markToday: PropTypes.bool,
   sectionStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-  avoidDateUpdates: PropTypes.bool
+  avoidDateUpdates: PropTypes.bool,
+  scrollToSectionDebounce: PropTypes.number
 };