Timeline calendar num of days issues

src/dateutils.ts

@@ -20,7 +20,30 @@ export function sameDate(a?: XDate, b?: XDate) {
     return false;
   } else {
     return a?.getFullYear() === b?.getFullYear() && a?.getMonth() === b?.getMonth() && a?.getDate() === b?.getDate();
-  } 
+  }
+}
+
+export function onSameDAteRange({
+  firstDay,
+  secondDay,
+  numberOfDays,
+  firstDateInRange,
+}: {
+  firstDay: string;
+  secondDay: string;
+  numberOfDays: number;
+  firstDateInRange: string;
+}){
+  const aDate = new XDate(firstDay);
+  const bDate = new XDate(secondDay);
+  const firstDayDate = new XDate(firstDateInRange);
+  const aDiff = aDate.getTime() - firstDayDate.getTime();
+  const bDiff = bDate.getTime() - firstDayDate.getTime();
+  const aTotalDays = Math.ceil(aDiff / (1000 * 3600 * 24));
+  const bTotalDays = Math.ceil(bDiff / (1000 * 3600 * 24));
+  const aWeek = Math.floor(aTotalDays / numberOfDays);
+  const bWeek = Math.floor(bTotalDays / numberOfDays);
+  return aWeek === bWeek;
 }
 
 export function sameWeek(a: string, b: string, firstDayOfWeek: number) {

src/day-state-manager.ts

@@ -2,11 +2,11 @@ const {isToday, isDateNotInRange, sameMonth} = require('./dateutils');
 const {toMarkingFormat} = require('./interface');
 
 
-export function getState(day: XDate, current: XDate, props: any) {
+export function getState(day: XDate, current: XDate, props: any, disableDaySelection?: boolean) {
   const {minDate, maxDate, disabledByDefault, context} = props;
   let state = '';
 
-  if ((context?.date ?? toMarkingFormat(current)) === toMarkingFormat(day)) {
+  if (!disableDaySelection && ((context?.date ?? toMarkingFormat(current)) === toMarkingFormat(day))) {
     state = 'selected';
   } else if (isToday(day)) {
     state = 'today';

src/expandableCalendar/WeekCalendar/index.tsx

@@ -3,7 +3,7 @@ import XDate from 'xdate';
 import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {FlatList, View, ViewToken} from 'react-native';
 
-import {sameWeek} from '../../dateutils';
+import {sameWeek, onSameDAteRange} from '../../dateutils';
 import {toMarkingFormat} from '../../interface';
 import {DateData} from '../../types';
 import styleConstructor from '../style';
@@ -36,7 +36,7 @@ const WeekCalendar = (props: WeekCalendarProps) => {
     hideDayNames,
     current,
     theme,
-    testID
+    testID,
   } = props;
   const context = useContext(CalendarContext);
   const {allowShadow = true, ...calendarListProps} = props;
@@ -50,9 +50,23 @@ const WeekCalendar = (props: WeekCalendarProps) => {
   const list = useRef<FlatList>(null);
   const currentIndex = useRef(NUMBER_OF_PAGES);
 
+  useDidUpdate(() => {
+    items.current = getDatesArray(date, firstDay, numberOfDays);
+    setListData(items.current);
+    visibleWeek.current = date;
+  }, [numberOfDays]);
+
   useDidUpdate(() => {
     if (updateSource !== UpdateSources.WEEK_SCROLL) {
-      const pageIndex = items.current.findIndex(item => sameWeek(item, date, firstDay));
+      const pageIndex = items.current.findIndex(
+        item => isCustomNumberOfDays(numberOfDays) ?
+          onSameDAteRange({
+            firstDay: item,
+            secondDay: date,
+            numberOfDays: numberOfDays as number,
+            firstDateInRange: item
+          }) :
+          sameWeek(item, date, firstDay));
       if (pageIndex !== currentIndex.current) {
         if (pageIndex >= 0) {
           visibleWeek.current = items.current[pageIndex];
@@ -206,6 +220,14 @@ const WeekCalendar = (props: WeekCalendarProps) => {
   );
 };
 
+function getDateForDayRange(date: string, weekIndex: number, numberOfDays: number) {
+  const d = new XDate(date);
+  if (weekIndex !== 0) {
+    d.addDays(numberOfDays * weekIndex);
+  }
+  return toMarkingFormat(d);
+}
+
 function getDate(date: string, firstDay: number, weekIndex: number, numberOfDays?: number) {
   const d = new XDate(date);
   // get the first day of the week as date (for the on scroll mark)
@@ -225,10 +247,17 @@ function getDate(date: string, firstDay: number, weekIndex: number, numberOfDays
 
 function getDatesArray(date: string, firstDay: number, numberOfDays?: number) {
   return [...Array(NUM_OF_ITEMS).keys()].map((index) => {
-    return getDate(date, firstDay, index - NUMBER_OF_PAGES, numberOfDays);
+    if(isCustomNumberOfDays(numberOfDays)) {
+      return getDateForDayRange(date, index - NUMBER_OF_PAGES, numberOfDays as number);
+    }
+    return getDate(date, firstDay, index - NUMBER_OF_PAGES);
   });
 }
 
+function isCustomNumberOfDays(numberOfDays?: number) {
+  return numberOfDays && numberOfDays > 1;
+}
+
 WeekCalendar.displayName = 'WeekCalendar';
 
 export default WeekCalendar;

src/expandableCalendar/index.tsx

@@ -38,7 +38,7 @@ enum Positions {
 }
 const SPEED = 20;
 const BOUNCINESS = 6;
-const CLOSED_HEIGHT = constants.isIOS ? 116 : 120; // header + 1 week
+const CLOSED_HEIGHT = 120; // header + 1 week
 const WEEK_HEIGHT = 46;
 const DAY_NAMES_PADDING = 24;
 const PAN_GESTURE_THRESHOLD = 30;
@@ -174,12 +174,17 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
     return CLOSED_HEIGHT + (WEEK_HEIGHT * (numberOfWeeks.current - 1)) + (hideKnob ? 12 : KNOB_CONTAINER_HEIGHT) + (constants.isAndroid ? 3 : 0);
   };
   const openHeight = useRef(getOpenHeight());
-  const closedHeight = useRef(CLOSED_HEIGHT + (hideKnob || Number(numberOfDays) > 1 ? 0 : KNOB_CONTAINER_HEIGHT));
+  const closedHeight = useMemo(() => CLOSED_HEIGHT + (hideKnob || Number(numberOfDays) > 1 ? 0 : KNOB_CONTAINER_HEIGHT), [numberOfDays, hideKnob]);
 
-  const startHeight = isOpen ? openHeight.current : closedHeight.current;
+  const startHeight = useMemo(() => isOpen ? openHeight.current : closedHeight, [closedHeight, isOpen]);
   const _height = useRef(startHeight);
+  const deltaY = useMemo(() => new Animated.Value(startHeight), [startHeight]);
+
+  useEffect(() => {
+    _height.current = startHeight;
+    deltaY.setValue(startHeight);
+  }, [startHeight]);
 
-  const deltaY = useRef(new Animated.Value(startHeight));
   const headerDeltaY = useRef(new Animated.Value(isOpen ? -HEADER_HEIGHT : 0));
 
   /** Components' refs */
@@ -221,7 +226,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
         paddingRight: isNumber(rightPaddings) ? rightPaddings + 6 : DAY_NAMES_PADDING
       }
     ];
-  }, [calendarStyle, numberOfDays]);
+  }, [calendarStyle]);
 
   const animatedHeaderStyle = useMemo(() => {
     return [style.current.header, {height: HEADER_HEIGHT + 10, top: headerDeltaY.current}];
@@ -236,8 +241,8 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
   }, [allowShadow, propsStyle]);
 
   const wrapperStyle = useMemo(() => {
-    return {height: deltaY.current};
-  }, [deltaY.current]);
+    return {height: deltaY};
+  }, [deltaY]);
 
   /** Effects */
 
@@ -319,7 +324,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
   const handlePanResponderMove = (_: GestureResponderEvent, gestureState: PanResponderGestureState) => {
     // limit min height to closed height
-    _wrapperStyles.current.style.height = Math.max(closedHeight.current, _height.current + gestureState.dy);
+    _wrapperStyles.current.style.height = Math.max(closedHeight, _height.current + gestureState.dy);
 
     if (!horizontal) {
       // vertical CalenderList header
@@ -354,15 +359,15 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
   const bounceToPosition = (toValue = 0) => {
     if (!disablePan) {
-      const threshold = isOpen ? openHeight.current - closeThreshold : closedHeight.current + openThreshold;
+      const threshold = isOpen ? openHeight.current - closeThreshold : closedHeight + openThreshold;
       let _isOpen = _height.current >= threshold;
-      const newValue = _isOpen ? openHeight.current : closedHeight.current;
+      const newValue = _isOpen ? openHeight.current : closedHeight;
 
-      deltaY.current.setValue(_height.current); // set the start position for the animated value
+      deltaY.setValue(_height.current); // set the start position for the animated value
       _height.current = toValue || newValue;
       _isOpen = _height.current >= threshold; // re-check after _height.current was set
 
-      Animated.spring(deltaY.current, {
+      Animated.spring(deltaY, {
         toValue: _height.current,
         speed: SPEED,
         bounciness: BOUNCINESS,
@@ -371,7 +376,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
       onCalendarToggled?.(_isOpen);
 
-      setPosition(() => _height.current === closedHeight.current ? Positions.CLOSED : Positions.OPEN);
+      setPosition(() => _height.current === closedHeight ? Positions.CLOSED : Positions.OPEN);
       closeHeader(_isOpen);
       resetWeekCalendarOpacity(_isOpen);
     }
@@ -399,14 +404,14 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
     setTimeout(() => {
       // to allows setDate to be completed
       if (isOpen) {
-        bounceToPosition(closedHeight.current);
+        bounceToPosition(closedHeight);
       }
     }, 0);
-  }, [isOpen]);
+  }, [isOpen, closedHeight]);
 
   const toggleCalendarPosition = useCallback(() => {
-    bounceToPosition(isOpen ? closedHeight.current : openHeight.current);
-  }, [isOpen, bounceToPosition]);
+    bounceToPosition(isOpen ? closedHeight : openHeight.current);
+  }, [isOpen, bounceToPosition, closedHeight]);
 
   /** Events */
 
@@ -552,7 +557,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
   const _headerStyle = useMemo(() => {
     return [numberOfDaysHeaderStyle, props.headerStyle];
-  }, [props.headerStyle]);
+  }, [props.headerStyle, numberOfDaysHeaderStyle]);
 
   const renderCalendarList = () => {
     return (

src/expandableCalendar/week.tsx

@@ -39,6 +39,10 @@ const Week = React.memo((props: WeekProps) => {
   } = props;
   const style = useRef(styleConstructor(theme));
 
+  const disableDaySelection = useMemo(() => {
+    return !!numberOfDays && numberOfDays > 1;
+  }, [numberOfDays]);
+
   const getWeek = useCallback((date?: string) => {
     if (date) {
       return getWeekDates(date, firstDay);
@@ -60,15 +64,14 @@ const Week = React.memo((props: WeekProps) => {
       }
     }
     const dayString = toMarkingFormat(day);
-
     return (
       <View style={style.current.dayContainer} key={id}>
         <Day
           {...dayProps}
           testID={`${testID}.day_${dayString}`}
           date={dayString}
-          state={getState(day, currXdate, props)}
-          marking={markedDates?.[dayString]}
+          state={getState(day, currXdate, props, disableDaySelection)}
+          marking={disableDaySelection ? {...markedDates?.[dayString], disableTouchEvent: true} : markedDates?.[dayString]}
           onPress={onDayPress}
           onLongPress={onDayLongPress}
         />

src/timeline-list/index.tsx

@@ -60,21 +60,24 @@ const TimelineList = (props: TimelineListProps) => {
   const {pages, pagesRef, resetPages, resetPagesDebounce, scrollToPageDebounce, shouldResetPages, isOutOfRange} =
     useTimelinePages({date, listRef, numberOfDays});
 
-  useEffect(() => {
-    if (date !== prevDate.current) {
-      const datePageIndex = pagesRef.current.indexOf(date);
-
-      if (updateSource !== UpdateSources.LIST_DRAG) {
-        if (isOutOfRange(datePageIndex)) {
-          updateSource === UpdateSources.DAY_PRESS ? resetPages(date) : resetPagesDebounce(date);
-        } else {
-          scrollToPageDebounce(datePageIndex);
-        }
+  const scrollToCurrentDate = useCallback((date: string) => {
+    const datePageIndex = pagesRef.current.indexOf(date);
+
+    if (updateSource !== UpdateSources.LIST_DRAG) {
+      if (isOutOfRange(datePageIndex)) {
+        updateSource === UpdateSources.DAY_PRESS ? resetPages(date) : resetPagesDebounce(date);
+      } else {
+        scrollToPageDebounce(datePageIndex);
       }
+    }
+    prevDate.current = date;
+  }, [updateSource]);
 
-      prevDate.current = date;
+  useEffect(() => {
+    if (date !== prevDate.current) {
+      scrollToCurrentDate(date);
     }
-  }, [date, updateSource]);
+  }, [date]);
 
   const onScroll = useCallback(() => {
     if (shouldResetPages.current) {

src/timeline-list/useTimelinePages.ts

@@ -23,13 +23,16 @@ const UseTimelinePages = ({date, listRef, numberOfDays}: UseTimelinePagesProps)
       return generateDay(date, numberOfDays * (i - Math.floor(PAGES_COUNT / 2)));
     })
   );
+
   const [pages, setPages] = useState<string[]>(pagesRef.current);
   const shouldResetPages = useRef(false);
 
   useEffect(() => {
-    setPages(times(PAGES_COUNT, i => {
+    const updatedDays = times(PAGES_COUNT, i => {
       return generateDay(date, numberOfDays * (i - Math.floor(PAGES_COUNT / 2)));
-    }));
+    });
+    pagesRef.current = updatedDays;
+    setPages(updatedDays);
   }, [numberOfDays]);
 
   const isOutOfRange = useCallback((index: number) => {