@momo-kits/calendar 0.121.0-rc.11 → 0.121.0-rc.3

package/index.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useRef,
-  useEffect,
-  useContext,
-  createContext,
-} from 'react';
+import React, {Component, createContext, RefObject} from 'react';
 import {Dimensions, LayoutChangeEvent, View} from 'react-native';
 import moment from 'moment';
 import {
@@ -17,251 +11,308 @@ import {
 } from '@momo-kits/foundation';
 import CalendarPro from './CalendarPro';
 import TabHeader from './TabHeader';
-import {CalendarProps, CalendarProRef} from './types';
+import {CalendarProps, CalendarState} 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);
+class Calendar extends Component<CalendarProps, CalendarState> {
+  static contextType = ApplicationContext;
+  doubleDate: any;
+  tabSelected;
+  selectedDate: moment.Moment;
+  calendarPicker: RefObject<CalendarPro>;
+  cellHeader1: RefObject<TabHeader>;
+  cellHeader2: RefObject<TabHeader>;
+  cellHeaderSingle: RefObject<TabHeader>;
 
-  // derive defaults for date bounds
-  const currentDate = new Date();
-  const minDateDefault = new Date(currentDate);
-  const maxDateDefault = new Date(currentDate);
-  minDateDefault.setFullYear(minDateDefault.getFullYear() - 1);
-  maxDateDefault.setFullYear(maxDateDefault.getFullYear() + 1);
-
-  // destructure all Calendar props
-  const {
-    mode,
-    id,
-    doubleDate: initDoubleDate,
-    selectedDate: initialSelectedDate,
-    onChangeTab: onChangeTabProp,
-    onCallbackCalendar,
-    isOffLunar,
-    isHideHoliday,
-    isShowLunar,
-    priceList,
-    labelFrom,
-    labelTo,
-    isHideLabel,
-    minDate = minDateDefault,
-    maxDate = maxDateDefault,
-    style,
-    disabledDays = [],
-    hideHeaderTab = false,
-  } = props;
-
-  const [containerWidth, setContainerWidth] = useState<number>(
-    Dimensions.get('window').width
-  );
-  const [isDoubleDateMode, setIsDoubleDateMode] = useState<boolean>(
-    mode === DOUBLE
-  );
-  const [selectedDate, setSelectedDate] = useState<moment.Moment>(
-    initialSelectedDate
-      ? moment(initialSelectedDate)
-      : mode === DOUBLE && initDoubleDate && initDoubleDate.first
-      ? moment(initDoubleDate.first)
-      : moment()
-  );
-
-  const doubleDate = useRef<{
-    first: moment.Moment | null;
-    second: moment.Moment | null;
-  }>(
-    initDoubleDate
+  constructor(props: CalendarProps) {
+    super(props);
+    this.doubleDate = props.doubleDate
       ? {
-          first: initDoubleDate.first ? moment(initDoubleDate.first) : null,
-          second: initDoubleDate.second ? moment(initDoubleDate.second) : null,
+          first: props.doubleDate.first ? moment(props.doubleDate.first) : null,
+          second: props.doubleDate.second
+            ? moment(props.doubleDate.second)
+            : null,
         }
-      : {first: null, second: null}
-  );
-  const tabSelected = useRef<number>(id || 0);
+      : {};
+    this.tabSelected = 0;
+
+    this.selectedDate = props.selectedDate
+      ? moment(props.selectedDate)
+      : moment();
+
+    this.state = {
+      isDoubleDateMode: props.mode === DOUBLE,
+      containerWidth: Dimensions.get('window').width,
+    };
+    this.calendarPicker = React.createRef<CalendarPro>();
+    this.cellHeader1 = React.createRef<TabHeader>();
+    this.cellHeader2 = React.createRef<TabHeader>();
+    this.cellHeaderSingle = React.createRef<TabHeader>();
+  }
 
-  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);
+  componentDidMount() {
+    const {id} = this.props;
+    this.tabSelected = id || 0;
+    this.viewInit();
+  }
 
-  // Initialize view on mount
-  useEffect(() => {
-    tabSelected.current = id || 0;
+  viewInit() {
+    const {mode} = this.props;
     if (mode === DOUBLE) {
       if (
-        cellHeader1.current &&
-        cellHeader2.current &&
-        calendarPicker.current
+        this.cellHeader1.current &&
+        this.cellHeader2.current &&
+        this.calendarPicker.current
       ) {
-        const start = doubleDate.current.first;
-        const end = doubleDate.current.second;
-        cellHeader1.current.updateView(start, tabSelected.current === 0);
-        cellHeader2.current.updateView(end, tabSelected.current === 1);
-        calendarPicker.current.setDoubleDateAndTabIndex(
-          doubleDate.current.first,
-          doubleDate.current.second,
-          tabSelected.current
+        const start = this.doubleDate.first ? this.doubleDate.first : null;
+        const end = this.doubleDate.second ? this.doubleDate.second : null;
+        this.cellHeader1.current.updateView(start, this.tabSelected === 0);
+        this.cellHeader2.current.updateView(end, this.tabSelected === 1);
+        this.calendarPicker.current.setDoubleDateAndTabIndex(
+          this.doubleDate.first,
+          this.doubleDate.second,
+          this.tabSelected
         );
       }
-    } else {
-      calendarPicker.current?.setDoubleDateAndTabIndex(selectedDate);
+    } else if (this.calendarPicker.current) {
+      this.calendarPicker.current.setDoubleDateAndTabIndex(this.selectedDate);
     }
-  }, []);
+  }
 
-  const onLayout = (e: LayoutChangeEvent) =>
-    setContainerWidth(e.nativeEvent.layout.width);
+  onChangeTab = (idTab: number) => {
+    this.props.onChangeTab?.(idTab);
+    this.tabSelected = idTab;
 
-  const onChangeTab = (id: number) => {
-    onChangeTabProp?.(id);
-    tabSelected.current = id;
-    cellHeader1.current?.setActiveTab(id === 0);
-    cellHeader2.current?.setActiveTab(id === 1);
-    calendarPicker.current?.setDoubleDateAndTabIndex(
-      doubleDate.current.first,
-      doubleDate.current.second,
-      tabSelected.current
-    );
+    if (this.cellHeader1.current && this.cellHeader2.current) {
+      this.cellHeader1.current.setActiveTab(idTab === 0);
+      this.cellHeader2.current.setActiveTab(idTab === 1);
+    }
+    this.updateViewFlowPicker();
   };
 
-  const processDateFirst = () => {
-    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;
-    tabSelected.current = 1;
-    // update headers
-    cellHeader1.current.updateView(selectedDate, false);
-    cellHeader2.current.updateView(null, true);
-    // update calendar
-    calendarPicker.current.setDoubleDateAndTabIndex(
-      doubleDate.current.first,
-      doubleDate.current.second,
-      tabSelected.current
-    );
-    // notify parent
-    onDateChange?.({ first: doubleDate.current.first!, second: null });
-    onCTAStateChange?.(false);
-  };
+  updateViewFlowPicker() {
+    if (this.calendarPicker.current) {
+      this.calendarPicker.current.setDoubleDateAndTabIndex(
+        this.doubleDate.first,
+        this.doubleDate.second,
+        this.tabSelected
+      );
+    }
+  }
 
-  const processDateSecond = () => {
-    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;
-      doubleDate.current.second = null;
-      tabSelected.current = 1;
-      cellHeader1.current.updateView(selectedDate, false);
-      cellHeader2.current.updateView(null, false);
-      calendarPicker.current.setDoubleDateAndTabIndex(
-        doubleDate.current.first,
-        doubleDate.current.second,
-        tabSelected.current
+  processDateFirst() {
+    const {onDateChange, onCTAStateChange} = this.props;
+    if (
+      this.cellHeader1.current &&
+      this.cellHeader2.current &&
+      this.calendarPicker.current
+    ) {
+      if (
+        this.doubleDate.first &&
+        this.doubleDate.second &&
+        this.selectedDate <= this.doubleDate.first
+      ) {
+        this.doubleDate.first = this.selectedDate;
+        this.doubleDate.second = null;
+        this.tabSelected = 1;
+        this.cellHeader1.current.updateView(
+          this.selectedDate,
+          this.tabSelected === 0
+        );
+        this.cellHeader2.current.updateView(
+          this.doubleDate.second,
+          this.tabSelected === 1
+        );
+        this.cellHeader2.current.setActiveTab(this.tabSelected === 1);
+        this.calendarPicker.current.setDoubleDateAndTabIndex(
+          this.doubleDate.first,
+          this.doubleDate.second,
+          this.tabSelected
+        );
+        if (onDateChange) {
+          onDateChange({
+            first: this.doubleDate.first
+              ? this.doubleDate.first.toDate()
+              : null,
+            second: this.doubleDate.second
+              ? this.doubleDate.second.toDate()
+              : null,
+          });
+        }
+      } else {
+        this.doubleDate.first = this.selectedDate;
+        this.doubleDate.second = null;
+        this.cellHeader1.current.updateView(this.selectedDate, false);
+        this.cellHeader2.current.updateView(null, true);
+        this.tabSelected = 1;
+        this.calendarPicker.current.setDoubleDateAndTabIndex(
+          this.doubleDate.first,
+          this.doubleDate.second,
+          this.tabSelected
+        );
+        if (onDateChange) {
+          onDateChange({
+            first: this.doubleDate.first
+              ? this.doubleDate.first.toDate()
+              : null,
+            second: this.doubleDate.second
+              ? this.doubleDate.second.toDate()
+              : null,
+          });
+        }
+      }
+    }
+    if (onCTAStateChange) {
+      onCTAStateChange(!!this.doubleDate.second);
+    }
+  }
+
+  processDateSecond() {
+    const {onDateChange, onCTAStateChange} = this.props;
+    if (
+      this.cellHeader2.current &&
+      this.selectedDate >= this.doubleDate.first
+    ) {
+      this.doubleDate.second = this.selectedDate;
+      this.cellHeader2.current.updateView(this.selectedDate, false);
+      this.cellHeader1?.current?.setActiveTab(true);
+      this.tabSelected = 0;
+      this.calendarPicker?.current?.setDoubleDateAndTabIndex(
+        this.doubleDate.first,
+        this.doubleDate.second,
+        this.tabSelected
       );
-      onDateChange?.({ first: doubleDate.current.first!, second: null });
-      onCTAStateChange?.(false);
+      if (onCTAStateChange) {
+        onCTAStateChange(!!this.doubleDate.second);
+      }
+      if (onDateChange) {
+        onDateChange({
+          first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
+          second: this.doubleDate.second
+            ? this.doubleDate.second.toDate()
+            : null,
+        });
+      }
     } else {
-      // valid second date
-      doubleDate.current.second = selectedDate;
-      tabSelected.current = 0;
-      cellHeader2.current.updateView(selectedDate, false);
-      cellHeader1.current.setActiveTab(true);
-      calendarPicker.current.setDoubleDateAndTabIndex(
-        doubleDate.current.first,
-        doubleDate.current.second,
-        tabSelected.current
-      );
-      onDateChange?.({ first: doubleDate.current.first!, second: doubleDate.current.second! });
-      onCTAStateChange?.(true);
-    }
-  };
+      this.doubleDate.first = this.selectedDate;
+      this.doubleDate.second = null;
 
-  const processDoubleDate = () => {
-    tabSelected.current === 0 ? processDateFirst() : processDateSecond();
-  };
+      this.cellHeader1?.current?.updateView(this.selectedDate, false);
+      this.cellHeader2?.current?.updateView(null, false);
+    }
+  }
 
-  const updateView = () => {
-    const {onDateChange} = props;
-    if (isDoubleDateMode) {
-      processDoubleDate();
+  processDoubleDate() {
+    if (this.tabSelected === 0) {
+      this.processDateFirst();
     } else {
-      cellHeaderSingle.current?.updateView(selectedDate, true);
-      onDateChange?.(selectedDate.toDate());
+      this.processDateSecond();
     }
-  };
+  }
 
-  // skip running updateView on initial mount to preserve initial doubleDate props
-  const didMount = useRef(false);
+  updateView() {
+    const {onDateChange} = this.props;
+    const {isDoubleDateMode} = this.state;
 
-  useEffect(() => {
-    if (didMount.current) {
-      updateView();
+    if (isDoubleDateMode) {
+      this.processDoubleDate();
     } else {
-      didMount.current = true;
+      if (this.cellHeaderSingle.current) {
+        this.cellHeaderSingle.current.updateView(this.selectedDate, true);
+      }
+      if (onDateChange) {
+        const date = new Date(this.selectedDate.toDate());
+        onDateChange(date);
+      }
     }
-  }, [selectedDate]);
+  }
 
-  const onDateChangeHandler = (date: moment.Moment) => setSelectedDate(date);
+  onDateChange = (date: moment.Moment) => {
+    this.selectedDate = date;
+    this.updateView();
+  };
 
-  const updateHeaderView = () => {
-    const {onDateChange, onCTAStateChange} = props;
+  updateHeaderView = () => {
+    const {onDateChange, onCTAStateChange} = this.props;
+    const {isDoubleDateMode} = this.state;
     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);
-      calendarPicker.current?.setDoubleDateAndTabIndex(
-        doubleDate.current.first,
-        doubleDate.current.second,
-        tabSelected.current
-      );
-      onCTAStateChange?.(false);
-      onDateChange?.({first: doubleDate.current.first!, second: null});
+      if (this.cellHeader1.current && this.cellHeader2.current) {
+        this.cellHeader1.current.updateView(this.selectedDate, true);
+        this.cellHeader2.current.updateView(null, false);
+        this.calendarPicker.current?.setDoubleDateAndTabIndex(
+          this.selectedDate,
+          null,
+          this.tabSelected
+        );
+        this.doubleDate.first = moment(this.selectedDate);
+        this.doubleDate.second = null;
+
+        this.tabSelected = 1;
+        this.cellHeader2.current?.setActiveTab(true);
+        this.cellHeader1.current?.setActiveTab(false);
+        this.calendarPicker?.current?.setDoubleDateAndTabIndex(
+          this.doubleDate.first,
+          this.doubleDate.second,
+          this.tabSelected
+        );
+
+        if (onCTAStateChange) {
+          onCTAStateChange(false);
+        }
+        if (onDateChange) {
+          onDateChange({
+            first: this.doubleDate.first
+              ? this.doubleDate.first.toDate()
+              : null,
+            second: this.doubleDate.second
+              ? this.doubleDate.second.toDate()
+              : null,
+          });
+        }
+      }
     } else {
-      props.onCTAStateChange?.(true);
-      if (doubleDate.current.first) {
-        cellHeaderSingle.current?.updateView(doubleDate.current.first, true);
-        setSelectedDate(doubleDate.current.first);
-      } else {
-        cellHeaderSingle.current?.updateView(selectedDate, true);
+      if (onCTAStateChange) {
+        onCTAStateChange(true);
+      }
+      if (this.cellHeaderSingle.current) {
+        if (this.doubleDate.first) {
+          this.cellHeaderSingle.current.updateView(this.doubleDate.first, true);
+          this.selectedDate = this.doubleDate.first;
+        } else {
+          this.cellHeaderSingle.current.updateView(this.selectedDate, true);
+        }
+        if (onDateChange) {
+          onDateChange(this.selectedDate.toDate());
+        }
       }
-      props.onDateChange?.(selectedDate.toDate());
     }
   };
 
-  const toggleSelectionDateMode = () => {
-    setIsDoubleDateMode(prev => {
-      const next = !prev;
-      props.onCallbackCalendar?.('switch', next);
-      return next;
-    });
+  toggleSelectionDateMode = () => {
+    const {onCallbackCalendar} = this.props;
+    this.setState(
+      preState => ({isDoubleDateMode: !preState.isDoubleDateMode}),
+      () => {
+        const {isDoubleDateMode} = this.state;
+        this.updateHeaderView();
+        if (onCallbackCalendar && typeof onCallbackCalendar === 'function') {
+          onCallbackCalendar('switch', isDoubleDateMode);
+        }
+      }
+    );
   };
 
-  const didMountMode = useRef(false);
-  useEffect(() => {
-    if (didMountMode.current) {
-      updateHeaderView();
-    } else {
-      didMountMode.current = true;
+  renderSwitchReturnSelection = () => {
+    const {isDoubleDateMode} = this.state;
+    const {translate, theme} = this.context;
+    const { hideSwitchReturnSelection  } = this.props;
+    if(hideSwitchReturnSelection){
+      return null
     }
-  }, [isDoubleDateMode]);
-
-  const renderSwitchReturnSelection = () => {
-    if (props.hideSwitchReturnSelection) return null;
     return (
       <View style={styles.headerContainer}>
         <View
@@ -269,17 +320,22 @@ const Calendar: React.FC<CalendarProps> = props => {
             styles.viewSwitch,
             {backgroundColor: theme.colors.background.surface},
           ]}>
-          <Text typography="label_default_medium">
-            {props.titleHeader || translate?.('chooseRoundtrip')}
+          <Text typography={'label_default_medium'}>
+            {this.props?.titleHeader || translate('chooseRoundtrip')}
           </Text>
-          <Switch value={isDoubleDateMode} onChange={toggleSelectionDateMode} />
+          <Switch
+            value={isDoubleDateMode}
+            onChange={this.toggleSelectionDateMode}
+          />
         </View>
       </View>
     );
   };
 
-  const renderHeaderPanel = () =>
-    isDoubleDateMode ? (
+  renderHeaderPanel = (theme: {colors: {background: {default: string}}}) => {
+    const {isDoubleDateMode} = this.state;
+    const {headerFrom, headerTo} = this.props;
+    return isDoubleDateMode ? (
       <View
         style={[
           styles.viewPanel,
@@ -287,20 +343,20 @@ const Calendar: React.FC<CalendarProps> = props => {
         ]}>
         <TabHeader
           id={0}
-          ref={cellHeader1}
-          onChangeTab={onChangeTab}
-          label={props.headerFrom || 'depart'}
+          ref={this.cellHeader1}
+          onChangeTab={this.onChangeTab}
+          label={headerFrom || 'depart'}
           activeTab
-          date={doubleDate.current.first}
+          date={this.doubleDate.first}
         />
         <View style={{width: 4, height: '100%'}} />
         <TabHeader
           id={1}
-          ref={cellHeader2}
-          onChangeTab={onChangeTab}
-          label={props.headerTo || 'return'}
+          ref={this.cellHeader2}
+          onChangeTab={this.onChangeTab}
+          label={headerTo || 'return'}
           activeTab={false}
-          date={doubleDate.current.second}
+          date=""
         />
       </View>
     ) : (
@@ -312,55 +368,116 @@ const Calendar: React.FC<CalendarProps> = props => {
         <TabHeader
           id={0}
           disabled
-          ref={cellHeaderSingle}
-          label={props.headerFrom || 'depart'}
+          ref={this.cellHeaderSingle}
+          label={headerFrom || 'depart'}
           activeTab
-          date={selectedDate}
+          date={this.selectedDate}
         />
       </View>
     );
+  };
 
-  return (
-    <ContainerContext.Provider
-      value={{
-        width: containerWidth,
-        height: priceList ? scaleSize(48) : scaleSize(34),
-      }}>
-      <View onLayout={onLayout} style={[style, styles.scrollView]}>
-        <View
-          style={[
-            {
-              backgroundColor: theme.colors.background.surface,
-              borderRadius: Radius.XS,
-              marginBottom: Spacing.S,
-            },
-            hideHeaderTab && styles.invisible,
-          ]}>
-          {renderSwitchReturnSelection()}
-          {renderHeaderPanel()}
+  setDateRange = (
+    dateRange: {
+      startDate: moment.Moment | undefined;
+      endDate: moment.Moment | undefined;
+    },
+    isScrollToStartDate: any
+  ) => {
+    const {mode, doubleDate = {}} = this.props;
+    if (mode === 'doubleDate') {
+      this.cellHeader1?.current?.updateView(
+        dateRange.startDate,
+        this.tabSelected === 0
+      );
+      this.cellHeader2?.current?.updateView(
+        dateRange.endDate,
+        this.tabSelected === 1
+      );
+      this.calendarPicker?.current?.setDateRange(
+        dateRange,
+        isScrollToStartDate
+      );
+      this.doubleDate = doubleDate
+        ? {
+            first: dateRange.startDate ? moment(dateRange.startDate) : null,
+            second: dateRange.endDate ? moment(dateRange.endDate) : null,
+          }
+        : {};
+    }
+  };
+
+  onLayout = (e: LayoutChangeEvent) => {
+    this.setState({containerWidth: e.nativeEvent.layout.width});
+  };
+
+  render() {
+    const currentDate = new Date();
+    const minDateDefault = new Date(currentDate);
+    const maxDateDefault = new Date(currentDate);
+    minDateDefault.setFullYear(minDateDefault.getFullYear() - 1);
+    maxDateDefault.setFullYear(maxDateDefault.getFullYear() + 1);
+
+    const {
+      isOffLunar,
+      isHideHoliday,
+      isShowLunar,
+      onCallbackCalendar,
+      priceList,
+      labelFrom,
+      labelTo,
+      isHideLabel,
+      minDate = minDateDefault,
+      maxDate = maxDateDefault,
+      doubleDate,
+      style,
+      disabledDays = [],
+      hideHeaderTab = false,
+    } = this.props;
+    const {isDoubleDateMode, containerWidth} = this.state;
+    const {theme} = this.context;
+    return (
+      <ContainerContext.Provider
+        value={{
+          width: containerWidth,
+          height: priceList ? scaleSize(48) : scaleSize(34),
+        }}>
+        <View onLayout={this.onLayout} style={[style, styles.scrollView]}>
+          <View
+            style={[
+              {
+                backgroundColor: theme.colors.background.surface,
+                borderRadius: Radius.XS,
+                marginBottom: Spacing.S,
+              },
+              hideHeaderTab && styles.invisible,
+            ]}>
+            {this.renderSwitchReturnSelection()}
+            {this.renderHeaderPanel(theme)}
+          </View>
+          <CalendarPro
+            priceList={priceList}
+            ref={this.calendarPicker}
+            startDate={doubleDate?.first}
+            endDate={doubleDate?.second}
+            onDateChange={this.onDateChange}
+            isDoubleDateMode={isDoubleDateMode}
+            selectedDate={this.selectedDate}
+            isShowLunar={isShowLunar}
+            onCallbackCalendar={onCallbackCalendar}
+            labelFrom={labelFrom}
+            labelTo={labelTo}
+            isHideLabel={isHideLabel}
+            minDate={minDate}
+            maxDate={maxDate}
+            isHideHoliday={isHideHoliday}
+            isOffLunar={isOffLunar}
+            disabledDays={disabledDays}
+          />
         </View>
-        <CalendarPro
-          priceList={priceList}
-          ref={calendarPicker}
-          startDate={doubleDate.current.first!}
-          endDate={doubleDate.current.second!}
-          onDateChange={onDateChangeHandler}
-          isDoubleDateMode={isDoubleDateMode}
-          selectedDate={selectedDate}
-          isShowLunar={isShowLunar}
-          onCallbackCalendar={onCallbackCalendar}
-          labelFrom={labelFrom}
-          labelTo={labelTo}
-          isHideLabel={isHideLabel}
-          minDate={minDate}
-          maxDate={maxDate}
-          isHideHoliday={isHideHoliday}
-          isOffLunar={isOffLunar}
-          disabledDays={disabledDays}
-        />
-      </View>
-    </ContainerContext.Provider>
-  );
-};
+      </ContainerContext.Provider>
+    );
+  }
+}
 
 export {Calendar};