@momo-kits/calendar 0.79.6 → 0.80.2

package/types.ts

@@ -1,70 +1,198 @@
 import Moment from 'moment';
 import {ViewStyle} from 'react-native';
 
+export type Holidays = {
+  solar: object;
+  lunar: any[];
+};
+
+export type PriceInfo = {
+  priceAsString: string;
+  isBestPrice: boolean;
+};
+
+export type PriceListData = {
+  inbound: {
+    [keyMonth: string]: {
+      [keyDay: string]: PriceInfo;
+    };
+  };
+  outbound: {
+    [keyMonth: string]: {
+      [keyDay: string]: PriceInfo;
+    };
+  };
+};
+
 export type CalendarProProps = {
-  startDate: Moment.Moment | number | null;
-  endDate: Moment.Moment | number | null;
+  startDate: Date | null;
+  endDate: Date | null;
   maxDate: Date;
   minDate: Date;
-  format: string;
   isShowLunar?: boolean;
-  selectedDate: Date;
-  isDoubleDateMode?: boolean;
-  onDateChange: (day: number) => void;
-  priceList: any;
+  selectedDate: Moment.Moment;
+  isDoubleDateMode: boolean;
+  onDateChange: (day: Moment.Moment) => void;
+  priceList: PriceListData;
   labelFrom?: string;
   labelTo?: string;
   isHideLabel?: boolean;
   isHideHoliday?: boolean;
   isOffLunar?: boolean;
-  disabledWeekend?: boolean;
   onCallbackCalendar?: (lunar: string, nextStateShowLunar: boolean) => void;
-  containerWidth: number;
+  disabledDays?: Date[];
 };
 
 export type CalendarProState = {
-  startDate?: Moment.Moment | number | null;
-  endDate?: Moment.Moment | number | null;
+  startDate: Date | null;
+  endDate: Date | null;
   showLunar?: boolean;
   tabSelected?: number;
-  holidays?: any[];
+  holidays: {lunar: number; mixedLabel: string}[];
   ownUpdate?: boolean;
   temp?: any;
   headerKey?: string;
 };
 
 export type DoubleDate = {
-  first: Moment.Moment | Date | null;
-  second: Moment.Moment | Date | null;
+  first: Date | null;
+  second: Date | null;
 };
 
 export type CalendarProps = {
-  doubleDate: DoubleDate;
-  selectedDate: Moment.Moment;
-  mode: 'doubleDate' | 'singleDate';
-  id: number;
-  onChangeTab: (id: number) => void;
-  onDateChange: (date: DoubleDate | Date) => void;
-  onCTAStateChange: (b: boolean) => void;
-  onCallbackCalendar: (type: string, isDoubleDateMode: boolean) => void;
+  doubleDate?: DoubleDate;
+  selectedDate?: Moment.Moment;
+  mode?: 'doubleDate' | 'singleDate';
+  id?: number;
+  onChangeTab?: (id: number) => void;
+  onDateChange?: (date: DoubleDate | Date) => void;
+  onCTAStateChange?: (b: boolean) => void;
+  onCallbackCalendar?: (type: string, isDoubleDateMode: boolean) => void;
   headerFrom?: string;
   headerTo?: string;
   isOffLunar?: boolean;
   isHideHoliday?: boolean;
   isHiddenSwitch?: boolean;
   isShowLunar?: boolean;
-  priceList?: any;
+  priceList?: PriceListData;
   labelFrom?: string;
   labelTo?: string;
   isHideLabel?: boolean;
-  minDate: Date;
-  maxDate: Date;
+  minDate?: Date;
+  maxDate?: Date;
   isHideHeaderPanel?: boolean;
-  disabledWeekend?: boolean;
-  style: ViewStyle | ViewStyle[];
+  style?: ViewStyle | ViewStyle[];
+  disabledDays?: Date[];
+};
+
+export type CalendarProRef = {
+  setDoubleDateAndTabIndex: (
+    firstDate?: Moment.Moment | null,
+    secondDate?: Moment.Moment | null,
+    tabSelected?: number,
+  ) => void;
+  setDateRange: (
+    dateRange: {startDate: any; endDate: any},
+    isScrollToStartDate: any,
+  ) => void;
 };
 
 export type CalendarState = {
   isDoubleDateMode: boolean;
   containerWidth: number;
 };
+
+export type HeaderControlRef = {
+  onUpdateInfo: (date: {date: Moment.Moment}) => void;
+};
+
+export type HeaderControlProps = {
+  onPressBackArrow: () => void;
+  onPressNextArrow: () => void;
+  selectedDate: Moment.Moment;
+};
+
+export type MonthListProps = {
+  isDoubleDateMode: boolean;
+  selectedDate: Moment.Moment;
+  holidays?: {lunar: number; mixedLabel: string}[];
+  priceList?: Record<string, any>;
+  minDate: Moment.Moment;
+  maxDate: Moment.Moment;
+  startDate: Date | null;
+  endDate: Date | null;
+  isShowLunar: boolean;
+  tabSelected?: number;
+  today: Moment.Moment;
+  onChoose: (day: Date) => void;
+  onScrollCalendar?: (info: {
+    date: Moment.Moment;
+    key: string;
+    currentIndex: number;
+  }) => void;
+  lunarConverter: any;
+  disabledDays?: Date[];
+};
+
+export type MonthListState = {
+  data?: any;
+  isDoubleDateMode?: boolean;
+};
+
+export type MonthListRef = {
+  scrollToMonth: () => void;
+};
+
+export type MonthProps = {
+  dateList: any[];
+  holidays: Holidays;
+  priceListDate?: Record<string, PriceInfo>;
+  month?: any;
+  minDate: Moment.Moment;
+  maxDate: Moment.Moment;
+  startDate: Moment.Moment;
+  endDate: Moment.Moment;
+  isShowLunar: boolean;
+  isDoubleDateMode: boolean;
+  disabledDays?: Date[];
+};
+
+export type DayProps = {
+  onChoose?: (date: Moment.Moment) => void;
+  date: Moment.Moment;
+  minDate: Moment.Moment;
+  maxDate: Moment.Moment;
+  empty: Moment.Moment;
+  index: number;
+  isShowLunar: boolean;
+  isDoubleDateMode: boolean;
+  lunarDate?: any;
+  isSolarHoliday: boolean;
+  isLunarHoliday: boolean;
+  tabSelected?: number;
+  startDate: Moment.Moment;
+  endDate: Moment.Moment;
+  price?: string;
+  isBestPrice?: boolean;
+  havePriceList: boolean;
+  isDisabled: boolean;
+};
+
+export type TabHeaderState = {
+  active: boolean;
+  date?: Moment.Moment;
+};
+
+export type TabHeaderProps = {
+  activeTab: boolean;
+  label: string;
+  date?: Moment.Moment | string | null;
+  onChangeTab?: (id: number) => void;
+  id: number;
+  disabled?: boolean;
+};
+
+export type TabHeaderRef = {
+  updateView: (date?: Moment.Moment | null, activeTab?: boolean) => void;
+  setActiveTab: (active: boolean) => void;
+};

package/src/Calendar.tsx

@@ -1,488 +0,0 @@
-import React, {Component, useCallback} from 'react';
-import {
-  Dimensions,
-  LayoutChangeEvent,
-  ScrollView,
-  StyleSheet,
-  View,
-} from 'react-native';
-import moment from 'moment';
-import {
-  ApplicationContext,
-  Colors,
-  Radius,
-  Switch,
-  Text,
-} from '@momo-kits/foundation';
-import CalendarPro from './CalendarPro';
-import TabHeader from './TabHeader';
-import {CalendarProps, CalendarState} from '../types';
-
-const DOUBLE = 'doubleDate';
-const SINGLE = 'singleDate';
-
-class Calendar extends Component<CalendarProps, CalendarState> {
-  static contextType = ApplicationContext;
-  doubleDate;
-  tabSelected;
-  selectedDate;
-  calendarPicker;
-  cellHeader1;
-  cellHeader2;
-  cellHeaderSingle;
-  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;
-
-    this.selectedDate = props.selectedDate
-      ? moment(props.selectedDate)
-      : moment();
-
-    this.state = {
-      isDoubleDateMode: props.mode === DOUBLE,
-      containerWidth: 0,
-    };
-    this.calendarPicker = React.createRef();
-    this.cellHeader1 = React.createRef();
-    this.cellHeader2 = React.createRef();
-    this.cellHeaderSingle = React.createRef();
-  }
-
-  componentDidMount() {
-    const {id} = this.props;
-    this.tabSelected = id || 0;
-    this.viewInit();
-  }
-
-  viewInit() {
-    const {mode} = this.props;
-    if (mode === DOUBLE) {
-      if (
-        this.cellHeader1.current &&
-        this.cellHeader2.current &&
-        this.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,
-        );
-      }
-    } else if (this.calendarPicker.current) {
-      this.calendarPicker.current.setDoubleDateAndTabIndex(this.selectedDate);
-    }
-  }
-
-  onChangeTab = (idTab: number) => {
-    this.props.onChangeTab && this.props.onChangeTab(idTab);
-
-    this.tabSelected = idTab;
-    if (this.cellHeader1.current && this.cellHeader2.current) {
-      this.cellHeader1.current.setActiveTab(idTab === 0);
-      this.cellHeader2.current.setActiveTab(idTab === 1);
-    }
-    this.updateViewFlowPicker();
-  };
-
-  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);
-    }
-  }
-
-  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,
-      );
-      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 {
-      this.doubleDate.first = this.selectedDate;
-      this.doubleDate.second = null;
-
-      this.cellHeader1.current.updateView(this.selectedDate, false);
-      this.cellHeader2.current.updateView(null, false);
-    }
-  }
-
-  processDoubleDate() {
-    if (this.tabSelected === 0) {
-      this.processDateFirst();
-    } else {
-      this.processDateSecond();
-    }
-  }
-
-  updateView() {
-    const {onDateChange} = this.props;
-    const {isDoubleDateMode} = this.state;
-
-    if (isDoubleDateMode) {
-      this.processDoubleDate();
-    } else {
-      if (this.cellHeaderSingle.current) {
-        this.cellHeaderSingle.current.updateView(this.selectedDate, true);
-      }
-      if (onDateChange) {
-        const date = new Date(this.selectedDate.toDate());
-        onDateChange(date);
-      }
-    }
-  }
-
-  onDateChange = (date: moment.Moment) => {
-    this.selectedDate = date;
-    this.updateView();
-  };
-
-  updateHeaderView = () => {
-    const {onDateChange, onCTAStateChange} = this.props;
-    const {isDoubleDateMode} = this.state;
-    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 = 0;
-
-        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 {
-      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());
-        }
-      }
-    }
-  };
-
-  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);
-        }
-      },
-    );
-  };
-
-  renderSwitchReturnSelection = () => {
-    const {isDoubleDateMode} = this.state;
-    const {translate} = this.context;
-    return (
-      <View style={styles.headerContainer}>
-        <View style={styles.viewSwitch}>
-          <Text typography={'label_default'} style={styles.textSwitch}>
-            {translate('chooseRoundtrip')}
-          </Text>
-          <Switch
-            value={isDoubleDateMode}
-            onChange={this.toggleSelectionDateMode}
-          />
-        </View>
-        <View style={styles.seperator} />
-      </View>
-    );
-  };
-
-  renderHeaderPanel = () => {
-    const {isDoubleDateMode} = this.state;
-    const {headerFrom, headerTo} = this.props;
-    return isDoubleDateMode ? (
-      <View style={styles.viewPanel}>
-        <TabHeader
-          id={0}
-          ref={this.cellHeader1}
-          onChangeTab={this.onChangeTab}
-          label={headerFrom || 'depart'}
-          activeTab
-          date={this.doubleDate.first}
-        />
-
-        <TabHeader
-          id={1}
-          ref={this.cellHeader2}
-          onChangeTab={this.onChangeTab}
-          label={headerTo || 'return'}
-          activeTab={false}
-          date=""
-        />
-      </View>
-    ) : (
-      <View style={styles.viewPanel_2}>
-        <TabHeader
-          id={1}
-          disabled
-          ref={this.cellHeaderSingle}
-          label={headerFrom || 'depart'}
-          activeTab
-          date={this.selectedDate}
-        />
-      </View>
-    );
-  };
-
-  setDateRange = (
-    dateRange: {
-      startDate: moment.MomentInput | undefined;
-      endDate: moment.MomentInput | 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 {
-      isOffLunar,
-      isHideHoliday,
-      isHiddenSwitch,
-      isShowLunar,
-      onCallbackCalendar,
-      priceList,
-      labelFrom,
-      labelTo,
-      isHideLabel,
-      minDate,
-      maxDate,
-      doubleDate,
-      isHideHeaderPanel,
-      disabledWeekend,
-      style,
-    } = this.props;
-
-    const {isDoubleDateMode, containerWidth} = this.state;
-    return (
-      <ScrollView onLayout={this.onLayout} style={[styles.scrollView, style]}>
-        <View
-          style={{
-            backgroundColor: Colors.black_01,
-            borderRadius: Radius.XS,
-          }}>
-          {!isHiddenSwitch && this.renderSwitchReturnSelection()}
-          {!isHideHeaderPanel && this.renderHeaderPanel()}
-        </View>
-        <CalendarPro
-          containerWidth={containerWidth}
-          disabledWeekend={disabledWeekend}
-          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}
-        />
-      </ScrollView>
-    );
-  }
-}
-
-export default Calendar;
-
-const styles = StyleSheet.create({
-  viewPanel_2: {
-    height: 50,
-    marginHorizontal: 12,
-    marginTop: 6,
-    flexDirection: 'row',
-  },
-  viewPanel: {
-    height: 50,
-    marginHorizontal: 12,
-    marginTop: 6,
-    flexDirection: 'row',
-  },
-  textSwitch: {
-    color: Colors.black_15,
-  },
-  viewSwitch: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: Colors.black_01,
-    height: 42,
-  },
-  seperator: {
-    height: 1,
-    width: '100%',
-    backgroundColor: Colors.black_04,
-  },
-  headerContainer: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-  },
-  scrollView: {
-    flex: 1,
-    backgroundColor: 'transparent',
-    alignSelf: 'center',
-    width: '100%',
-  },
-});