@momo-kits/calendar 0.169.7 → 0.169.9

package/CalendarPro.tsx

@@ -28,9 +28,14 @@ import {
 import { ContainerContext } from './ContainerContext';
 import styles from './styles';
 
+const DEFAULT_RANGE_MONTHS = 12;
+const SCROLL_TO_SELECTED_DELAY = 500;
+const WEEKDAYS = [1, 2, 3, 4, 5, 6, 7];
+const FIRST_WEEKEND_DAY = 6;
+
 /** Holidays to list: lunar-only ones are hidden while lunar dates are off. */
-const getVisibleHolidays = (holidays: Holidays[], showLunar: boolean) => {
-  if (showLunar) {
+const getVisibleHolidays = (holidays: Holidays[], isLunarShown: boolean) => {
+  if (isLunarShown) {
     return holidays;
   }
   return holidays.filter(item => !item.lunar || item.mixedLabel);
@@ -67,31 +72,31 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
     const headerControlRef = useRef<HeaderControlRef>(null);
     const monthListRef = useRef<MonthListRef>(null);
 
-    // An invalid bound falls back to 12 months from the other one (or today).
+    // An invalid bound falls back to a year from the other one (or today).
     const [minDate, maxDate] = useMemo(() => {
       let max = moment(propMaxDate);
       let min = moment(propMinDate);
       const maxValid = max.isValid();
       const minValid = min.isValid();
       if (!maxValid && !minValid) {
-        max = moment().add(12, 'months');
+        max = moment().add(DEFAULT_RANGE_MONTHS, 'months');
         min = moment();
       } else if (!maxValid && minValid) {
-        max = min.clone().add(12, 'months');
+        max = min.clone().add(DEFAULT_RANGE_MONTHS, 'months');
       } else if (maxValid && !minValid) {
-        min = max.clone().subtract(12, 'months');
+        min = max.clone().subtract(DEFAULT_RANGE_MONTHS, 'months');
       }
       return [min, max];
     }, [propMinDate, propMaxDate]);
 
     const [startDate, setStartDate] = useState<Moment>(propStartDate);
     const [endDate, setEndDate] = useState<Moment | null>(propEndDate || null);
-    const [showLunar, setShowLunar] = useState<boolean>(!!propIsShowLunar);
+    const [isLunarShown, setIsLunarShown] = useState(!!propIsShowLunar);
     const [tabSelected, setTabSelected] = useState<number>(0);
     const [holidays, setHolidays] = useState<Holidays[]>([]);
     const [temp, setTemp] = useState<any[]>([]);
     const [headerKey, setHeaderKey] = useState<string>('');
-    const [ownUpdate, setOwnUpdate] = useState<boolean>(false);
+    const [isOwnUpdate, setIsOwnUpdate] = useState(false);
 
     useImperativeHandle(ref, () => ({
       setDoubleDateAndTabIndex: (
@@ -107,21 +112,21 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
 
     // Follow the isShowLunar prop, except right after the user toggled it.
     useEffect(() => {
-      if (ownUpdate) {
-        setOwnUpdate(false);
-      } else if (propIsShowLunar !== showLunar) {
-        setShowLunar(!!propIsShowLunar);
+      if (isOwnUpdate) {
+        setIsOwnUpdate(false);
+      } else if (propIsShowLunar !== isLunarShown) {
+        setIsLunarShown(!!propIsShowLunar);
       }
-    }, [ownUpdate, propIsShowLunar, showLunar]);
+    }, [isOwnUpdate, propIsShowLunar, isLunarShown]);
 
     useEffect(() => {
       const timer = setTimeout(() => {
         monthListRef.current?.scrollToMonth(propSelectedDate);
-      }, 500);
+      }, SCROLL_TO_SELECTED_DELAY);
       return () => clearTimeout(timer);
     }, [propSelectedDate]);
 
-    const onChooseDay = (day: Moment) => {
+    const handleChooseDay = (day: Moment) => {
       if (isDoubleDateMode) {
         if (tabSelected === 1) {
           if (startDate && day >= startDate) {
@@ -142,7 +147,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
 
     const executeProcessAfterScrollCalendar = (date: Moment, key: string) => {
       const allHolidays = Util.getHolidaysInMonth(moment(date));
-      const filtered = getVisibleHolidays(allHolidays, showLunar);
+      const filtered = getVisibleHolidays(allHolidays, isLunarShown);
       headerControlRef.current?.onUpdateInfo({ date });
       headerRef.current = date.clone().startOf('month');
       setHolidays(allHolidays);
@@ -150,7 +155,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
       setHeaderKey(key);
     };
 
-    const onScrollCalendar = (info: {
+    const handleScrollCalendar = (info: {
       date: Moment;
       key: string;
       currentIndex: number;
@@ -160,16 +165,16 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
       }
     };
 
-    const onToggleLunar = () => {
-      setOwnUpdate(true);
-      const next = !showLunar;
+    const handleToggleLunar = () => {
+      setIsOwnUpdate(true);
+      const next = !isLunarShown;
       const filtered = getVisibleHolidays(holidays, next);
       onCallbackCalendar?.('lunar', next);
-      setShowLunar(next);
+      setIsLunarShown(next);
       setTemp(filtered);
     };
 
-    const onPressBackArrow = () => {
+    const handlePressBackArrow = () => {
       const prev = headerRef.current
         .clone()
         .startOf('month')
@@ -181,7 +186,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
       }
     };
 
-    const onPressNextArrow = () => {
+    const handlePressNextArrow = () => {
       const next = headerRef.current.clone().startOf('month').add(1, 'months');
       if (next.isSameOrBefore(maxDate, 'month')) {
         headerRef.current = next;
@@ -205,15 +210,15 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
         <HeaderControl
           ref={headerControlRef}
           selectedDate={propSelectedDate}
-          onPressBackArrow={onPressBackArrow}
-          onPressNextArrow={onPressNextArrow}
+          onPressBackArrow={handlePressBackArrow}
+          onPressNextArrow={handlePressNextArrow}
         />
         <View style={styles.blueSeperator} />
         <View>
           <View style={styles.viewDay}>
-            {[1, 2, 3, 4, 5, 6, 7].map(dayIdx => {
+            {WEEKDAYS.map(dayIdx => {
               let dayColor = theme.colors.text.default;
-              if (dayIdx >= 6) {
+              if (dayIdx >= FIRST_WEEKEND_DAY) {
                 dayColor = theme.colors.error.primary;
               }
               return (
@@ -223,7 +228,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
                   typography="label_s_medium"
                   style={[
                     styles.textDay,
-                    { width: (size.width - Spacing.S * 2) / 7 },
+                    { width: (size.width - Spacing.S * 2) / WEEKDAYS.length },
                   ]}
                 >
                   {translate?.(Util.mapWeeKDate(dayIdx))}
@@ -237,9 +242,9 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
             maxDate={maxDate}
             startDate={startDate!}
             endDate={endDate!}
-            onChoose={onChooseDay}
-            onScrollCalendar={onScrollCalendar}
-            isShowLunar={!isOffLunar && showLunar}
+            onChoose={handleChooseDay}
+            onScrollCalendar={handleScrollCalendar}
+            isShowLunar={!isOffLunar && isLunarShown}
             isDoubleDateMode={isDoubleDateMode}
             tabSelected={tabSelected}
             holidays={holidays}
@@ -257,8 +262,8 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
             ]}
           >
             <CheckBox
-              onChange={onToggleLunar}
-              value={showLunar}
+              onChange={handleToggleLunar}
+              value={isLunarShown}
               label={translate?.('showLunar')}
             />
           </View>
@@ -273,8 +278,9 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
               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 || '' : '';
+              const shownMixedLabel = isLunarShown && item.mixedLabel;
+              const labelHoliday = shownMixedLabel || item.label;
+              const labelHighlight = isLunarShown ? item.highlight || '' : '';
               return (
                 <View style={styles.row} key={idx.toString()}>
                   <Text

package/HeaderControl.tsx

@@ -24,12 +24,10 @@ const HeaderControl: ForwardRefRenderFunction<
   });
 
   useImperativeHandle(ref, () => ({
-    onUpdateInfo,
+    onUpdateInfo: updateInfo,
   }));
 
-  const onUpdateInfo = (
-    date: React.SetStateAction<{ date: moment.Moment }>,
-  ) => {
+  const updateInfo = (date: React.SetStateAction<{ date: moment.Moment }>) => {
     setInfo(date);
   };
 

package/LunarDateConverter.ts

@@ -1,3 +1,9 @@
+const MIN_YEAR = 1900;
+const LONG_MONTH_DAYS = 30;
+const SHORT_MONTH_DAYS = 29;
+const MAX_MONTHS_WITH_LEAP = 13;
+
+/** Lunar date record that `SolarToLunar` fills; used with `new`. */
 function Lunar(this: any) {
   this.isleap = false;
   this.lunarDay = 0;
@@ -5,6 +11,7 @@ function Lunar(this: any) {
   this.lunarYear = 0;
 }
 
+/** Solar date record that `SolarFromInt` fills; used with `new`. */
 function Solar(this: any) {
   this.solarDay = 0;
   this.solarMonth = 0;
@@ -133,11 +140,10 @@ function LunarSolarConverter(this: any) {
     lunarDay: number;
   }) {
     const firstTableYear = this.lunar_month_days[0];
-    const minLunarYear = 1900;
     const maxLunarYear = firstTableYear + this.lunar_month_days.length - 1;
-    if (lunar.lunarYear < minLunarYear || lunar.lunarYear > maxLunarYear) {
+    if (lunar.lunarYear < MIN_YEAR || lunar.lunarYear > maxLunarYear) {
       throw new Error(
-        `LunarToSolar: year ${lunar.lunarYear} out of supported range ${minLunarYear}-${maxLunarYear}`,
+        `LunarToSolar: year ${lunar.lunarYear} out of supported range ${MIN_YEAR}-${maxLunarYear}`,
       );
     }
     const days = this.lunar_month_days[lunar.lunarYear - firstTableYear];
@@ -152,7 +158,8 @@ function LunarSolarConverter(this: any) {
       }
     }
     for (let i = 0; i < loopend; i++) {
-      offset += this.GetBitInt(days, 1, 12 - i) === 1 ? 30 : 29;
+      const isLongMonth = this.GetBitInt(days, 1, 12 - i) === 1;
+      offset += isLongMonth ? LONG_MONTH_DAYS : SHORT_MONTH_DAYS;
     }
     offset += lunar.lunarDay;
 
@@ -170,11 +177,10 @@ function LunarSolarConverter(this: any) {
     solarMonth: number;
     solarDay: number;
   }) {
-    const minSolarYear = 1900;
     const maxSolarYear = this.solar_1_1[0] + this.solar_1_1.length - 1;
-    if (solar.solarYear < minSolarYear || solar.solarYear > maxSolarYear) {
+    if (solar.solarYear < MIN_YEAR || solar.solarYear > maxSolarYear) {
       throw new Error(
-        `SolarToLunar: year ${solar.solarYear} out of supported range ${minSolarYear}-${maxSolarYear}`,
+        `SolarToLunar: year ${solar.solarYear} out of supported range ${MIN_YEAR}-${maxSolarYear}`,
       );
     }
     // @ts-ignore
@@ -200,8 +206,9 @@ function LunarSolarConverter(this: any) {
     let lunarM = 1;
     offset += 1;
 
-    for (let i = 0; i < 13; i++) {
-      const dm = this.GetBitInt(days, 1, 12 - i) === 1 ? 30 : 29;
+    for (let i = 0; i < MAX_MONTHS_WITH_LEAP; i++) {
+      const isLongMonth = this.GetBitInt(days, 1, 12 - i) === 1;
+      const dm = isLongMonth ? LONG_MONTH_DAYS : SHORT_MONTH_DAYS;
       if (offset > dm) {
         lunarM++;
         offset -= dm;

package/MonthList.tsx

@@ -22,10 +22,13 @@ import Month from './Month';
 import { MonthListProps, MonthListRef } from './types';
 
 const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
+const ROW_HEIGHT = 48;
+const DAYS_PER_WEEK = 7;
 
 // @ts-ignore
 const converter = new LunarDateConverter();
 
+/** Whether both moments fall in the same month of the same year. */
 const isSameMonth = (a: Moment, b: Moment) => {
   return a.year() === b.year() && a.month() === b.month();
 };
@@ -53,15 +56,15 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
   } = props;
 
   const size = useContext(ContainerContext);
-  const scaledHeight48 = useScaleSize(48);
+  const scaledRowHeight = useScaleSize(ROW_HEIGHT);
   const listRef = useRef<FlatList>(null);
   const currentKey = useRef<string | null>(null);
   const targetIndex = useRef<number | null>(null);
   const [heightStyle, setHeightStyle] = useState({});
   const onScrollCalendarRef = useRef(onScrollCalendar);
   onScrollCalendarRef.current = onScrollCalendar;
-  const scaledHeight48Ref = useRef(scaledHeight48);
-  scaledHeight48Ref.current = scaledHeight48;
+  const scaledRowHeightRef = useRef(scaledRowHeight);
+  scaledRowHeightRef.current = scaledRowHeight;
 
   const data = useMemo(() => {
     const months: { date: Moment; dateList: any[] }[] = [];
@@ -93,9 +96,10 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       }
       cursor.subtract(1, 'days');
       weekday = cursor.isoWeekday();
-      if (weekday !== 7) {
+      if (weekday !== DAYS_PER_WEEK) {
+        const trailingDays = DAYS_PER_WEEK - weekday;
         dayList.push(
-          ...new Array(7 - weekday).fill(0).map(() => ({ isEmpty: true })),
+          ...new Array(trailingDays).fill(0).map(() => ({ isEmpty: true })),
         );
       }
       months.push({ date: d, dateList: dayList });
@@ -132,9 +136,12 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
     });
   }, [size.width]);
 
-  const onScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
-    scrollOffset.current = e.nativeEvent.contentOffset.x;
-  }, []);
+  const handleScroll = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      scrollOffset.current = e.nativeEvent.contentOffset.x;
+    },
+    [],
+  );
 
   const scrollToMonth = useCallback(
     (month: Moment) => {
@@ -151,7 +158,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
 
   useImperativeHandle(ref, () => ({ scrollToMonth }));
 
-  const onViewableItemsChanged = useRef(({ changed }: { changed: any[] }) => {
+  const handleViewableChange = useRef(({ changed }: { changed: any[] }) => {
     const visible = changed.find(token => token.isViewable);
     // Ignore months passed while animating to a scrollToMonth target.
     const isScrollingToTarget = targetIndex.current !== null;
@@ -164,8 +171,8 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       if (onScrollCalendarRef.current && item && currentKey.current !== key) {
         currentKey.current = key;
         try {
-          const rowHeight = scaledHeight48Ref.current;
-          const rowsHeight = (rowHeight * item.dateList.length) / 7;
+          const rowHeight = scaledRowHeightRef.current;
+          const rowsHeight = (rowHeight * item.dateList.length) / DAYS_PER_WEEK;
           setHeightStyle({ height: rowsHeight + Spacing.L * 2 + Spacing.XS });
         } catch {
           setHeightStyle({});
@@ -253,7 +260,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       showsHorizontalScrollIndicator={false}
       keyExtractor={keyExtractor}
       onScrollToIndexFailed={() => {}}
-      onScroll={onScroll}
+      onScroll={handleScroll}
       onScrollBeginDrag={() => {
         targetIndex.current = null;
       }}
@@ -261,7 +268,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       initialNumToRender={3}
       maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
       windowSize={1}
-      onViewableItemsChanged={onViewableItemsChanged}
+      onViewableItemsChanged={handleViewableChange}
       initialScrollIndex={currentScrollIndex}
       getItemLayout={getItemLayout}
       viewabilityConfig={viewabilityConfig}

package/TabHeader.tsx

@@ -15,7 +15,9 @@ import { TabHeaderProps, TabHeaderRef } from './types';
 const TabHeader = forwardRef<TabHeaderRef, TabHeaderProps>((props, ref) => {
   const { label, disabled, id, onChangeTab } = props;
   const { theme, translate } = useContext(ApplicationContext);
-  const [active, setActive] = useState<boolean | undefined>(props.activeTab);
+  const [isActive, setIsActive] = useState<boolean | undefined>(
+    props.activeTab,
+  );
   const [date, setDate] = useState<Moment.Moment | undefined>(
     props.date ? Moment(props.date) : undefined,
   );
@@ -23,15 +25,15 @@ const TabHeader = forwardRef<TabHeaderRef, TabHeaderProps>((props, ref) => {
   useImperativeHandle(ref, () => ({
     updateView: (nextDate, activeTab) => {
       setDate(nextDate ? Moment(nextDate) : undefined);
-      setActive(activeTab);
+      setIsActive(activeTab);
     },
-    setActiveTab: setActive,
+    setActiveTab: setIsActive,
   }));
 
   const weekday = (day: Moment.Moment) => {
     return translate?.(Util.WEEKDAYSFROMMOMENT[day.day()]);
   };
-  const isHighlighted = active && !disabled;
+  const isHighlighted = isActive && !disabled;
 
   const formattedDate = date ? date.format('DD/MM/YYYY') : '';
   const dayOfWeek = date ? `${weekday(date)}, ` : '';

package/Util.ts

@@ -13,14 +13,17 @@ const Solar = (momentDate: moment.Moment) => ({
   solarYear: momentDate.year(),
 });
 
+/** Two-digit day or month: 7 → `07`. */
 const padTwoDigits = (value: number) => {
   return value < 10 ? `0${value}` : `${value}`;
 };
 
+/** `YYYY-MM-DD` string that `moment()` parses as a local date. */
 const formatYYYYMMDD = (dd: number, mm: number, yyyy: any) => {
   return `${yyyy}-${padTwoDigits(mm)}-${padTwoDigits(dd)}`;
 };
 
+/** `DD/MM` key that groups holidays by day. */
 const formatDDMM = (dd: number, mm: number) => {
   return `${padTwoDigits(dd)}/${padTwoDigits(mm)}`;
 };

package/index.tsx

@@ -15,6 +15,8 @@ import { ContainerContext } from './ContainerContext';
 import styles from './styles';
 
 const DOUBLE = 'doubleDate';
+const DAY_HEIGHT = 34;
+const PRICE_DAY_HEIGHT = 48;
 
 /**
  * Calendar with single or round-trip (`mode="doubleDate"`) selection, lunar
@@ -22,8 +24,8 @@ const DOUBLE = 'doubleDate';
  */
 const Calendar: React.FC<CalendarProps> = props => {
   const { theme } = useContext(ApplicationContext);
-  const scaledHeight48 = useScaleSize(48);
-  const scaledHeight34 = useScaleSize(34);
+  const scaledPriceDayHeight = useScaleSize(PRICE_DAY_HEIGHT);
+  const scaledDayHeight = useScaleSize(DAY_HEIGHT);
 
   const currentDate = new Date();
   const minDateDefault = new Date(currentDate);
@@ -36,7 +38,7 @@ const Calendar: React.FC<CalendarProps> = props => {
     id,
     doubleDate: initDoubleDate,
     selectedDate: initialSelectedDate,
-    onChangeTab: onChangeTabProp,
+    onChangeTab,
     onCallbackCalendar,
     isOffLunar,
     isHideHoliday,
@@ -96,12 +98,12 @@ const Calendar: React.FC<CalendarProps> = props => {
     }
   }, []);
 
-  const onLayout = (e: LayoutChangeEvent) => {
+  const handleLayout = (e: LayoutChangeEvent) => {
     setContainerWidth(e.nativeEvent.layout.width);
   };
 
-  const onChangeTab = (tabId: number) => {
-    onChangeTabProp?.(tabId);
+  const handleChangeTab = (tabId: number) => {
+    onChangeTab?.(tabId);
     tabSelected.current = tabId;
     cellHeader1.current?.setActiveTab(tabId === 0);
     cellHeader2.current?.setActiveTab(tabId === 1);
@@ -181,17 +183,17 @@ const Calendar: React.FC<CalendarProps> = props => {
   };
 
   // Skip the mount run so the initial doubleDate props are kept.
-  const didMount = useRef(false);
+  const hasMounted = useRef(false);
 
   useEffect(() => {
-    if (didMount.current) {
+    if (hasMounted.current) {
       updateView();
     } else {
-      didMount.current = true;
+      hasMounted.current = true;
     }
   }, [selectedDate]);
 
-  const onDateChangeHandler = (date: moment.Moment) => setSelectedDate(date);
+  const handleDateChange = (date: moment.Moment) => setSelectedDate(date);
 
   const updateHeaderView = () => {
     const { onDateChange, onCTAStateChange } = props;
@@ -231,12 +233,12 @@ const Calendar: React.FC<CalendarProps> = props => {
     });
   };
 
-  const didMountMode = useRef(false);
+  const hasModeMounted = useRef(false);
   useEffect(() => {
-    if (didMountMode.current) {
+    if (hasModeMounted.current) {
       updateHeaderView();
     } else {
-      didMountMode.current = true;
+      hasModeMounted.current = true;
     }
   }, [isDoubleDateMode]);
 
@@ -244,10 +246,10 @@ const Calendar: React.FC<CalendarProps> = props => {
     <ContainerContext.Provider
       value={{
         width: containerWidth,
-        height: priceList ? scaledHeight48 : scaledHeight34,
+        height: priceList ? scaledPriceDayHeight : scaledDayHeight,
       }}
     >
-      <View onLayout={onLayout} style={[style, styles.scrollView]}>
+      <View onLayout={handleLayout} style={[style, styles.scrollView]}>
         <View
           style={[
             {
@@ -269,7 +271,7 @@ const Calendar: React.FC<CalendarProps> = props => {
             cellHeader1={cellHeader1}
             cellHeader2={cellHeader2}
             cellHeaderSingle={cellHeaderSingle}
-            onChangeTab={onChangeTab}
+            onChangeTab={handleChangeTab}
             headerFrom={props.headerFrom}
             headerTo={props.headerTo}
             firstDate={doubleDate.current.first}
@@ -282,7 +284,7 @@ const Calendar: React.FC<CalendarProps> = props => {
           ref={calendarPicker}
           startDate={doubleDate.current.first!}
           endDate={doubleDate.current.second!}
-          onDateChange={onDateChangeHandler}
+          onDateChange={handleDateChange}
           isDoubleDateMode={isDoubleDateMode}
           selectedDate={selectedDate}
           isShowLunar={isShowLunar}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calendar",
-    "version": "0.169.7",
+    "version": "0.169.9",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {