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

Author: Inbal-Tish

src/agenda/index.tsx

@@ -114,8 +114,8 @@ export default class Agenda extends Component<AgendaProps, State> {
       calendarIsReady: false,
       calendarScrollable: false,
       firstReservationLoad: false,
-      selectedDay: parseDate(props.selected) || new XDate(true),
-      topDay: parseDate(props.selected) || new XDate(true)
+      selectedDay: this.getSelectedDate(),
+      topDay: this.getSelectedDate()
     };
 
     this.currentMonth = this.state.selectedDay.clone();
@@ -134,9 +134,10 @@ export default class Agenda extends Component<AgendaProps, State> {
     this.state.scrollY.removeAllListeners();
   }
 
-  componentDidUpdate(prevProps: AgendaProps) {
-    if (!sameDate(parseDate(this.props.selected), parseDate(prevProps.selected))) {
-      this.setState({selectedDay: parseDate(this.props.selected)});
+  componentDidUpdate(prevProps: AgendaProps, prevState: State) {
+    const newSelectedDate = this.getSelectedDate();
+    if (!sameDate(newSelectedDate, prevState.selectedDay)) {
+      this.setState({selectedDay: newSelectedDate});
     } else if (!prevProps.items) {
       this.loadReservations(this.props);
     }
@@ -149,6 +150,11 @@ export default class Agenda extends Component<AgendaProps, State> {
     return null;
   }
 
+  getSelectedDate() {
+    const {selected} = this.props;
+    return selected ? parseDate(selected) : new XDate(true);
+  }
+
   calendarOffset() {
     return 96 - this.viewHeight / 2;
   }

src/calendar/day/basic/index.tsx

@@ -52,7 +52,6 @@ const BasicDay = (props: BasicDayProps) => {
     testID
   } = props;
   const style = useRef(styleConstructor(theme));
-  const dateData = useRef(date ? xdateToData(new XDate(date)) : undefined);
   const _marking = marking || {};
   const isSelected = _marking.selected || state === 'selected';
   const isDisabled = typeof _marking.disabled !== 'undefined' ? _marking.disabled : state === 'disabled';
@@ -61,6 +60,7 @@ const BasicDay = (props: BasicDayProps) => {
   const isMultiDot = markingType === Marking.markings.MULTI_DOT;
   const isMultiPeriod = markingType === Marking.markings.MULTI_PERIOD;
   const isCustom = markingType === Marking.markings.CUSTOM;
+  const dateData = date ? xdateToData(new XDate(date)) : undefined;
 
   const shouldDisableTouchEvent = () => {
     const {disableTouchEvent} = _marking;
@@ -126,12 +126,12 @@ const BasicDay = (props: BasicDayProps) => {
   };
 
   const _onPress = useCallback(() => {
-    onPress?.(dateData.current);
-  }, [onPress]);
+    onPress?.(dateData);
+  }, [onPress, date]);
 
   const _onLongPress = useCallback(() => {
-    onLongPress?.(dateData.current);
-  }, [onLongPress]);
+    onLongPress?.(dateData);
+  }, [onLongPress, date]);
 
   const renderMarking = () => {
     const {marked, dotColor, dots, periods} = _marking;

src/calendar/header/index.tsx

@@ -121,14 +121,14 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
       return onPressArrowLeft(subtractMonth, month);
     }
     return subtractMonth();
-  }, [onPressArrowLeft, subtractMonth]);
+  }, [onPressArrowLeft, subtractMonth, month]);
 
   const onPressRight = useCallback(() => {
     if (typeof onPressArrowRight === 'function') {
       return onPressArrowRight(addMonth, month);
     }
     return addMonth();
-  }, [onPressArrowRight, addMonth]);
+  }, [onPressArrowRight, addMonth, month]);
 
   const onAccessibilityAction = (event: AccessibilityActionEvent) => {
     switch (event.nativeEvent.actionName) {