@momo-kits/calendar 0.79.6 → 0.80.2

package/index.tsx

@@ -1,3 +1,482 @@
-import Calendar from './src/Calendar';
+import React, {Component, createContext, RefObject} from 'react';
+import {Dimensions, LayoutChangeEvent, ScrollView, View} from 'react-native';
+import moment from 'moment';
+import {
+  ApplicationContext,
+  Radius,
+  scaleSize,
+  Spacing,
+  Switch,
+  Text,
+} from '@momo-kits/foundation';
+import CalendarPro from './CalendarPro';
+import TabHeader from './TabHeader';
+import {
+  CalendarProps,
+  CalendarProRef,
+  CalendarState,
+  TabHeaderRef,
+} from './types';
+import styles from './styles';
 
-export {Calendar};
+const DOUBLE = 'doubleDate';
+const SINGLE = 'singleDate';
+
+export const ContainerContext = createContext({width: 0, height: 0});
+
+class Calendar extends Component<CalendarProps, CalendarState> {
+  static contextType = ApplicationContext;
+  doubleDate;
+  tabSelected;
+  selectedDate;
+  calendarPicker: RefObject<CalendarProRef>;
+  cellHeader1: RefObject<TabHeaderRef>;
+  cellHeader2: RefObject<TabHeaderRef>;
+  cellHeaderSingle: RefObject<TabHeaderRef>;
+  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: Dimensions.get('window').width,
+    };
+    this.calendarPicker = React.createRef<CalendarProRef>();
+    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?.(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 = 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 {
+      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, theme} = this.context;
+    return (
+      <View style={styles.headerContainer}>
+        <View
+          style={[
+            styles.viewSwitch,
+            {backgroundColor: theme.colors.background.surface},
+          ]}>
+          <Text typography={'label_default'}>
+            {translate('chooseRoundtrip')}
+          </Text>
+          <Switch
+            value={isDoubleDateMode}
+            onChange={this.toggleSelectionDateMode}
+          />
+        </View>
+      </View>
+    );
+  };
+
+  renderHeaderPanel = (theme: {colors: {background: {default: string}}}) => {
+    const {isDoubleDateMode} = this.state;
+    const {headerFrom, headerTo} = this.props;
+    return isDoubleDateMode ? (
+      <View
+        style={[
+          styles.viewPanel,
+          {backgroundColor: theme.colors.background.default},
+        ]}>
+        <TabHeader
+          id={0}
+          ref={this.cellHeader1}
+          onChangeTab={this.onChangeTab}
+          label={headerFrom || 'depart'}
+          activeTab
+          date={this.doubleDate.first}
+        />
+        <View style={{width: 4, height: '100%'}} />
+        <TabHeader
+          id={1}
+          ref={this.cellHeader2}
+          onChangeTab={this.onChangeTab}
+          label={headerTo || 'return'}
+          activeTab={false}
+          date=""
+        />
+      </View>
+    ) : (
+      <View
+        style={[
+          styles.viewPanel,
+          {backgroundColor: theme.colors.background.default},
+        ]}>
+        <TabHeader
+          id={0}
+          disabled
+          ref={this.cellHeaderSingle}
+          label={headerFrom || 'depart'}
+          activeTab
+          date={this.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,
+      isHiddenSwitch,
+      isShowLunar,
+      onCallbackCalendar,
+      priceList,
+      labelFrom,
+      labelTo,
+      isHideLabel,
+      minDate,
+      maxDate,
+      doubleDate,
+      isHideHeaderPanel,
+      style,
+      disabledDays = [],
+    } = 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,
+            }}>
+            {!isHiddenSwitch && this.renderSwitchReturnSelection()}
+            {!isHideHeaderPanel && 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>
+      </ContainerContext.Provider>
+    );
+  }
+}
+
+export default Calendar;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calendar",
-    "version": "0.79.6",
+    "version": "0.80.2",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/styles.ts

@@ -0,0 +1,115 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, scaleSize, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  //calendar
+  viewPanel: {
+    flexDirection: 'row',
+    marginHorizontal: Spacing.M,
+    marginVertical: Spacing.S,
+    borderRadius: Radius.S,
+    padding: Spacing.XXS,
+  },
+  viewSwitch: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: Spacing.XS,
+  },
+  headerContainer: {
+    paddingHorizontal: Spacing.M,
+    marginTop: Spacing.S,
+  },
+  scrollView: {
+    backgroundColor: 'transparent',
+    alignSelf: 'center',
+    width: '100%',
+  },
+
+  //calendar pro
+  row: {flexDirection: 'row'},
+  txtMonthLunar: {
+    marginRight: Spacing.S,
+  },
+  subTextLunar: {
+    marginRight: Spacing.XS,
+  },
+  contentScroll: {
+    paddingHorizontal: Spacing.M,
+    paddingTop: Spacing.S,
+    paddingBottom: Spacing.M,
+  },
+  viewLunar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: Spacing.M,
+    borderTopWidth: 1,
+    paddingVertical: Spacing.S,
+  },
+  textDay: {
+    textAlign: 'center',
+  },
+  viewDay: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: Spacing.S,
+    paddingVertical: Spacing.S,
+    marginTop: Spacing.S,
+  },
+  container: {
+    backgroundColor: 'white',
+    borderRadius: Radius.XS,
+  },
+  blueSeperator: {
+    height: 1,
+    width: '100%',
+    backgroundColor: Colors.blue_05,
+  },
+
+  //headerControl
+  txtHeader: {
+    textAlign: 'center',
+  },
+  btnRight: {
+    width: 36,
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnLeft: {
+    width: 36,
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerControlContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: Colors.blue_10,
+    alignItems: 'center',
+    borderRadius: Radius.XS,
+    padding: Spacing.S,
+  },
+
+  //day
+  dayContainer: {
+    borderRadius: Radius.XS,
+    alignItems: 'center',
+  },
+  day: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: Radius.XS,
+  },
+  dayText: {
+    textAlign: 'center',
+  },
+  dayStartContainer: {
+    borderTopLeftRadius: Radius.XS,
+    borderBottomLeftRadius: Radius.XS,
+  },
+  dayEndContainer: {
+    borderTopRightRadius: Radius.XS,
+    borderBottomRightRadius: Radius.XS,
+  },
+});