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

package/index.tsx

@@ -1,4 +1,10 @@
-import React, {Component, createContext, RefObject} from 'react';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useContext,
+  createContext,
+} from 'react';
 import {Dimensions, LayoutChangeEvent, View} from 'react-native';
 import moment from 'moment';
 import {
@@ -11,308 +17,251 @@ import {
 } from '@momo-kits/foundation';
 import CalendarPro from './CalendarPro';
 import TabHeader from './TabHeader';
-import {CalendarProps, CalendarState} from './types';
+import {CalendarProps, CalendarProRef} from './types';
 import styles from './styles';
 
 const DOUBLE = 'doubleDate';
 
 export const ContainerContext = createContext({width: 0, height: 0});
 
-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>;
+const Calendar: React.FC<CalendarProps> = props => {
+  const {translate, theme} = useContext(ApplicationContext);
 
-  constructor(props: CalendarProps) {
-    super(props);
-    this.doubleDate = props.doubleDate
-      ? {
-          first: props.doubleDate.first ? moment(props.doubleDate.first) : null,
-          second: props.doubleDate.second
-            ? moment(props.doubleDate.second)
-            : null,
-        }
-      : {};
-    this.tabSelected = 0;
+  // 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;
 
-    this.selectedDate = props.selectedDate
-      ? moment(props.selectedDate)
-      : moment();
+  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()
+  );
 
-    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 doubleDate = useRef<{
+    first: moment.Moment | null;
+    second: moment.Moment | null;
+  }>(
+    initDoubleDate
+      ? {
+          first: initDoubleDate.first ? moment(initDoubleDate.first) : null,
+          second: initDoubleDate.second ? moment(initDoubleDate.second) : null,
+        }
+      : {first: null, second: null}
+  );
+  const tabSelected = useRef<number>(id || 0);
 
-  componentDidMount() {
-    const {id} = this.props;
-    this.tabSelected = id || 0;
-    this.viewInit();
-  }
+  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);
 
-  viewInit() {
-    const {mode} = this.props;
+  // Initialize view on mount
+  useEffect(() => {
+    tabSelected.current = id || 0;
     if (mode === DOUBLE) {
       if (
-        this.cellHeader1.current &&
-        this.cellHeader2.current &&
-        this.calendarPicker.current
+        cellHeader1.current &&
+        cellHeader2.current &&
+        calendarPicker.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
+        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
         );
       }
-    } else if (this.calendarPicker.current) {
-      this.calendarPicker.current.setDoubleDateAndTabIndex(this.selectedDate);
+    } else {
+      calendarPicker.current?.setDoubleDateAndTabIndex(selectedDate);
     }
-  }
+  }, []);
 
-  onChangeTab = (idTab: number) => {
-    this.props.onChangeTab?.(idTab);
-    this.tabSelected = idTab;
+  const onLayout = (e: LayoutChangeEvent) =>
+    setContainerWidth(e.nativeEvent.layout.width);
 
-    if (this.cellHeader1.current && this.cellHeader2.current) {
-      this.cellHeader1.current.setActiveTab(idTab === 0);
-      this.cellHeader2.current.setActiveTab(idTab === 1);
-    }
-    this.updateViewFlowPicker();
+  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
+    );
   };
 
-  updateViewFlowPicker() {
-    if (this.calendarPicker.current) {
-      this.calendarPicker.current.setDoubleDateAndTabIndex(
-        this.doubleDate.first,
-        this.doubleDate.second,
-        this.tabSelected
-      );
-    }
-  }
-
-  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);
-    }
-  }
+  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);
+  };
 
-  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
+  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
       );
-      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,
-        });
-      }
+      onDateChange?.({ first: doubleDate.current.first!, second: null });
+      onCTAStateChange?.(false);
     } else {
-      this.doubleDate.first = this.selectedDate;
-      this.doubleDate.second = null;
-
-      this.cellHeader1?.current?.updateView(this.selectedDate, false);
-      this.cellHeader2?.current?.updateView(null, false);
+      // 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);
     }
-  }
+  };
 
-  processDoubleDate() {
-    if (this.tabSelected === 0) {
-      this.processDateFirst();
+  const processDoubleDate = () => {
+    tabSelected.current === 0 ? processDateFirst() : processDateSecond();
+  };
+
+  const updateView = () => {
+    const {onDateChange} = props;
+    if (isDoubleDateMode) {
+      processDoubleDate();
     } else {
-      this.processDateSecond();
+      cellHeaderSingle.current?.updateView(selectedDate, true);
+      onDateChange?.(selectedDate.toDate());
     }
-  }
+  };
 
-  updateView() {
-    const {onDateChange} = this.props;
-    const {isDoubleDateMode} = this.state;
+  // skip running updateView on initial mount to preserve initial doubleDate props
+  const didMount = useRef(false);
 
-    if (isDoubleDateMode) {
-      this.processDoubleDate();
+  useEffect(() => {
+    if (didMount.current) {
+      updateView();
     } else {
-      if (this.cellHeaderSingle.current) {
-        this.cellHeaderSingle.current.updateView(this.selectedDate, true);
-      }
-      if (onDateChange) {
-        const date = new Date(this.selectedDate.toDate());
-        onDateChange(date);
-      }
+      didMount.current = true;
     }
-  }
+  }, [selectedDate]);
 
-  onDateChange = (date: moment.Moment) => {
-    this.selectedDate = date;
-    this.updateView();
-  };
+  const onDateChangeHandler = (date: moment.Moment) => setSelectedDate(date);
 
-  updateHeaderView = () => {
-    const {onDateChange, onCTAStateChange} = this.props;
-    const {isDoubleDateMode} = this.state;
+  const updateHeaderView = () => {
+    const {onDateChange, onCTAStateChange} = props;
     if (isDoubleDateMode) {
-      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,
-          });
-        }
-      }
+      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});
     } else {
-      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.onCTAStateChange?.(true);
+      if (doubleDate.current.first) {
+        cellHeaderSingle.current?.updateView(doubleDate.current.first, true);
+        setSelectedDate(doubleDate.current.first);
+      } else {
+        cellHeaderSingle.current?.updateView(selectedDate, true);
       }
+      props.onDateChange?.(selectedDate.toDate());
     }
   };
 
-  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 toggleSelectionDateMode = () => {
+    setIsDoubleDateMode(prev => {
+      const next = !prev;
+      props.onCallbackCalendar?.('switch', next);
+      return next;
+    });
   };
 
-  renderSwitchReturnSelection = () => {
-    const {isDoubleDateMode} = this.state;
-    const {translate, theme} = this.context;
-    const { hideSwitchReturnSelection  } = this.props;
-    if(hideSwitchReturnSelection){
-      return null
+  const didMountMode = useRef(false);
+  useEffect(() => {
+    if (didMountMode.current) {
+      updateHeaderView();
+    } else {
+      didMountMode.current = true;
     }
+  }, [isDoubleDateMode]);
+
+  const renderSwitchReturnSelection = () => {
+    if (props.hideSwitchReturnSelection) return null;
     return (
       <View style={styles.headerContainer}>
         <View
@@ -320,22 +269,17 @@ class Calendar extends Component<CalendarProps, CalendarState> {
             styles.viewSwitch,
             {backgroundColor: theme.colors.background.surface},
           ]}>
-          <Text typography={'label_default_medium'}>
-            {this.props?.titleHeader || translate('chooseRoundtrip')}
+          <Text typography="label_default_medium">
+            {props.titleHeader || translate?.('chooseRoundtrip')}
           </Text>
-          <Switch
-            value={isDoubleDateMode}
-            onChange={this.toggleSelectionDateMode}
-          />
+          <Switch value={isDoubleDateMode} onChange={toggleSelectionDateMode} />
         </View>
       </View>
     );
   };
 
-  renderHeaderPanel = (theme: {colors: {background: {default: string}}}) => {
-    const {isDoubleDateMode} = this.state;
-    const {headerFrom, headerTo} = this.props;
-    return isDoubleDateMode ? (
+  const renderHeaderPanel = () =>
+    isDoubleDateMode ? (
       <View
         style={[
           styles.viewPanel,
@@ -343,20 +287,20 @@ class Calendar extends Component<CalendarProps, CalendarState> {
         ]}>
         <TabHeader
           id={0}
-          ref={this.cellHeader1}
-          onChangeTab={this.onChangeTab}
-          label={headerFrom || 'depart'}
+          ref={cellHeader1}
+          onChangeTab={onChangeTab}
+          label={props.headerFrom || 'depart'}
           activeTab
-          date={this.doubleDate.first}
+          date={doubleDate.current.first}
         />
         <View style={{width: 4, height: '100%'}} />
         <TabHeader
           id={1}
-          ref={this.cellHeader2}
-          onChangeTab={this.onChangeTab}
-          label={headerTo || 'return'}
+          ref={cellHeader2}
+          onChangeTab={onChangeTab}
+          label={props.headerTo || 'return'}
           activeTab={false}
-          date=""
+          date={doubleDate.current.second}
         />
       </View>
     ) : (
@@ -368,116 +312,55 @@ class Calendar extends Component<CalendarProps, CalendarState> {
         <TabHeader
           id={0}
           disabled
-          ref={this.cellHeaderSingle}
-          label={headerFrom || 'depart'}
+          ref={cellHeaderSingle}
+          label={props.headerFrom || 'depart'}
           activeTab
-          date={this.selectedDate}
+          date={selectedDate}
         />
       </View>
     );
-  };
-
-  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}
-          />
+  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()}
         </View>
-      </ContainerContext.Provider>
-    );
-  }
-}
+        <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>
+  );
+};
 
 export {Calendar};