Merge branch 'master' of github.com:wix/react-native-calendars into release

Author: Inbal-Tish

.buildkite/pipeline.yml

@@ -1,3 +1,5 @@
+agents:
+  queue: mbms
 env:
   LC_ALL: 'en_US'
 steps:

android/build.gradle

@@ -33,6 +33,20 @@ buildscript {
 
 allprojects {
     repositories {
+        exclusiveContent {
+           // We get React Native's Android binaries exclusively through npm,
+           // from a local Maven repo inside node_modules/react-native/.
+           // (The use of exclusiveContent prevents looking elsewhere like Maven Central
+           // and potentially getting a wrong version.)
+           filter {
+               includeGroup "com.facebook.react"
+           }
+           forRepository {
+               maven {
+                   url "$rootDir/../node_modules/react-native/android"
+               }
+           }
+        }
         mavenCentral {
             // We don't want to fetch react-native from Maven Central as there are
             // older versions over there.

package.json

@@ -73,7 +73,7 @@
     "react": "17.0.2",
     "react-component-driver": "^0.10.0",
     "react-native": "0.68.3",
-    "react-native-navigation": "^7.29.0",
+    "react-native-navigation": "7.30.0",
     "react-recipes": "^1.4.0",
     "react-test-renderer": "^17.0.2",
     "reassure": "^0.4.1",
@@ -91,7 +91,7 @@
       "./jest-setup.js"
     ],
     "testMatch": [
-      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx}"
+      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts}"
     ],
     "transformIgnorePatterns": [
       "node_modules/(?!(@react-native|react-native|react-native-swipe-gestures)/)"

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';
@@ -16,7 +16,7 @@ import {extractCalendarProps} from '../../componentUpdater';
 import CalendarContext from '../Context';
 import {useDidUpdate} from '../../hooks';
 
-const NUMBER_OF_PAGES = 6;
+export const NUMBER_OF_PAGES = 6;
 const NUM_OF_ITEMS = NUMBER_OF_PAGES * 2 + 1; // NUMBER_OF_PAGES before + NUMBER_OF_PAGES after + current
 const APPLY_ANDROID_FIX = constants.isAndroid && constants.isRTL;
 
@@ -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/__test__/expandableCalendarTestKit.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  CalendarContextProviderProps,
+  CalendarProvider,
+  ExpandableCalendar,
+  ExpandableCalendarProps
+} from 'react-native-calendars';
+import {toMarkingFormat} from '../../interface';
+
+const XDate = require('xdate');
+
+const today = new XDate();
+export const testIdExpandableCalendar = 'myExpandableCalendar';
+
+export const expandableCalendarTestIDs = (testId: string) => {
+  return {
+    leftArrow: `${testId}.leftArrow`,
+    rightArrow: `${testId}.rightArrow`,
+  };
+};
+export const generateExpandableCalendarWithContext = ({
+  expandableCalendarProps,
+  calendarContextProps,
+}: {
+  expandableCalendarProps?: Partial<ExpandableCalendarProps>;
+  calendarContextProps?: Partial<CalendarContextProviderProps>;
+} = {}) => {
+  const defaultContextProps: CalendarContextProviderProps = {
+    date: toMarkingFormat(today),
+    showTodayButton: true,
+  };
+  const defaultExpandableCalendarProps: ExpandableCalendarProps = {
+    testID: testIdExpandableCalendar,
+  };
+
+  return (
+    <CalendarProvider {...defaultContextProps} {...calendarContextProps}>
+      <ExpandableCalendar {...defaultExpandableCalendarProps} {...expandableCalendarProps}/>
+    </CalendarProvider>
+  );
+};