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

Author: Inbal-Tish

.buildkite/pipeline.yml

@@ -1,5 +1,3 @@
-agents:
-  queue: mbms
 env:
   LC_ALL: 'en_US'
 steps:
@@ -34,4 +32,4 @@ steps:
       npm run build:ts
       if [[ $BUILDKITE_PULL_REQUEST == 'false' ]];then
         npm run release
-      fi
+      fi

.eslintrc.js

@@ -29,6 +29,8 @@ module.exports = {
     'react/jsx-uses-vars': 2,
     '@typescript-eslint/no-use-before-define': 0,
     '@typescript-eslint/no-var-requires': 0,
-    '@typescript-eslint/explicit-function-return-type': 0
+    '@typescript-eslint/explicit-function-return-type': 0,
+    '@typescript-eslint/ban-types': 0,
+    '@typescript-eslint/ban-ts-comment': 1
   }
 };

example/src/mocks/theme.ts

@@ -1,4 +1,4 @@
-import {Platform} from "react-native";
+import {Platform} from 'react-native';
 
 export const themeColor = '#00AAAF';
 export const lightThemeColor = '#f2f7f7';
@@ -16,18 +16,18 @@ export function getTheme() {
     monthTextColor: 'black',
     textMonthFontSize: 16,
     textMonthFontFamily: 'HelveticaNeue',
-    textMonthFontWeight: 'bold' as 'bold',
+    textMonthFontWeight: 'bold' as const,
     // day names
     textSectionTitleColor: 'black',
     textDayHeaderFontSize: 12,
     textDayHeaderFontFamily: 'HelveticaNeue',
-    textDayHeaderFontWeight: 'normal' as 'normal',
+    textDayHeaderFontWeight: 'normal' as const,
     // dates
     dayTextColor: themeColor,
     todayTextColor: '#af0078',
     textDayFontSize: 18,
     textDayFontFamily: 'HelveticaNeue',
-    textDayFontWeight: '500' as '500',
+    textDayFontWeight: '500' as const,
     textDayStyle: {marginTop: Platform.OS === 'android' ? 2 : 4},
     // selected date
     selectedDayBackgroundColor: themeColor,

package.json

@@ -52,8 +52,8 @@
     "@types/react": "^17.0.44",
     "@types/react-native": "^0.64.19",
     "@types/xdate": "^0.8.32",
-    "@typescript-eslint/eslint-plugin": "^2.13.0",
-    "@typescript-eslint/parser": "^2.13.0",
+    "@typescript-eslint/eslint-plugin": "^4.0.0",
+    "@typescript-eslint/parser": "^4.0.0",
     "@welldone-software/why-did-you-render": "^6.0.3",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
@@ -82,7 +82,7 @@
     "typescript": "^4.3.3"
   },
   "optionalDependencies": {
-    "moment": "^2.24.0"
+    "moment": "^2.29.4"
   },
   "jest": {
     "preset": "react-native",

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;

src/utils/__tests__/Playground.perf.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {measurePerformance} from 'reassure';
-import {Calendar, CalendarList} from '../../index';
+import {Calendar, CalendarList, ExpandableCalendar} from '../../index';
 
 const INITIAL_DATE = '2022-07-07';