@momo-kits/calendar 0.169.4-beta.3 → 0.169.5

package/CalendarHeader.tsx

@@ -13,6 +13,7 @@ type SwitchReturnSelectionProps = {
   onChange: () => void;
 };
 
+/** Round-trip switch row above the date tabs; renders nothing when `hidden`. */
 export const SwitchReturnSelection: React.FC<
   SwitchReturnSelectionProps
 > = props => {
@@ -48,6 +49,7 @@ type HeaderPanelProps = {
   selectedDate: moment.Moment;
 };
 
+/** Departure and return tabs in double-date mode, else one departure tab. */
 export const HeaderPanel: React.FC<HeaderPanelProps> = props => {
   const { theme } = useContext(ApplicationContext);
   const {

package/CalendarPro.tsx

@@ -28,6 +28,18 @@ import {
 import { ContainerContext } from './ContainerContext';
 import styles from './styles';
 
+/** Holidays to list: lunar-only ones are hidden while lunar dates are off. */
+const getVisibleHolidays = (holidays: Holidays[], showLunar: boolean) => {
+  if (showLunar) {
+    return holidays;
+  }
+  return holidays.filter(item => !item.lunar || item.mixedLabel);
+};
+
+/**
+ * Weekday row, month list, lunar toggle and holiday list of `Calendar`, which
+ * drives the selection through `setDoubleDateAndTabIndex`.
+ */
 const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
   (
     {
@@ -55,7 +67,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
     const headerControlRef = useRef<HeaderControlRef>(null);
     const monthListRef = useRef<MonthListRef>(null);
 
-    // Compute min/max date range
+    // An invalid bound falls back to 12 months from the other one (or today).
     const [minDate, maxDate] = useMemo(() => {
       let max = moment(propMaxDate);
       let min = moment(propMinDate);
@@ -72,7 +84,6 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
       return [min, max];
     }, [propMinDate, propMaxDate]);
 
-    // State
     const [startDate, setStartDate] = useState<Moment>(propStartDate);
     const [endDate, setEndDate] = useState<Moment | null>(propEndDate || null);
     const [showLunar, setShowLunar] = useState<boolean>(!!propIsShowLunar);
@@ -94,7 +105,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
       },
     }));
 
-    // Sync showLunar prop
+    // Follow the isShowLunar prop, except right after the user toggled it.
     useEffect(() => {
       if (ownUpdate) {
         setOwnUpdate(false);
@@ -103,7 +114,6 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
       }
     }, [ownUpdate, propIsShowLunar, showLunar]);
 
-    // Scroll to initial selected date on mount or when it changes
     useEffect(() => {
       const timer = setTimeout(() => {
         monthListRef.current?.scrollToMonth(propSelectedDate);
@@ -111,7 +121,6 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
       return () => clearTimeout(timer);
     }, [propSelectedDate]);
 
-    // Handlers
     const onChooseDay = (day: Moment) => {
       if (isDoubleDateMode) {
         if (tabSelected === 1) {
@@ -132,11 +141,8 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
     };
 
     const executeProcessAfterScrollCalendar = (date: Moment, key: string) => {
-      // get sorted array of holidays directly
       const allHolidays = Util.getHolidaysInMonth(moment(date));
-      const filtered = showLunar
-        ? allHolidays
-        : allHolidays.filter(item => !item.lunar || item.mixedLabel);
+      const filtered = getVisibleHolidays(allHolidays, showLunar);
       headerControlRef.current?.onUpdateInfo({ date });
       headerRef.current = date.clone().startOf('month');
       setHolidays(allHolidays);
@@ -157,9 +163,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
     const onToggleLunar = () => {
       setOwnUpdate(true);
       const next = !showLunar;
-      const filtered = next
-        ? holidays
-        : holidays.filter(item => !item.lunar || item.mixedLabel);
+      const filtered = getVisibleHolidays(holidays, next);
       onCallbackCalendar?.('lunar', next);
       setShowLunar(next);
       setTemp(filtered);
@@ -186,7 +190,6 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
       }
     };
 
-    // Determine price list format
     let priceListFormat = priceList?.outbound;
     if (isDoubleDateMode && tabSelected !== 0) {
       priceListFormat = priceList?.inbound;
@@ -208,23 +211,25 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
         <View style={styles.blueSeperator} />
         <View>
           <View style={styles.viewDay}>
-            {[1, 2, 3, 4, 5, 6, 7].map(dayIdx => (
-              <Text
-                key={dayIdx}
-                color={
-                  dayIdx >= 6
-                    ? theme.colors.error.primary
-                    : theme.colors.text.default
-                }
-                typography="label_s_medium"
-                style={[
-                  styles.textDay,
-                  { width: (size.width - Spacing.S * 2) / 7 },
-                ]}
-              >
-                {translate?.(Util.mapWeeKDate(dayIdx))}
-              </Text>
-            ))}
+            {[1, 2, 3, 4, 5, 6, 7].map(dayIdx => {
+              let dayColor = theme.colors.text.default;
+              if (dayIdx >= 6) {
+                dayColor = theme.colors.error.primary;
+              }
+              return (
+                <Text
+                  key={dayIdx}
+                  color={dayColor}
+                  typography="label_s_medium"
+                  style={[
+                    styles.textDay,
+                    { width: (size.width - Spacing.S * 2) / 7 },
+                  ]}
+                >
+                  {translate?.(Util.mapWeeKDate(dayIdx))}
+                </Text>
+              );
+            })}
           </View>
           <MonthList
             ref={monthListRef}
@@ -265,9 +270,9 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
             nestedScrollEnabled
           >
             {temp.map((item, idx) => {
-              const labelDate = `${item.day > 9 ? item.day : `0${item.day}`}/${
-                item.month > 9 ? item.month : `0${item.month}`
-              }`;
+              const day = item.day > 9 ? item.day : `0${item.day}`;
+              const month = item.month > 9 ? item.month : `0${item.month}`;
+              const labelDate = `${day}/${month}`;
               const labelHoliday = (showLunar && item.mixedLabel) || item.label;
               const labelHighlight = showLunar ? item.highlight || '' : '';
               return (

package/ContainerContext.ts

@@ -1,14 +1,4 @@
 import { createContext } from 'react';
 
-/** Style width of the probe the calendar measures to learn the rendered size scale. */
-export const SCALE_PROBE_SIZE = 100;
-
-/**
- * Calendar container size: `width`/`height` are style sizes for layout, `pageWidth` is
- * the rendered width that horizontal paging and scroll offsets are measured in.
- */
-export const ContainerContext = createContext({
-  width: 0,
-  height: 0,
-  pageWidth: 0,
-});
+/** Calendar width and day cell height, shared by every month and day cell. */
+export const ContainerContext = createContext({ width: 0, height: 0 });

package/Day.tsx

@@ -12,6 +12,10 @@ import { DayProps } from './types';
 import { ContainerContext } from './ContainerContext';
 import styles from './styles';
 
+/**
+ * One day cell: solar date with optional lunar date and price, highlighted as
+ * the start, end or inside of the selected range.
+ */
 const Day: React.FC<DayProps> = props => {
   const {
     startDate,
@@ -46,15 +50,13 @@ const Day: React.FC<DayProps> = props => {
     return <View style={[styles.dayContainer, { width: itemWidth }]} />;
   }
 
-  const isValid =
-    !isDisabled &&
-    (date.isAfter(minDate, 'day') || date.isSame(minDate, 'day')) &&
-    (date.isBefore(maxDate, 'day') || date.isSame(maxDate, 'day'));
+  const isAfterMin = date.isSameOrAfter(minDate, 'day');
+  const isBeforeMax = date.isSameOrBefore(maxDate, 'day');
+  const isValid = !isDisabled && isAfterMin && isBeforeMax;
 
-  const isMid =
-    isDoubleDateMode &&
-    date.isAfter(startDate, 'day') &&
-    date.isBefore(endDate, 'day');
+  const isAfterStart = date.isAfter(startDate, 'day');
+  const isBeforeEnd = date.isBefore(endDate, 'day');
+  const isMid = isDoubleDateMode && isAfterStart && isBeforeEnd;
 
   const isStart = date.isSame(startDate, 'day');
   const isStartPart = !!(isStart && endDate);

package/HeaderControl.tsx

@@ -5,20 +5,21 @@ import React, {
   useImperativeHandle,
   useState,
 } from 'react';
-import {TouchableOpacity, View} from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import moment from 'moment';
-import {ApplicationContext, Icon, Text} from '@momo-kits/foundation';
+import { ApplicationContext, Icon, Text } from '@momo-kits/foundation';
 
 import Util from './Util';
-import {HeaderControlProps, HeaderControlRef} from './types';
+import { HeaderControlProps, HeaderControlRef } from './types';
 import styles from './styles';
 
+/** Month title between previous/next arrows; `onUpdateInfo` sets the month. */
 const HeaderControl: ForwardRefRenderFunction<
   HeaderControlRef,
   HeaderControlProps
-> = ({onPressBackArrow, onPressNextArrow, selectedDate}, ref) => {
-  const {translate} = useContext(ApplicationContext);
-  const [info, setInfo] = useState<{date: moment.Moment}>({
+> = ({ onPressBackArrow, onPressNextArrow, selectedDate }, ref) => {
+  const { translate } = useContext(ApplicationContext);
+  const [info, setInfo] = useState<{ date: moment.Moment }>({
     date: moment(selectedDate || new Date()),
   });
 
@@ -26,14 +27,15 @@ const HeaderControl: ForwardRefRenderFunction<
     onUpdateInfo,
   }));
 
-  const onUpdateInfo = (date: React.SetStateAction<{date: moment.Moment}>) => {
+  const onUpdateInfo = (
+    date: React.SetStateAction<{ date: moment.Moment }>,
+  ) => {
     setInfo(date);
   };
 
   if (info && info.date) {
-    const headerFormat = `${translate?.(
-      Util.mapMonth(info.date.month() + 1) || ''
-    )}/${info.date.year()}`;
+    const monthKey = Util.mapMonth(info.date.month() + 1) || '';
+    const headerFormat = `${translate?.(monthKey)}/${info.date.year()}`;
     return (
       <View style={styles.headerControlContainer}>
         <TouchableOpacity onPress={onPressBackArrow}>

package/LunarDateConverter.ts

@@ -11,6 +11,20 @@ function Solar(this: any) {
   this.solarYear = 0;
 }
 
+/** Day number of March 1 of `year` in the March-based count of `SolarToInt`. */
+const daysBeforeYear = (year: number) => {
+  return (
+    365 * year +
+    parseInt(String(year / 4), 10) -
+    parseInt(String(year / 100), 10) +
+    parseInt(String(year / 400), 10)
+  );
+};
+
+/**
+ * Table-based solar ↔ lunar date converter, used with `new`.
+ * Supports years from 1900 to the end of its tables and throws outside them.
+ */
 function LunarSolarConverter(this: any) {
   this.lunar_month_days = [
     1887, 0x1694, 0x16aa, 0x4ad5, 0xab6, 0xc4b7, 0x4ae, 0xa56, 0xb52a, 0x1d2a,
@@ -73,18 +87,12 @@ function LunarSolarConverter(this: any) {
     0x107c53, 0x107e48,
   ];
 
-  /**
-   * @return {number}
-   */
   this.GetBitInt = function (data: number, length: number, shift: number) {
     // eslint-disable-next-line no-bitwise -- unpacks bit-packed lunar table data
     return (data & (((1 << length) - 1) << shift)) >> shift;
   };
 
-  // WARNING: Dates before Oct. 1582 are inaccurate
-  /**
-   * @return {number}
-   */
+  /** Day number of a Gregorian date; inaccurate before Oct 1582. */
   this.SolarToInt = function (y: number, m: number, d: number) {
     m = (m + 9) % 12;
     y = parseInt(String(y), 10) - parseInt(String(m / 10), 10);
@@ -98,22 +106,13 @@ function LunarSolarConverter(this: any) {
     );
   };
 
+  /** Gregorian date of a day number from `SolarToInt`. */
   this.SolarFromInt = function (g: number) {
     let y = parseInt(String((10000 * g + 14780) / 3652425), 10);
-    let ddd =
-      g -
-      (365 * y +
-        parseInt(String(y / 4), 10) -
-        parseInt(String(y / 100), 10) +
-        parseInt(String(y / 400), 10));
+    let ddd = g - daysBeforeYear(y);
     if (ddd < 0) {
       y--;
-      ddd =
-        g -
-        (365 * y +
-          parseInt(String(y / 4), 10) -
-          parseInt(String(y / 100), 10) +
-          parseInt(String(y / 400), 10));
+      ddd = g - daysBeforeYear(y);
     }
     const mi = parseInt(String((100 * ddd + 52) / 3060), 10);
     const mm = ((mi + 2) % 12) + 1;
@@ -133,15 +132,15 @@ function LunarSolarConverter(this: any) {
     lunarMonth: number;
     lunarDay: number;
   }) {
-    // year range check: only support lunar calendar from 1900
+    const firstTableYear = this.lunar_month_days[0];
     const minLunarYear = 1900;
-    // using converter data, maximum supported lunar year
-    const maxLunarYear = this.lunar_month_days[0] + this.lunar_month_days.length - 1;
+    const maxLunarYear = firstTableYear + this.lunar_month_days.length - 1;
     if (lunar.lunarYear < minLunarYear || lunar.lunarYear > maxLunarYear) {
-      throw new Error(`LunarToSolar: year ${lunar.lunarYear} out of supported range ${minLunarYear}-${maxLunarYear}`);
+      throw new Error(
+        `LunarToSolar: year ${lunar.lunarYear} out of supported range ${minLunarYear}-${maxLunarYear}`,
+      );
     }
-    const days =
-      this.lunar_month_days[lunar.lunarYear - this.lunar_month_days[0]];
+    const days = this.lunar_month_days[lunar.lunarYear - firstTableYear];
     const leap = this.GetBitInt(days, 4, 13);
     let offset = 0;
     let loopend = leap;
@@ -171,19 +170,19 @@ function LunarSolarConverter(this: any) {
     solarMonth: number;
     solarDay: number;
   }) {
-    // year range check: only support solar dates from 1900
     const minSolarYear = 1900;
-    // using converter data, maximum supported solar year
     const maxSolarYear = this.solar_1_1[0] + this.solar_1_1.length - 1;
     if (solar.solarYear < minSolarYear || solar.solarYear > maxSolarYear) {
-      throw new Error(`SolarToLunar: year ${solar.solarYear} out of supported range ${minSolarYear}-${maxSolarYear}`);
+      throw new Error(
+        `SolarToLunar: year ${solar.solarYear} out of supported range ${minSolarYear}-${maxSolarYear}`,
+      );
     }
     // @ts-ignore
     const lunar = new Lunar();
-    let index = solar.solarYear - this.solar_1_1[0];
-    const data =
-      // eslint-disable-next-line no-bitwise -- packs date to compare with solar_1_1 table
-      (solar.solarYear << 9) | (solar.solarMonth << 5) | solar.solarDay;
+    const { solarYear, solarMonth, solarDay } = solar;
+    let index = solarYear - this.solar_1_1[0];
+    // eslint-disable-next-line no-bitwise -- packs date to compare with solar_1_1 table
+    const data = (solarYear << 9) | (solarMonth << 5) | solarDay;
     if (this.solar_1_1[index] > data) {
       index--;
     }
@@ -191,9 +190,8 @@ function LunarSolarConverter(this: any) {
     const y = this.GetBitInt(solar11, 12, 9);
     const m = this.GetBitInt(solar11, 4, 5);
     const d = this.GetBitInt(solar11, 5, 0);
-    let offset =
-      this.SolarToInt(solar.solarYear, solar.solarMonth, solar.solarDay) -
-      this.SolarToInt(y, m, d);
+    const dayNumber = this.SolarToInt(solarYear, solarMonth, solarDay);
+    let offset = dayNumber - this.SolarToInt(y, m, d);
 
     const days = this.lunar_month_days[index];
     const leap = this.GetBitInt(days, 4, 13);

package/Month.tsx

@@ -1,12 +1,13 @@
-import React, {useContext, useMemo} from 'react';
-import {View} from 'react-native';
-import moment, {Moment} from 'moment';
+import React, { useContext, useMemo } from 'react';
+import { View } from 'react-native';
+import moment, { Moment } from 'moment';
 import Day from './Day';
-import {useScaleSize} from '@momo-kits/foundation';
-import {MonthProps} from './types';
-import {ContainerContext} from './ContainerContext';
+import { useScaleSize } from '@momo-kits/foundation';
+import { MonthProps } from './types';
+import { ContainerContext } from './ContainerContext';
 import styles from './styles';
 
+/** One month as rows of 7 `Day` cells; `dateList` is padded to whole weeks. */
 const Month: React.FC<MonthProps> = ({
   dateList,
   holidays,
@@ -49,26 +50,26 @@ const Month: React.FC<MonthProps> = ({
   const size = useContext(ContainerContext);
   const scaledHeight = useScaleSize(48);
 
-  // Precompute disabled dates set for fast lookup (format: YYYY-MM-DD)
-  const disabledSet = useMemo(
-    () => new Set((disabledDays || []).map(d => moment(d).format('YYYY-MM-DD'))),
-    [disabledDays]
-  );
+  // YYYY-MM-DD set so each day cell is an O(1) lookup.
+  const disabledSet = useMemo(() => {
+    const keys = (disabledDays || []).map(d => moment(d).format('YYYY-MM-DD'));
+    return new Set(keys);
+  }, [disabledDays]);
 
   if (!month) {
     return <View />;
   }
 
   return (
-    <View style={{width: size.width}}>
+    <View style={{ width: size.width }}>
       <View style={styles.monthRows}>
         {rows.map((dayList, rowIndex) => (
           <View
             key={`row${rowIndex}`}
-            style={[styles.monthRow, {height: scaledHeight}]}>
+            style={[styles.monthRow, { height: scaledHeight }]}
+          >
             {dayList.map((item, i) => {
-              const {isEmpty, date: dateMoment, lunarDate} = item;
-              // compute key for price/disabled only if not empty
+              const { isEmpty, date: dateMoment, lunarDate } = item;
               const hasDate = !isEmpty && dateMoment;
               const keyDay = hasDate ? dateMoment.format('YYYY-MM-DD') : '';
               const priceInfo = keyDay ? priceListDate?.[keyDay] : undefined;

package/MonthList.tsx

@@ -26,6 +26,14 @@ const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
 // @ts-ignore
 const converter = new LunarDateConverter();
 
+const isSameMonth = (a: Moment, b: Moment) => {
+  return a.year() === b.year() && a.month() === b.month();
+};
+
+/**
+ * Horizontally paged months from `minDate` to `maxDate`; reports the visible
+ * month through `onScrollCalendar` and `scrollToMonth` pages to a month.
+ */
 const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
   const {
     selectedDate,
@@ -59,10 +67,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
     const months: { date: Moment; dateList: any[] }[] = [];
     const mMin = moment(minDate).date(1);
     const mMax = moment(maxDate);
-    while (
-      mMax > mMin ||
-      (mMax.year() === mMin.year() && mMax.month() === mMin.month())
-    ) {
+    while (mMax > mMin || isSameMonth(mMax, mMin)) {
       const d = moment(mMin);
       const dayList: any[] = [];
       const monthIdx = d.month();
@@ -109,41 +114,35 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
     [selectedDate, getIndexOfMonth],
   );
 
-  // paging keeps the old pixel offset when the width changes (fold, unfold,
-  // rotation), so remember the offset and move back onto the same month
-  const scrollOffset = useRef(
-    Math.max(currentScrollIndex, 0) * size.pageWidth,
-  );
-  const pageWidth = useRef(size.pageWidth);
+  // Paging keeps the pixel offset on resize (fold, rotation); re-snap it.
+  const scrollOffset = useRef(Math.max(currentScrollIndex, 0) * size.width);
+  const pageWidth = useRef(size.width);
 
   useLayoutEffect(() => {
     const previousWidth = pageWidth.current;
-    pageWidth.current = size.pageWidth;
-    if (previousWidth === size.pageWidth || previousWidth <= 0) {
+    pageWidth.current = size.width;
+    if (previousWidth === size.width || previousWidth <= 0) {
       return;
     }
     const page = Math.round(scrollOffset.current / previousWidth);
-    scrollOffset.current = page * size.pageWidth;
+    scrollOffset.current = page * size.width;
     listRef.current?.scrollToOffset({
       offset: scrollOffset.current,
       animated: false,
     });
-  }, [size.pageWidth]);
+  }, [size.width]);
 
-  const onScroll = useCallback(
-    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-      scrollOffset.current = e.nativeEvent.contentOffset.x;
-    },
-    [],
-  );
+  const onScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    scrollOffset.current = e.nativeEvent.contentOffset.x;
+  }, []);
 
   const scrollToMonth = useCallback(
     (month: Moment) => {
       const idx = getIndexOfMonth(month);
       if (listRef.current && idx !== -1) {
         const offset = idx * pageWidth.current;
-        targetIndex.current =
-          Math.abs(offset - scrollOffset.current) < 1 ? null : idx;
+        const isAtTarget = Math.abs(offset - scrollOffset.current) < 1;
+        targetIndex.current = isAtTarget ? null : idx;
         listRef.current.scrollToIndex({ index: idx, animated: true });
       }
     },
@@ -154,7 +153,9 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
 
   const onViewableItemsChanged = useRef(({ changed }: { changed: any[] }) => {
     const visible = changed.find(token => token.isViewable);
-    if (targetIndex.current !== null && visible?.index !== targetIndex.current) {
+    // Ignore months passed while animating to a scrollToMonth target.
+    const isScrollingToTarget = targetIndex.current !== null;
+    if (isScrollingToTarget && visible?.index !== targetIndex.current) {
       return;
     }
     targetIndex.current = null;
@@ -163,12 +164,9 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       if (onScrollCalendarRef.current && item && currentKey.current !== key) {
         currentKey.current = key;
         try {
-          setHeightStyle({
-            height:
-              (scaledHeight48Ref.current * item.dateList.length) / 7 +
-              Spacing.L * 2 +
-              Spacing.XS,
-          });
+          const rowHeight = scaledHeight48Ref.current;
+          const rowsHeight = (rowHeight * item.dateList.length) / 7;
+          setHeightStyle({ height: rowsHeight + Spacing.L * 2 + Spacing.XS });
         } catch {
           setHeightStyle({});
         }
@@ -190,11 +188,11 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
 
   const getItemLayout = useCallback(
     (_: any, index: number) => ({
-      length: size.pageWidth,
-      offset: size.pageWidth * index,
+      length: size.width,
+      offset: size.width * index,
       index,
     }),
-    [size.pageWidth],
+    [size.width],
   );
 
   const renderItem = useCallback(

package/TabHeader.tsx

@@ -11,6 +11,7 @@ import styles from './styles';
 import { ApplicationContext, Text } from '@momo-kits/foundation';
 import { TabHeaderProps, TabHeaderRef } from './types';
 
+/** Date tab with a label and the chosen date, updated through `updateView`. */
 const TabHeader = forwardRef<TabHeaderRef, TabHeaderProps>((props, ref) => {
   const { label, disabled, id, onChangeTab } = props;
   const { theme, translate } = useContext(ApplicationContext);
@@ -27,8 +28,9 @@ const TabHeader = forwardRef<TabHeaderRef, TabHeaderProps>((props, ref) => {
     setActiveTab: setActive,
   }));
 
-  const weekday = (day: Moment.Moment) =>
-    translate?.(Util.WEEKDAYSFROMMOMENT[day.day()]);
+  const weekday = (day: Moment.Moment) => {
+    return translate?.(Util.WEEKDAYSFROMMOMENT[day.day()]);
+  };
   const isHighlighted = active && !disabled;
 
   const formattedDate = date ? date.format('DD/MM/YYYY') : '';

package/Util.ts

@@ -1,30 +1,41 @@
 import moment from 'moment';
 import LunarDateConverter from './LunarDateConverter';
 import holiday from './holidayData';
-import {Holidays} from './types';
+import { Holidays } from './types';
 
 // @ts-ignore
 const converter = new LunarDateConverter();
 
+/** Moment as the `{ solarDay, solarMonth, solarYear }` converter input. */
 const Solar = (momentDate: moment.Moment) => ({
   solarDay: momentDate.date(),
   solarMonth: momentDate.month() + 1,
   solarYear: momentDate.year(),
 });
 
-const formatYYYYMMDD = (dd: number, mm: number, yyyy: any) =>
-  `${yyyy}-${mm < 10 ? `0${mm}` : mm}-${dd < 10 ? `0${dd}` : dd}`;
+const padTwoDigits = (value: number) => {
+  return value < 10 ? `0${value}` : `${value}`;
+};
+
+const formatYYYYMMDD = (dd: number, mm: number, yyyy: any) => {
+  return `${yyyy}-${padTwoDigits(mm)}-${padTwoDigits(dd)}`;
+};
 
-const formatDDMM = (dd: number, mm: number) =>
-  `${dd < 10 ? `0${dd}` : dd}/${mm < 10 ? `0${mm}` : mm}`;
+const formatDDMM = (dd: number, mm: number) => {
+  return `${padTwoDigits(dd)}/${padTwoDigits(mm)}`;
+};
 
+/**
+ * Groups holidays by DD/MM; a solar and a lunar holiday on the same day merge
+ * into one entry whose `mixedLabel` names both.
+ */
 const groupHolidaysByDate = (
-  holidays: Holidays[]
-): {[key: string]: Holidays} => {
-  const groupedHolidays: {[key: string]: Holidays} = {};
+  holidays: Holidays[],
+): { [key: string]: Holidays } => {
+  const groupedHolidays: { [key: string]: Holidays } = {};
   if (holidays && holidays.length > 0) {
     holidays.forEach(item => {
-      const {day, month, lunar, label} = item;
+      const { day, month, lunar, label } = item;
       const key = formatDDMM(day, month);
       let holidaysObj = { ...(groupedHolidays[key] || item) };
       if (groupedHolidays[key]) {
@@ -49,28 +60,32 @@ const groupHolidaysByDate = (
   return groupedHolidays;
 };
 
-/**
- * Sort and group holidays by date, return sorted array of unique Holidays.
- */
+/** Sorts holidays by date (in place) and merges those on the same day. */
 const sortByDate = (arr: Holidays[]): Holidays[] => {
   if (arr && arr.length > 1) {
-    arr.sort((a, b) =>
-      a.month !== b.month ? a.month - b.month : a.day - b.day
-    );
+    arr.sort((a, b) => {
+      if (a.month !== b.month) {
+        return a.month - b.month;
+      }
+      return a.day - b.day;
+    });
   }
-  // group by date string and return unique values in sorted order
+  // "DD/MM" keys aren't integer-like, so Object.values keeps the sorted order.
   const grouped = groupHolidaysByDate(arr);
   return Object.values(grouped);
 };
 
+/** Weekday/month i18n keys and holiday lookup for the calendar. */
 const Utils = {
   WEEKDAYSFROMMOMENT: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
 
+  /** i18n key of a weekday, 1 = Monday … 7 = Sunday. */
   mapWeeKDate(i: number) {
     const date = ['', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
     return date[i];
   },
 
+  /** i18n key of a month, 1 = January. */
   mapMonth(i: number) {
     const month = new Map([
       [1, 'jan'],
@@ -89,9 +104,7 @@ const Utils = {
     return month.get(i);
   },
 
-  /**
-   * Get sorted list of holidays within the given month.
-   */
+  /** Solar and lunar holidays in the month of `headerInfo`, sorted by date. */
   getHolidaysInMonth(headerInfo: moment.Moment): Holidays[] {
     if (headerInfo) {
       const startDate = moment(headerInfo).startOf('month');
@@ -103,12 +116,11 @@ const Utils = {
       const maxYear = maxLunarDate.lunarYear;
       const currentYear = minYear !== maxYear ? [minYear, maxYear] : minYear;
 
-      // Handle Solar holidays
       // @ts-ignore
       if (holiday.solar[headerInfo.month() + 1]) {
         // @ts-ignore
         holiday.solar[headerInfo.month() + 1].forEach(
-          (date: {month: number; day: any}) => {
+          (date: { month: number; day: any }) => {
             const dateAsMoment = moment({
               year: headerInfo.year(),
               month: date.month - 1,
@@ -117,11 +129,11 @@ const Utils = {
             if (dateAsMoment.isBetween(startDate, endDate, 'day', '[]')) {
               holidays.push(date);
             }
-          }
+          },
         );
       }
 
-      holiday.lunar.forEach((item: {lunarDay: any; lunarMonth: any}) => {
+      holiday.lunar.forEach((item: { lunarDay: any; lunarMonth: any }) => {
         if (currentYear instanceof Array) {
           const solar1 = converter.LunarToSolar({
             lunarDay: item.lunarDay,
@@ -134,14 +146,20 @@ const Utils = {
             lunarYear: currentYear[1],
           });
           const solar1AsMoment = moment(
-            formatYYYYMMDD(solar1.solarDay, solar1.solarMonth, solar1.solarYear)
+            formatYYYYMMDD(
+              solar1.solarDay,
+              solar1.solarMonth,
+              solar1.solarYear,
+            ),
           );
           const solar2AsMoment = moment(
-            formatYYYYMMDD(solar2.solarDay, solar2.solarMonth, solar2.solarYear)
+            formatYYYYMMDD(
+              solar2.solarDay,
+              solar2.solarMonth,
+              solar2.solarYear,
+            ),
           );
-          if (
-            solar1AsMoment.isBetween(startDate, endDate, 'day', '[]')
-          ) {
+          if (solar1AsMoment.isBetween(startDate, endDate, 'day', '[]')) {
             holidays.push({
               ...item,
               day: solar1.solarDay,
@@ -163,11 +181,9 @@ const Utils = {
             lunarYear: currentYear,
           });
           const solarAsMoment = moment(
-            formatYYYYMMDD(solar.solarDay, solar.solarMonth, solar.solarYear)
+            formatYYYYMMDD(solar.solarDay, solar.solarMonth, solar.solarYear),
           );
-          if (
-            solarAsMoment.isBetween(startDate, endDate, 'day', '[]')
-          ) {
+          if (solarAsMoment.isBetween(startDate, endDate, 'day', '[]')) {
             holidays.push({
               ...item,
               day: solar.solarDay,

package/index.tsx

@@ -11,24 +11,26 @@ import {
 import CalendarPro from './CalendarPro';
 import { HeaderPanel, SwitchReturnSelection } from './CalendarHeader';
 import { CalendarProps, CalendarProRef, TabHeaderRef } from './types';
-import { ContainerContext, SCALE_PROBE_SIZE } from './ContainerContext';
+import { ContainerContext } from './ContainerContext';
 import styles from './styles';
 
 const DOUBLE = 'doubleDate';
 
+/**
+ * Calendar with single or round-trip (`mode="doubleDate"`) selection, lunar
+ * dates, holidays and prices. Dates default to one year around today.
+ */
 const Calendar: React.FC<CalendarProps> = props => {
   const { theme } = useContext(ApplicationContext);
   const scaledHeight48 = useScaleSize(48);
   const scaledHeight34 = useScaleSize(34);
 
-  // derive defaults for date bounds
   const currentDate = new Date();
   const minDateDefault = new Date(currentDate);
   const maxDateDefault = new Date(currentDate);
   minDateDefault.setFullYear(minDateDefault.getFullYear() - 1);
   maxDateDefault.setFullYear(maxDateDefault.getFullYear() + 1);
 
-  // destructure all Calendar props
   const {
     mode,
     id,
@@ -51,8 +53,6 @@ const Calendar: React.FC<CalendarProps> = props => {
   const [containerWidth, setContainerWidth] = useState<number>(
     Dimensions.get('window').width,
   );
-  // rendered size per style unit, read from a probe of known style width
-  const [layoutScale, setLayoutScale] = useState(1);
   const [isDoubleDateMode, setIsDoubleDateMode] = useState<boolean>(
     mode === DOUBLE,
   );
@@ -74,41 +74,30 @@ const Calendar: React.FC<CalendarProps> = props => {
   const tabSelected = useRef<number>(id || 0);
 
   const calendarPicker = useRef<CalendarProRef>(null);
-  // hold refs to TabHeader instances
   const cellHeader1 = useRef<TabHeaderRef>(null);
   const cellHeader2 = useRef<TabHeaderRef>(null);
   const cellHeaderSingle = useRef<TabHeaderRef>(null);
 
-  // Initialize view on mount
   useEffect(() => {
     tabSelected.current = id || 0;
     if (mode === DOUBLE) {
-      if (
-        cellHeader1.current &&
-        cellHeader2.current &&
-        calendarPicker.current
-      ) {
+      const header1 = cellHeader1.current;
+      const header2 = cellHeader2.current;
+      const picker = calendarPicker.current;
+      if (header1 && header2 && picker) {
         const start = doubleDate.current.first;
         const end = doubleDate.current.second;
-        cellHeader1.current.updateView(start, tabSelected.current === 0);
-        cellHeader2.current.updateView(end, tabSelected.current === 1);
-        calendarPicker.current.setDoubleDateAndTabIndex(
-          doubleDate.current.first,
-          doubleDate.current.second,
-          tabSelected.current,
-        );
+        header1.updateView(start, tabSelected.current === 0);
+        header2.updateView(end, tabSelected.current === 1);
+        picker.setDoubleDateAndTabIndex(start, end, tabSelected.current);
       }
     } else {
       calendarPicker.current?.setDoubleDateAndTabIndex(selectedDate);
     }
   }, []);
 
-  const onLayout = (e: LayoutChangeEvent) =>
+  const onLayout = (e: LayoutChangeEvent) => {
     setContainerWidth(e.nativeEvent.layout.width);
-
-  const handleProbeLayout = (e: LayoutChangeEvent) => {
-    const ratio = e.nativeEvent.layout.width / SCALE_PROBE_SIZE;
-    if (ratio > 0) setLayoutScale(ratio);
   };
 
   const onChangeTab = (tabId: number) => {
@@ -127,20 +116,16 @@ const Calendar: React.FC<CalendarProps> = props => {
     const { onDateChange, onCTAStateChange } = props;
     if (!cellHeader1.current || !cellHeader2.current || !calendarPicker.current)
       return;
-    // set first date and reset second
     doubleDate.current.first = selectedDate;
     doubleDate.current.second = null;
     tabSelected.current = 1;
-    // update headers
     cellHeader1.current.updateView(selectedDate, false);
     cellHeader2.current.updateView(null, true);
-    // update calendar
     calendarPicker.current.setDoubleDateAndTabIndex(
       doubleDate.current.first,
       doubleDate.current.second,
       tabSelected.current,
     );
-    // notify parent
     onDateChange?.({ first: doubleDate.current.first!, second: null });
     onCTAStateChange?.(false);
   };
@@ -149,7 +134,7 @@ const Calendar: React.FC<CalendarProps> = props => {
     const { onDateChange, onCTAStateChange } = props;
     if (!cellHeader1.current || !cellHeader2.current || !calendarPicker.current)
       return;
-    // if selectedDate is before first, treat as new first date
+    // A date before the first one restarts the range.
     if (selectedDate.isBefore(doubleDate.current.first!, 'day')) {
       doubleDate.current.first = selectedDate;
       doubleDate.current.second = null;
@@ -164,7 +149,6 @@ const Calendar: React.FC<CalendarProps> = props => {
       onDateChange?.({ first: doubleDate.current.first!, second: null });
       onCTAStateChange?.(false);
     } else {
-      // valid second date
       doubleDate.current.second = selectedDate;
       tabSelected.current = 0;
       cellHeader2.current.updateView(selectedDate, false);
@@ -196,7 +180,7 @@ const Calendar: React.FC<CalendarProps> = props => {
     }
   };
 
-  // skip running updateView on initial mount to preserve initial doubleDate props
+  // Skip the mount run so the initial doubleDate props are kept.
   const didMount = useRef(false);
 
   useEffect(() => {
@@ -259,17 +243,11 @@ const Calendar: React.FC<CalendarProps> = props => {
   return (
     <ContainerContext.Provider
       value={{
-        width: containerWidth / layoutScale,
+        width: containerWidth,
         height: priceList ? scaledHeight48 : scaledHeight34,
-        pageWidth: containerWidth,
       }}
     >
       <View onLayout={onLayout} style={[style, styles.scrollView]}>
-        <View
-          pointerEvents="none"
-          style={styles.scaleProbe}
-          onLayout={handleProbeLayout}
-        />
         <View
           style={[
             {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calendar",
-    "version": "0.169.4-beta.3",
+    "version": "0.169.5",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/styles.ts

@@ -1,9 +1,7 @@
-import {StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '@momo-kits/foundation';
-import {SCALE_PROBE_SIZE} from './ContainerContext';
+import { StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '@momo-kits/foundation';
 
 export default StyleSheet.create({
-  //calendar
   viewPanel: {
     flexDirection: 'row',
     marginHorizontal: Spacing.M,
@@ -31,8 +29,7 @@ export default StyleSheet.create({
     width: '100%',
   },
 
-  //calendar pro
-  row: {flexDirection: 'row'},
+  row: { flexDirection: 'row' },
   txtMonthLunar: {
     marginRight: Spacing.S,
   },
@@ -70,7 +67,6 @@ export default StyleSheet.create({
     backgroundColor: Colors.blue_05,
   },
 
-  //headerControl
   txtHeader: {
     textAlign: 'center',
   },
@@ -83,7 +79,6 @@ export default StyleSheet.create({
     padding: Spacing.S,
   },
 
-  //day
   dayContainer: {
     borderRadius: Radius.XS,
     alignItems: 'center',
@@ -101,7 +96,6 @@ export default StyleSheet.create({
     borderTopRightRadius: Radius.XS,
     borderBottomRightRadius: Radius.XS,
   },
-  scaleProbe: {position: 'absolute', width: SCALE_PROBE_SIZE, height: 0},
   invisible: {
     height: 0,
     width: 0,