Merge branches 'feat/Calendar_initialDate' and 'master' of github.com:wix/react-native-calendars into feat/Calendar_initialDate

# Conflicts:
#	src/calendar/index.tsx

Author: Inbal-Tish

CHANGELOG.md

@@ -759,14 +759,35 @@
 - CalendarConsumer - fix passed ref (PR #1674).
 - Agenda - fix style Typo (animatedContainer -> animatedContainer) (PR #1670).
 
-## changed
+## Changed
 - Migrating internal tools to TS.
 - Migrating demo files to TS.
 
 ## [1.1270.0] - 2021-11-29
 - testIDs - reverting to js file with module.exports.
 
-## [1.1271.0] - 2021-xx-xx
+## [1.1271.0] - 2021-12-7
 
 ## Fixed
-- ContextProvider - 'onDateChanged' return type.
+- ContextProvider - 'onDateChanged' return type (should be 'string' and not 'Date').
+
+
+## [1.1272.0] - xx-xx-xx
+
+## Added
+- ExpandableCalendar - Add 'closeOnDayPress' prop (PR #1673).
+- new theme prop - 'weekVerticalMargin' to control week row margin (PR #1682).
+
+## Fixed
+- README - 'try it out' section missing steps (PR #1624).
+- Day - fix accessibility label localization (PR #1694).
+- Agenda - renders only for the first item of the day (PR #1699).
+- ExpandableCalendar - Only hide extra days when vertical and open (PR #1705).
+- ts configuration.
+
+## Changed
+- Replacing lodash 'invoke' with optional chaining.
+- Removing JS 'Date' as a type.
+- Calendar and CalendarList - removing unused parameter 'doNotTriggerListeners' from updateMonth().
+- 'input.js' - renaming 'velocityTracker'.
+- 'test.js' - renaming 'testUtils' and removing from folder.

README.md

@@ -12,7 +12,9 @@ You can run example module by performing these steps:
 
 ```
 $ git clone [email protected]:wix/react-native-calendars.git
+$ cd react-native-calendars
 $ npm install
+$ cd ios && pod install && cd ..
 $ react-native run-ios
 ```
 

example/src/screens/calendars.tsx

@@ -1,7 +1,6 @@
 import React, {useState, Fragment} from 'react';
 import {StyleSheet, View, ScrollView, Text, TouchableOpacity, Switch} from 'react-native';
-// @ts-expect-error
-import {Calendar} from 'react-native-calendars';
+import {Calendar, CalendarProps} from 'react-native-calendars';
 import testIDs from '../testIDs';
 
 const INITIAL_DATE = '2020-02-02';
@@ -14,7 +13,7 @@ const CalendarsScreen = () => {
     setShowMarkedDatesExamples(!showMarkedDatesExamples);
   };
 
-  const onDayPress = day => {
+  const onDayPress: CalendarProps['onDayPress'] = day => {
     setSelected(day.dateString);
   };
 
@@ -349,7 +348,7 @@ const CalendarsScreen = () => {
             return (
               <View>
                 <Text style={[styles.customDay, state === 'disabled' ? styles.disabledText : styles.defaultText]}>
-                  {date.day}
+                  {date?.day}
                 </Text>
               </View>
             );
@@ -362,6 +361,7 @@ const CalendarsScreen = () => {
   const renderCalendarWithCustomHeader = () => {
     const CustomHeader = React.forwardRef((props, ref) => {
       return (
+        // @ts-expect-error
         <View ref={ref} {...props} style={styles.customHeader}>
           <Text>This is a custom header!</Text>
           <TouchableOpacity onPress={() => console.warn('Tapped!')}>

package.json

@@ -43,7 +43,7 @@
     "@babel/eslint-parser": "^7.13.4",
     "@babel/runtime": "^7.12.5",
     "@types/lodash": "^4.14.170",
-    "@types/react-native": "^0.63.52",
+    "@types/react-native": "^0.64.19",
     "@types/xdate": "^0.8.32",
     "@typescript-eslint/eslint-plugin": "^2.13.0",
     "@typescript-eslint/parser": "^2.13.0",

src/agenda/index.tsx

@@ -1,4 +1,3 @@
-import invoke from 'lodash/invoke';
 import PropTypes from 'prop-types';
 import XDate from 'xdate';
 import memoize from 'memoize-one';
@@ -20,7 +19,7 @@ import {parseDate, xdateToData, toMarkingFormat} from '../interface';
 import {weekDayNames, sameDate, sameMonth} from '../dateutils';
 // @ts-expect-error
 import {AGENDA_CALENDAR_KNOB} from '../testIDs';
-import {VelocityTracker} from '../input';
+import {VelocityTracker} from '../velocityTracker';
 import {DateData} from '../types';
 import styleConstructor from './style';
 import CalendarList, {CalendarListProps} from '../calendar-list';
@@ -203,7 +202,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
       calendarScrollable: enable
     });
 
-    invoke(this.props, 'onCalendarToggled', enable);
+    this.props.onCalendarToggled?.(enable);
 
     // Enlarge calendarOffset here as a workaround on iOS to force repaint.
     // Otherwise the month after current one or before current one remains invisible.
@@ -223,7 +222,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
           firstReservationLoad: true
         },
         () => {
-          invoke(this.props, 'loadItemsForMonth', xdateToData(this.state.selectedDay));
+          this.props.loadItemsForMonth?.(xdateToData(this.state.selectedDay));
         }
       );
     }
@@ -241,7 +240,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
       selectedDay: day.clone()
     });
 
-    invoke(this.props, 'onCalendarToggled', false);
+    this.props.onCalendarToggled?.(false);
 
     if (!optimisticScroll) {
       this.setState({
@@ -252,8 +251,8 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
     this.setScrollPadPosition(this.initialScrollPadPosition(), true);
     this.calendar?.current?.scrollToDay(day, this.calendarOffset(), true);
 
-    invoke(this.props, 'loadItemsForMonth', xdateToData(day));
-    invoke(this.props, 'onDayPress', xdateToData(day));
+    this.props.loadItemsForMonth?.(xdateToData(day));
+    this.props.onDayPress?.(xdateToData(day));
   }
 
   generateMarkings = memoize((selectedDay, markedDates, items = {}) => {
@@ -324,14 +323,14 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
   };
 
   onVisibleMonthsChange = (months: DateData[]) => {
-    invoke(this.props, 'onVisibleMonthsChange', months);
+    this.props.onVisibleMonthsChange?.(months);
 
     if (this.props.items && !this.state.firstReservationLoad) {
       clearTimeout(this.scrollTimeout);
 
       this.scrollTimeout = setTimeout(() => {
         if (this._isMounted) {
-          invoke(this.props, 'loadItemsForMonth', months[0]);
+          this.props.loadItemsForMonth?.(months[0]);
         }
       }, 200);
     }
@@ -346,7 +345,7 @@ export default class Agenda extends Component<AgendaProps, AgendaState> {
       selectedDay: newDate
     });
 
-    invoke(this.props, 'onDayChange', xdateToData(newDate));
+    this.props.onDayChange?.(xdateToData(newDate));
   };
 
   renderReservations() {

src/agenda/reservation-list/index.tsx

@@ -1,4 +1,3 @@
-import invoke from 'lodash/invoke';
 import isFunction from 'lodash/isFunction';
 import PropTypes from 'prop-types';
 import XDate from 'xdate';
@@ -11,7 +10,7 @@ import {sameDate} from '../../dateutils';
 import {toMarkingFormat} from '../../interface';
 import styleConstructor from './style';
 import Reservation, {ReservationProps} from './reservation';
-import {ReservationItemType, ReservationsType} from 'agenda';
+import {ReservationItemType, ReservationsType} from '../../agenda';
 
 
 export interface DayReservations {
@@ -30,7 +29,7 @@ export type ReservationListProps = ReservationProps & {
   /** Show items only for the selected day. Default = false */
   showOnlySelectedDayItems: boolean;
   /** callback that gets called when day changes while scrolling agenda list */
-  onDayChange?: (day: Date) => void;
+  onDayChange?: (day: XDate) => void;
   /** specify what should be rendered instead of ActivityIndicator */
   renderEmptyData: () => JSX.Element;
   style?: StyleProp<ViewStyle>;
@@ -228,7 +227,7 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
 
   onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     const yOffset = event.nativeEvent.contentOffset.y;
-    invoke(this.props, 'onScroll', yOffset);
+    this.props.onScroll?.(yOffset);
 
     let topRowOffset = 0;
     let topRow;
@@ -246,7 +245,7 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
     const dateIsSame = sameDate(day, this.selectedDay);
     if (!dateIsSame && this.scrollOver) {
       this.selectedDay = day.clone();
-      invoke(this.props, 'onDayChange', day.clone());
+      this.props.onDayChange?.(day.clone());
     }
   };
 
@@ -279,7 +278,7 @@ class ReservationList extends Component<ReservationListProps, ReservationsListSt
     const {reservations, selectedDay, theme, style} = this.props;
     if (!reservations || !reservations[toMarkingFormat(selectedDay)]) {
       if (isFunction(this.props.renderEmptyData)) {
-        return invoke(this.props, 'renderEmptyData');
+        return this.props.renderEmptyData?.();
       }
 
       return <ActivityIndicator style={this.style.indicator} color={theme?.indicatorColor} />;

src/agenda/reservation-list/reservation.tsx

@@ -19,8 +19,8 @@ export interface ReservationProps {
   theme: Theme;
   /** specify your item comparison function for increased performance */
   rowHasChanged?: (a: any, b: any) => boolean;
-  /** specify how each date should be rendered. day can be undefined if the item is not first in that day */
-  renderDay?: (date: XDate, item?: DayReservations) => React.Component;
+  /** specify how each date should be rendered. date can be undefined if the item is not first in that day */
+  renderDay?: (date?: XDate, item?: DayReservations) => React.Component;
   /** specify how each item should be rendered in agenda */
   renderItem?: (reservation: any, isFirst: boolean) => React.Component;
   /** specify how empty date content with no items should be rendered */
@@ -75,7 +75,7 @@ class Reservation extends Component<ReservationProps> {
   }
 
   renderDate(date?: XDate, item?: DayReservations) {
-    if (isFunction(this.props.renderDay) && date) {
+    if (isFunction(this.props.renderDay)) {
       return this.props.renderDay(date, item);
     }
 

src/calendar-list/index.tsx

@@ -1,4 +1,3 @@
-import invoke from 'lodash/invoke';
 import PropTypes from 'prop-types';
 import XDate from 'xdate';
 
@@ -250,20 +249,17 @@ class CalendarList extends Component<Props, State> {
     this.updateMonth(this.state.currentMonth.clone().addMonths(count, true));
   };
 
-  updateMonth(day: XDate, doNotTriggerListeners = false) {
+  updateMonth(day: XDate) {
     if (day.toString('yyyy MM') === this.state.currentMonth.toString('yyyy MM')) {
       return;
     }
 
     this.setState({currentMonth: day.clone()}, () => {
       this.scrollToMonth(this.state.currentMonth);
 
-      if (!doNotTriggerListeners) {
-        const currMont = this.state.currentMonth.clone();
-
-        invoke(this.props, 'onMonthChange', xdateToData(currMont));
-        invoke(this.props, 'onVisibleMonthsChange', [xdateToData(currMont)]);
-      }
+      const currMont = this.state.currentMonth.clone();
+      this.props.onMonthChange?.(xdateToData(currMont));
+      this.props.onVisibleMonthsChange?.([xdateToData(currMont)]);
     });
   }
 
@@ -298,7 +294,7 @@ class CalendarList extends Component<Props, State> {
       }
     }
 
-    invoke(this.props, 'onVisibleMonthsChange', visibleMonths);
+    this.props.onVisibleMonthsChange?.(visibleMonths);
 
     this.setState({
       // @ts-expect-error

src/calendar/day/basic/driver.js

@@ -1,6 +1,6 @@
 import {ComponentDriver} from 'react-component-driver';
 import Day from '.';
-import {extractStyles} from '../../../../test';
+import {extractStyles} from '../../../testUtils';
 
 export class BasicDayDriver extends ComponentDriver {
   constructor() {

src/calendar/day/basic/index.tsx

@@ -1,11 +1,10 @@
-import invoke from 'lodash/invoke';
 import values from 'lodash/values';
 import PropTypes from 'prop-types';
 
 import React, {Component, Fragment} from 'react';
 import {TouchableOpacity, Text, View} from 'react-native';
 
-import {Theme, DateData, DayState, MarkingTypes} from '../../../types';
+import {Theme, DayState, MarkingTypes, DateData} from '../../../types';
 import {shouldUpdate} from '../../../componentUpdater';
 import styleConstructor from './style';
 import Marking, {MarkingProps} from '../marking';
@@ -19,11 +18,11 @@ export interface BasicDayProps {
   /** Theme object */
   theme?: Theme;
   /** onPress callback */
-  onPress?: (date: DateData) => void;
+  onPress?: (date?: DateData) => void;
   /** onLongPress callback */
-  onLongPress?: (date: Date) => void;
+  onLongPress?: (date?: DateData) => void;
   /** The date to return from press callbacks */
-  date?: Date;
+  date?: DateData;
   /** Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates*/
   disableAllTouchEventsForDisabledDays?: boolean;
   /** Disable all touch events for inactive days. can be override with disableTouchEvent in markedDates*/
@@ -73,11 +72,11 @@ export default class BasicDay extends Component<BasicDayProps> {
   }
 
   onPress = () => {
-    invoke(this.props, 'onPress', this.props.date);
+    this.props.onPress?.(this.props.date);
   };
 
   onLongPress = () => {
-    invoke(this.props, 'onLongPress', this.props.date);
+    this.props.onLongPress?.(this.props.date);
   };
 
   get marking() {