@momo-kits/calendar 0.150.3-beta.40 → 0.151.1-beta.1

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,11 +46,10 @@ 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(), []);
@@ -91,13 +90,15 @@ 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));
         }
@@ -147,7 +148,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);
@@ -182,7 +183,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);
       }
     };
@@ -191,7 +192,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);
       }
     };
@@ -221,9 +222,8 @@ 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,16 +245,14 @@ 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}
@@ -266,8 +264,7 @@ 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}`
@@ -281,14 +278,12 @@ 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">
@@ -301,7 +296,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,15 +30,14 @@ 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 =
@@ -71,10 +70,11 @@ const Day: React.FC<DayProps> = props => {
 
   if (isWeekEnd || isSolarHoliday || isLunarHoliday) {
     textColor = theme.colors.error.primary;
+    priceColor = theme.colors.error.primary;
   }
 
-  if (isBestPrice && bestPriceColor) {
-    priceColor = bestPriceColor;
+  if (isBestPrice) {
+    priceColor = theme.colors.error.primary;
   }
 
   if (isStart || isEnd) {
@@ -90,14 +90,13 @@ 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,
@@ -105,13 +104,12 @@ 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={{
@@ -121,14 +119,13 @@ 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="body_default_regular" color={textColor}>
+          <Text typography="header_s_semibold" 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,17 +153,11 @@ 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 (
@@ -195,7 +189,7 @@ const MonthList = forwardRef<MonthListRef, MonthListProps>((props, ref) => {
       isShowLunar,
       isDoubleDateMode,
       disabledDays,
-    ],
+    ]
   );
 
   return (

package/index.tsx

@@ -55,7 +55,6 @@ const Calendar: React.FC<CalendarProps> = props => {
     style,
     disabledDays = [],
     hideHeaderTab = false,
-    bestPriceColor,
   } = props;
 
   const [containerWidth, setContainerWidth] = useState<number>(
@@ -371,7 +370,6 @@ 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.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"
-  }
-}
+    "name": "@momo-kits/calendar",
+    "version": "0.151.1-beta.1",
+    "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,16 +18,12 @@ export type PriceInfo = {
 export type PriceListData = {
   inbound: {
     [keyMonth: string]: {
-      day: {
-        [keyDay: string]: PriceInfo;
-      };
+      [keyDay: string]: PriceInfo;
     };
   };
   outbound: {
     [keyMonth: string]: {
-      day: {
-        [keyDay: string]: PriceInfo;
-      };
+      [keyDay: string]: PriceInfo;
     };
   };
 };
@@ -49,7 +45,6 @@ export type CalendarProProps = {
   isOffLunar?: boolean;
   onCallbackCalendar?: (lunar: string, nextStateShowLunar: boolean) => void;
   disabledDays?: Date[];
-  bestPriceColor?: string;
 };
 
 export type CalendarProState = {
@@ -69,7 +64,7 @@ export type DoubleDate = {
 };
 
 export type CalendarProps = {
-  doubleDate?: DoubleDate;
+  doubleDate: DoubleDate;
   selectedDate?: Moment.Moment;
   mode?: 'doubleDate' | 'singleDate';
   id?: number;
@@ -93,18 +88,17 @@ 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;
 };
 
@@ -114,7 +108,7 @@ export type CalendarState = {
 };
 
 export type HeaderControlRef = {
-  onUpdateInfo: (date: { date: Moment.Moment }) => void;
+  onUpdateInfo: (date: {date: Moment.Moment}) => void;
 };
 
 export type HeaderControlProps = {
@@ -143,7 +137,6 @@ export type MonthListProps = {
   }) => void;
   lunarConverter: any;
   disabledDays?: Date[];
-  bestPriceColor?: string;
 };
 
 export type MonthListState = {
@@ -167,7 +160,6 @@ export type MonthProps = {
   isShowLunar: boolean;
   isDoubleDateMode: boolean;
   disabledDays?: Date[];
-  bestPriceColor?: string;
 };
 
 export type DayProps = {
@@ -189,7 +181,6 @@ export type DayProps = {
   isBestPrice?: boolean;
   havePriceList: boolean;
   isDisabled?: boolean;
-  bestPriceColor?: string;
 };
 
 export type TabHeaderState = {