ExpandableCalendar - disable auto date selection (#2628)

* upgrade rn73

* additional fixes

* remove react-navigation

* Use modal instead of navigation

* removing packageManager

* removing react navigation

* downgrade eslint-plugin-prettier

* updating eslint rules

* removing deprecated rule

* edit eslintrc

* prettier to warn

* fix lint errors

* fix react hooks ts error

* move tests to src

* lint and unit tests config fix

* some test cleanups

* Adding BasicDay test driver

* fix drivers

* fix text style

* skip failing tests (custom renders and events)

* remove only testing dependency

* fix lint

* Day state - move selected from manager to components

* UpdateSource - add arrow press and week arrow press (separate from page scroll)

* Provider - add selectedDate to separate selected day marking state from the date responsible for functionality

* remove consoles

* Provider - add disableAutoDaySelection prop to pass navigation types to disable auto day selection

* Fix tests for new update sources

* move selected to state manager

* change context date to selectedDate

* state default value

* revert change

* fix test to count for selectedDate instead of date

Author: Inbal-Tish

example/src/screens/expandableCalendarScreen.tsx

@@ -73,6 +73,7 @@ const ExpandableCalendarScreen = (props: Props) => {
       // disabledOpacity={0.6}
       theme={todayBtnTheme.current}
       // todayBottomMargin={16}
+      // disableAutoDaySelection={[ExpandableCalendar.navigationTypes.MONTH_SCROLL, ExpandableCalendar.navigationTypes.MONTH_ARROWS]}
     >
       {weekView ? (
         <WeekCalendar testID={testIDs.weekCalendar.CONTAINER} firstDay={1} markedDates={marked.current}/>

src/calendar/__tests__/index.spec.js

@@ -165,7 +165,7 @@ describe('Calendar', () => {
         const date = '2020-04-01';
         const fakeToday = new Date('2020-04-01T12:00:00.002Z');
         advanceTo(fakeToday);
-        const context = {date: '2020-04-02'};
+        const context = {selectedDate: '2020-04-02'};
         const drv = new CalendarDriver(<Calendar {...props} theme={{todayTextColor, todayBackgroundColor}} context={context}/>);
         expect(drv.getDay(date).getStyle()).toEqual(partial({backgroundColor: todayBackgroundColor, borderRadius: 16}));
         expect(drv.getDay(date).getTextStyle()).toEqual(partial({color: todayTextColor}));

src/calendar/index.tsx

@@ -188,22 +188,21 @@ const Calendar = (props: CalendarProps & ContextProp) => {
   };
 
   const renderDay = (day: XDate, id: number) => {
-    const dayProps = extractDayProps(props);
-
     if (!sameMonth(day, currentMonth) && hideExtraDays) {
       return <View key={id} style={style.current.emptyDayContainer}/>;
     }
 
+    const dayProps = extractDayProps(props);
     const dateString = toMarkingFormat(day);
-    const isControlled = isEmpty(props.context);
+    const disableDaySelection = isEmpty(props.context);
 
     return (
       <View style={style.current.dayContainer} key={id}>
         <Day
           {...dayProps}
           testID={`${testID}.day_${dateString}`}
           date={dateString}
-          state={getState(day, currentMonth, props, isControlled)}
+          state={getState(day, currentMonth, props, disableDaySelection)}
           marking={markedDates?.[dateString]}
           onPress={_onDayPress}
           onLongPress={onLongPressDay}

src/day-state-manager.ts

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

src/expandableCalendar/Context/Provider.tsx

@@ -1,3 +1,4 @@
+import {includes} from 'lodash';
 import XDate from 'xdate';
 
 import React, {useRef, useState, useCallback, useMemo} from 'react';
@@ -7,7 +8,7 @@ import {sameMonth} from '../../dateutils';
 import {xdateToData} from '../../interface';
 import {useDidUpdate} from '../../hooks';
 import {Theme, DateData} from '../../types';
-import {UpdateSources} from '../commons';
+import {UpdateSources, CalendarNavigationTypes} from '../commons';
 import styleConstructor from '../style';
 import CalendarContext from './index';
 import TodayButton, {TodayButtonImperativeMethods} from './todayButton';
@@ -23,6 +24,8 @@ export interface CalendarContextProviderProps extends ViewProps {
   onDateChanged?: (date: string, updateSource: UpdateSources) => void;
   /** Callback for month change event */
   onMonthChange?: (date: DateData, updateSource: UpdateSources) => void;
+  /** The calendar navigation type in which to disable the auto day selection (get options from ExpandableCalendar.navigationTypes) */
+  disableAutoDaySelection?: CalendarNavigationTypes[];
 
   /** Whether to show the today button */
   showTodayButton?: boolean;
@@ -49,6 +52,7 @@ const CalendarProvider = (props: CalendarContextProviderProps) => {
     date,
     onDateChanged,
     onMonthChange,
+    disableAutoDaySelection,
     showTodayButton = false,
     disabledOpacity,
     todayBottomMargin,
@@ -63,6 +67,7 @@ const CalendarProvider = (props: CalendarContextProviderProps) => {
   const prevDate = useRef(date);
   const currDate = useRef(date); // for setDate only to keep prevDate up to date
   const [currentDate, setCurrentDate] = useState(date);
+  const [selectedDate, setSelectedDate] = useState(date);
   const [updateSource, setUpdateSource] = useState(UpdateSources.CALENDAR_INIT);
 
   const wrapperStyle = useMemo(() => {
@@ -79,6 +84,9 @@ const CalendarProvider = (props: CalendarContextProviderProps) => {
     prevDate.current = currDate.current;
     currDate.current = date;
     setCurrentDate(date);
+    if (!includes(disableAutoDaySelection, updateSource as string)) {
+      setSelectedDate(date);
+    }
     setUpdateSource(updateSource);
 
     onDateChanged?.(date, updateSource);
@@ -98,6 +106,7 @@ const CalendarProvider = (props: CalendarContextProviderProps) => {
     return {
       date: currentDate,
       prevDate: prevDate.current,
+      selectedDate,
       updateSource: updateSource,
       setDate: _setDate,
       setDisabled: _setDisabled,

src/expandableCalendar/Context/calendarProvider.api.json

@@ -35,6 +35,11 @@
       "type": "(date: DateData, updateSource: UpdateSource) => void",
       "description": "Handler which gets executed when the month changes"
     },
+    {
+      "name": "disableAutoDaySelection",
+      "type": "CalendarNavigationTypes[]",
+      "description": "The calendar navigation type in which to disable the auto day selection (get options from ExpandableCalendar.navigationTypes)"
+    },
     {
       "name": "showTodayButton",
       "type": "boolean",

src/expandableCalendar/Context/index.ts

@@ -3,6 +3,7 @@ import {UpdateSources} from '../commons';
 export interface CalendarContextProps {
   date: string;
   prevDate: string;
+  selectedDate: string;
   setDate: (date: string, source: UpdateSources) => void;
   updateSource: UpdateSources;
   setDisabled: (disable: boolean) => void;

src/expandableCalendar/__tests__/index.spec.ts

@@ -185,8 +185,8 @@ describe('ExpandableCalendar', () => {
         jest.runAllTimers();
         const expectedDate = today.clone().setDate(1).addMonths(direction === Direction.RIGHT ? 1 : -1);
         driver.pressOnHeaderArrow({left: direction === Direction.LEFT});
-        expect(onDateChanged).toHaveBeenCalledWith(toMarkingFormat(expectedDate), UpdateSources.PAGE_SCROLL);
-        expect(onMonthChange).toHaveBeenCalledWith(xdateToData(expectedDate), UpdateSources.PAGE_SCROLL);
+        expect(onDateChanged).toHaveBeenCalledWith(toMarkingFormat(expectedDate), UpdateSources.ARROW_PRESS);
+        expect(onMonthChange).toHaveBeenCalledWith(xdateToData(expectedDate), UpdateSources.ARROW_PRESS);
       });
 
       it(`should call onDateChanged and onMonthChanged for first day in initial month when changing to initial month`, () => {
@@ -197,8 +197,8 @@ describe('ExpandableCalendar', () => {
         driver.pressOnHeaderArrow({left: true});
         jest.runAllTimers();
         const expectedDate = today.clone().setDate(1);
-        expect(onDateChanged).toHaveBeenNthCalledWith(2, toMarkingFormat(expectedDate), UpdateSources.PAGE_SCROLL);
-        expect(onMonthChange).toHaveBeenNthCalledWith(2, xdateToData(expectedDate), UpdateSources.PAGE_SCROLL);
+        expect(onDateChanged).toHaveBeenNthCalledWith(2, toMarkingFormat(expectedDate), UpdateSources.ARROW_PRESS);
+        expect(onMonthChange).toHaveBeenNthCalledWith(2, xdateToData(expectedDate), UpdateSources.ARROW_PRESS);
       });
 
       it(`should navigate 6 months ahead and back successfully`, () => {
@@ -209,13 +209,13 @@ describe('ExpandableCalendar', () => {
         });
         jest.runAllTimers();
         const expectedFutureDate = today.clone().setDate(1).addMonths(6);
-        expect(onDateChanged).toHaveBeenNthCalledWith(6, toMarkingFormat(expectedFutureDate), UpdateSources.PAGE_SCROLL);
-        expect(onMonthChange).toHaveBeenNthCalledWith(6, xdateToData(expectedFutureDate), UpdateSources.PAGE_SCROLL);
+        expect(onDateChanged).toHaveBeenNthCalledWith(6, toMarkingFormat(expectedFutureDate), UpdateSources.ARROW_PRESS);
+        expect(onMonthChange).toHaveBeenNthCalledWith(6, xdateToData(expectedFutureDate), UpdateSources.ARROW_PRESS);
         times(6, () => driver.pressOnHeaderArrow({left: true}));
         jest.runAllTimers();
         const expectedDate = today.clone().setDate(1);
-        expect(onDateChanged).toHaveBeenNthCalledWith(12, toMarkingFormat(expectedDate), UpdateSources.PAGE_SCROLL);
-        expect(onMonthChange).toHaveBeenNthCalledWith(12, xdateToData(expectedDate), UpdateSources.PAGE_SCROLL);
+        expect(onDateChanged).toHaveBeenNthCalledWith(12, toMarkingFormat(expectedDate), UpdateSources.ARROW_PRESS);
+        expect(onMonthChange).toHaveBeenNthCalledWith(12, xdateToData(expectedDate), UpdateSources.ARROW_PRESS);
       });
     });
   });
@@ -247,14 +247,14 @@ describe('ExpandableCalendar', () => {
         const currentDay = today.getDay();
         const expectedDate = today.clone().addDays(direction === Direction.LEFT ? -(currentDay + 7) : (7 - currentDay));
         driver.pressOnHeaderArrow({left: direction === Direction.LEFT});
-        expect(onDateChanged).toHaveBeenCalledWith(toMarkingFormat(expectedDate), UpdateSources.PAGE_SCROLL);
+        expect(onDateChanged).toHaveBeenCalledWith(toMarkingFormat(expectedDate), UpdateSources.WEEK_ARROW_PRESS);
       });
 
       it(`should call onDateChanged for first day of initial week when changing to initial week`, () => {
         driver.pressOnHeaderArrow({left: false});
         driver.pressOnHeaderArrow({left: true});
         const expectedDate = today.clone().addDays(-(today.getDay()));
-        expect(onDateChanged).toHaveBeenNthCalledWith(2, toMarkingFormat(expectedDate), UpdateSources.PAGE_SCROLL);
+        expect(onDateChanged).toHaveBeenNthCalledWith(2, toMarkingFormat(expectedDate), UpdateSources.WEEK_ARROW_PRESS);
       });
 
       it('should fetch next weeks when in last week of the list', () => {
@@ -270,7 +270,7 @@ describe('ExpandableCalendar', () => {
         const diff = Math.ceil(((endOfMonth.getUTCDate() + 1) - today.getUTCDate()) / 7) + ((today.getUTCDay() > endOfMonth.getUTCDay()) ? 1 : 0);
         const expectedDate = today.clone().setDate(today.getDate() + 7 * diff - today.getDay());
         times(diff, () => driver.pressOnHeaderArrow({left: false}));
-        expect(onMonthChange).toHaveBeenCalledWith(xdateToData(expectedDate), UpdateSources.PAGE_SCROLL);
+        expect(onMonthChange).toHaveBeenCalledWith(xdateToData(expectedDate), UpdateSources.WEEK_ARROW_PRESS);
       });
     });
   });

src/expandableCalendar/commons.ts

@@ -2,10 +2,21 @@ export const todayString = 'today';
 
 export enum UpdateSources {
   CALENDAR_INIT = 'calendarInit',
+  PROP_UPDATE = 'propUpdate',
   TODAY_PRESS = 'todayPress',
-  LIST_DRAG = 'listDrag',
   DAY_PRESS = 'dayPress',
+  ARROW_PRESS = 'arrowPress',
+  WEEK_ARROW_PRESS = 'weekArrowPress',
+  LIST_DRAG = 'listDrag',
   PAGE_SCROLL = 'pageScroll',
-  WEEK_SCROLL = 'weekScroll',
-  PROP_UPDATE = 'propUpdate'
+  WEEK_SCROLL = 'weekScroll'
+}
+
+export enum CalendarNavigationTypes {
+  AGENDA_SCROLL = UpdateSources.LIST_DRAG,
+  MONTH_SCROLL = UpdateSources.PAGE_SCROLL,
+  WEEK_SCROLL = UpdateSources.WEEK_SCROLL,
+  MONTH_ARROWS = UpdateSources.ARROW_PRESS,
+  WEEK_ARROWS = UpdateSources.WEEK_ARROW_PRESS,
+  TODAY_PRESS = UpdateSources.TODAY_PRESS
 }

src/expandableCalendar/index.tsx

@@ -40,7 +40,7 @@ import Week from './week';
 import WeekCalendar from './WeekCalendar';
 import Context from './Context';
 import constants from '../commons/constants';
-import {UpdateSources} from './commons';
+import {UpdateSources, CalendarNavigationTypes} from './commons';
 
 export enum Positions {
   CLOSED = 'closed',
@@ -316,7 +316,7 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
     }
   };
 
-  const scrollPage = useCallback((next: boolean) => {
+  const scrollPage = useCallback((next: boolean, updateSource = UpdateSources.PAGE_SCROLL) => {
     if (horizontal) {
       const d = parseDate(date);
 
@@ -339,7 +339,7 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
         }
       }
 
-      setDate?.(toMarkingFormat(d), UpdateSources.PAGE_SCROLL);
+      setDate?.(toMarkingFormat(d), updateSource);
     }
   }, [horizontal, isOpen, firstDay, numberOfDays, setDate, date]);
 
@@ -464,12 +464,12 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
 
   const _onPressArrowLeft = useCallback((method: () => void, month?: XDate) => {
     onPressArrowLeft?.(method, month);
-    scrollPage(false);
+    scrollPage(false, isOpen ? UpdateSources.ARROW_PRESS: UpdateSources.WEEK_ARROW_PRESS);
   }, [onPressArrowLeft, scrollPage]);
 
   const _onPressArrowRight = useCallback((method: () => void, month?: XDate) => {
     onPressArrowRight?.(method, month);
-    scrollPage(true);
+    scrollPage(true, isOpen ? UpdateSources.ARROW_PRESS: UpdateSources.WEEK_ARROW_PRESS);
   }, [onPressArrowRight, scrollPage]);
 
   const _onDayPress = useCallback((value: DateData) => {
@@ -652,6 +652,7 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
 export default Object.assign(ExpandableCalendar, {
   displayName: 'ExpandableCalendar',
   positions: Positions,
+  navigationTypes: CalendarNavigationTypes,
   defaultProps: {
     horizontal: true,
     initialPosition: Positions.CLOSED,