@momo-kits/calendar 0.150.2-phuc.13 → 0.150.3-beta.40

package/CalendarPro.tsx

@@ -7,8 +7,8 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from 'react';
-import {ScrollView, View} from 'react-native';
-import moment, {Moment} from 'moment';
+import { ScrollView, View } from 'react-native';
+import moment, { Moment } from 'moment';
 import {
   ApplicationContext,
   CheckBox,
@@ -27,7 +27,7 @@ import {
   MonthListRef,
   Holidays,
 } from './types';
-import {ContainerContext} from './index';
+import { ContainerContext } from './index';
 import styles from './styles';
 
 const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
@@ -46,10 +46,11 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
       isOffLunar,
       onCallbackCalendar,
       disabledDays,
+      bestPriceColor,
     },
-    ref
+    ref,
   ) => {
-    const {theme, translate} = useContext(ApplicationContext);
+    const { theme, translate } = useContext(ApplicationContext);
     const size = useContext(ContainerContext);
 
     const today = useMemo(() => moment(), []);
@@ -90,15 +91,13 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
       setDoubleDateAndTabIndex: (
         firstDate?: Moment | null,
         secondDate?: Moment | null,
-        tabIdx?: number
+        tabIdx?: number,
       ) => {
         if (typeof tabIdx === 'number') setTabSelected(tabIdx);
         if (firstDate) setStartDate(firstDate);
         if (secondDate !== undefined) setEndDate(secondDate);
       },
-      setDateRange: (
-        dateRange: {startDate: any; endDate: any},
-      ) => {
+      setDateRange: (dateRange: { startDate: any; endDate: any }) => {
         if (monthListRef.current && dateRange.startDate) {
           monthListRef.current.scrollToMonth(moment(dateRange.startDate));
         }
@@ -148,7 +147,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
       const filtered = showLunar
         ? allHolidays
         : allHolidays.filter(item => !item.lunar || item.mixedLabel);
-      headerControlRef.current?.onUpdateInfo({date});
+      headerControlRef.current?.onUpdateInfo({ date });
       headerRef.current = date.clone().startOf('month');
       setHolidays(allHolidays);
       setTemp(filtered);
@@ -183,7 +182,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
         .subtract(1, 'months');
       if (prev.isSameOrAfter(minDate, 'month')) {
         headerRef.current = prev;
-        headerControlRef.current?.onUpdateInfo({date: prev});
+        headerControlRef.current?.onUpdateInfo({ date: prev });
         monthListRef.current?.scrollToMonth(prev);
       }
     };
@@ -192,7 +191,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
       const next = headerRef.current.clone().startOf('month').add(1, 'months');
       if (next.isSameOrBefore(maxDate, 'month')) {
         headerRef.current = next;
-        headerControlRef.current?.onUpdateInfo({date: next});
+        headerControlRef.current?.onUpdateInfo({ date: next });
         monthListRef.current?.scrollToMonth(next);
       }
     };
@@ -222,8 +221,9 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
                 typography="label_s_medium"
                 style={[
                   styles.textDay,
-                  {width: (size.width - Spacing.M * 2) / 7},
-                ]}>
+                  { width: (size.width - Spacing.M * 2) / 7 },
+                ]}
+              >
                 {translate?.(Util.mapWeeKDate(dayIdx))}
               </Text>
             ))}
@@ -245,14 +245,16 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
             selectedDate={propSelectedDate}
             priceList={priceListFormat}
             disabledDays={disabledDays}
+            bestPriceColor={bestPriceColor}
           />
         </View>
         {!isOffLunar && (
           <View
             style={[
               styles.viewLunar,
-              {borderColor: theme.colors.border.default},
-            ]}>
+              { borderColor: theme.colors.border.default },
+            ]}
+          >
             <CheckBox
               onChange={onToggleLunar}
               value={showLunar}
@@ -264,7 +266,8 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
           <ScrollView
             contentContainerStyle={styles.contentScroll}
             showsVerticalScrollIndicator={false}
-            nestedScrollEnabled>
+            nestedScrollEnabled
+          >
             {temp.map((item, idx) => {
               const labelDate = `${item.day > 9 ? item.day : `0${item.day}`}/${
                 item.month > 9 ? item.month : `0${item.month}`
@@ -278,12 +281,14 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
                   <Text
                     color={theme.colors.error.primary}
                     typography="description_default_regular"
-                    style={styles.txtMonthLunar}>
+                    style={styles.txtMonthLunar}
+                  >
                     {labelDate}
                   </Text>
                   <Text
                     typography="description_default_regular"
-                    style={styles.subTextLunar}>
+                    style={styles.subTextLunar}
+                  >
                     {translate?.(labelHoliday)}
                   </Text>
                   <Text typography="description_default_regular">
@@ -296,7 +301,7 @@ const CalendarPro = forwardRef<CalendarProRef, CalendarProProps>(
         )}
       </View>
     );
-  }
+  },
 );
 
 export default CalendarPro;

package/Day.tsx

@@ -1,5 +1,5 @@
-import React, {useContext} from 'react';
-import {Text as RNText, TouchableOpacity, View} from 'react-native';
+import React, { useContext } from 'react';
+import { Text as RNText, TouchableOpacity, View } from 'react-native';
 import {
   ApplicationContext,
   Colors,
@@ -7,8 +7,8 @@ import {
   Spacing,
   Text,
 } from '@momo-kits/foundation';
-import {DayProps} from './types';
-import {ContainerContext} from './index';
+import { DayProps } from './types';
+import { ContainerContext } from './index';
 import styles from './styles';
 
 const Day: React.FC<DayProps> = props => {
@@ -30,14 +30,15 @@ const Day: React.FC<DayProps> = props => {
     onChoose,
     price,
     isBestPrice,
+    bestPriceColor,
   } = props;
 
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const size = useContext(ContainerContext);
 
   const itemWidth = (size.width - Spacing.M) / 7;
   if (isEmpty || !date) {
-    return <View style={[styles.dayContainer, {width: itemWidth}]} />;
+    return <View style={[styles.dayContainer, { width: itemWidth }]} />;
   }
 
   const isValid =
@@ -70,11 +71,10 @@ const Day: React.FC<DayProps> = props => {
 
   if (isWeekEnd || isSolarHoliday || isLunarHoliday) {
     textColor = theme.colors.error.primary;
-    priceColor = theme.colors.error.primary;
   }
 
-  if (isBestPrice) {
-    priceColor = theme.colors.error.primary;
+  if (isBestPrice && bestPriceColor) {
+    priceColor = bestPriceColor;
   }
 
   if (isStart || isEnd) {
@@ -90,13 +90,14 @@ const Day: React.FC<DayProps> = props => {
   }
 
   return (
-    <View style={[styles.dayContainer, {width: itemWidth}]}>
+    <View style={[styles.dayContainer, { width: itemWidth }]}>
       <View
         style={[
-          isMid && {backgroundColor: theme.colors.background.tonal},
+          isMid && { backgroundColor: theme.colors.background.tonal },
           isStartPart && styles.dayStartContainer,
           isEnd && styles.dayEndContainer,
-        ]}>
+        ]}
+      >
         <TouchableOpacity
           style={[
             styles.day,
@@ -104,12 +105,13 @@ const Day: React.FC<DayProps> = props => {
               width: itemWidth,
               paddingVertical: !!price ? Spacing.XS : Spacing.S,
             },
-            (isStart || isEnd) && {backgroundColor: theme.colors.primary},
-            !!price && {height: scaleSize(48)},
-            {height: size.height},
+            (isStart || isEnd) && { backgroundColor: theme.colors.primary },
+            !!price && { height: scaleSize(48) },
+            { height: size.height },
           ]}
           disabled={!(isValid && isInScope)}
-          onPress={chooseDay}>
+          onPress={chooseDay}
+        >
           {lunarDate && showLunar && !!date && (
             <RNText
               style={{
@@ -119,13 +121,14 @@ const Day: React.FC<DayProps> = props => {
                 color: lunarTextColor,
                 fontSize: scaleSize(8),
                 lineHeight: scaleSize(12),
-              }}>
+              }}
+            >
               {lunarDate.lunarDay === 1
                 ? `${lunarDate.lunarDay}/${lunarDate.lunarMonth}`
                 : lunarDate.lunarDay}
             </RNText>
           )}
-          <Text typography="header_s_semibold" color={textColor}>
+          <Text typography="body_default_regular" color={textColor}>
             {date ? date.date() : ''}
           </Text>
           {!!price && (

package/MonthList.tsx

@@ -1,5 +1,5 @@
-import {scaleSize, Spacing} from '@momo-kits/foundation';
-import moment, {Moment} from 'moment';
+import { scaleSize, Spacing } from '@momo-kits/foundation';
+import moment, { Moment } from 'moment';
 import React, {
   forwardRef,
   useImperativeHandle,
@@ -10,11 +10,11 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {FlatList, Platform} from 'react-native';
-import {ContainerContext} from './index';
+import { FlatList, Platform } from 'react-native';
+import { ContainerContext } from './index';
 import LunarDateConverter from './LunarDateConverter';
 import Month from './Month';
-import {MonthListProps, MonthListRef} from './types';
+import { MonthListProps, MonthListRef } from './types';
 
 const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
 
@@ -43,7 +43,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
   const [heightStyle, setHeightStyle] = useState({});
 
   const data = useMemo(() => {
-    const months: {date: Moment; dateList: any[]}[] = [];
+    const months: { date: Moment; dateList: any[] }[] = [];
     const mMin = moment(minDate).date(1);
     const mMax = moment(maxDate);
     while (
@@ -57,13 +57,13 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       let weekday = cursor.isoWeekday();
       if (weekday !== 1) {
         dayList.push(
-          ...new Array(weekday - 1).fill(0).map(() => ({ isEmpty: true }))
+          ...new Array(weekday - 1).fill(0).map(() => ({ isEmpty: true })),
         );
       }
       while (cursor.month() === monthIdx) {
         const cloned = cursor.clone();
         const hol = holidays.find(
-          h => h.day === cloned.date() && h.month === cloned.month() + 1
+          h => h.day === cloned.date() && h.month === cloned.month() + 1,
         );
         dayList.push({
           isEmpty: false,
@@ -82,10 +82,10 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       weekday = cursor.isoWeekday();
       if (weekday !== 7) {
         dayList.push(
-          ...new Array(7 - weekday).fill(0).map(() => ({ isEmpty: true }))
+          ...new Array(7 - weekday).fill(0).map(() => ({ isEmpty: true })),
         );
       }
-      months.push({date: d, dateList: dayList});
+      months.push({ date: d, dateList: dayList });
       mMin.add(1, 'month');
     }
     return months;
@@ -93,25 +93,25 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
 
   const getIndexOfMonth = useCallback(
     (date: Moment) => data.findIndex(item => item.date.isSame(date, 'month')),
-    [data]
+    [data],
   );
 
   const currentScrollIndex = useMemo(
     () => getIndexOfMonth(moment(selectedDate)),
-    [selectedDate, getIndexOfMonth]
+    [selectedDate, getIndexOfMonth],
   );
 
   const scrollToMonth = useCallback(
     (month: Moment) => {
       const idx = getIndexOfMonth(month);
       if (listRef.current && idx !== -1) {
-        listRef.current.scrollToIndex({index: idx, animated: true});
+        listRef.current.scrollToIndex({ index: idx, animated: true });
       }
     },
-    [getIndexOfMonth]
+    [getIndexOfMonth],
   );
 
-  useImperativeHandle(ref, () => ({scrollToMonth}));
+  useImperativeHandle(ref, () => ({ scrollToMonth }));
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -120,9 +120,9 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
     return () => clearTimeout(timer);
   }, []);
 
-  const onViewableItemsChanged = useRef(({changed}: {changed: any[]}) => {
+  const onViewableItemsChanged = useRef(({ changed }: { changed: any[] }) => {
     if (changed.length > 0) {
-      const {item, key, index} = changed[0];
+      const { item, key, index } = changed[0];
       if (onScrollCalendar && item && currentKey.current !== key) {
         currentKey.current = key;
         try {
@@ -135,16 +135,16 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
         } catch {
           setHeightStyle({});
         }
-        onScrollCalendar({date: item.date, key, currentIndex: index});
+        onScrollCalendar({ date: item.date, key, currentIndex: index });
       }
     }
   }).current;
 
-  const viewabilityConfig = {itemVisiblePercentThreshold: 50};
+  const viewabilityConfig = { itemVisiblePercentThreshold: 50 };
 
   const keyExtractor = useCallback(
-    (item: {date: Moment}) => `${item.date.month() + 1}/${item.date.year()}`,
-    []
+    (item: { date: Moment }) => `${item.date.month() + 1}/${item.date.year()}`,
+    [],
   );
 
   const getItemLayout = useCallback(
@@ -153,11 +153,17 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       offset: size.width * index,
       index,
     }),
-    [size.width]
+    [size.width],
   );
 
   const renderItem = useCallback(
-    ({item, index}: {item: {date: Moment; dateList: any[]}; index: number}) => {
+    ({
+      item,
+      index,
+    }: {
+      item: { date: Moment; dateList: any[] };
+      index: number;
+    }) => {
       const keyMonth = moment(item.date).format('YYYY-MM');
       const priceListDate = priceList?.[keyMonth]?.day;
       return (
@@ -189,7 +195,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       isShowLunar,
       isDoubleDateMode,
       disabledDays,
-    ]
+    ],
   );
 
   return (

package/holidayData.ts

@@ -77,13 +77,6 @@ const holidayData = {
     ],
   },
   lunar: [
-    {
-      lunarDay: 30,
-      lunarMonth: 12,
-      lunar: true,
-      label: 'lunarNewYear',
-      highlight: '(30/12)',
-    },
     {
       lunarDay: 1,
       lunarMonth: 1,

package/index.tsx

@@ -55,6 +55,7 @@ const Calendar: React.FC<CalendarProps> = props => {
     style,
     disabledDays = [],
     hideHeaderTab = false,
+    bestPriceColor,
   } = props;
 
   const [containerWidth, setContainerWidth] = useState<number>(
@@ -370,6 +371,7 @@ const Calendar: React.FC<CalendarProps> = props => {
           isHideHoliday={isHideHoliday}
           isOffLunar={isOffLunar}
           disabledDays={disabledDays}
+          bestPriceColor={bestPriceColor}
         />
       </View>
     </ContainerContext.Provider>

package/package.json

@@ -1,21 +1,21 @@
 {
-    "name": "@momo-kits/calendar",
-    "version": "0.150.2-phuc.13",
-    "private": false,
-    "main": "index.tsx",
-    "peerDependencies": {
-        "@momo-kits/foundation": "latest",
-        "react": "*",
-        "react-native": "*"
-    },
-    "devDependencies": {
-        "@momo-platform/versions": "4.1.11"
-    },
-    "license": "MoMo",
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "dependencies": {
-        "moment": "^2.24.0"
-    }
-}
+  "name": "@momo-kits/calendar",
+  "version": "0.150.3-beta.40",
+  "private": false,
+  "main": "index.tsx",
+  "peerDependencies": {
+    "@momo-kits/foundation": "latest",
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@momo-platform/versions": "4.1.11"
+  },
+  "license": "MoMo",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "moment": "^2.24.0"
+  }
+}

package/types.ts

@@ -1,5 +1,5 @@
 import Moment from 'moment';
-import {ViewStyle} from 'react-native';
+import { ViewStyle } from 'react-native';
 
 export type Holidays = {
   solar: object;
@@ -18,12 +18,16 @@ export type PriceInfo = {
 export type PriceListData = {
   inbound: {
     [keyMonth: string]: {
-      [keyDay: string]: PriceInfo;
+      day: {
+        [keyDay: string]: PriceInfo;
+      };
     };
   };
   outbound: {
     [keyMonth: string]: {
-      [keyDay: string]: PriceInfo;
+      day: {
+        [keyDay: string]: PriceInfo;
+      };
     };
   };
 };
@@ -45,6 +49,7 @@ export type CalendarProProps = {
   isOffLunar?: boolean;
   onCallbackCalendar?: (lunar: string, nextStateShowLunar: boolean) => void;
   disabledDays?: Date[];
+  bestPriceColor?: string;
 };
 
 export type CalendarProState = {
@@ -64,7 +69,7 @@ export type DoubleDate = {
 };
 
 export type CalendarProps = {
-  doubleDate: DoubleDate;
+  doubleDate?: DoubleDate;
   selectedDate?: Moment.Moment;
   mode?: 'doubleDate' | 'singleDate';
   id?: number;
@@ -88,17 +93,18 @@ export type CalendarProps = {
   hideHeaderTab?: boolean;
   titleHeader?: string;
   hideSwitchReturnSelection?: boolean;
+  bestPriceColor?: string;
 };
 
 export type CalendarProRef = {
   setDoubleDateAndTabIndex: (
     firstDate?: Moment.Moment | null,
     secondDate?: Moment.Moment | null,
-    tabSelected?: number
+    tabSelected?: number,
   ) => void;
   setDateRange: (
-    dateRange: {startDate: any; endDate: any},
-    isScrollToStartDate: any
+    dateRange: { startDate: any; endDate: any },
+    isScrollToStartDate: any,
   ) => void;
 };
 
@@ -108,7 +114,7 @@ export type CalendarState = {
 };
 
 export type HeaderControlRef = {
-  onUpdateInfo: (date: {date: Moment.Moment}) => void;
+  onUpdateInfo: (date: { date: Moment.Moment }) => void;
 };
 
 export type HeaderControlProps = {
@@ -137,6 +143,7 @@ export type MonthListProps = {
   }) => void;
   lunarConverter: any;
   disabledDays?: Date[];
+  bestPriceColor?: string;
 };
 
 export type MonthListState = {
@@ -160,6 +167,7 @@ export type MonthProps = {
   isShowLunar: boolean;
   isDoubleDateMode: boolean;
   disabledDays?: Date[];
+  bestPriceColor?: string;
 };
 
 export type DayProps = {
@@ -181,6 +189,7 @@ export type DayProps = {
   isBestPrice?: boolean;
   havePriceList: boolean;
   isDisabled?: boolean;
+  bestPriceColor?: string;
 };
 
 export type TabHeaderState = {