@momo-kits/calendar 0.167.1-duotest.1 → 0.167.1-rc.2

package/CalendarHeader.tsx

@@ -0,0 +1,107 @@
+import React, { useContext } from 'react';
+import { View } from 'react-native';
+import moment from 'moment';
+import { ApplicationContext, Switch, Text } from '@momo-kits/foundation';
+import TabHeader from './TabHeader';
+import { TabHeaderRef } from './types';
+import styles from './styles';
+
+type SwitchReturnSelectionProps = {
+  hidden?: boolean;
+  title?: string;
+  value: boolean;
+  onChange: () => void;
+};
+
+export const SwitchReturnSelection: React.FC<
+  SwitchReturnSelectionProps
+> = props => {
+  const { translate, theme } = useContext(ApplicationContext);
+  if (props.hidden) return null;
+  return (
+    <View style={styles.headerContainer}>
+      <View
+        style={[
+          styles.viewSwitch,
+          { backgroundColor: theme.colors.background.surface },
+        ]}
+      >
+        <Text typography="label_default_medium">
+          {props.title || translate?.('chooseRoundtrip')}
+        </Text>
+        <Switch value={props.value} onChange={props.onChange} />
+      </View>
+    </View>
+  );
+};
+
+type HeaderPanelProps = {
+  isDoubleDateMode: boolean;
+  cellHeader1: React.RefObject<TabHeaderRef | null>;
+  cellHeader2: React.RefObject<TabHeaderRef | null>;
+  cellHeaderSingle: React.RefObject<TabHeaderRef | null>;
+  onChangeTab: (tabId: number) => void;
+  headerFrom?: string;
+  headerTo?: string;
+  firstDate: moment.Moment | null;
+  secondDate: moment.Moment | null;
+  selectedDate: moment.Moment;
+};
+
+export const HeaderPanel: React.FC<HeaderPanelProps> = props => {
+  const { theme } = useContext(ApplicationContext);
+  const {
+    isDoubleDateMode,
+    cellHeader1,
+    cellHeader2,
+    cellHeaderSingle,
+    onChangeTab,
+    headerFrom,
+    headerTo,
+    firstDate,
+    secondDate,
+    selectedDate,
+  } = props;
+  return isDoubleDateMode ? (
+    <View
+      style={[
+        styles.viewPanel,
+        { backgroundColor: theme.colors.background.default },
+      ]}
+    >
+      <TabHeader
+        id={0}
+        ref={cellHeader1}
+        onChangeTab={onChangeTab}
+        label={headerFrom || 'depart'}
+        activeTab
+        date={firstDate}
+      />
+      <View style={styles.tabGap} />
+      <TabHeader
+        id={1}
+        ref={cellHeader2}
+        onChangeTab={onChangeTab}
+        label={headerTo || 'return'}
+        activeTab={false}
+        date={secondDate}
+      />
+    </View>
+  ) : (
+    <View
+      style={[
+        styles.viewPanel,
+        { backgroundColor: theme.colors.background.default },
+      ]}
+    >
+      <TabHeader
+        id={0}
+        disabled
+        ref={cellHeaderSingle}
+        label={headerFrom || 'depart'}
+        activeTab
+        date={selectedDate}
+      />
+    </View>
+  );
+};

package/CalendarPro.tsx

@@ -7,18 +7,16 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from 'react';
-import { Platform, ScrollView, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import moment, { Moment } from 'moment';
 import {
   ApplicationContext,
   CheckBox,
-  Colors,
   Spacing,
   Text,
 } from '@momo-kits/foundation';
 import MonthList from './MonthList';
 import HeaderControl from './HeaderControl';
-import LunarDateConverter from './LunarDateConverter';
 import Util from './Util';
 import {
   CalendarProProps,
@@ -27,7 +25,7 @@ import {
   MonthListRef,
   Holidays,
 } from './types';
-import { ContainerContext } from './index';
+import { ContainerContext } from './ContainerContext';
 import styles from './styles';
 
 const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
@@ -53,8 +51,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
     const { theme, translate } = useContext(ApplicationContext);
     const size = useContext(ContainerContext);
 
-    const today = useMemo(() => moment(), []);
-    const headerRef = useRef<Moment>(today.clone());
+    const headerRef = useRef<Moment>(moment());
     const headerControlRef = useRef<HeaderControlRef>(null);
     const monthListRef = useRef<MonthListRef>(null);
 
@@ -84,10 +81,6 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
     const [temp, setTemp] = useState<any[]>([]);
     const [headerKey, setHeaderKey] = useState<string>('');
     const [ownUpdate, setOwnUpdate] = useState<boolean>(false);
-    const converter: any = useMemo(
-      () => (new LunarDateConverter()),
-      [],
-    );
 
     useImperativeHandle(ref, () => ({
       setDoubleDateAndTabIndex: (
@@ -99,11 +92,6 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
         if (firstDate) setStartDate(firstDate);
         if (secondDate !== undefined) setEndDate(secondDate);
       },
-      setDateRange: (dateRange: { startDate: any; endDate: any }) => {
-        if (monthListRef.current && dateRange.startDate) {
-          monthListRef.current.scrollToMonth(moment(dateRange.startDate));
-        }
-      },
     }));
 
     // Sync showLunar prop
@@ -200,13 +188,17 @@ 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 (
-      <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          { backgroundColor: theme.colors.background.surface },
+        ]}
+      >
         <HeaderControl
           ref={headerControlRef}
           selectedDate={propSelectedDate}
@@ -219,11 +211,15 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
             {[1, 2, 3, 4, 5, 6, 7].map(dayIdx => (
               <Text
                 key={dayIdx}
-                color={dayIdx >= 6 ? Colors.red_03 : Colors.black_17}
+                color={
+                  dayIdx >= 6
+                    ? theme.colors.error.primary
+                    : theme.colors.text.default
+                }
                 typography="label_s_medium"
                 style={[
                   styles.textDay,
-                  { width: (size.width - Spacing.M * 2) / 7 },
+                  { width: (size.width - Spacing.S * 2) / 7 },
                 ]}
               >
                 {translate?.(Util.mapWeeKDate(dayIdx))}
@@ -232,7 +228,6 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
           </View>
           <MonthList
             ref={monthListRef}
-            today={today}
             minDate={minDate}
             maxDate={maxDate}
             startDate={startDate!}
@@ -242,7 +237,6 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
             isShowLunar={!isOffLunar && showLunar}
             isDoubleDateMode={isDoubleDateMode}
             tabSelected={tabSelected}
-            lunarConverter={converter}
             holidays={holidays}
             selectedDate={propSelectedDate}
             priceList={priceListFormat}
@@ -274,9 +268,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/ContainerContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ContainerContext = createContext({ width: 0, height: 0 });

package/Day.tsx

@@ -9,7 +9,7 @@ import {
   exportFontFamily,
 } from '@momo-kits/foundation';
 import { DayProps } from './types';
-import { ContainerContext } from './index';
+import { ContainerContext } from './ContainerContext';
 import styles from './styles';
 
 const Day: React.FC<DayProps> = props => {
@@ -36,13 +36,12 @@ const Day: React.FC<DayProps> = props => {
 
   const { theme } = useContext(ApplicationContext);
   const size = useContext(ContainerContext);
-  const scaledHeight = useScaleSize(48);
   const scaledSpacing = useScaleSize(Spacing.XS);
   const scaledFontSize = useScaleSize(8);
   const scaledLineHeight = useScaleSize(12);
   const lunarFontFamily = exportFontFamily('regular');
 
-  const itemWidth = (size.width - Spacing.M) / 7;
+  const itemWidth = (size.width - Spacing.S * 2) / 7;
   if (isEmpty || !date) {
     return <View style={[styles.dayContainer, { width: itemWidth }]} />;
   }
@@ -63,9 +62,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 +93,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
@@ -109,10 +110,9 @@ const Day: React.FC<DayProps> = props => {
             styles.day,
             {
               width: itemWidth,
-              paddingVertical: !!price ? Spacing.XS : Spacing.S,
+              paddingVertical: price ? Spacing.XS : Spacing.S,
             },
             (isStart || isEnd) && { backgroundColor: theme.colors.primary },
-            !!price && { height: scaledHeight },
             { height: size.height },
           ]}
           disabled={!(isValid && isInScope)}
@@ -121,19 +121,19 @@ const Day: React.FC<DayProps> = props => {
           {lunarDate && showLunar && !!date && (
             <RNText
               allowFontScaling={false}
-              style={{
-                position: 'absolute',
-                top: scaledSpacing,
-                right: scaledSpacing,
-                color: lunarTextColor,
-                fontSize: scaledFontSize,
-                lineHeight: scaledLineHeight,
-                fontFamily: lunarFontFamily,
-              }}
+              style={[
+                styles.lunarText,
+                {
+                  top: scaledSpacing,
+                  right: scaledSpacing,
+                  color: lunarTextColor,
+                  fontSize: scaledFontSize,
+                  lineHeight: scaledLineHeight,
+                  fontFamily: lunarFontFamily,
+                },
+              ]}
             >
-              {lunarDate.lunarDay === 1
-                ? `${lunarDate.lunarDay}/${lunarDate.lunarMonth}`
-                : lunarDate.lunarDay}
+              {lunarLabel}
             </RNText>
           )}
           <Text typography="body_default_regular" color={textColor}>

package/HeaderControl.tsx

@@ -7,7 +7,6 @@ import React, {
 } from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import moment from 'moment';
-import Moment from 'moment';
 import {ApplicationContext, Icon, Text} from '@momo-kits/foundation';
 
 import Util from './Util';
@@ -19,7 +18,7 @@ const HeaderControl: ForwardRefRenderFunction<
   HeaderControlProps
 > = ({onPressBackArrow, onPressNextArrow, selectedDate}, ref) => {
   const {translate} = useContext(ApplicationContext);
-  const [info, setInfo] = useState<{date: Moment.Moment}>({
+  const [info, setInfo] = useState<{date: moment.Moment}>({
     date: moment(selectedDate || new Date()),
   });
 

package/LunarDateConverter.ts

@@ -77,6 +77,7 @@ function LunarSolarConverter(this: any) {
    * @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;
   };
 
@@ -86,43 +87,43 @@ function LunarSolarConverter(this: any) {
    */
   this.SolarToInt = function (y: number, m: number, d: number) {
     m = (m + 9) % 12;
-    y = parseInt(String(y)) - parseInt(String(m / 10));
+    y = parseInt(String(y), 10) - parseInt(String(m / 10), 10);
     return (
       365 * y +
-      parseInt(String(y / 4)) -
-      parseInt(String(y / 100)) +
-      parseInt(String(y / 400)) +
-      parseInt(String((m * 306 + 5) / 10)) +
+      parseInt(String(y / 4), 10) -
+      parseInt(String(y / 100), 10) +
+      parseInt(String(y / 400), 10) +
+      parseInt(String((m * 306 + 5) / 10), 10) +
       (d - 1)
     );
   };
 
   this.SolarFromInt = function (g: number) {
-    let y = parseInt(String((10000 * g + 14780) / 3652425));
+    let y = parseInt(String((10000 * g + 14780) / 3652425), 10);
     let ddd =
       g -
       (365 * y +
-        parseInt(String(y / 4)) -
-        parseInt(String(y / 100)) +
-        parseInt(String(y / 400)));
+        parseInt(String(y / 4), 10) -
+        parseInt(String(y / 100), 10) +
+        parseInt(String(y / 400), 10));
     if (ddd < 0) {
       y--;
       ddd =
         g -
         (365 * y +
-          parseInt(String(y / 4)) -
-          parseInt(String(y / 100)) +
-          parseInt(String(y / 400)));
+          parseInt(String(y / 4), 10) -
+          parseInt(String(y / 100), 10) +
+          parseInt(String(y / 400), 10));
     }
-    const mi = parseInt(String((100 * ddd + 52) / 3060));
+    const mi = parseInt(String((100 * ddd + 52) / 3060), 10);
     const mm = ((mi + 2) % 12) + 1;
-    y += parseInt(String((mi + 2) / 12));
-    const dd = ddd - parseInt(String((mi * 306 + 5) / 10)) + 1;
+    y += parseInt(String((mi + 2) / 12), 10);
+    const dd = ddd - parseInt(String((mi * 306 + 5) / 10), 10) + 1;
     // @ts-ignore
     const solar = new Solar();
-    solar.solarYear = parseInt(String(y));
-    solar.solarMonth = parseInt(String(mm));
-    solar.solarDay = parseInt(String(dd));
+    solar.solarYear = parseInt(String(y), 10);
+    solar.solarMonth = parseInt(String(mm), 10);
+    solar.solarDay = parseInt(String(dd), 10);
     return solar;
   };
 
@@ -181,6 +182,7 @@ function LunarSolarConverter(this: any) {
     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;
     if (this.solar_1_1[index] > data) {
       index--;
@@ -209,7 +211,7 @@ function LunarSolarConverter(this: any) {
         break;
       }
     }
-    const lunarD = parseInt(String(offset));
+    const lunarD = parseInt(String(offset), 10);
     lunar.lunarYear = lunarY;
     lunar.lunarMonth = lunarM;
     lunar.isleap = false;

package/Month.tsx

@@ -2,9 +2,10 @@ import React, {useContext, useMemo} from 'react';
 import {View} from 'react-native';
 import moment, {Moment} from 'moment';
 import Day from './Day';
-import {useScaleSize, Spacing} from '@momo-kits/foundation';
+import {useScaleSize} from '@momo-kits/foundation';
 import {MonthProps} from './types';
-import {ContainerContext} from './index';
+import {ContainerContext} from './ContainerContext';
+import styles from './styles';
 
 const Month: React.FC<MonthProps> = ({
   dateList,
@@ -60,31 +61,18 @@ const Month: React.FC<MonthProps> = ({
 
   return (
     <View style={{width: size.width}}>
-      <View
-        style={{
-          paddingHorizontal: Spacing.S,
-          width: '100%',
-          alignItems: 'center',
-        }}>
+      <View style={styles.monthRows}>
         {rows.map((dayList, rowIndex) => (
           <View
             key={`row${rowIndex}`}
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              marginBottom: Spacing.XS,
-              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 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

@@ -5,7 +5,6 @@ import React, {
   useImperativeHandle,
   useCallback,
   useContext,
-  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -17,7 +16,7 @@ import {
   NativeSyntheticEvent,
   Platform,
 } from 'react-native';
-import { ContainerContext } from './index';
+import { ContainerContext } from './ContainerContext';
 import LunarDateConverter from './LunarDateConverter';
 import Month from './Month';
 import { MonthListProps, MonthListRef } from './types';
@@ -39,15 +38,22 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
     isShowLunar,
     isDoubleDateMode,
     disabledDays,
+    tabSelected,
+    onChoose,
+    bestPriceColor,
     onScrollCalendar,
-    ...restProps
   } = props;
 
   const size = useContext(ContainerContext);
   const scaledHeight48 = useScaleSize(48);
   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 data = useMemo(() => {
     const months: { date: Moment; dateList: any[] }[] = [];
@@ -69,9 +75,6 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       }
       while (cursor.month() === monthIdx) {
         const cloned = cursor.clone();
-        const hol = holidays.find(
-          h => h.day === cloned.date() && h.month === cloned.month() + 1,
-        );
         dayList.push({
           isEmpty: false,
           date: cloned,
@@ -80,8 +83,6 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
             solarMonth: cloned.month() + 1,
             solarYear: cloned.year(),
           }),
-          isSolarHoliday: !!(hol && !hol.lunar),
-          isLunarHoliday: !!(hol && hol.lunar),
         });
         cursor.add(1, 'days');
       }
@@ -96,7 +97,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       mMin.add(1, 'month');
     }
     return months;
-  }, [minDate, maxDate, holidays]);
+  }, [minDate, maxDate]);
 
   const getIndexOfMonth = useCallback(
     (date: Moment) => data.findIndex(item => item.date.isSame(date, 'month')),
@@ -138,6 +139,9 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
     (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;
         listRef.current.scrollToIndex({ index: idx, animated: true });
       }
     },
@@ -146,29 +150,31 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
 
   useImperativeHandle(ref, () => ({ scrollToMonth }));
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      scrollToMonth(selectedDate);
-    }, 500);
-    return () => clearTimeout(timer);
-  }, []);
-
   const onViewableItemsChanged = useRef(({ changed }: { changed: any[] }) => {
-    if (changed.length > 0) {
-      const { item, key, index } = changed[0];
-      if (onScrollCalendar && item && currentKey.current !== key) {
+    const visible = changed.find(token => token.isViewable);
+    if (targetIndex.current !== null && visible?.index !== targetIndex.current) {
+      return;
+    }
+    targetIndex.current = null;
+    if (visible) {
+      const { item, key, index } = visible;
+      if (onScrollCalendarRef.current && item && currentKey.current !== key) {
         currentKey.current = key;
         try {
           setHeightStyle({
             height:
-              (scaledHeight48 * item.dateList.length) / 7 +
+              (scaledHeight48Ref.current * item.dateList.length) / 7 +
               Spacing.L * 2 +
               Spacing.XS,
           });
         } catch {
           setHeightStyle({});
         }
-        onScrollCalendar({ date: item.date, key, currentIndex: index });
+        onScrollCalendarRef.current({
+          date: item.date,
+          key,
+          currentIndex: index,
+        });
       }
     }
   }).current;
@@ -201,7 +207,6 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       const priceListDate = priceList?.[keyMonth]?.day;
       return (
         <Month
-          {...restProps}
           key={index}
           month={item.date}
           dateList={item.dateList}
@@ -214,11 +219,13 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
           isShowLunar={isShowLunar}
           isDoubleDateMode={isDoubleDateMode}
           disabledDays={disabledDays}
+          tabSelected={tabSelected}
+          onChoose={onChoose}
+          bestPriceColor={bestPriceColor}
         />
       );
     },
     [
-      restProps,
       priceList,
       holidays,
       minDate,
@@ -228,6 +235,9 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       isShowLunar,
       isDoubleDateMode,
       disabledDays,
+      tabSelected,
+      onChoose,
+      bestPriceColor,
     ],
   );
 
@@ -244,6 +254,9 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       keyExtractor={keyExtractor}
       onScrollToIndexFailed={() => {}}
       onScroll={onScroll}
+      onScrollBeginDrag={() => {
+        targetIndex.current = null;
+      }}
       scrollEnabled
       initialNumToRender={3}
       maxToRenderPerBatch={MAX_RENDER_PER_BATCH}