Merge pull request #1856 from wix/fix/ExpandableCalendar_scroll_open

ExpandableCalendar - fix scrolling open calendar

Author: lidord-wix

src/calendar/index.tsx

@@ -6,6 +6,7 @@ import {View, ViewStyle, StyleProp} from 'react-native';
 // @ts-expect-error
 import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
 
+import constants from '../commons/constants';
 import {page, isGTE, isLTE, sameMonth} from '../dateutils';
 import {xdateToData, parseDate, toMarkingFormat} from '../interface';
 import {getState} from '../day-state-manager';
@@ -156,10 +157,10 @@ const Calendar = (props: CalendarProps) => {
       case SWIPE_DOWN:
         break;
       case SWIPE_LEFT:
-        onSwipeLeft();
+        constants.isRTL ? onSwipeRight() : onSwipeLeft();
         break;
       case SWIPE_RIGHT:
-        onSwipeRight();
+        constants.isRTL ? onSwipeLeft() : onSwipeRight();
         break;
     }
   }, [onSwipeLeft, onSwipeRight]);

src/expandableCalendar/index.tsx

@@ -186,7 +186,9 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
   const [position, setPosition] = useState(initialPosition || Positions.CLOSED);
   const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
-  const isOpen = position === Positions.OPEN;
+  const isOpen = useMemo(() => {
+    return position === Positions.OPEN;
+  }, [position]);
 
   /** Components' refs */
 
@@ -294,6 +296,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
         const firstDayOfWeek = (next ? 7 : -7) - dayOfTheWeek + firstDay;
         d.addDays(firstDayOfWeek);
       }
+
       setDate?.(toMarkingFormat(d), updateSources.PAGE_SCROLL);
     }
   };
@@ -365,16 +368,12 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
       onCalendarToggled?.(_isOpen);
 
-      _setPosition(_height.current === closedHeight);
+      setPosition(() => _height.current === closedHeight ? Positions.CLOSED : Positions.OPEN);
       closeHeader(_isOpen);
       resetWeekCalendarOpacity(_isOpen);
     }
   };
 
-  const _setPosition = (isClosed: boolean) => {
-    setPosition(isClosed ? Positions.CLOSED : Positions.OPEN);
-  };
-
   const resetWeekCalendarOpacity = (isOpen: boolean) => {
     _weekCalendarStyles.style.opacity = isOpen ? 0 : 1;
     updateNativeStyles();
@@ -455,7 +454,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
     },
     100,
     {trailing: true, leading: false}
-  ), [date]);
+  ), [date, scrollPage]);
 
   /** Renders */