@momo-kits/calendar 0.167.2-beta.1 → 0.168.1-beta.10

package/CalendarPro.tsx

@@ -200,9 +200,8 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
 
     // Determine price list format
     let priceListFormat = priceList?.outbound;
-    if (isDoubleDateMode) {
-      priceListFormat =
-        tabSelected === 0 ? priceList?.outbound : priceList?.inbound;
+    if (isDoubleDateMode && tabSelected !== 0) {
+      priceListFormat = priceList?.inbound;
     }
 
     return (
@@ -274,9 +273,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
               const labelDate = `${item.day > 9 ? item.day : `0${item.day}`}/${
                 item.month > 9 ? item.month : `0${item.month}`
               }`;
-              const labelHoliday = showLunar
-                ? item.mixedLabel || item.label
-                : item.label;
+              const labelHoliday = (showLunar && item.mixedLabel) || item.label;
               const labelHighlight = showLunar ? item.highlight || '' : '';
               return (
                 <View style={styles.row} key={idx.toString()}>

package/Day.tsx

@@ -63,9 +63,8 @@ const Day: React.FC<DayProps> = props => {
   const isWeekEnd = index === 6 || index === 5;
   const showLunar = isShowLunar;
 
-  const isInScope = isDoubleDateMode
-    ? tabSelected === 0 || date.isSameOrAfter(startDate, 'day')
-    : true;
+  const isEndTab = isDoubleDateMode && tabSelected !== 0;
+  const isInScope = !isEndTab || date.isSameOrAfter(startDate, 'day');
 
   const chooseDay = () => {
     onChoose && onChoose(date);
@@ -95,6 +94,9 @@ const Day: React.FC<DayProps> = props => {
     lunarTextColor = theme.colors.text.disable;
   }
 
+  const { lunarDay, lunarMonth } = lunarDate ?? {};
+  const lunarLabel = lunarDay === 1 ? `${lunarDay}/${lunarMonth}` : lunarDay;
+
   return (
     <View style={[styles.dayContainer, { width: itemWidth }]}>
       <View
@@ -131,9 +133,7 @@ const Day: React.FC<DayProps> = props => {
                 fontFamily: lunarFontFamily,
               }}
             >
-              {lunarDate.lunarDay === 1
-                ? `${lunarDate.lunarDay}/${lunarDate.lunarMonth}`
-                : lunarDate.lunarDay}
+              {lunarLabel}
             </RNText>
           )}
           <Text typography="body_default_regular" color={textColor}>

package/Month.tsx

@@ -78,13 +78,10 @@ const Month: React.FC<MonthProps> = ({
             {dayList.map((item, i) => {
               const {isEmpty, date: dateMoment, lunarDate} = item;
               // compute key for price/disabled only if not empty
-              const keyDay = !isEmpty && dateMoment
-                ? dateMoment.format('YYYY-MM-DD')
-                : '';
+              const hasDate = !isEmpty && dateMoment;
+              const keyDay = hasDate ? dateMoment.format('YYYY-MM-DD') : '';
               const priceInfo = keyDay ? priceListDate?.[keyDay] : undefined;
-              const isDisabled = keyDay
-                ? disabledSet.has(keyDay)
-                : false;
+              const isDisabled = keyDay ? disabledSet.has(keyDay) : false;
 
               return (
                 <Day

package/MonthList.tsx

@@ -6,11 +6,17 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
-import { FlatList, Platform } from 'react-native';
+import {
+  FlatList,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Platform,
+} from 'react-native';
 import { ContainerContext } from './index';
 import LunarDateConverter from './LunarDateConverter';
 import Month from './Month';
@@ -102,6 +108,32 @@ 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.width);
+  const pageWidth = useRef(size.width);
+
+  useLayoutEffect(() => {
+    const previousWidth = pageWidth.current;
+    pageWidth.current = size.width;
+    if (previousWidth === size.width || previousWidth <= 0) {
+      return;
+    }
+    const page = Math.round(scrollOffset.current / previousWidth);
+    scrollOffset.current = page * size.width;
+    listRef.current?.scrollToOffset({
+      offset: scrollOffset.current,
+      animated: false,
+    });
+  }, [size.width]);
+
+  const onScroll = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      scrollOffset.current = e.nativeEvent.contentOffset.x;
+    },
+    [],
+  );
+
   const scrollToMonth = useCallback(
     (month: Moment) => {
       const idx = getIndexOfMonth(month);
@@ -211,6 +243,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       showsHorizontalScrollIndicator={false}
       keyExtractor={keyExtractor}
       onScrollToIndexFailed={() => {}}
+      onScroll={onScroll}
       scrollEnabled
       initialNumToRender={3}
       maxToRenderPerBatch={MAX_RENDER_PER_BATCH}

package/TabHeader.tsx

@@ -49,17 +49,15 @@ export default class TabHeader extends React.Component<
     const {label, disabled} = this.props;
     const {date, active} = this.state;
     const {theme, translate} = this.context;
+    const defaultDate = this.defaultDate;
+    const weekday = (day: Moment.Moment) =>
+      translate?.(Util.WEEKDAYSFROMMOMENT[day.day()]);
+    const isHighlighted = active && !disabled;
 
     const formattedDateFromState = date ? date.format('DD/MM/YYYY') : '';
-    const formattedDateFromDefault = this.defaultDate
-      ? this.defaultDate.format('DD/MM/YYYY')
-      : '';
-    const dayOfWeekFromState = date
-      ? `${translate?.(Util.WEEKDAYSFROMMOMENT[date.day()])}, `
-      : '';
-    const dayOfWeekFromDefault = this.defaultDate
-      ? `${translate?.(Util.WEEKDAYSFROMMOMENT[this.defaultDate.day()])},`
-      : '';
+    const formattedDateFromDefault = defaultDate?.format('DD/MM/YYYY') ?? '';
+    const dayOfWeekFromState = date ? `${weekday(date)}, ` : '';
+    const dayOfWeekFromDefault = defaultDate ? `${weekday(defaultDate)},` : '';
 
     return (
       <TouchableWithoutFeedback disabled={disabled} onPress={this.onChangeTab}>
@@ -70,10 +68,9 @@ export default class TabHeader extends React.Component<
               padding: Spacing.S,
               borderRadius: Radius.S,
             },
-            active &&
-              !disabled && {
-                backgroundColor: theme.colors.background.surface,
-              },
+            isHighlighted && {
+              backgroundColor: theme.colors.background.surface,
+            },
           ]}>
           <Text
             typography={'description_default_regular'}

package/Util.ts

@@ -68,9 +68,7 @@ const groupHolidaysByDate = (
     holidays.forEach(item => {
       const {day, month, lunar, label} = item;
       const key = formatDDMM(day, month);
-      let holidaysObj = groupedHolidays[key]
-        ? {...groupedHolidays[key]}
-        : {...item};
+      let holidaysObj = { ...(groupedHolidays[key] || item) };
       if (groupedHolidays[key]) {
         if (holidaysObj.lunar && !lunar) {
           holidaysObj = {
@@ -199,10 +197,9 @@ const Utils = {
       const minLunarDate = converter.SolarToLunar(Solar(startDate));
       const maxLunarDate = converter.SolarToLunar(Solar(endDate));
       const holidays: any[] = [];
-      const currentYear =
-        minLunarDate.lunarYear !== maxLunarDate.lunarYear
-          ? [minLunarDate.lunarYear, maxLunarDate.lunarYear]
-          : minLunarDate.lunarYear;
+      const minYear = minLunarDate.lunarYear;
+      const maxYear = maxLunarDate.lunarYear;
+      const currentYear = minYear !== maxYear ? [minYear, maxYear] : minYear;
 
       // Handle Solar holidays
       // @ts-ignore

package/index.tsx

@@ -66,25 +66,21 @@ const Calendar: React.FC<CalendarProps> = props => {
   const [isDoubleDateMode, setIsDoubleDateMode] = useState<boolean>(
     mode === DOUBLE,
   );
+  let initialDate = initialSelectedDate;
+  if (!initialDate && mode === DOUBLE) {
+    initialDate = initDoubleDate?.first;
+  }
   const [selectedDate, setSelectedDate] = useState<moment.Moment>(
-    initialSelectedDate
-      ? moment(initialSelectedDate)
-      : mode === DOUBLE && initDoubleDate && initDoubleDate.first
-      ? moment(initDoubleDate.first)
-      : moment(),
+    initialDate ? moment(initialDate) : moment(),
   );
 
   const doubleDate = useRef<{
     first: moment.Moment | null;
     second: moment.Moment | null;
-  }>(
-    initDoubleDate
-      ? {
-          first: initDoubleDate.first ? moment(initDoubleDate.first) : null,
-          second: initDoubleDate.second ? moment(initDoubleDate.second) : null,
-        }
-      : { first: null, second: null },
-  );
+  }>({
+    first: initDoubleDate?.first ? moment(initDoubleDate.first) : null,
+    second: initDoubleDate?.second ? moment(initDoubleDate.second) : null,
+  });
   const tabSelected = useRef<number>(id || 0);
 
   const calendarPicker = useRef<CalendarProRef>(null);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calendar",
-    "version": "0.167.2-beta.1",
+    "version": "0.168.1-beta.10",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {