Calendar - fix double selection (#2126)

* Calendar - fix double selection

* typing the context

Author: Inbal-Tish

src/calendar-list/index.tsx

@@ -10,6 +10,7 @@ import {xdateToData, parseDate, toMarkingFormat} from '../interface';
 import {page, sameDate, sameMonth} from '../dateutils';
 import constants from '../commons/constants';
 import {useDidUpdate} from '../hooks';
+import {ContextProp} from '../types';
 import styleConstructor from './style';
 import Calendar, {CalendarProps} from '../calendar';
 import CalendarListItem from './item';
@@ -51,7 +52,7 @@ export interface CalendarListImperativeMethods {
  * @example: https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendarsList.js
  * @gif: https://github.com/wix/react-native-calendars/blob/master/demo/assets/calendar-list.gif
  */
-const CalendarList = (props: CalendarListProps, ref: any) => {
+const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
   useImperativeHandle(ref, () => ({
     scrollToDay: (date: XDate | string, offset: number, animated: boolean) => {
       scrollToDay(date, offset, animated);

src/calendar-list/item.tsx

@@ -1,12 +1,11 @@
 import XDate from 'xdate';
-import React, {useRef, useMemo, useContext, useCallback} from 'react';
+import React, {useRef, useMemo, useCallback} from 'react';
 import {Text} from 'react-native';
 import {Theme} from '../types';
 import {toMarkingFormat} from '../interface';
 import {extractCalendarProps} from '../componentUpdater';
 import styleConstructor from './style';
 import Calendar, {CalendarProps} from '../calendar';
-import CalendarContext from '../expandableCalendar/Context';
 
 export type CalendarListItemProps = CalendarProps & {
   item: any;
@@ -32,7 +31,6 @@ const CalendarListItem = React.memo((props: CalendarListItemProps) => {
     onPressArrowRight,
     visible
   } = props;
-  const context = useContext(CalendarContext);
 
   const style = useRef(styleConstructor(theme));
 
@@ -100,7 +98,6 @@ const CalendarListItem = React.memo((props: CalendarListItemProps) => {
       disableMonthChange
       onPressArrowLeft={horizontal ? _onPressArrowLeft : onPressArrowLeft}
       onPressArrowRight={horizontal ? _onPressArrowRight : onPressArrowRight}
-      context={context} // ???
     />
   );
 });

src/calendar/index.tsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import XDate from 'xdate';
-
+import isEmpty from 'lodash/isEmpty';
 import React, {useRef, useState, useEffect, useCallback, useMemo} from 'react';
 import {View, ViewStyle, StyleProp} from 'react-native';
 // @ts-expect-error
@@ -11,7 +11,7 @@ import {page, isGTE, isLTE, sameMonth} from '../dateutils';
 import {xdateToData, parseDate, toMarkingFormat} from '../interface';
 import {getState} from '../day-state-manager';
 import {extractHeaderProps, extractDayProps} from '../componentUpdater';
-import {DateData, Theme, MarkedDates} from '../types';
+import {DateData, Theme, MarkedDates, ContextProp} from '../types';
 import {useDidUpdate} from '../hooks';
 import styleConstructor from './style';
 import CalendarHeader, {CalendarHeaderProps} from './header';
@@ -70,7 +70,7 @@ export interface CalendarProps extends CalendarHeaderProps, DayProps {
  * @example: https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.js
  * @gif: https://github.com/wix/react-native-calendars/blob/master/demo/assets/calendar.gif
  */
-const Calendar = (props: CalendarProps) => {
+const Calendar = (props: CalendarProps & ContextProp) => {
   const {
     initialDate,
     current,
@@ -198,14 +198,15 @@ const Calendar = (props: CalendarProps) => {
     }
 
     const dateString = toMarkingFormat(day);
+    const isControlled = isEmpty(props.context);
 
     return (
       <View style={style.current.dayContainer} key={id}>
         <Day
           {...dayProps}
           testID={`${testID}.day_${dateString}`}
           date={dateString}
-          state={getState(day, currentMonth, props)}
+          state={getState(day, currentMonth, props, isControlled)}
           marking={markedDates?.[dateString]}
           onPress={_onDayPress}
           onLongPress={onLongPressDay}

src/expandableCalendar/index.tsx

@@ -583,6 +583,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
         numberOfDays={numberOfDays}
         headerStyle={_headerStyle}
         timelineLeftInset={timelineLeftInset}
+        context={useContext(Context)}
       />
     );
   };

src/types.ts

@@ -1,6 +1,10 @@
 import {ViewStyle, TextStyle} from 'react-native';
 import {MarkingProps} from './calendar/day/marking';
+import {CalendarContextProps} from './expandableCalendar/Context';
 
+export type ContextProp = {
+  context?: CalendarContextProps;
+}
 export type MarkingTypes = 'dot' | 'multi-dot' | 'period' | 'multi-period' | 'custom';
 export type MarkedDates = {
   [key: string]: MarkingProps;