Merge remote-tracking branch 'origin' into release

nitzanyiz · nitzanyiz · commit a408d8695ac2 · 2025-02-26T11:32:57.000+02:00
diff --git a/src/calendar-list/index.tsx b/src/calendar-list/index.tsx
@@ -101,16 +101,23 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
     /** FlatList props */
     contentContainerStyle,
     onEndReachedThreshold,
-    onEndReached
+    onEndReached,
+    onHeaderLayout
   } = props;
 
   const calendarProps = extractCalendarProps(props);
   const headerProps = extractHeaderProps(props);
   const calendarSize = horizontal ? calendarWidth : calendarHeight;
+  const shouldUseStaticHeader = staticHeader && horizontal;
 
   const [currentMonth, setCurrentMonth] = useState(parseDate(current));
 
   const shouldUseAndroidRTLFix = useMemo(() => constants.isAndroidRTL && horizontal, [horizontal]);
+  /**
+   * we render a lot of months in the calendar list and we need to measure the header only once
+   * so we use this ref to limit the header measurement to the first render
+   */
+  const shouldMeasureHeader = useRef(true);
 
   const style = useRef(styleConstructor(theme));
   const list = useRef();
@@ -237,6 +244,8 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
     const dateString = toMarkingFormat(item);
     const [year, month] = dateString.split('-');
     const testId = `${testID}.item_${year}-${month}`;
+    const onHeaderLayoutToPass = shouldMeasureHeader.current ? onHeaderLayout : undefined;
+    shouldMeasureHeader.current = false;
     return (
       <CalendarListItem
         {...calendarProps}
@@ -250,12 +259,15 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
         calendarHeight={calendarHeight}
         scrollToMonth={scrollToMonth}
         visible={isDateInRange(item)}
+        onHeaderLayout={onHeaderLayoutToPass}
       />
     );
   }, [horizontal, calendarStyle, calendarWidth, testID, getMarkedDatesForItem, isDateInRange, calendarProps]);
 
   const renderStaticHeader = () => {
-    if (staticHeader && horizontal) {
+    if (shouldUseStaticHeader) {
+      const onHeaderLayoutToPass = shouldMeasureHeader.current ? onHeaderLayout : undefined;
+      shouldMeasureHeader.current = false;
       return (
         <CalendarHeader
           {...headerProps}
@@ -265,6 +277,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
           addMonth={addMonth}
           accessibilityElementsHidden={true} // iOS
           importantForAccessibility={'no-hide-descendants'} // Android
+          onHeaderLayout={onHeaderLayoutToPass}
         />
       );
     }
diff --git a/src/calendar/header/index.tsx b/src/calendar/header/index.tsx
@@ -13,7 +13,8 @@ import {
   ViewStyle,
   AccessibilityActionEvent,
   ColorValue,
-  Insets
+  Insets,
+  ViewProps
 } from 'react-native';
 import {formatNumbers, weekDayNames} from '../../dateutils';
 import styleConstructor from './style';
@@ -73,6 +74,8 @@ export interface CalendarHeaderProps {
   numberOfDays?: number;
   /** Left inset for the timeline calendar header. Default = 72 */
   timelineLeftInset?: number;
+  /** Callback for header onLayout */
+  onHeaderLayout?: ViewProps['onLayout'];
 }
 
 const accessibilityActions = [
@@ -107,7 +110,8 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
     importantForAccessibility,
     numberOfDays,
     current = '',
-    timelineLeftInset
+    timelineLeftInset,
+    onHeaderLayout
   } = props;
   
   const numberOfDaysCondition = useMemo(() => {
@@ -289,6 +293,7 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
       onAccessibilityAction={onAccessibilityAction}
       accessibilityElementsHidden={accessibilityElementsHidden} // iOS
       importantForAccessibility={importantForAccessibility} // Android
+      onLayout={onHeaderLayout}
     >
       <View style={headerStyle}>
         {_renderArrow('left')}
diff --git a/src/componentUpdater.ts b/src/componentUpdater.ts
@@ -114,7 +114,8 @@ export function extractHeaderProps(props: CalendarProps) {
     numberOfDays,
     current,
     timelineLeftInset,
-    testID
+    testID,
+    onHeaderLayout
   } = props;
 
   const headerProps = {
@@ -139,7 +140,8 @@ export function extractHeaderProps(props: CalendarProps) {
     numberOfDays,
     current,
     timelineLeftInset,
-    testID
+    testID,
+    onHeaderLayout
   };
 
   return headerProps;
diff --git a/src/expandableCalendar/index.tsx b/src/expandableCalendar/index.tsx
@@ -16,13 +16,14 @@ import {
   ImageSourcePropType,
   GestureResponderEvent,
   PanResponderGestureState,
-  TouchableOpacity
+  TouchableOpacity,
+  type LayoutChangeEvent
 } from 'react-native';
 
 import {page} from '../dateutils';
 import {parseDate, toMarkingFormat} from '../interface';
 import {DateData, Direction} from '../types';
-import styleConstructor, {HEADER_HEIGHT, KNOB_CONTAINER_HEIGHT} from './style';
+import styleConstructor, {KNOB_CONTAINER_HEIGHT} from './style';
 import WeekDaysNames from '../commons/WeekDaysNames';
 import Calendar from '../calendar';
 import CalendarList, {CalendarListProps} from '../calendar-list';
@@ -38,7 +39,6 @@ export enum Positions {
 }
 const SPEED = 20;
 const BOUNCINESS = 6;
-const CLOSED_HEIGHT = 120; // header + 1 week
 const WEEK_HEIGHT = 46;
 const DAY_NAMES_PADDING = 24;
 const PAN_GESTURE_THRESHOLD = 30;
@@ -126,6 +126,10 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
   } = props;
 
   const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const onHeaderLayout = useCallback(({nativeEvent: {layout: {height}}}: LayoutChangeEvent) => {
+      setHeaderHeight(height);
+  }, []);
 
   /** Date */
 
@@ -175,20 +179,24 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
     if (!horizontal) {
       return Math.max(constants.screenHeight, constants.screenWidth);
     }
-    return CLOSED_HEIGHT + (WEEK_HEIGHT * (numberOfWeeks.current - 1)) + (hideKnob ? 12 : KNOB_CONTAINER_HEIGHT) + (constants.isAndroid ? 3 : 0);
+    return headerHeight + (WEEK_HEIGHT * (numberOfWeeks.current)) + (hideKnob ? 0 : KNOB_CONTAINER_HEIGHT);
   };
   const openHeight = useRef(getOpenHeight());
-  const closedHeight = useMemo(() => CLOSED_HEIGHT + (hideKnob || Number(numberOfDays) > 1 ? 0 : KNOB_CONTAINER_HEIGHT), [numberOfDays, hideKnob]);
+  const closedHeight = useMemo(() => headerHeight + WEEK_HEIGHT + (hideKnob || Number(numberOfDays) > 1 ? 0 : KNOB_CONTAINER_HEIGHT), [numberOfDays, hideKnob, headerHeight]);
   const startHeight = useMemo(() => isOpen ? openHeight.current : closedHeight, [closedHeight, isOpen]);
   const _height = useRef(startHeight);
   const deltaY = useMemo(() => new Animated.Value(startHeight), [startHeight]);
-  const headerDeltaY = useRef(new Animated.Value(isOpen ? -HEADER_HEIGHT : 0));
+  const headerDeltaY = useRef(new Animated.Value(isOpen ? -headerHeight : 0));
 
   useEffect(() => {
     _height.current = startHeight;
     deltaY.setValue(startHeight);
   }, [startHeight]);
 
+  useEffect(() => {
+    openHeight.current = getOpenHeight();
+  } ,[headerHeight]);
+
 
   useEffect(() => {
     if (numberOfDays) {
@@ -209,7 +217,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
   const themeObject = Object.assign(headerStyleOverride, theme);
 
   const _wrapperStyles = useRef({style: {height: startHeight}});
-  const _headerStyles = {style: {top: isOpen ? -HEADER_HEIGHT : 0}};
+  const _headerStyles = {style: {top: isOpen ? -headerHeight : 0}};
   const _weekCalendarStyles = {style: {opacity: isOpen ? 0 : 1}};
 
   const shouldHideArrows = !horizontal ? true : hideArrows || false;
@@ -238,16 +246,16 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
   }, [calendarStyle]);
 
   const animatedHeaderStyle = useMemo(() => {
-    return [style.current.header, {height: HEADER_HEIGHT + 10, top: headerDeltaY.current}];
-  }, [headerDeltaY.current]);
+    return [style.current.header, {height: headerHeight, top: headerDeltaY.current}];
+  }, [headerDeltaY.current, headerHeight]);
 
   const weekCalendarStyle = useMemo(() => {
-    return [style.current.weekContainer, isOpen ? style.current.hidden : style.current.visible];
-  }, [isOpen]);
+    return [style.current.weekContainer, isOpen ? style.current.hidden : style.current.visible, {top: headerHeight}];
+  }, [isOpen, headerHeight]);
 
   const containerStyle = useMemo(() => {
-    return [allowShadow && style.current.containerShadow, propsStyle];
-  }, [allowShadow, propsStyle]);
+    return [allowShadow && style.current.containerShadow, propsStyle, headerHeight === 0  && style.current.hidden];
+  }, [allowShadow, propsStyle, headerHeight]);
 
   const wrapperStyle = useMemo(() => {
     return {height: deltaY};
@@ -343,7 +351,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
     if (!horizontal) {
       // vertical CalenderList header
-      _headerStyles.style.top = Math.min(Math.max(-gestureState.dy, -HEADER_HEIGHT), 0);
+      _headerStyles.style.top = Math.min(Math.max(-gestureState.dy, -headerHeight), 0);
     } else {
       // horizontal Week view
       if (!isOpen) {
@@ -370,7 +378,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
     onPanResponderMove: handlePanResponderMove,
     onPanResponderRelease: handlePanResponderEnd,
     onPanResponderTerminate: handlePanResponderEnd
-  }) : PanResponder.create({}), [numberOfDays, position]);
+  }) : PanResponder.create({}), [numberOfDays, position, headerHeight]); // All the functions here rely on headerHeight directly or indirectly through refs that are updated in useEffect
 
   /** Animated */
 
@@ -572,6 +580,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
         horizontal={horizontal}
         firstDay={firstDay}
         calendarStyle={calendarStyle}
+        onHeaderLayout={onHeaderLayout}
         {...others}
         current={date}
         theme={themeObject}
diff --git a/src/expandableCalendar/style.ts b/src/expandableCalendar/style.ts
@@ -4,7 +4,6 @@ import {Theme} from '../types';
 import constants from '../commons/constants';
 
 
-export const HEADER_HEIGHT = 68;
 export const KNOB_CONTAINER_HEIGHT = 24;
 
 
@@ -96,7 +95,6 @@ export default function styleConstructor(theme: Theme = {}) {
       position: 'absolute',
       left: 0,
       right: 0,
-      top: HEADER_HEIGHT + (constants.isAndroid ? 8 : 9), // align row on top of calendar's first row
     },
     hidden: {
       opacity: 0
