@momo-kits/calendar 0.150.1-rn80.9 → 0.150.2-beta.2

package/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, {
   useState,
   useRef,
@@ -5,7 +6,7 @@ import React, {
   useContext,
   createContext,
 } from 'react';
-import {Dimensions, LayoutChangeEvent, View} from 'react-native';
+import { Dimensions, LayoutChangeEvent, View } from 'react-native';
 import moment from 'moment';
 import {
   ApplicationContext,
@@ -17,15 +18,15 @@ import {
 } from '@momo-kits/foundation';
 import CalendarPro from './CalendarPro';
 import TabHeader from './TabHeader';
-import {CalendarProps, CalendarProRef} from './types';
+import { CalendarProps, CalendarProRef } from './types';
 import styles from './styles';
 
 const DOUBLE = 'doubleDate';
 
-export const ContainerContext = createContext({width: 0, height: 0});
+export const ContainerContext = createContext({ width: 0, height: 0 });
 
 const Calendar: React.FC<CalendarProps> = props => {
-  const {translate, theme} = useContext(ApplicationContext);
+  const { translate, theme } = useContext(ApplicationContext);
 
   // derive defaults for date bounds
   const currentDate = new Date();
@@ -57,17 +58,17 @@ const Calendar: React.FC<CalendarProps> = props => {
   } = props;
 
   const [containerWidth, setContainerWidth] = useState<number>(
-    Dimensions.get('window').width
+    Dimensions.get('window').width,
   );
   const [isDoubleDateMode, setIsDoubleDateMode] = useState<boolean>(
-    mode === DOUBLE
+    mode === DOUBLE,
   );
   const [selectedDate, setSelectedDate] = useState<moment.Moment>(
     initialSelectedDate
       ? moment(initialSelectedDate)
       : mode === DOUBLE && initDoubleDate && initDoubleDate.first
       ? moment(initDoubleDate.first)
-      : moment()
+      : moment(),
   );
 
   const doubleDate = useRef<{
@@ -79,7 +80,7 @@ const Calendar: React.FC<CalendarProps> = props => {
           first: initDoubleDate.first ? moment(initDoubleDate.first) : null,
           second: initDoubleDate.second ? moment(initDoubleDate.second) : null,
         }
-      : {first: null, second: null}
+      : { first: null, second: null },
   );
   const tabSelected = useRef<number>(id || 0);
 
@@ -105,13 +106,13 @@ const Calendar: React.FC<CalendarProps> = props => {
         calendarPicker.current.setDoubleDateAndTabIndex(
           doubleDate.current.first,
           doubleDate.current.second,
-          tabSelected.current
+          tabSelected.current,
         );
       }
     } else {
       calendarPicker.current?.setDoubleDateAndTabIndex(selectedDate);
     }
-  }, [id, mode, selectedDate]);
+  }, []);
 
   const onLayout = (e: LayoutChangeEvent) =>
     setContainerWidth(e.nativeEvent.layout.width);
@@ -124,13 +125,14 @@ const Calendar: React.FC<CalendarProps> = props => {
     calendarPicker.current?.setDoubleDateAndTabIndex(
       doubleDate.current.first,
       doubleDate.current.second,
-      tabSelected.current
+      tabSelected.current,
     );
   };
 
   const processDateFirst = () => {
-    const {onDateChange, onCTAStateChange} = props;
-    if (!cellHeader1.current || !cellHeader2.current || !calendarPicker.current) return;
+    const { onDateChange, onCTAStateChange } = props;
+    if (!cellHeader1.current || !cellHeader2.current || !calendarPicker.current)
+      return;
     // set first date and reset second
     doubleDate.current.first = selectedDate;
     doubleDate.current.second = null;
@@ -142,7 +144,7 @@ const Calendar: React.FC<CalendarProps> = props => {
     calendarPicker.current.setDoubleDateAndTabIndex(
       doubleDate.current.first,
       doubleDate.current.second,
-      tabSelected.current
+      tabSelected.current,
     );
     // notify parent
     onDateChange?.({ first: doubleDate.current.first!, second: null });
@@ -150,8 +152,9 @@ const Calendar: React.FC<CalendarProps> = props => {
   };
 
   const processDateSecond = () => {
-    const {onDateChange, onCTAStateChange} = props;
-    if (!cellHeader1.current || !cellHeader2.current || !calendarPicker.current) return;
+    const { onDateChange, onCTAStateChange } = props;
+    if (!cellHeader1.current || !cellHeader2.current || !calendarPicker.current)
+      return;
     // if selectedDate is before first, treat as new first date
     if (selectedDate.isBefore(doubleDate.current.first!, 'day')) {
       doubleDate.current.first = selectedDate;
@@ -162,7 +165,7 @@ const Calendar: React.FC<CalendarProps> = props => {
       calendarPicker.current.setDoubleDateAndTabIndex(
         doubleDate.current.first,
         doubleDate.current.second,
-        tabSelected.current
+        tabSelected.current,
       );
       onDateChange?.({ first: doubleDate.current.first!, second: null });
       onCTAStateChange?.(false);
@@ -175,9 +178,12 @@ const Calendar: React.FC<CalendarProps> = props => {
       calendarPicker.current.setDoubleDateAndTabIndex(
         doubleDate.current.first,
         doubleDate.current.second,
-        tabSelected.current
+        tabSelected.current,
       );
-      onDateChange?.({ first: doubleDate.current.first!, second: doubleDate.current.second! });
+      onDateChange?.({
+        first: doubleDate.current.first!,
+        second: doubleDate.current.second!,
+      });
       onCTAStateChange?.(true);
     }
   };
@@ -187,7 +193,7 @@ const Calendar: React.FC<CalendarProps> = props => {
   };
 
   const updateView = () => {
-    const {onDateChange} = props;
+    const { onDateChange } = props;
     if (isDoubleDateMode) {
       processDoubleDate();
     } else {
@@ -210,14 +216,14 @@ const Calendar: React.FC<CalendarProps> = props => {
   const onDateChangeHandler = (date: moment.Moment) => setSelectedDate(date);
 
   const updateHeaderView = () => {
-    const {onDateChange, onCTAStateChange} = props;
+    const { onDateChange, onCTAStateChange } = props;
     if (isDoubleDateMode) {
       cellHeader1.current?.updateView(selectedDate, true);
       cellHeader2.current?.updateView(null, false);
       calendarPicker.current?.setDoubleDateAndTabIndex(
         selectedDate,
         null,
-        tabSelected.current
+        tabSelected.current,
       );
       doubleDate.current.first = moment(selectedDate);
       doubleDate.current.second = null;
@@ -227,10 +233,10 @@ const Calendar: React.FC<CalendarProps> = props => {
       calendarPicker.current?.setDoubleDateAndTabIndex(
         doubleDate.current.first,
         doubleDate.current.second,
-        tabSelected.current
+        tabSelected.current,
       );
       onCTAStateChange?.(false);
-      onDateChange?.({first: doubleDate.current.first!, second: null});
+      onDateChange?.({ first: doubleDate.current.first!, second: null });
     } else {
       // Reset second date when switching to single mode
       doubleDate.current.second = null;
@@ -269,8 +275,9 @@ const Calendar: React.FC<CalendarProps> = props => {
         <View
           style={[
             styles.viewSwitch,
-            {backgroundColor: theme.colors.background.surface},
-          ]}>
+            { backgroundColor: theme.colors.background.surface },
+          ]}
+        >
           <Text typography="label_default_medium">
             {props.titleHeader || translate?.('chooseRoundtrip')}
           </Text>
@@ -285,8 +292,9 @@ const Calendar: React.FC<CalendarProps> = props => {
       <View
         style={[
           styles.viewPanel,
-          {backgroundColor: theme.colors.background.default},
-        ]}>
+          { backgroundColor: theme.colors.background.default },
+        ]}
+      >
         <TabHeader
           id={0}
           ref={cellHeader1}
@@ -295,7 +303,7 @@ const Calendar: React.FC<CalendarProps> = props => {
           activeTab
           date={doubleDate.current.first}
         />
-        <View style={{width: 4, height: '100%'}} />
+        <View style={{ width: 4, height: '100%' }} />
         <TabHeader
           id={1}
           ref={cellHeader2}
@@ -309,8 +317,9 @@ const Calendar: React.FC<CalendarProps> = props => {
       <View
         style={[
           styles.viewPanel,
-          {backgroundColor: theme.colors.background.default},
-        ]}>
+          { backgroundColor: theme.colors.background.default },
+        ]}
+      >
         <TabHeader
           id={0}
           disabled
@@ -327,7 +336,8 @@ const Calendar: React.FC<CalendarProps> = props => {
       value={{
         width: containerWidth,
         height: priceList ? scaleSize(48) : scaleSize(34),
-      }}>
+      }}
+    >
       <View onLayout={onLayout} style={[style, styles.scrollView]}>
         <View
           style={[
@@ -337,7 +347,8 @@ const Calendar: React.FC<CalendarProps> = props => {
               marginBottom: Spacing.S,
             },
             hideHeaderTab && styles.invisible,
-          ]}>
+          ]}
+        >
           {renderSwitchReturnSelection()}
           {renderHeaderPanel()}
         </View>
@@ -365,4 +376,4 @@ const Calendar: React.FC<CalendarProps> = props => {
   );
 };
 
-export {Calendar};
+export { Calendar };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calendar",
-    "version": "0.150.1-rn80.9",
+    "version": "0.150.2-beta.2",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {