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

Author: Inbal-Tish

CHANGELOG.md

@@ -558,8 +558,8 @@ An advanced `Agenda` component that can display interactive listings for calenda
     return <View />;
   }}
   // Override inner list with a custom implemented component
-  renderList={(listProps) => {
-    return <MyCustomList {...listProps} />
+  renderList={listProps => {
+    return <MyCustomList {...listProps} />;
   }}
   // Specify what should be rendered instead of ActivityIndicator
   renderEmptyData={() => {

README.md

@@ -132,8 +132,9 @@ Whether to hide the arrows
 
 ### arrowsHitSlop
 
-Left & Right arrows. Additional distance outside of the buttons in which a press is detected, default: 20 
+Left & Right arrows. Additional distance outside of the buttons in which a press is detected, default: 20
 <span style={{color: 'grey'}}>null | Insets | number</span>
+
 ### disableArrowLeft
 
 Whether to disable the left arrow  

docsRNC/docs/Calendar.md

@@ -0,0 +1,66 @@
+## Testing Calendars
+
+Each component receives a testID as a prop and pass to internal elements by concatenating the testID with the element type/data.
+
+For instance, The `Calendar` component will concatenate a given testID to each `Day` element it renders with its date.  
+So each Day element's testID will be in the following format `${testID}.day_${date_string}`.
+
+For example, if you'll pass to `Calendar` a testID called `myCalendar`, the day element representing the 2022-08-21 will have `myCalendar.day_2022-08-21` as testID.
+
+Follow the components testIDs guidelines to learn how to query them in your tests
+
+### Calendar
+
+| Element        | Format                                | Example                                                  |
+| -------------- | ------------------------------------- | -------------------------------------------------------- |
+| Main Container | `${testID}`                           | `myCalendar`                                             |
+| Day            | `${testID}.day_${date_string}`        | `myCalendar.day_2022-08-21`, `myCalendar.day_2022-07-15` |
+| Header         | `${testID}.header`                    | `myCalendar.header`                                      |
+| Week Numbers   | `${testID}.weekNumber_${weekNumber}`} | `myCalendar.weekNumber_27`                               |
+
+### CalendarList
+
+| Element        | Format                            | Example                       |
+| -------------- | --------------------------------- | ----------------------------- |
+| Main Container | `${testID}`                       | `myCalendarList`              |
+| Calendar Item  | `${testID}.item_${year}-{month}`} | `myCalendarList.item_2022-07` |
+| Static Header  | `${testID}.staticHeader`}         | `myCalendarList.staticHeader` |
+
+### Header
+
+| Element        | Format                 | Example                       |
+| -------------- | ---------------------- | ----------------------------- |
+| Main Container | `${testID}`            | `myCalendarHeader`            |
+| Header Title   | `${testID}.title`      | `myCalendarHeader.title`      |
+| Day Names      | `${testID}.dayNames`   | `myCalendarHeader.dayNames`   |
+| Left Arrow     | `${testID}.leftArrow`  | `myCalendarHeader.leftArrow`  |
+| Right Arrow    | `${testID}.rightArrow` | `myCalendarHeader.rightArrow` |
+| Loader         | `${testID}.loader`     | `myCalendarHeader.loader`     |
+
+### ExpandableCalendar
+
+| Element              | Format                          | Example                                    |
+| -------------------- | ------------------------------- | ------------------------------------------ |
+| Main Container       | `${testID}`                     | `myExpandableCalendar`                     |
+| Left Arrow           | `${testID}.leftArrow`           | `myExpandableCalendar.leftArrow`           |
+| Right Arrow          | `${testID}.rightArrow`          | `myExpandableCalendar.rightArrow`          |
+| Knob                 | `${testID}.knob`                | `myExpandableCalendar.knob`                |
+| Expandable Container | `${testID}.expandableContainer` | `myExpandableCalendar.expandableContainer` |
+| Week Calendar        | `${testID}.weekCalendar`        | `myExpandableCalendar.weekCalendar`        |
+| Calendar List        | `${testID}.calendarList`        | `myExpandableCalendar.calendarList`        |
+
+### WeekCalendar
+
+| Element        | Format                         | Example                         |
+| -------------- | ------------------------------ | ------------------------------- |
+| Main Container | `${testID}`                    | `myWeekCalendar`                |
+| Day            | `${testID}.day_${date_string}` | `myWeekCalendar.day_2022-08-21` |
+
+## Notes
+
+Some components render others as internal components and their testIDs are based on the main parent id.  
+For instance, if you'll pass `myExpandableCalendar` to ExpandableCalendar testID.  
+In order to query a Day element, you'll need to go though all the render hierarchy's testIDs.
+
+In this case. ExpandableCalendar -> CalendarList -> Calendar -> Day.  
+And the testID for the Day element will be `myExpandableCalendar.calendarList.item_${year}-${month}.day_${date_string}`.

docsRNC/docs/testing.md

@@ -35,7 +35,7 @@ const CalendarListScreen = (props: Props) => {
       }
     };
   }, [selected]);
-  
+
   const onDayPress = useCallback((day: DateData) => {
     setSelected(day.dateString);
   }, []);

example/src/screens/calendarListScreen.tsx

@@ -139,6 +139,7 @@ const NewCalendarScreen = () => {
 
   const periodWithDotsMarks = useMemo(() => {
     return {
+      [getDate(-3)]: {marked: true, dotColor: 'white', startingDay: true, endingDay: true, color: '#50cebb', textColor: 'white'},
       [INITIAL_DATE]: {marked: true, dotColor: '#50cebb'},
       [getDate(1)]: {disabled: true, marked: true, dotColor: '#50cebb'},
       [getDate(2)]: {startingDay: true, color: '#50cebb', textColor: 'white'},

example/src/screens/calendarPlaygroundScreen.tsx

@@ -397,7 +397,7 @@ const CalendarScreen = () => {
       },
       [getNewSelectedDate]
     );
-  
+
     const onPressArrowRight = useCallback(
       (add, month) => {
         const newDate = getNewSelectedDate(month, true);
@@ -445,7 +445,7 @@ const CalendarScreen = () => {
   const renderCalendarWithCustomHeader = () => {
     const CustomHeader = React.forwardRef((props, ref) => {
       customHeaderProps.current = props;
-      
+
       return (
         // @ts-expect-error
         <View ref={ref} {...props} style={styles.customHeader}>
@@ -565,8 +565,8 @@ const styles = StyleSheet.create({
     padding: 8
   },
   customTitleContainer: {
-    flexDirection: 'row', 
-    alignItems: 'center', 
+    flexDirection: 'row',
+    alignItems: 'center',
     padding: 10
   },
   customTitle: {

example/src/screens/calendarScreen.tsx

@@ -140,7 +140,7 @@ export default class Agenda extends Component<AgendaProps, State> {
 
   componentDidUpdate(prevProps: AgendaProps, prevState: State) {
     const newSelectedDate = this.getSelectedDate(this.props.selected);
-    
+
     if (!sameDate(newSelectedDate, prevState.selectedDay)) {
       const prevSelectedDate = this.getSelectedDate(prevProps.selected);
       if (!sameDate(newSelectedDate, prevSelectedDate)) {
@@ -188,7 +188,7 @@ export default class Agenda extends Component<AgendaProps, State> {
 
   enableCalendarScrolling(enable = true) {
     this.setState({calendarScrollable: enable});
-    
+
     this.props.onCalendarToggled?.(enable);
 
     // Enlarge calendarOffset here as a workaround on iOS to force repaint.
@@ -325,7 +325,7 @@ export default class Agenda extends Component<AgendaProps, State> {
   onDayChange = (day: XDate) => {
     const withAnimation = sameMonth(day, this.state.selectedDay);
     this.calendar?.current?.scrollToDay(day, this.calendarOffset(), withAnimation);
-    
+
     this.setState({selectedDay: day});
 
     this.props.onDayChange?.(xdateToData(day));
@@ -391,9 +391,9 @@ export default class Agenda extends Component<AgendaProps, State> {
 
   renderWeekDaysNames = () => {
     return (
-      <WeekDaysNames 
-        firstDay={this.props.firstDay} 
-        style={this.style.dayHeader} 
+      <WeekDaysNames
+        firstDay={this.props.firstDay}
+        style={this.style.dayHeader}
       />
     );
   };

src/agenda/index.tsx

@@ -123,10 +123,10 @@ class ReservationList extends Component<ReservationListProps, State> {
   }
 
   updateReservations(props: ReservationListProps) {
-    const {selectedDay} = props;
+    const {selectedDay, showOnlySelectedDayItems} = props;
     const reservations = this.getReservations(props);
 
-    if (this.list && !sameDate(selectedDay, this.selectedDay)) {
+    if (!showOnlySelectedDayItems && this.list && !sameDate(selectedDay, this.selectedDay)) {
       let scrollPosition = 0;
       for (let i = 0; i < reservations.scrollPosition; i++) {
         scrollPosition += this.heights[i] || 0;

src/agenda/reservation-list/index.tsx

@@ -6,12 +6,10 @@ import React, {forwardRef, useImperativeHandle, useRef, useEffect, useState, use
 import {FlatList, View, ViewStyle, FlatListProps} from 'react-native';
 
 import {extractHeaderProps, extractCalendarProps} from '../componentUpdater';
-import {xdateToData, parseDate} from '../interface';
+import {xdateToData, parseDate, toMarkingFormat} from '../interface';
 import {page, sameDate, sameMonth} from '../dateutils';
 import constants from '../commons/constants';
 import {useDidUpdate} from '../hooks';
-// @ts-expect-error
-import {STATIC_HEADER} from '../testIDs';
 import styleConstructor from './style';
 import Calendar, {CalendarProps} from '../calendar';
 import CalendarListItem from './item';
@@ -102,7 +100,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
     onEndReachedThreshold,
     onEndReached
   } = props;
-  
+
   const calendarProps = extractCalendarProps(props);
   const headerProps = extractHeaderProps(props);
   const calendarSize = horizontal ? calendarWidth : calendarHeight;
@@ -133,8 +131,8 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
   }, [propsStyle]);
 
   const initialDateIndex = useMemo(() => {
-    return findIndex(items, function(item) { 
-      return item.toString() === initialDate.current?.toString(); 
+    return findIndex(items, function(item) {
+      return item.toString() === initialDate.current?.toString();
     });
   }, [items]);
 
@@ -180,7 +178,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
     const scrollTo = parseDate(date);
     const diffMonths = Math.round(initialDate?.current?.clone().setDate(1).diffMonths(scrollTo?.clone().setDate(1)));
     const scrollAmount = calendarSize * pastScrollRange + diffMonths * calendarSize;
-    
+
     if (scrollAmount !== 0) {
       // @ts-expect-error
       list?.current?.scrollToOffset({offset: scrollAmount, animated: animateScroll});
@@ -196,8 +194,8 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
     setCurrentMonth(day);
   }, [currentMonth, scrollToMonth]);
 
-  const getMarkedDatesForItem = useCallback((item?: XDate) => {    
-    if (markedDates && item) {      
+  const getMarkedDatesForItem = useCallback((item?: XDate) => {
+    if (markedDates && item) {
       for (const [key, _] of Object.entries(markedDates)) {
         if (sameMonth(new XDate(key), new XDate(item))) {
           return markedDates;
@@ -224,13 +222,16 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
     return false;
   }, [currentMonth]);
 
-  const renderItem = useCallback(({item}: any) => {
+  const renderItem = useCallback(({item}: {item: XDate}) => {
+    const dateString = toMarkingFormat(item);
+    const [year, month] = dateString.split('-');
+    const testId = `${testID}.item_${year}-${month}`;
     return (
       <CalendarListItem
         {...calendarProps}
+        testID={testId}
         markedDates={getMarkedDatesForItem(item)}
         item={item}
-        testID={`${testID}_${item}`}
         style={calendarStyle}
         // @ts-expect-error - type mismatch - ScrollView's 'horizontal' is nullable
         horizontal={horizontal}
@@ -247,7 +248,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
       return (
         <CalendarHeader
           {...headerProps}
-          testID={STATIC_HEADER}
+          testID={`${testID}.staticHeader`}
           style={staticHeaderStyle}
           month={currentMonth}
           addMonth={addMonth}
@@ -273,7 +274,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
   }, []);
 
   const viewabilityConfigCallbackPairs = useRef([
-    { 
+    {
       viewabilityConfig: viewabilityConfig.current,
       onViewableItemsChanged
     },
@@ -291,7 +292,7 @@ const CalendarList = (props: CalendarListProps, ref: any) => {
         renderItem={renderItem}
         getItemLayout={getItemLayout}
         initialNumToRender={range.current}
-        initialScrollIndex={initialDateIndex} 
+        initialScrollIndex={initialDateIndex}
         viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
         testID={testID}
         onLayout={onLayout}