@momo-kits/calendar 0.168.1-beta.20 → 0.168.1-beta.22

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
@@ -205,7 +193,12 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
     }
 
     return (
-      <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          { backgroundColor: theme.colors.background.surface },
+        ]}
+      >
         <HeaderControl
           ref={headerControlRef}
           selectedDate={propSelectedDate}
@@ -218,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))}
@@ -231,7 +228,6 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
           </View>
           <MonthList
             ref={monthListRef}
-            today={today}
             minDate={minDate}
             maxDate={maxDate}
             startDate={startDate!}
@@ -241,7 +237,6 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
             isShowLunar={!isOffLunar && showLunar}
             isDoubleDateMode={isDoubleDateMode}
             tabSelected={tabSelected}
-            lunarConverter={converter}
             holidays={holidays}
             selectedDate={propSelectedDate}
             priceList={priceListFormat}

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 }]} />;
   }
@@ -114,7 +113,6 @@ 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,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/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 './index';
+import {ContainerContext} from './ContainerContext';
 
 const Month: React.FC<MonthProps> = ({
   dateList,

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}

package/TabHeader.tsx

@@ -1,88 +1,73 @@
-import React from 'react';
-import {TouchableWithoutFeedback, View} from 'react-native';
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useState,
+} 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, TabHeaderState} from './types';
+import { TabHeaderProps, TabHeaderRef } from './types';
 
-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;
+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,
+  );
 
-  constructor(props: TabHeaderProps) {
-    super(props);
-    this.state = {
-      active: props.activeTab,
-    };
-    this.label = props.label;
-    this.defaultDate = props.date ? Moment(props.date) : null;
-  }
+  useImperativeHandle(ref, () => ({
+    updateView: (nextDate, activeTab) => {
+      setDate(nextDate ? Moment(nextDate) : undefined);
+      setActive(activeTab);
+    },
+    setActiveTab: setActive,
+  }));
 
-  onChangeTab = () => {
-    const {onChangeTab, id} = this.props;
-    onChangeTab?.(id);
-  };
+  const weekday = (day: Moment.Moment) =>
+    translate?.(Util.WEEKDAYSFROMMOMENT[day.day()]);
+  const isHighlighted = active && !disabled;
 
-  updateView = (date?: Moment.Moment | Date | null, activeTab?: boolean) => {
-    this.setState({
-      date: date ? Moment(date) : undefined,
-      active: activeTab,
-    });
-  };
+  const formattedDate = date ? date.format('DD/MM/YYYY') : '';
+  const dayOfWeek = date ? `${weekday(date)}, ` : '';
 
-  setActiveTab = (active: boolean) => {
-    this.setState({active});
-  };
+  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>
+  );
+});
 
-  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>
-    );
-  }
-}
+export default TabHeader;

package/Util.ts

@@ -3,50 +3,8 @@ import LunarDateConverter from './LunarDateConverter';
 import holiday from './holidayData';
 import {Holidays} from './types';
 
-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',
-  },
-};
+// @ts-ignore
+const converter = new LunarDateConverter();
 
 const Solar = (momentDate: moment.Moment) => ({
   solarDay: momentDate.date(),
@@ -106,39 +64,8 @@ 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];
@@ -162,36 +89,11 @@ 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));
@@ -279,7 +181,6 @@ const Utils = {
     }
     return [];
   },
-  I18N_MAP,
 };
 
 export default Utils;

package/index.tsx

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

package/package.json

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

package/styles.ts

@@ -16,6 +16,10 @@ export default StyleSheet.create({
     alignItems: 'center',
     marginBottom: Spacing.XS,
   },
+  tabGap: {
+    width: Spacing.XS,
+    height: '100%',
+  },
   headerContainer: {
     paddingHorizontal: Spacing.M,
     marginTop: Spacing.S,
@@ -57,7 +61,6 @@ export default StyleSheet.create({
     marginTop: Spacing.S,
   },
   container: {
-    backgroundColor: 'white',
     borderRadius: Radius.XS,
   },
   blueSeperator: {
@@ -70,18 +73,6 @@ 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',
@@ -101,9 +92,6 @@ export default StyleSheet.create({
     alignItems: 'center',
     borderRadius: Radius.XS,
   },
-  dayText: {
-    textAlign: 'center',
-  },
   dayStartContainer: {
     borderTopLeftRadius: Radius.XS,
     borderBottomLeftRadius: Radius.XS,

package/types.ts

@@ -42,9 +42,6 @@ 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;
@@ -52,17 +49,6 @@ 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;
@@ -102,15 +88,6 @@ 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 = {
@@ -134,23 +111,16 @@ 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;
 };
@@ -168,6 +138,8 @@ export type MonthProps = {
   isDoubleDateMode: boolean;
   disabledDays?: Date[];
   bestPriceColor?: string;
+  tabSelected?: number;
+  onChoose?: (date: Moment.Moment) => void;
 };
 
 export type DayProps = {
@@ -192,9 +164,9 @@ export type DayProps = {
   bestPriceColor?: string;
 };
 
-export type TabHeaderState = {
-  active?: boolean;
-  date?: Moment.Moment;
+export type TabHeaderRef = {
+  updateView: (date?: Moment.Moment | Date | null, activeTab?: boolean) => void;
+  setActiveTab: (active: boolean) => void;
 };
 
 export type TabHeaderProps = {
@@ -205,8 +177,3 @@ export type TabHeaderProps = {
   id: number;
   disabled?: boolean;
 };
-
-export type TabHeaderRef = {
-  updateView: (date?: Moment.Moment | null, activeTab?: boolean) => void;
-  setActiveTab: (active: boolean) => void;
-};

package/LunarService.ts

@@ -1,206 +0,0 @@
-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,
-  };
-};