@momo-kits/calendar 0.168.1-beta.18 → 0.168.1-beta.19

package/CalendarPro.tsx

@@ -7,16 +7,18 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from 'react';
-import { ScrollView, View } from 'react-native';
+import { Platform, 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,
@@ -25,7 +27,7 @@ import {
   MonthListRef,
   Holidays,
 } from './types';
-import { ContainerContext } from './ContainerContext';
+import { ContainerContext } from './index';
 import styles from './styles';
 
 const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
@@ -51,7 +53,8 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
     const { theme, translate } = useContext(ApplicationContext);
     const size = useContext(ContainerContext);
 
-    const headerRef = useRef<Moment>(moment());
+    const today = useMemo(() => moment(), []);
+    const headerRef = useRef<Moment>(today.clone());
     const headerControlRef = useRef<HeaderControlRef>(null);
     const monthListRef = useRef<MonthListRef>(null);
 
@@ -81,6 +84,10 @@ 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: (
@@ -92,6 +99,11 @@ 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
@@ -193,12 +205,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
     }
 
     return (
-      <View
-        style={[
-          styles.container,
-          { backgroundColor: theme.colors.background.surface },
-        ]}
-      >
+      <View style={styles.container}>
         <HeaderControl
           ref={headerControlRef}
           selectedDate={propSelectedDate}
@@ -211,15 +218,11 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
             {[1, 2, 3, 4, 5, 6, 7].map(dayIdx => (
               <Text
                 key={dayIdx}
-                color={
-                  dayIdx >= 6
-                    ? theme.colors.error.primary
-                    : theme.colors.text.default
-                }
+                color={dayIdx >= 6 ? Colors.red_03 : Colors.black_17}
                 typography="label_s_medium"
                 style={[
                   styles.textDay,
-                  { width: (size.width - Spacing.S * 2) / 7 },
+                  { width: (size.width - Spacing.M * 2) / 7 },
                 ]}
               >
                 {translate?.(Util.mapWeeKDate(dayIdx))}
@@ -228,6 +231,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
           </View>
           <MonthList
             ref={monthListRef}
+            today={today}
             minDate={minDate}
             maxDate={maxDate}
             startDate={startDate!}
@@ -237,6 +241,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
             isShowLunar={!isOffLunar && showLunar}
             isDoubleDateMode={isDoubleDateMode}
             tabSelected={tabSelected}
+            lunarConverter={converter}
             holidays={holidays}
             selectedDate={propSelectedDate}
             priceList={priceListFormat}

package/Day.tsx

@@ -9,7 +9,7 @@ import {
   exportFontFamily,
 } from '@momo-kits/foundation';
 import { DayProps } from './types';
-import { ContainerContext } from './ContainerContext';
+import { ContainerContext } from './index';
 import styles from './styles';
 
 const Day: React.FC<DayProps> = props => {
@@ -36,12 +36,13 @@ 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.S * 2) / 7;
+  const itemWidth = (size.width - Spacing.M) / 7;
   if (isEmpty || !date) {
     return <View style={[styles.dayContainer, { width: itemWidth }]} />;
   }
@@ -113,6 +114,7 @@ const Day: React.FC<DayProps> = props => {
               paddingVertical: !!price ? Spacing.XS : Spacing.S,
             },
             (isStart || isEnd) && { backgroundColor: theme.colors.primary },
+            !!price && { height: scaledHeight },
             { height: size.height },
           ]}
           disabled={!(isValid && isInScope)}

package/HeaderControl.tsx

@@ -7,6 +7,7 @@ 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';
@@ -18,7 +19,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/LunarService.ts

@@ -0,0 +1,206 @@
+const removeFractionalPart = (number: string | number) =>
+  parseInt(String(number));
+
+/* Compute the (integral) Julian day number of day dd/mm/yyyy, i.e., the number
+ * of days between 1/1/4713 BC (Julian calendar) and dd/mm/yyyy.
+ * Formula from http://www.tondering.dk/claus/calendar.html
+ */
+const jdFromDate = (dd: number, mm: number, yy: number) => {
+  let a, y, m, jd;
+  a = removeFractionalPart((14 - mm) / 12);
+  y = yy + 4800 - a;
+  m = mm + 12 * a - 3;
+  jd =
+    dd +
+    removeFractionalPart((153 * m + 2) / 5) +
+    365 * y +
+    removeFractionalPart(y / 4) -
+    removeFractionalPart(y / 100) +
+    removeFractionalPart(y / 400) -
+    32045;
+  if (jd < 2299161) {
+    jd =
+      dd +
+      removeFractionalPart((153 * m + 2) / 5) +
+      365 * y +
+      removeFractionalPart(y / 4) -
+      32083;
+  }
+  return jd;
+};
+
+/* Compute the time of the k-th new moon after the new moon of 1/1/1900 13:52 UCT
+ * (measured as the number of days since 1/1/4713 BC noon UCT, e.g., 2451545.125 is 1/1/2000 15:00 UTC).
+ * Returns a floating number, e.g., 2415079.9758617813 for k=2 or 2414961.935157746 for k=-2
+ * Algorithm from: "Astronomical Algorithms" by Jean Meeus, 1998
+ */
+const NewMoon = (k: number) => {
+  let T, T2, T3, dr, Jd1, M, Mpr, F, C1, deltat, JdNew;
+  T = k / 1236.85; // Time in Julian centuries from 1900 January 0.5
+  T2 = T * T;
+  T3 = T2 * T;
+  dr = Math.PI / 180;
+  Jd1 = 2415020.75933 + 29.53058868 * k + 0.0001178 * T2 - 0.000000155 * T3;
+  Jd1 = Jd1 + 0.00033 * Math.sin((166.56 + 132.87 * T - 0.009173 * T2) * dr); // Mean new moon
+  M = 359.2242 + 29.10535608 * k - 0.0000333 * T2 - 0.00000347 * T3; // Sun's mean anomaly
+  Mpr = 306.0253 + 385.81691806 * k + 0.0107306 * T2 + 0.00001236 * T3; // Moon's mean anomaly
+  F = 21.2964 + 390.67050646 * k - 0.0016528 * T2 - 0.00000239 * T3; // Moon's argument of latitude
+  C1 =
+    (0.1734 - 0.000393 * T) * Math.sin(M * dr) + 0.0021 * Math.sin(2 * dr * M);
+  C1 = C1 - 0.4068 * Math.sin(Mpr * dr) + 0.0161 * Math.sin(dr * 2 * Mpr);
+  C1 = C1 - 0.0004 * Math.sin(dr * 3 * Mpr);
+  C1 = C1 + 0.0104 * Math.sin(dr * 2 * F) - 0.0051 * Math.sin(dr * (M + Mpr));
+  C1 =
+    C1 -
+    0.0074 * Math.sin(dr * (M - Mpr)) +
+    0.0004 * Math.sin(dr * (2 * F + M));
+  C1 =
+    C1 -
+    0.0004 * Math.sin(dr * (2 * F - M)) -
+    0.0006 * Math.sin(dr * (2 * F + Mpr));
+  C1 =
+    C1 +
+    0.001 * Math.sin(dr * (2 * F - Mpr)) +
+    0.0005 * Math.sin(dr * (2 * Mpr + M));
+  if (T < -11) {
+    deltat =
+      0.001 +
+      0.000839 * T +
+      0.0002261 * T2 -
+      0.00000845 * T3 -
+      0.000000081 * T * T3;
+  } else {
+    deltat = -0.000278 + 0.000265 * T + 0.000262 * T2;
+  }
+  JdNew = Jd1 + C1 - deltat;
+  return JdNew;
+};
+
+/* Compute the longitude of the sun at any time.
+ * Parameter: floating number jdn, the number of days since 1/1/4713 BC noon
+ * Algorithm from: "Astronomical Algorithms" by Jean Meeus, 1998
+ */
+const SunLongitude = (jdn: number) => {
+  let T, T2, dr, M, L0, DL, L;
+  T = (jdn - 2451545.0) / 36525; // Time in Julian centuries from 2000-01-01 12:00:00 GMT
+  T2 = T * T;
+  dr = Math.PI / 180; // degree to radian
+  M = 357.5291 + 35999.0503 * T - 0.0001559 * T2 - 0.00000048 * T * T2; // mean anomaly, degree
+  L0 = 280.46645 + 36000.76983 * T + 0.0003032 * T2; // mean longitude, degree
+  DL = (1.9146 - 0.004817 * T - 0.000014 * T2) * Math.sin(dr * M);
+  DL =
+    DL +
+    (0.019993 - 0.000101 * T) * Math.sin(dr * 2 * M) +
+    0.00029 * Math.sin(dr * 3 * M);
+  L = L0 + DL; // true longitude, degree
+  L = L * dr;
+  L = L - Math.PI * 2 * Math.sin(L / (Math.PI * 2)); // Normalize to (0, 2*PI)
+  return L;
+};
+
+/* Compute sun position at midnight of the day with the given Julian day number.
+ * The time zone if the time difference between local time and UTC: 7.0 for UTC+7:00.
+ * The  returns a number between 0 and 11.
+ * From the day after March equinox and the 1st major term after March equinox, 0 is returned.
+ * After that, return 1, 2, 3 ...
+ */
+const getSunLongitude = (dayNumber: number, timeZone: number) => {
+  return removeFractionalPart(
+    (SunLongitude(dayNumber - 0.5 - timeZone / 24) / Math.PI) * 6
+  );
+};
+
+/* Compute the day of the k-th new moon in the given time zone.
+ * The time zone if the time difference between local time and UTC: 7.0 for UTC+7:00
+ */
+const getNewMoonDay = (k: number, timeZone: number) => {
+  return removeFractionalPart(NewMoon(k) + 0.5 + timeZone / 24);
+};
+
+/* Find the day that starts the luner month 11 of the given year for the given time zone */
+const getLunarMonth11 = (yy: number, timeZone: number) => {
+  let k, off, nm, sunLong;
+  //off = jdFromDate(31, 12, yy) - 2415021.076998695;
+  off = jdFromDate(31, 12, yy) - 2415021;
+  k = removeFractionalPart(off / 29.530588853);
+  nm = getNewMoonDay(k, timeZone);
+  sunLong = getSunLongitude(nm, timeZone); // sun longitude at local midnight
+  if (sunLong >= 9) {
+    nm = getNewMoonDay(k - 1, timeZone);
+  }
+  return nm;
+};
+
+/* Find the index of the leap month after the month starting on the day a11. */
+const getLeapMonthOffset = (a11: number, timeZone: number) => {
+  let k, last, arc, i;
+  k = removeFractionalPart((a11 - 2415021.076998695) / 29.530588853 + 0.5);
+  last = 0;
+  i = 1; // We start with the month following lunar month 11
+  arc = getSunLongitude(getNewMoonDay(k + i, timeZone), timeZone);
+  do {
+    last = arc;
+    i++;
+    arc = getSunLongitude(getNewMoonDay(k + i, timeZone), timeZone);
+  } while (arc !== last && i < 14);
+  return i - 1;
+};
+
+/* Comvert solar date dd/mm/yyyy to the corresponding lunar date */
+export const convertSolar2Lunar = (
+  dd: number,
+  mm: number,
+  yy: number,
+  timeZone: number
+) => {
+  let k,
+    dayNumber,
+    monthStart,
+    a11,
+    b11,
+    lunarDay,
+    lunarMonth,
+    lunarYear,
+    lunarLeap;
+  dayNumber = jdFromDate(dd, mm, yy);
+  k = removeFractionalPart((dayNumber - 2415021.076998695) / 29.530588853);
+  monthStart = getNewMoonDay(k + 1, timeZone);
+  if (monthStart > dayNumber) {
+    monthStart = getNewMoonDay(k, timeZone);
+  }
+  //alert(dayNumber+" -> "+monthStart);
+  a11 = getLunarMonth11(yy, timeZone);
+  b11 = a11;
+  if (a11 >= monthStart) {
+    lunarYear = yy;
+    a11 = getLunarMonth11(yy - 1, timeZone);
+  } else {
+    lunarYear = yy + 1;
+    b11 = getLunarMonth11(yy + 1, timeZone);
+  }
+  lunarDay = dayNumber - monthStart + 1;
+  let diff = removeFractionalPart((monthStart - a11) / 29);
+  lunarLeap = 0;
+  lunarMonth = diff + 10;
+  if (b11 - a11 > 365) {
+    let leapMonthDiff = getLeapMonthOffset(a11, timeZone);
+    if (diff >= leapMonthDiff) {
+      lunarMonth = diff + 10;
+      if (diff === leapMonthDiff) {
+        lunarLeap = 1;
+      }
+    }
+  }
+  if (lunarMonth > 12) {
+    lunarMonth = lunarMonth - 12;
+  }
+  if (lunarMonth >= 11 && diff < 4) {
+    lunarYear -= 1;
+  }
+  return {
+    lunarDay,
+    lunarMonth: lunarMonth,
+    lunarYear,
+    isleap: lunarLeap,
+  };
+};

package/Month.tsx

@@ -4,7 +4,7 @@ import moment, {Moment} from 'moment';
 import Day from './Day';
 import {useScaleSize, Spacing} from '@momo-kits/foundation';
 import {MonthProps} from './types';
-import {ContainerContext} from './ContainerContext';
+import {ContainerContext} from './index';
 
 const Month: React.FC<MonthProps> = ({
   dateList,

package/MonthList.tsx

@@ -5,6 +5,7 @@ import React, {
   useImperativeHandle,
   useCallback,
   useContext,
+  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -16,7 +17,7 @@ import {
   NativeSyntheticEvent,
   Platform,
 } from 'react-native';
-import { ContainerContext } from './ContainerContext';
+import { ContainerContext } from './index';
 import LunarDateConverter from './LunarDateConverter';
 import Month from './Month';
 import { MonthListProps, MonthListRef } from './types';
@@ -38,22 +39,15 @@ 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[] }[] = [];
@@ -75,6 +69,9 @@ 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,
@@ -83,6 +80,8 @@ 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');
       }
@@ -97,7 +96,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       mMin.add(1, 'month');
     }
     return months;
-  }, [minDate, maxDate]);
+  }, [minDate, maxDate, holidays]);
 
   const getIndexOfMonth = useCallback(
     (date: Moment) => data.findIndex(item => item.date.isSame(date, 'month')),
@@ -139,9 +138,6 @@ 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 });
       }
     },
@@ -150,31 +146,29 @@ 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[] }) => {
-    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) {
+    if (changed.length > 0) {
+      const { item, key, index } = changed[0];
+      if (onScrollCalendar && item && currentKey.current !== key) {
         currentKey.current = key;
         try {
           setHeightStyle({
             height:
-              (scaledHeight48Ref.current * item.dateList.length) / 7 +
+              (scaledHeight48 * item.dateList.length) / 7 +
               Spacing.L * 2 +
               Spacing.XS,
           });
         } catch {
           setHeightStyle({});
         }
-        onScrollCalendarRef.current({
-          date: item.date,
-          key,
-          currentIndex: index,
-        });
+        onScrollCalendar({ date: item.date, key, currentIndex: index });
       }
     }
   }).current;
@@ -207,6 +201,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       const priceListDate = priceList?.[keyMonth]?.day;
       return (
         <Month
+          {...restProps}
           key={index}
           month={item.date}
           dateList={item.dateList}
@@ -219,13 +214,11 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
           isShowLunar={isShowLunar}
           isDoubleDateMode={isDoubleDateMode}
           disabledDays={disabledDays}
-          tabSelected={tabSelected}
-          onChoose={onChoose}
-          bestPriceColor={bestPriceColor}
         />
       );
     },
     [
+      restProps,
       priceList,
       holidays,
       minDate,
@@ -235,9 +228,6 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       isShowLunar,
       isDoubleDateMode,
       disabledDays,
-      tabSelected,
-      onChoose,
-      bestPriceColor,
     ],
   );
 
@@ -254,9 +244,6 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       keyExtractor={keyExtractor}
       onScrollToIndexFailed={() => {}}
       onScroll={onScroll}
-      onScrollBeginDrag={() => {
-        targetIndex.current = null;
-      }}
       scrollEnabled
       initialNumToRender={3}
       maxToRenderPerBatch={MAX_RENDER_PER_BATCH}

package/TabHeader.tsx

@@ -1,73 +1,88 @@
-import React, {
-  forwardRef,
-  useContext,
-  useImperativeHandle,
-  useState,
-} from 'react';
-import { TouchableWithoutFeedback, View } from 'react-native';
+import React from 'react';
+import {TouchableWithoutFeedback, View} from 'react-native';
 import Moment from 'moment';
 import Util from './Util';
 import {
   ApplicationContext,
+  Colors,
   Radius,
   Spacing,
   Text,
 } from '@momo-kits/foundation';
-import { TabHeaderProps, TabHeaderRef } from './types';
+import {TabHeaderProps, TabHeaderState} 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 [date, setDate] = useState<Moment.Moment | undefined>(
-    props.date ? Moment(props.date) : undefined,
-  );
+export default class TabHeader extends React.Component<
+  TabHeaderProps,
+  TabHeaderState
+> {
+  static contextType = ApplicationContext;
+  context: React.ContextType<typeof ApplicationContext> = {} as React.ContextType<typeof ApplicationContext>;
+  label;
+  defaultDate: Moment.Moment | null;
 
-  useImperativeHandle(ref, () => ({
-    updateView: (nextDate, activeTab) => {
-      setDate(nextDate ? Moment(nextDate) : undefined);
-      setActive(activeTab);
-    },
-    setActiveTab: setActive,
-  }));
+  constructor(props: TabHeaderProps) {
+    super(props);
+    this.state = {
+      active: props.activeTab,
+    };
+    this.label = props.label;
+    this.defaultDate = props.date ? Moment(props.date) : null;
+  }
 
-  const weekday = (day: Moment.Moment) =>
-    translate?.(Util.WEEKDAYSFROMMOMENT[day.day()]);
-  const isHighlighted = active && !disabled;
+  onChangeTab = () => {
+    const {onChangeTab, id} = this.props;
+    onChangeTab?.(id);
+  };
 
-  const formattedDate = date ? date.format('DD/MM/YYYY') : '';
-  const dayOfWeek = date ? `${weekday(date)}, ` : '';
+  updateView = (date?: Moment.Moment | Date | null, activeTab?: boolean) => {
+    this.setState({
+      date: date ? Moment(date) : undefined,
+      active: activeTab,
+    });
+  };
 
-  return (
-    <TouchableWithoutFeedback
-      disabled={disabled}
-      onPress={() => onChangeTab?.(id)}
-    >
-      <View
-        style={[
-          {
-            flex: 1,
-            padding: Spacing.S,
-            borderRadius: Radius.S,
-          },
-          isHighlighted && {
-            backgroundColor: theme.colors.background.surface,
-          },
-        ]}
-      >
-        <Text
-          typography={'description_default_regular'}
-          color={theme.colors.text.hint}
-        >
-          {translate?.(label)}
-        </Text>
-        <Text typography={'header_s_semibold'}>
-          {`${dayOfWeek || '--'} `}
-          {formattedDate || '--/--/----'}
-        </Text>
-      </View>
-    </TouchableWithoutFeedback>
-  );
-});
+  setActiveTab = (active: boolean) => {
+    this.setState({active});
+  };
 
-export default TabHeader;
+  render() {
+    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 = defaultDate?.format('DD/MM/YYYY') ?? '';
+    const dayOfWeekFromState = date ? `${weekday(date)}, ` : '';
+    const dayOfWeekFromDefault = defaultDate ? `${weekday(defaultDate)},` : '';
+
+    return (
+      <TouchableWithoutFeedback disabled={disabled} onPress={this.onChangeTab}>
+        <View
+          style={[
+            {
+              flex: 1,
+              padding: Spacing.S,
+              borderRadius: Radius.S,
+            },
+            isHighlighted && {
+              backgroundColor: theme.colors.background.surface,
+            },
+          ]}>
+          <Text
+            typography={'description_default_regular'}
+            color={Colors.black_12}>
+            {translate?.(label)}
+          </Text>
+          <Text typography={'header_s_semibold'}>
+            {`${dayOfWeekFromState || dayOfWeekFromDefault || '--'} `}
+            {formattedDateFromState || formattedDateFromDefault || '--/--/----'}
+          </Text>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+}

package/Util.ts

@@ -3,8 +3,50 @@ import LunarDateConverter from './LunarDateConverter';
 import holiday from './holidayData';
 import {Holidays} from './types';
 
-// @ts-ignore
-const converter = new LunarDateConverter();
+const I18N_MAP = {
+  en: {
+    w: ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
+    weekday: [
+      '',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+      'Sunday',
+    ],
+    text: {
+      start: 'Start',
+      end: 'End',
+      date: 'Date',
+      save: 'Save',
+      clear: 'Reset',
+    },
+    date: 'DD / MM',
+  },
+  vi: {
+    w: ['', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'],
+    weekday: [
+      '',
+      'Thứ hai',
+      'Thứ ba',
+      'Thứ tư',
+      'Thứ năm',
+      'Thứ sáu',
+      'Thứ bảy',
+      'Chủ nhật',
+    ],
+    text: {
+      start: 'Start',
+      end: 'End',
+      date: 'Date',
+      save: 'Save',
+      clear: 'Reset',
+    },
+    date: 'DD / MM',
+  },
+};
 
 const Solar = (momentDate: moment.Moment) => ({
   solarDay: momentDate.date(),
@@ -64,8 +106,39 @@ const sortByDate = (arr: Holidays[]): Holidays[] => {
 };
 
 const Utils = {
+  WEEKDAYS: ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'],
+
   WEEKDAYSFROMMOMENT: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
 
+  WEEKDAYSNAME: [
+    'Thứ 2',
+    'Thứ 3',
+    'Thứ 4',
+    'Thứ 5',
+    'Thứ 6',
+    'Thứ 7',
+    'Chủ nhật',
+  ],
+
+  MONTHS: [
+    'Tháng 1',
+    'Tháng 2',
+    'Tháng 3',
+    'Tháng 4',
+    'Tháng 5',
+    'Tháng 6',
+    'Tháng 7',
+    'Tháng 8',
+    'Tháng 9',
+    'Tháng 10',
+    'Tháng 11',
+    'Tháng 12',
+  ],
+
+  MAX_ROWS: 7,
+
+  MAX_COLUMNS: 7,
+
   mapWeeKDate(i: number) {
     const date = ['', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
     return date[i];
@@ -89,11 +162,36 @@ const Utils = {
     return month.get(i);
   },
 
+  mapMonthShorten(i: number) {
+    const month = new Map([
+      [1, 'Jan'],
+      [2, 'Feb'],
+      [3, 'Mar'],
+      [4, 'Apr'],
+      [5, 'May'],
+      [6, 'Jun'],
+      [7, 'Jul'],
+      [8, 'Aug'],
+      [9, 'Sep'],
+      [10, 'Oct'],
+      [11, 'Nov'],
+      [12, 'Dec'],
+    ]);
+    return month.get(i);
+  },
+
+  getDaysInMonth(month: number, year: number) {
+    const lastDayOfMonth = new Date(year, month + 1, 0);
+    return lastDayOfMonth.getDate();
+  },
+
   /**
    * Get sorted list of holidays within the given month.
    */
   getHolidaysInMonth(headerInfo: moment.Moment): Holidays[] {
     if (headerInfo) {
+      // @ts-ignore
+      const converter = new LunarDateConverter();
       const startDate = moment(headerInfo).startOf('month');
       const endDate = moment(headerInfo).endOf('month');
       const minLunarDate = converter.SolarToLunar(Solar(startDate));
@@ -181,6 +279,7 @@ const Utils = {
     }
     return [];
   },
+  I18N_MAP,
 };
 
 export default Utils;

package/index.tsx

@@ -1,5 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useState, useRef, useEffect, useContext } from 'react';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useContext,
+  createContext,
+} from 'react';
 import { Dimensions, LayoutChangeEvent, View } from 'react-native';
 import moment from 'moment';
 import {
@@ -12,12 +18,13 @@ import {
 } from '@momo-kits/foundation';
 import CalendarPro from './CalendarPro';
 import TabHeader from './TabHeader';
-import { CalendarProps, CalendarProRef, TabHeaderRef } from './types';
-import { ContainerContext } from './ContainerContext';
+import { CalendarProps, CalendarProRef } from './types';
 import styles from './styles';
 
 const DOUBLE = 'doubleDate';
 
+export const ContainerContext = createContext({ width: 0, height: 0 });
+
 const Calendar: React.FC<CalendarProps> = props => {
   const { translate, theme } = useContext(ApplicationContext);
   const scaledHeight48 = useScaleSize(48);
@@ -42,6 +49,9 @@ const Calendar: React.FC<CalendarProps> = props => {
     isHideHoliday,
     isShowLunar,
     priceList,
+    labelFrom,
+    labelTo,
+    isHideLabel,
     minDate = minDateDefault,
     maxDate = maxDateDefault,
     style,
@@ -75,9 +85,9 @@ const Calendar: React.FC<CalendarProps> = props => {
 
   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);
+  const cellHeader1 = useRef<TabHeader>(null);
+  const cellHeader2 = useRef<TabHeader>(null);
+  const cellHeaderSingle = useRef<TabHeader>(null);
 
   // Initialize view on mount
   useEffect(() => {
@@ -207,11 +217,18 @@ const Calendar: React.FC<CalendarProps> = props => {
   const updateHeaderView = () => {
     const { onDateChange, onCTAStateChange } = props;
     if (isDoubleDateMode) {
+      cellHeader1.current?.updateView(selectedDate, true);
+      cellHeader2.current?.updateView(null, false);
+      calendarPicker.current?.setDoubleDateAndTabIndex(
+        selectedDate,
+        null,
+        tabSelected.current,
+      );
       doubleDate.current.first = moment(selectedDate);
       doubleDate.current.second = null;
       tabSelected.current = 1;
-      cellHeader1.current?.updateView(selectedDate, false);
-      cellHeader2.current?.updateView(null, true);
+      cellHeader2.current?.setActiveTab(true);
+      cellHeader1.current?.setActiveTab(false);
       calendarPicker.current?.setDoubleDateAndTabIndex(
         doubleDate.current.first,
         doubleDate.current.second,
@@ -220,17 +237,16 @@ const Calendar: React.FC<CalendarProps> = props => {
       onCTAStateChange?.(false);
       onDateChange?.({ first: doubleDate.current.first!, second: null });
     } else {
-      const date = doubleDate.current.first ?? selectedDate;
+      // Reset second date when switching to single mode
       doubleDate.current.second = null;
-      tabSelected.current = 0;
-      calendarPicker.current?.setDoubleDateAndTabIndex(date, null, 0);
-      onCTAStateChange?.(true);
-      if (date.isSame(selectedDate, 'day')) {
-        cellHeaderSingle.current?.updateView(date, true);
-        onDateChange?.(date.toDate());
+      props.onCTAStateChange?.(true);
+      if (doubleDate.current.first) {
+        cellHeaderSingle.current?.updateView(doubleDate.current.first, true);
+        setSelectedDate(doubleDate.current.first);
       } else {
-        setSelectedDate(date);
+        cellHeaderSingle.current?.updateView(selectedDate, true);
       }
+      props.onDateChange?.(selectedDate.toDate());
     }
   };
 
@@ -286,7 +302,7 @@ const Calendar: React.FC<CalendarProps> = props => {
           activeTab
           date={doubleDate.current.first}
         />
-        <View style={styles.tabGap} />
+        <View style={{ width: 4, height: '100%' }} />
         <TabHeader
           id={1}
           ref={cellHeader2}
@@ -345,6 +361,9 @@ const Calendar: React.FC<CalendarProps> = props => {
           selectedDate={selectedDate}
           isShowLunar={isShowLunar}
           onCallbackCalendar={onCallbackCalendar}
+          labelFrom={labelFrom}
+          labelTo={labelTo}
+          isHideLabel={isHideLabel}
           minDate={minDate}
           maxDate={maxDate}
           isHideHoliday={isHideHoliday}
@@ -357,4 +376,4 @@ const Calendar: React.FC<CalendarProps> = props => {
   );
 };
 
-export { Calendar, ContainerContext };
+export { Calendar };

package/package.json

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

package/styles.ts

@@ -16,10 +16,6 @@ export default StyleSheet.create({
     alignItems: 'center',
     marginBottom: Spacing.XS,
   },
-  tabGap: {
-    width: Spacing.XS,
-    height: '100%',
-  },
   headerContainer: {
     paddingHorizontal: Spacing.M,
     marginTop: Spacing.S,
@@ -61,6 +57,7 @@ export default StyleSheet.create({
     marginTop: Spacing.S,
   },
   container: {
+    backgroundColor: 'white',
     borderRadius: Radius.XS,
   },
   blueSeperator: {
@@ -73,6 +70,18 @@ export default StyleSheet.create({
   txtHeader: {
     textAlign: 'center',
   },
+  btnRight: {
+    width: 36,
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnLeft: {
+    width: 36,
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   headerControlContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -92,6 +101,9 @@ export default StyleSheet.create({
     alignItems: 'center',
     borderRadius: Radius.XS,
   },
+  dayText: {
+    textAlign: 'center',
+  },
   dayStartContainer: {
     borderTopLeftRadius: Radius.XS,
     borderBottomLeftRadius: Radius.XS,

package/types.ts

@@ -42,6 +42,9 @@ export type CalendarProProps = {
   isDoubleDateMode: boolean;
   onDateChange: (day: Moment.Moment) => void;
   priceList?: PriceListData;
+  labelFrom?: string;
+  labelTo?: string;
+  isHideLabel?: boolean;
   isHideHoliday?: boolean;
   isOffLunar?: boolean;
   onCallbackCalendar?: (lunar: string, nextStateShowLunar: boolean) => void;
@@ -49,6 +52,17 @@ export type CalendarProProps = {
   bestPriceColor?: string;
 };
 
+export type CalendarProState = {
+  startDate: Moment.Moment;
+  endDate: Moment.Moment;
+  showLunar?: boolean;
+  tabSelected?: number;
+  holidays: Holidays[];
+  ownUpdate?: boolean;
+  temp?: any;
+  headerKey?: string;
+};
+
 export type DoubleDate = {
   first: Moment.Moment;
   second: Moment.Moment | null;
@@ -88,6 +102,15 @@ export type CalendarProRef = {
     secondDate?: Moment.Moment | null,
     tabSelected?: number,
   ) => void;
+  setDateRange: (
+    dateRange: { startDate: any; endDate: any },
+    isScrollToStartDate: any,
+  ) => void;
+};
+
+export type CalendarState = {
+  isDoubleDateMode: boolean;
+  containerWidth: number;
 };
 
 export type HeaderControlRef = {
@@ -111,16 +134,23 @@ export type MonthListProps = {
   endDate: Moment.Moment;
   isShowLunar: boolean;
   tabSelected?: number;
+  today: Moment.Moment;
   onChoose: (day: Moment.Moment) => void;
   onScrollCalendar?: (info: {
     date: Moment.Moment;
     key: string;
     currentIndex: number;
   }) => void;
+  lunarConverter: any;
   disabledDays?: Date[];
   bestPriceColor?: string;
 };
 
+export type MonthListState = {
+  data?: any;
+  isDoubleDateMode?: boolean;
+};
+
 export type MonthListRef = {
   scrollToMonth: (date: Moment.Moment) => void;
 };
@@ -138,8 +168,6 @@ export type MonthProps = {
   isDoubleDateMode: boolean;
   disabledDays?: Date[];
   bestPriceColor?: string;
-  tabSelected?: number;
-  onChoose?: (date: Moment.Moment) => void;
 };
 
 export type DayProps = {
@@ -164,9 +192,9 @@ export type DayProps = {
   bestPriceColor?: string;
 };
 
-export type TabHeaderRef = {
-  updateView: (date?: Moment.Moment | Date | null, activeTab?: boolean) => void;
-  setActiveTab: (active: boolean) => void;
+export type TabHeaderState = {
+  active?: boolean;
+  date?: Moment.Moment;
 };
 
 export type TabHeaderProps = {
@@ -177,3 +205,8 @@ export type TabHeaderProps = {
   id: number;
   disabled?: boolean;
 };
+
+export type TabHeaderRef = {
+  updateView: (date?: Moment.Moment | null, activeTab?: boolean) => void;
+  setActiveTab: (active: boolean) => void;
+};

package/ContainerContext.ts

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