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

…elease

.buildkite/pipeline.yml

@@ -27,9 +27,9 @@ steps:
   - label: "Build"
     command: |
       nvm install
-      npm install
-      npm run test
-      npm run build:ts
+      yarn
+      yarn test
+      yarn build:ts
       if [[ $BUILDKITE_PULL_REQUEST == 'false' ]];then
-        npm run release
+        yarn release
       fi

.gitignore

@@ -1,7 +1,6 @@
 node_modules
 npm-debug.log
 .idea
-yarn.lock
 .vscode
 package-lock.json
 

.node-version

@@ -1 +1 @@
-18
+20

.yarnrc

@@ -0,0 +1 @@
+--registry "https://registry.npmjs.org/"

README.md

@@ -5,8 +5,7 @@
 ## A declarative cross-platform React Native calendar component for iOS and Android.
 
 [![Version](https://img.shields.io/npm/v/react-native-calendars.svg)](https://www.npmjs.com/package/react-native-calendars)
-[![Build Status](https://travis-ci.org/wix/react-native-calendars.svg?branch=master)](https://travis-ci.org/wix/react-native-calendars)
-
+[![Build status](https://badge.buildkite.com/1a911fa39db2518a615b73f3dc18ec0938a66403f2ad66f79b.svg)](https://buildkite.com/wix-mobile-oss/react-native-calendars)
 <br>
 
 This module includes information on how to use this customizable **React Native** calendar component.
@@ -40,7 +39,7 @@ $ git clone [email protected]:wix/react-native-calendars.git
 
 $ cd react-native-calendars
 
-$ npm install
+$ yarn install
 
 $ cd ios && pod install && cd ..
 
@@ -57,14 +56,6 @@ Here's how to get started with react-native-calendars in your React Native proje
 
 ### Install the package:
 
-Using `npm`:
-
-```
-$ npm install --save react-native-calendars
-```
-
-Using `Yarn`:
-
 ```
 $ yarn add react-native-calendars
 ```
@@ -197,13 +188,6 @@ export default App;
 ### Adding a global theme to the calendar:
 
 ```javascript
-import React, { useState } from 'react';
-import { Calendar, LocaleConfig } from 'react-native-calendars';
-
-const App = () => {
-  const [selected, setSelected] = useState('');
-
-  return (
     <Calendar
       style={{
         borderWidth: 1,
@@ -218,7 +202,9 @@ const App = () => {
         selectedDayTextColor: '#ffffff',
         todayTextColor: '#00adf5',
         dayTextColor: '#2d4150',
-        textDisabledColor: '#d9e
+        textDisabledColor: '#dd99ee'
+      }}
+    </Calendar>
 ```
 
 ## Customized Calendar Examples
@@ -282,7 +268,7 @@ We welcome contributions to react-native-calendars.
 
 If you have an idea for a new feature or have discovered a bug, please open an issue.
 
-Please `npm run test` and `npm run lint` before pushing changes.
+Please `yarn test` and `yarn lint` before pushing changes.
 
 Don't forget to add a **title** and a **description** explaining the issue you're trying to solve and your proposed solution.
 

example/src/mocks/agendaItems.ts

@@ -28,7 +28,7 @@ function getPastDate(numberOfDays: number) {
 export const agendaItems = [
   {
     title: dates[0],
-    data: [{hour: '12am', duration: '1h', title: 'First Yoga'}]
+    data: [{hour: '12am', duration: '1h', title: 'First Yoga'}, {hour: '9am', duration: '1h', title: 'Long Yoga', itemCustomHeightType: 'LongEvent'}],
   },
   {
     title: dates[1],
@@ -63,13 +63,13 @@ export const agendaItems = [
     ]
   },
   {
-    title: dates[6], 
+    title: dates[6],
     data: [
       {hour: '12am', duration: '1h', title: 'Ashtanga Yoga'}
     ]
   },
   {
-    title: dates[7], 
+    title: dates[7],
     data: [{}]
   },
   {
@@ -90,7 +90,7 @@ export const agendaItems = [
     ]
   },
   {
-    title: dates[10], 
+    title: dates[10],
     data: [
       {hour: '12am', duration: '1h', title: 'Last Yoga'}
     ]
@@ -104,13 +104,13 @@ export const agendaItems = [
     ]
   },
   {
-    title: dates[12], 
+    title: dates[12],
     data: [
       {hour: '12am', duration: '1h', title: 'Last Yoga'}
     ]
   },
   {
-    title: dates[13], 
+    title: dates[13],
     data: [
       {hour: '12am', duration: '1h', title: 'Last Yoga'}
     ]

example/src/screens/agendaInfiniteListScreen.tsx

@@ -0,0 +1,81 @@
+import React, {useRef, useCallback} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {ExpandableCalendar, AgendaList, CalendarProvider, WeekCalendar} from 'react-native-calendars';
+import testIDs from '../testIDs';
+import {agendaItems, getMarkedDates} from '../mocks/agendaItems';
+import AgendaItem from '../mocks/AgendaItem';
+import {getTheme, themeColor, lightThemeColor} from '../mocks/theme';
+
+const leftArrowIcon = require('../img/previous.png');
+const rightArrowIcon = require('../img/next.png');
+const ITEMS: any[] = agendaItems;
+
+interface Props {
+  weekView?: boolean;
+}
+
+const AgendaInfiniteListScreen = (props: Props) => {
+  const {weekView} = props;
+  const marked = useRef(getMarkedDates());
+  const theme = useRef(getTheme());
+  const todayBtnTheme = useRef({
+    todayButtonTextColor: themeColor
+  });
+
+  const renderItem = useCallback(({item}: any) => {
+    const isLongItem = item.itemCustomHeightType === 'LongEvent';
+    return <View style={{paddingTop: isLongItem ? 40 : 0}}><AgendaItem item={item}/></View>;
+  }, []);
+
+  return (
+    <CalendarProvider
+      date={ITEMS[1]?.title}
+      showTodayButton
+      theme={todayBtnTheme.current}
+    >
+      {weekView ? (
+        <WeekCalendar testID={testIDs.weekCalendar.CONTAINER} firstDay={1} markedDates={marked.current}/>
+      ) : (
+        <ExpandableCalendar
+          testID={testIDs.expandableCalendar.CONTAINER}
+          theme={theme.current}
+          firstDay={1}
+          markedDates={marked.current}
+          leftArrowImageSource={leftArrowIcon}
+          rightArrowImageSource={rightArrowIcon}
+        />
+      )}
+      <AgendaList
+        sections={ITEMS}
+        renderItem={renderItem}
+        sectionStyle={styles.section}
+        infiniteListProps={
+          {
+            itemHeight: 80,
+            titleHeight: 50,
+            itemHeightByType: {
+              LongEvent: 120,
+            }
+          }
+        }
+      />
+    </CalendarProvider>
+  );
+};
+
+export default AgendaInfiniteListScreen;
+
+const styles = StyleSheet.create({
+  calendar: {
+    paddingLeft: 20,
+    paddingRight: 20
+  },
+  header: {
+    backgroundColor: 'lightgrey'
+  },
+  section: {
+    backgroundColor: lightThemeColor,
+    color: 'grey',
+    textTransform: 'capitalize'
+  }
+});

example/src/screens/calendarScreen.tsx

@@ -205,7 +205,8 @@ const CalendarScreen = () => {
               textColor: 'white',
               customContainerStyle: {
                 borderTopRightRadius: 5,
-                borderBottomRightRadius: 5
+                borderBottomRightRadius: 5,
+                backgroundColor: "green"
               }
             },
             [getDate(25)]: {inactive: true, disableTouchEvent: true}

example/src/screens/index.ts

@@ -4,6 +4,7 @@ import MenuScreen from './menuScreen';
 import CalendarScreen from './calendarScreen';
 import CalendarPlaygroundScreen from './calendarPlaygroundScreen';
 import AgendaScreen from './agendaScreen';
+import AgendaInfiniteListScreen from './agendaInfiniteListScreen';
 import CalendarsListScreen from './calendarListScreen';
 import NewCalendarsListScreen from './newCalendarListScreen';
 import ExpandableCalendarScreen from './expandableCalendarScreen';
@@ -16,6 +17,7 @@ export function registerScreens() {
   Navigation.registerComponent('CalendarScreen', () => CalendarScreen);
   Navigation.registerComponent('CalendarPlaygroundScreen', () => CalendarPlaygroundScreen);
   Navigation.registerComponent('AgendaScreen', () => AgendaScreen);
+  Navigation.registerComponent('AgendaInfiniteListScreen', () => AgendaInfiniteListScreen);
   Navigation.registerComponent('CalendarListScreen', () => CalendarsListScreen);
   Navigation.registerComponent('NewCalendarListScreen', () => NewCalendarsListScreen);
   Navigation.registerComponent('ExpandableCalendarScreen', () => ExpandableCalendarScreen);

example/src/screens/menuScreen.tsx

@@ -14,7 +14,7 @@ interface Props {
 const MenuScreen = (props: Props) => {
   const {componentId} = props;
   const [forceRTL, setForceRTL] = useState(false);
-  
+
   const toggleRTL = (value) => {
     I18nManager.forceRTL(value);
     setForceRTL(value);
@@ -67,6 +67,7 @@ const MenuScreen = (props: Props) => {
         {renderEntry(testIDs.menu.HORIZONTAL_LIST, 'Horizontal Calendar List', 'CalendarListScreen', {horizontalView: true})}
         {renderEntry(testIDs.menu.HORIZONTAL_LIST, 'NEW Calendar List', 'NewCalendarListScreen')}
         {renderEntry(testIDs.menu.AGENDA, 'Agenda', 'AgendaScreen')}
+        {renderEntry(testIDs.menu.AGENDA_INFINITE, 'Agenda Infinite List', 'AgendaInfiniteListScreen')}
         {renderEntry(testIDs.menu.EXPANDABLE_CALENDAR, 'Expandable Calendar', 'ExpandableCalendarScreen')}
         {renderEntry(testIDs.menu.TIMELINE_CALENDAR, 'Timeline Calendar', 'TimelineCalendarScreen')}
         {renderEntry(testIDs.menu.WEEK_CALENDAR, 'Week Calendar', 'ExpandableCalendarScreen', {weekView: true})}

example/src/testIDs.ts

@@ -5,6 +5,7 @@ export default {
     CALENDAR_LIST: 'calendar_list_btn',
     HORIZONTAL_LIST: 'horizontal_list_btn',
     AGENDA: 'agenda_btn',
+    AGENDA_INFINITE: 'agenda_infinite_btn',
     EXPANDABLE_CALENDAR: 'expandable_calendar_btn',
     WEEK_CALENDAR: 'week_calendar_btn',
     TIMELINE_CALENDAR: 'timeline_calendar_btn',

ios/Podfile.lock

@@ -584,9 +584,9 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: a7c83b31436843459a1961bfd74b96033dc77234
+  boost: 57d2868c099736d80fcd648bf211b4431e51a558
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: d58428b28fe1f5070fe993495b0e2eaf701d3820
   FBReactNativeSpec: 225fb0f0ab00493ce0731f954da3658638d9b191
   Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0
@@ -599,7 +599,7 @@ SPEC CHECKSUMS:
   Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
   FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 476ee3e89abb49e07f822b48323c51c57124b572
+  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: 6351580c827b3b03e5f25aadcf989f582d0b0a86
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913

package.json

@@ -10,7 +10,7 @@
     "build:dev": "tsc --noEmit",
     "build:docs": "node ./scripts/build-docs.js",
     "e2e": "node ./scripts/test-e2e.js --release",
-    "test": "npm run lint && npm run unit",
+    "test": "yarn lint && yarn unit",
     "test:watch": "jest --watch",
     "test:perf": "TEST_RUNNER_ARGS='--testMatch **/*.perf.js' reassure measure",
     "unit": "jest",
@@ -20,7 +20,7 @@
     "ios": "react-native run-ios",
     "android": "react-native run-android",
     "xcode": "open ios/CalendarsExample.xcworkspace/",
-    "clean": "rm package-lock.json && rm -rf ./node_modules && npm i",
+    "clean": "rm yarn-lock && rm -rf ./node_modules && yarn",
     "pod-install": "pod install --project-directory=ios"
   },
   "repository": {

src/calendar-list/index.tsx

@@ -99,6 +99,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
     onMomentumScrollBegin,
     onMomentumScrollEnd,
     /** FlatList props */
+    contentContainerStyle,
     onEndReachedThreshold,
     onEndReached
   } = props;
@@ -328,6 +329,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
         onMomentumScrollEnd={onMomentumScrollEnd}
         onScrollBeginDrag={onScrollBeginDrag}
         onScrollEndDrag={onScrollEndDrag}
+        contentContainerStyle={contentContainerStyle}
       />
       {renderStaticHeader()}
     </View>

src/calendar/day/period/index.tsx

@@ -84,17 +84,17 @@ const PeriodDay = (props: PeriodDayProps) => {
         overflow: 'hidden'
       });
 
-      if (markingStyle.containerStyle) {
-        containerStyle.push(markingStyle.containerStyle);
-      }
-
       const start = markingStyle.startingDay;
       const end = markingStyle.endingDay;
       if (start && !end) {
         containerStyle.push({backgroundColor: markingStyle.startingDay?.backgroundColor});
       } else if (end && !start || end && start) {
         containerStyle.push({backgroundColor: markingStyle.endingDay?.backgroundColor});
       }
+
+      if (markingStyle.containerStyle) {
+        containerStyle.push(markingStyle.containerStyle);
+      }
     }
     return containerStyle;
   }, [marking, state]);

src/expandableCalendar/AgendaListsCommon.tsx

@@ -30,6 +30,8 @@ export interface AgendaListProps extends SectionListProps<any, DefaultSectionT>
   infiniteListProps?: {
     itemHeight?: number;
     titleHeight?: number;
+    /** item height by type, require passing itemCustomHeightType in the elements you want to set custom height */
+    itemHeightByType?: Record<string, number>;
     visibleIndicesChangedDebounce?: number;
     renderFooter?: () => React.ReactElement | null;
   };

src/expandableCalendar/index.tsx

@@ -384,22 +384,21 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
       _height.current = toValue || newValue;
       _isOpen = _height.current >= threshold; // re-check after _height.current was set
 
+      resetWeekCalendarOpacity(_isOpen);
       Animated.spring(deltaY, {
         toValue: _height.current,
         speed: SPEED,
         bounciness: BOUNCINESS,
         useNativeDriver: false
-      }).start();
-
-      onCalendarToggled?.(_isOpen);
-
-      setPosition(() => _height.current === closedHeight ? Positions.CLOSED : Positions.OPEN);
+      }).start(() => {
+        onCalendarToggled?.(_isOpen);
+        setPosition(() => _height.current === closedHeight ? Positions.CLOSED : Positions.OPEN);
+      });
       closeHeader(_isOpen);
-      resetWeekCalendarOpacity(_isOpen);
     }
   };
 
-  const resetWeekCalendarOpacity = (isOpen: boolean) => {
+  const resetWeekCalendarOpacity = async (isOpen: boolean) => {
     _weekCalendarStyles.style.opacity = isOpen ? 0 : 1;
     updateNativeStyles();
   };