@momo-kits/calendar 0.0.52-beta → 0.0.52-beta.1

package/package.json

@@ -1,18 +1,19 @@
 {
-  "name": "@momo-kits/calendar",
-  "version": "0.0.52-beta",
-  "private": false,
-  "main": "index.js",
-  "dependencies": {
-    "@momo-kits/date-picker": "latest"
-  },
-  "peerDependencies": {
-    "react": "16.9.0",
-    "react-native": ">=0.55",
-    "prop-types": "^15.7.2",
-    "moment": "^2.24.0",
-    "@momo-kits/core": ">=0.0.5-beta"
-  },
-  "devDependencies": {},
-  "license": "MoMo"
+    "name": "@momo-kits/calendar",
+    "version": "0.0.52-beta.1",
+    "private": false,
+    "main": "index.js",
+    "dependencies": {
+        "@momo-kits/date-picker": "latest",
+        "moment": "^2.24.0",
+        "@momo-platform/versions": "4.0.2"
+    },
+    "peerDependencies": {
+        "react": "16.9.0",
+        "react-native": ">=0.55",
+        "prop-types": "^15.7.2",
+        "@momo-kits/core": ">=0.0.5-beta"
+    },
+    "devDependencies": {},
+    "license": "MoMo"
 }

package/publish.sh

@@ -21,9 +21,9 @@ rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type
 #npm login
 #publish dist to npm
 cd dist
-npm publish --access=public
+npm publish --tag beta --access=public
 cd ..
 rm -rf dist
 
 
-# -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/calendar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/calendar"}'
+#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/calendar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/calendar"}'

package/src/Calendar.js

@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types';
-import React, { Component, } from 'react';
-import {
-    View, Switch, ScrollView, Platform, StyleSheet
-} from 'react-native';
+import React, { Component } from 'react';
+import { View, Switch, ScrollView, Platform, StyleSheet } from 'react-native';
 import moment from 'moment';
 import { Text, SwitchLanguage } from '@momo-kits/core';
 import CalendarPro from './CalendarPro';
@@ -13,15 +11,23 @@ const DOUBLE = 'doubleDate';
 class Calendar extends Component {
     constructor(props) {
         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.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.selectedDate = props.selectedDate
+            ? moment(props.selectedDate)
+            : moment();
 
         this.state = {
-            isDoubleDateMode: props.mode === DOUBLE
+            isDoubleDateMode: props.mode === DOUBLE,
         };
         this.calendarPicker = React.createRef();
         this.cellHeader1 = React.createRef();
@@ -38,19 +44,41 @@ class Calendar extends Component {
     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);
+            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);
+            this.calendarPicker.current.setDoubleDateAndTabIndex(
+                this.selectedDate,
+            );
         }
     }
 
     onChangeTab = (idTab) => {
+        this.props.onChangeTab && this.props.onChangeTab(idTab);
+
         this.tabSelected = idTab;
         if (this.cellHeader1.current && this.cellHeader2.current) {
             this.cellHeader1.current.setActiveTab(idTab === 0);
@@ -61,19 +89,38 @@ class Calendar extends Component {
 
     updateViewFlowPicker() {
         if (this.calendarPicker.current) {
-            this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
+            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.second) {
+        if (
+            this.cellHeader1.current &&
+            this.cellHeader2.current &&
+            this.calendarPicker.current
+        ) {
+            if (
+                this.doubleDate.first &&
+                this.doubleDate.second &&
+                this.selectedDate <= this.doubleDate.second
+            ) {
                 this.doubleDate.first = this.selectedDate;
                 this.tabSelected = 1;
-                this.cellHeader1.current.updateView(this.selectedDate, this.tabSelected === 0);
+                this.cellHeader1.current.updateView(
+                    this.selectedDate,
+                    this.tabSelected === 0,
+                );
                 this.cellHeader2.current.setActiveTab(this.tabSelected === 1);
-                this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
+                this.calendarPicker.current.setDoubleDateAndTabIndex(
+                    this.doubleDate.first,
+                    this.doubleDate.second,
+                    this.tabSelected,
+                );
                 if (onDateChange) {
                     // const cloned = {
                     //     first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
@@ -82,8 +129,12 @@ class Calendar extends Component {
                     // this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
                     // };
                     onDateChange({
-                        first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
-                        second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
+                        first: this.doubleDate.first
+                            ? this.doubleDate.first.toDate()
+                            : null,
+                        second: this.doubleDate.second
+                            ? this.doubleDate.second.toDate()
+                            : null,
                     });
                 }
             } else {
@@ -92,11 +143,19 @@ class Calendar extends Component {
                 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);
+                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
+                        first: this.doubleDate.first
+                            ? this.doubleDate.first.toDate()
+                            : null,
+                        second: this.doubleDate.second
+                            ? this.doubleDate.second.toDate()
+                            : null,
                     });
                     // const cloned = {
                     //     first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
@@ -107,7 +166,7 @@ class Calendar extends Component {
             }
         }
         if (onCTAStateChange) {
-            onCTAStateChange(!!(this.doubleDate.second));
+            onCTAStateChange(!!this.doubleDate.second);
         }
     }
 
@@ -118,14 +177,22 @@ class Calendar extends Component {
             this.cellHeader1.current.setActiveTab(true);
             this.doubleDate.second = this.selectedDate;
             this.tabSelected = 0;
-            this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
+            this.calendarPicker.current.setDoubleDateAndTabIndex(
+                this.doubleDate.first,
+                this.doubleDate.second,
+                this.tabSelected,
+            );
             if (onCTAStateChange) {
-                onCTAStateChange(!!(this.doubleDate.second));
+                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
+                    first: this.doubleDate.first
+                        ? this.doubleDate.first.toDate()
+                        : null,
+                    second: this.doubleDate.second
+                        ? this.doubleDate.second.toDate()
+                        : null,
                 });
                 // const cloned = {
                 //     first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
@@ -152,7 +219,10 @@ class Calendar extends Component {
             this.processDoubleDate();
         } else {
             if (this.cellHeaderSingle.current) {
-                this.cellHeaderSingle.current.updateView(this.selectedDate, true);
+                this.cellHeaderSingle.current.updateView(
+                    this.selectedDate,
+                    true,
+                );
             }
             if (onDateChange) {
                 const date = new Date(this.selectedDate.toDate());
@@ -164,7 +234,7 @@ class Calendar extends Component {
     onDateChange = (date) => {
         this.selectedDate = date;
         this.updateView();
-    }
+    };
 
     updateHeaderView = () => {
         const { onDateChange, onCTAStateChange } = this.props;
@@ -173,7 +243,11 @@ class Calendar extends Component {
             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.calendarPicker.current.setDoubleDateAndTabIndex(
+                    this.selectedDate,
+                    null,
+                    this.tabSelected,
+                );
                 this.doubleDate.first = moment(this.selectedDate);
                 this.doubleDate.second = null;
                 this.tabSelected = 0;
@@ -183,8 +257,12 @@ class Calendar extends Component {
                 }
                 if (onDateChange) {
                     onDateChange({
-                        first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
-                        second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
+                        first: this.doubleDate.first
+                            ? this.doubleDate.first.toDate()
+                            : null,
+                        second: this.doubleDate.second
+                            ? this.doubleDate.second.toDate()
+                            : null,
                     });
                     // const cloned = {
                     //     first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
@@ -199,10 +277,16 @@ class Calendar extends Component {
             }
             if (this.cellHeaderSingle.current) {
                 if (this.doubleDate.first) {
-                    this.cellHeaderSingle.current.updateView(this.doubleDate.first, true);
+                    this.cellHeaderSingle.current.updateView(
+                        this.doubleDate.first,
+                        true,
+                    );
                     this.selectedDate = this.doubleDate.first;
                 } else {
-                    this.cellHeaderSingle.current.updateView(this.selectedDate, true);
+                    this.cellHeaderSingle.current.updateView(
+                        this.selectedDate,
+                        true,
+                    );
                 }
 
                 if (onDateChange) {
@@ -216,13 +300,19 @@ class Calendar extends Component {
 
     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);
-            }
-        });
+        this.setState(
+            (preState) => ({ isDoubleDateMode: !preState.isDoubleDateMode }),
+            () => {
+                const { isDoubleDateMode } = this.state;
+                this.updateHeaderView();
+                if (
+                    onCallbackCalendar &&
+                    typeof onCallbackCalendar === 'function'
+                ) {
+                    onCallbackCalendar('switch', isDoubleDateMode);
+                }
+            },
+        );
     };
 
     renderSwitchReturnSelection = () => {
@@ -237,7 +327,11 @@ class Calendar extends Component {
                     onValueChange={this.toggleSelectionDateMode}
                     thumbColor={isDoubleDateMode ? '#78ca32' : 'white'}
                     trackColor={{ false: '#e5e7ec', true: '#e5e7ec' }}
-                    style={[Platform.OS === 'ios' && { transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }]}
+                    style={[
+                        Platform.OS === 'ios' && {
+                            transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],
+                        },
+                    ]}
                 />
             </View>
         );
@@ -246,7 +340,7 @@ class Calendar extends Component {
     renderHeaderPanel = () => {
         const { isDoubleDateMode } = this.state;
         const { headerFrom, headerTo } = this.props;
-        return (isDoubleDateMode ? (
+        return isDoubleDateMode ? (
             <View style={styles.viewPanel}>
                 <TabHeader
                     id={0}
@@ -277,26 +371,52 @@ class Calendar extends Component {
                     date={this.selectedDate}
                 />
             </View>
-        ));
+        );
     };
 
     setDateRange = (dateRange, isScrollToStartDate) => {
         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
-            } : {};
+            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,
+                  }
+                : {};
         }
-    }
+    };
 
     render() {
         const {
-            isOffLunar, isHideHoliday, isHiddenSwitch, isShowLunar, onCallbackCalendar, priceList, labelFrom, labelTo, isHideLabel, minDate, maxDate, doubleDate,
-            isHideHeaderPanel
+            isOffLunar,
+            isHideHoliday,
+            isHiddenSwitch,
+            isShowLunar,
+            onCallbackCalendar,
+            priceList,
+            labelFrom,
+            labelTo,
+            isHideLabel,
+            minDate,
+            maxDate,
+            doubleDate,
+            isHideHeaderPanel,
         } = this.props;
         const { isDoubleDateMode } = this.state;
         return (
@@ -331,7 +451,7 @@ export default Calendar;
 Calendar.propTypes = {
     doubleDate: PropTypes.shape({
         first: PropTypes.any,
-        second: PropTypes.any
+        second: PropTypes.any,
     }),
     id: PropTypes.any,
     isHiddenSwitch: PropTypes.bool,
@@ -348,13 +468,19 @@ Calendar.propTypes = {
     headerTo: PropTypes.string,
     isHideLabel: PropTypes.bool,
     isHideHoliday: PropTypes.bool,
-    minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-    maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
+    minDate: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.instanceOf(Date),
+    ]),
+    maxDate: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.instanceOf(Date),
+    ]),
 };
 
 Calendar.defaultProps = {
     mode: 'single',
-    isHiddenSwitch: false
+    isHiddenSwitch: false,
 };
 
 const styles = StyleSheet.create({
@@ -364,7 +490,7 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
         backgroundColor: 'white',
-        borderRadius: 8
+        borderRadius: 8,
     },
     viewPanel: {
         height: 50,
@@ -375,12 +501,12 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         backgroundColor: '#eeeeef',
         justifyContent: 'space-around',
-        borderRadius: 8
+        borderRadius: 8,
     },
     textSwitch: {
         // fontSize: 10,
         fontWeight: 'bold',
-        color: '#222222'
+        color: '#222222',
     },
     viewSwitch: {
         flexDirection: 'row',
@@ -389,6 +515,6 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         backgroundColor: '#f2f3f5',
         paddingVertical: 9,
-        height: 42
+        height: 42,
     },
 });

package/src/Day/index.js

@@ -1,193 +1,210 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
-import {
-    View,
-    TouchableHighlight,
-    Text
-} from 'react-native';
-import { Colors, SwitchLanguage } from '@momo-kits/core';
+import {View, TouchableHighlight, Text} from 'react-native';
+import {Colors, SwitchLanguage} from '@momo-kits/core';
 import style from './style';
 
 class Day extends Component {
-    constructor(props) {
-        super(props);
-        this.statusCheck();
-    }
+  constructor(props) {
+    super(props);
+    this.statusCheck();
+  }
 
-    chooseDay = () => {
-        const { onChoose, date } = this.props;
-        onChoose && onChoose(date);
-    };
+  chooseDay = () => {
+    const {onChoose, date} = this.props;
+    onChoose && onChoose(date);
+  };
 
-    findHoliday = (date, holidays) => {
-        if (date && holidays && holidays.length > 0) {
-            const day = date.date();
-            const month = date.month() + 1;
-            return holidays.find((item) => item.day === day && item.month === month);
-        }
-        return null;
-    };
+  findHoliday = (date, holidays) => {
+    if (date && holidays && holidays.length > 0) {
+      const day = date.date();
+      const month = date.month() + 1;
+      return holidays.find(item => item.day === day && item.month === month);
+    }
+    return null;
+  };
 
-    checkHoliday = (date, holidays) => {
-        const holiday = this.findHoliday(date, holidays);
-        return {
-            solarHoliday: !!(holiday && !holiday.lunar),
-            lunarHoliday: !!(holiday && holiday.lunar)
-        };
+  checkHoliday = (date, holidays) => {
+    const holiday = this.findHoliday(date, holidays);
+    return {
+      solarHoliday: !!(holiday && !holiday.lunar),
+      lunarHoliday: !!(holiday && holiday.lunar),
     };
+  };
 
-    statusCheck = (props) => {
-        const {
-            startDate,
-            endDate,
-            date = null,
-            minDate,
-            maxDate,
-            empty,
-            index,
-            isShowLunar,
-            tabSelected,
-            isDoubleDateMode,
-            lunarDate,
-            isSolarHoliday,
-            isLunarHoliday,
-            price
-        } = props || this.props;
-        this.isValid = date && (date >= minDate || date.isSame(minDate, 'day')) && (date <= maxDate || date.isSame(maxDate, 'day'));
-        this.isMid = isDoubleDateMode && date > startDate && date < endDate
-            || (!date && empty >= startDate && empty <= endDate);
-        this.isStart = date && date.isSame(startDate, 'd');
-        this.isStartPart = this.isStart && endDate;
-        this.isEnd = isDoubleDateMode && date && date.isSame(endDate, 'day');
-        this.isFocus = this.isMid || this.isStart || this.isEnd;
-        this.isWeekEnd = index === 6 || index === 5;
-        this.showLunar = isShowLunar;
-        this.lunarDate = lunarDate;
-        this.isDoubleDateMode = isDoubleDateMode;
-        this.isLunarHoliday = isLunarHoliday;
-        this.isLunarDayStart = this.lunarDate && this.lunarDate.lunarDay === 1;
-        this.isSolarHoliday = isSolarHoliday;
-        this.isInScope = isDoubleDateMode ? (tabSelected === 0 || (tabSelected === 1 && startDate && date && date.isSameOrAfter(startDate, 'day'))) : true;
-        return this.isFocus || this.diffPrice;
-    };
+  statusCheck = props => {
+    const {
+      startDate,
+      endDate,
+      date = null,
+      minDate,
+      maxDate,
+      empty,
+      index,
+      isShowLunar,
+      tabSelected,
+      isDoubleDateMode,
+      lunarDate,
+      isSolarHoliday,
+      isLunarHoliday,
+      price,
+    } = props || this.props;
+    this.isValid =
+      date &&
+      (date >= minDate || date.isSame(minDate, 'day')) &&
+      (date <= maxDate || date.isSame(maxDate, 'day'));
+    this.isMid =
+      (isDoubleDateMode && date > startDate && date < endDate) ||
+      (!date && empty >= startDate && empty <= endDate);
+    this.isStart = date && date.isSame(startDate, 'd');
+    this.isStartPart = this.isStart && endDate;
+    this.isEnd = isDoubleDateMode && date && date.isSame(endDate, 'day');
+    this.isFocus = this.isMid || this.isStart || this.isEnd;
+    this.isWeekEnd = index === 6 || index === 5;
+    this.showLunar = isShowLunar;
+    this.lunarDate = lunarDate;
+    this.isDoubleDateMode = isDoubleDateMode;
+    this.isLunarHoliday = isLunarHoliday;
+    this.isLunarDayStart = this.lunarDate && this.lunarDate.lunarDay === 1;
+    this.isSolarHoliday = isSolarHoliday;
+    this.isInScope = isDoubleDateMode
+      ? tabSelected === 0 ||
+        (tabSelected === 1 &&
+          startDate &&
+          date &&
+          date.isSameOrAfter(startDate, 'day'))
+      : true;
+    return this.isFocus || this.diffPrice;
+  };
 
-    shouldComponentUpdate(nextProps) {
-        const {
-            isDoubleDateMode, isShowLunar, tabSelected, isSolarHoliday,
-            isLunarHoliday,
-            price,
-            isBestPrice,
-            startDate,
-            endDate
-        } = this.props;
-        const prevStatus = this.isFocus;
-        const selectionModeChange = isDoubleDateMode !== nextProps.isDoubleDateMode;
-        const lunarChange = isShowLunar !== nextProps.isShowLunar;
-        const nextStatus = this.statusCheck(nextProps);
-        const tabChange = tabSelected !== nextProps.tabSelected;
-        const solarHoliday = isSolarHoliday !== nextProps.isSolarHoliday;
-        const lunarHoliday = isLunarHoliday !== nextProps.isLunarHoliday;
-        const diffPrice = price !== nextProps.price && isBestPrice !== nextProps.isBestPrice;
-        const startDateChange = startDate && !startDate?.isSame?.(nextProps.startDate, 'day');
-        const endDateChange = endDate && !endDate?.isSame?.(nextProps.endDate, 'day');
-        return !!(prevStatus !== nextStatus || selectionModeChange || lunarChange || tabChange || solarHoliday || lunarHoliday || diffPrice || startDateChange || endDateChange);
-    }
+  shouldComponentUpdate(nextProps) {
+    const {
+      isDoubleDateMode,
+      isShowLunar,
+      tabSelected,
+      isSolarHoliday,
+      isLunarHoliday,
+      price,
+      isBestPrice,
+      startDate,
+      endDate,
+    } = this.props;
+    const prevStatus = this.isFocus;
+    const selectionModeChange = isDoubleDateMode !== nextProps.isDoubleDateMode;
+    const lunarChange = isShowLunar !== nextProps.isShowLunar;
+    const nextStatus = this.statusCheck(nextProps);
+    const tabChange = tabSelected !== nextProps.tabSelected;
+    const solarHoliday = isSolarHoliday !== nextProps.isSolarHoliday;
+    const lunarHoliday = isLunarHoliday !== nextProps.isLunarHoliday;
+    const diffPrice =
+      price !== nextProps.price && isBestPrice !== nextProps.isBestPrice;
+    const startDateChange =
+      startDate && !startDate?.isSame?.(nextProps.startDate, 'day');
+    const endDateChange =
+      endDate && !endDate?.isSame?.(nextProps.endDate, 'day');
+    return !!(
+      prevStatus !== nextStatus ||
+      selectionModeChange ||
+      lunarChange ||
+      tabChange ||
+      solarHoliday ||
+      lunarHoliday ||
+      diffPrice ||
+      startDateChange ||
+      endDateChange
+    );
+  }
 
-    render() {
-        const {
-            date, empty, isDoubleDateMode, price, isBestPrice, isShowPrice, labelFrom, labelTo, isHideLabel
-        } = this.props;
-        const text = date ? date.date() : '';
-        return (
-            <View style={style.dayContainer}>
-                <View style={[
-                    this.isMid && !empty && style.mid,
-                    this.isStartPart && style.dayStartContainer,
-                    this.isEnd && style.dayEndContainer
-
-                ]}
-                >
-                    {this.isValid && this.isInScope
-                        ? (
-                            <TouchableHighlight
-                                style={[
-                                    style.day,
-                                    (this.isStart || this.isEnd) && style.focused
-                                ]}
-                                underlayColor="rgba(255, 255, 255, 0.35)"
-                                onPress={this.chooseDay}
-                            >
-                                <>
-                                    <Text style={[
-                                        style.dayText,
-                                        this.isWeekEnd && style.weekendDay,
-                                        this.isSolarHoliday && style.weekendDay,
-                                        (this.isStart || this.isEnd) && style.focusedText,
-                                    ]}
-                                    >
-                                        {text}
-                                    </Text>
-                                    {
-                                        this.lunarDate && this.showLunar && (
-                                            <Text style={[
-                                                style.lunarDayText,
-                                                (this.isLunarHoliday || this.isLunarDayStart) && style.weekendDay,
-                                                (this.isStart || this.isEnd) && style.focusedText,
-                                            ]}
-                                            >
-                                                {this.lunarDate.lunarDay === 1 ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}` : this.lunarDate.lunarDay}
-                                            </Text>
-                                        )
-                                    }
-                                </>
-                            </TouchableHighlight>
-                        )
-                        : (
-                            <View style={[style.day]}>
-                                <Text style={[
-                                    style.dayText,
-                                    style.dayTextDisabled,
-                                ]}
-                                >
-                                    {text}
-                                </Text>
-                                {
-                                    this.lunarDate && this.showLunar && text ? (
-                                        <Text style={[
-                                            style.lunarDayText,
-                                            style.dayTextDisabled,
-                                        ]}
-                                        >
-                                            {this.lunarDate.lunarDay === 1 ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}` : this.lunarDate.lunarDay}
-                                        </Text>
-                                    ) : <View />
-                                }
-                            </View>
-                        )}
-                </View>
-
-                {(isDoubleDateMode && this.isStart && !isHideLabel) && (
-                    <View style={style.txtGo}>
-                        <Text style={{ fontSize: 8, color: 'white' }}>
-                            {labelFrom || SwitchLanguage.departing}
-                        </Text>
-                    </View>
-                )}
-                {(isDoubleDateMode && this.isEnd && !isHideLabel) && (
-                    <View style={style.txtBack}>
-                        <Text style={{ fontSize: 8, color: 'white' }}>
-                            {labelTo || SwitchLanguage.returning}
-                        </Text>
-                    </View>
+  render() {
+    const {
+      date,
+      empty,
+      isDoubleDateMode,
+      price,
+      isBestPrice,
+      isShowPrice,
+      labelFrom,
+      labelTo,
+      isHideLabel,
+    } = this.props;
+    const text = date ? date.date() : '';
+    return (
+      <View style={style.dayContainer}>
+        <View
+          style={[
+            this.isMid && !empty && style.mid,
+            this.isStartPart && style.dayStartContainer,
+            this.isEnd && style.dayEndContainer,
+          ]}>
+          {this.isValid && this.isInScope ? (
+            <TouchableHighlight
+              style={[style.day, (this.isStart || this.isEnd) && style.focused]}
+              underlayColor="rgba(255, 255, 255, 0.35)"
+              onPress={this.chooseDay}>
+              <>
+                <Text
+                  style={[
+                    style.dayText,
+                    this.isWeekEnd && style.weekendDay,
+                    this.isSolarHoliday && style.weekendDay,
+                    (this.isStart || this.isEnd) && style.focusedText,
+                  ]}>
+                  {text}
+                </Text>
+                {this.lunarDate && this.showLunar && (
+                  <Text
+                    style={[
+                      style.lunarDayText,
+                      (this.isLunarHoliday || this.isLunarDayStart) &&
+                        style.weekendDay,
+                      (this.isStart || this.isEnd) && style.focusedText,
+                    ]}>
+                    {this.lunarDate.lunarDay === 1
+                      ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
+                      : this.lunarDate.lunarDay}
+                  </Text>
                 )}
-                {this.isValid
-                && this.isInScope
-                && !!(price)
-                && <Text style={[style.price, isBestPrice && { color: Colors.pink_05_b }]}>{price}</Text>}
+              </>
+            </TouchableHighlight>
+          ) : (
+            <View style={[style.day]}>
+              <Text style={[style.dayText, style.dayTextDisabled]}>{text}</Text>
+              {this.lunarDate && this.showLunar && text ? (
+                <Text style={[style.lunarDayText, style.dayTextDisabled]}>
+                  {this.lunarDate.lunarDay === 1
+                    ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
+                    : this.lunarDate.lunarDay}
+                </Text>
+              ) : (
+                <View />
+              )}
             </View>
-        );
-    }
+          )}
+        </View>
+
+        {isDoubleDateMode && this.isStart && !isHideLabel && (
+          <View style={style.txtGo}>
+            <Text style={{fontSize: 8, color: 'white'}}>
+              {labelFrom || SwitchLanguage.departing}
+            </Text>
+          </View>
+        )}
+        {isDoubleDateMode && this.isEnd && !isHideLabel && (
+          <View style={style.txtBack}>
+            <Text style={{fontSize: 8, color: 'white'}}>
+              {labelTo || SwitchLanguage.returning}
+            </Text>
+          </View>
+        )}
+        {this.isValid && this.isInScope && !!price && (
+          <Text style={[style.price, isBestPrice && {color: Colors.pink_05_b}]}>
+            {price}
+          </Text>
+        )}
+      </View>
+    );
+  }
 }
 
 export default Day;

package/src/MonthList.js

@@ -8,10 +8,12 @@ import {
 import moment from 'moment';
 import Month from './Month';
 import style from './Day/style';
-import { convertSolar2Lunar } from './LunarService';
+import LunarDateConverter from './LunarDateConverter';
 
 const ITEM_WIDTH = Dimensions.get('window').width - 24;
 const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
+
+const converter = new LunarDateConverter();
 export default class MonthList extends Component {
     constructor(props) {
         super(props);
@@ -76,12 +78,11 @@ export default class MonthList extends Component {
     };
 
     convertLunarToSolar(date) {
-        return date && convertSolar2Lunar ? convertSolar2Lunar(
-            date.date(),
-            date.month() + 1,
-            date.year(),
-            7
-        ) : {};
+        return date ? converter.SolarToLunar({
+            solarDay: date.date(),
+            solarMonth: date.month() + 1,
+            solarYear: date.year()
+        }) : {};
     }
 
     findHoliday = (date) => {