@momo-kits/calendar 0.0.32-beta → 0.0.32

package/index.js

@@ -1 +1,4 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _Calendar=_interopRequireDefault(require("./src/Calendar"));var _default=_Calendar.default;exports.default=_default;
+import Calendar from './src/Calendar';
+import CalendarPicker from './src/calendarPicker/index';
+
+export { Calendar, CalendarPicker };

package/package.json

@@ -1,23 +1,18 @@
 {
   "name": "@momo-kits/calendar",
-  "version": "0.0.32-beta",
+  "version": "0.0.32",
   "private": false,
   "main": "index.js",
-  "dependencies": {},
+  "dependencies": {
+    "@momo-kits/date-picker": "latest",
+    "moment": "^2.24.0"
+  },
   "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": {
-    "metro-react-native-babel-preset": "^0.64.0",
-    "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5"
+    "@momo-kits/core": ">=0.0.5-beta"
   },
-  "license": "MOMO",
-  "jest": {
-    "preset": "react-native"
-  }
+  "devDependencies": {},
+  "license": "MoMo"
 }

package/publish.sh

@@ -12,7 +12,7 @@ echo VERSION: $VERSION
 rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
 
 # #babel component to dist
-babel ./dist -d dist --copy-files
+#babel ./dist -d dist --copy-files
 
 #copy option
 #cp -r ./src/ dist
@@ -26,4 +26,4 @@ cd ..
 rm -rf dist
 
 
-echo  '{"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 +1,394 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _moment=_interopRequireDefault(require("moment"));var _core=require("@momo-kits/core");var _CalendarPro=_interopRequireDefault(require("./CalendarPro"));var _TabHeader=_interopRequireDefault(require("./TabHeader"));var _jsxFileName="/Users/trinh.ho2/momo-folk/kits/src/libs/calendar/dist/src/Calendar.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var DOUBLE='doubleDate';var Calendar=function(_Component){(0,_inherits2.default)(Calendar,_Component);var _super=_createSuper(Calendar);function Calendar(props){var _this;(0,_classCallCheck2.default)(this,Calendar);_this=_super.call(this,props);_this.onChangeTab=function(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();};_this.onDateChange=function(date){_this.selectedDate=date;_this.updateView();};_this.updateHeaderView=function(){var _this$props=_this.props,onDateChange=_this$props.onDateChange,onCTAStateChange=_this$props.onCTAStateChange;var isDoubleDateMode=_this.state.isDoubleDateMode;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=(0,_moment.default)(_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());}}}};_this.toggleSelectionDateMode=function(){var onCallbackCalendar=_this.props.onCallbackCalendar;_this.setState(function(preState){return{isDoubleDateMode:!preState.isDoubleDateMode};},function(){var isDoubleDateMode=_this.state.isDoubleDateMode;_this.updateHeaderView();if(onCallbackCalendar&&typeof onCallbackCalendar==='function'){onCallbackCalendar('switch',isDoubleDateMode);}});};_this.renderSwitchReturnSelection=function(){var isDoubleDateMode=_this.state.isDoubleDateMode;return _react.default.createElement(_reactNative.View,{style:styles.viewSwitch,__source:{fileName:_jsxFileName,lineNumber:231,columnNumber:13}},_react.default.createElement(_core.Text.Caption,{style:styles.textSwitch,__source:{fileName:_jsxFileName,lineNumber:232,columnNumber:17}},_core.SwitchLanguage.chooseRoundtrip),_react.default.createElement(_reactNative.Switch,{value:isDoubleDateMode,onValueChange:_this.toggleSelectionDateMode,thumbColor:isDoubleDateMode?'#78ca32':'white',trackColor:{false:'#e5e7ec',true:'#e5e7ec'},style:[_reactNative.Platform.OS==='ios'&&{transform:[{scaleX:0.8},{scaleY:0.8}]}],__source:{fileName:_jsxFileName,lineNumber:235,columnNumber:17}}));};_this.renderHeaderPanel=function(){var isDoubleDateMode=_this.state.isDoubleDateMode;var _this$props2=_this.props,headerFrom=_this$props2.headerFrom,headerTo=_this$props2.headerTo;return isDoubleDateMode?_react.default.createElement(_reactNative.View,{style:styles.viewPanel,__source:{fileName:_jsxFileName,lineNumber:250,columnNumber:13}},_react.default.createElement(_TabHeader.default,{id:0,ref:_this.cellHeader1,onChangeTab:_this.onChangeTab,label:headerFrom||_core.SwitchLanguage.depart,activeTab:true,date:_this.doubleDate.first,__source:{fileName:_jsxFileName,lineNumber:251,columnNumber:17}}),_react.default.createElement(_TabHeader.default,{id:1,ref:_this.cellHeader2,onChangeTab:_this.onChangeTab,label:headerTo||_core.SwitchLanguage.return,activeTab:false,date:"",__source:{fileName:_jsxFileName,lineNumber:260,columnNumber:17}})):_react.default.createElement(_reactNative.View,{style:styles.viewPanel_2,__source:{fileName:_jsxFileName,lineNumber:270,columnNumber:13}},_react.default.createElement(_TabHeader.default,{id:1,disabled:true,ref:_this.cellHeaderSingle,label:headerFrom||_core.SwitchLanguage.depart,activeTab:true,date:_this.selectedDate,__source:{fileName:_jsxFileName,lineNumber:271,columnNumber:17}}));};_this.setDateRange=function(dateRange,isScrollToStartDate){var mode=_this.props.mode;if(mode==='doubleDate'){var _this$calendarPicker,_this$calendarPicker$;_this.cellHeader1.current.updateView(dateRange.startDate,_this.tabSelected===0);_this.cellHeader2.current.updateView(dateRange.endDate,_this.tabSelected===1);(_this$calendarPicker=_this.calendarPicker)==null?void 0:(_this$calendarPicker$=_this$calendarPicker.current)==null?void 0:_this$calendarPicker$.setDateRange(dateRange,isScrollToStartDate);}};_this.doubleDate=props.doubleDate?{first:props.doubleDate.first?(0,_moment.default)(props.doubleDate.first):null,second:props.doubleDate.second?(0,_moment.default)(props.doubleDate.second):null}:{};_this.tabSelected=0;_this.selectedDate=props.selectedDate?(0,_moment.default)(props.selectedDate):(0,_moment.default)();_this.state={isDoubleDateMode:props.mode===DOUBLE};_this.calendarPicker=_react.default.createRef();_this.cellHeader1=_react.default.createRef();_this.cellHeader2=_react.default.createRef();_this.cellHeaderSingle=_react.default.createRef();return _this;}(0,_createClass2.default)(Calendar,[{key:"componentDidMount",value:function componentDidMount(){var id=this.props.id;this.tabSelected=id||0;this.viewInit();}},{key:"viewInit",value:function viewInit(){var mode=this.props.mode;if(mode===DOUBLE){if(this.cellHeader1.current&&this.cellHeader2.current&&this.calendarPicker.current){var start=this.doubleDate.first?this.doubleDate.first:null;var 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);}}},{key:"updateViewFlowPicker",value:function updateViewFlowPicker(){if(this.calendarPicker.current){this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first,this.doubleDate.second,this.tabSelected);}}},{key:"processDateFirst",value:function processDateFirst(){var _this$props3=this.props,onDateChange=_this$props3.onDateChange,onCTAStateChange=_this$props3.onCTAStateChange;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.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);}}},{key:"processDateSecond",value:function processDateSecond(){var _this$props4=this.props,onDateChange=_this$props4.onDateChange,onCTAStateChange=_this$props4.onCTAStateChange;if(this.cellHeader2.current){this.cellHeader2.current.updateView(this.selectedDate,false);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);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});}}}},{key:"processDoubleDate",value:function processDoubleDate(){if(this.tabSelected===0){this.processDateFirst();}else{this.processDateSecond();}}},{key:"updateView",value:function updateView(){var onDateChange=this.props.onDateChange;var isDoubleDateMode=this.state.isDoubleDateMode;if(isDoubleDateMode){this.processDoubleDate();}else{if(this.cellHeaderSingle.current){this.cellHeaderSingle.current.updateView(this.selectedDate,true);}if(onDateChange){var date=new Date(this.selectedDate.toDate());onDateChange(date);}}}},{key:"render",value:function render(){var _this$props5=this.props,isOffLunar=_this$props5.isOffLunar,isHideHoliday=_this$props5.isHideHoliday,isHiddenSwitch=_this$props5.isHiddenSwitch,isShowLunar=_this$props5.isShowLunar,onCallbackCalendar=_this$props5.onCallbackCalendar,priceList=_this$props5.priceList,labelFrom=_this$props5.labelFrom,labelTo=_this$props5.labelTo,isHideLabel=_this$props5.isHideLabel,minDate=_this$props5.minDate,maxDate=_this$props5.maxDate,doubleDate=_this$props5.doubleDate;var isDoubleDateMode=this.state.isDoubleDateMode;return _react.default.createElement(_reactNative.ScrollView,{style:{flex:1,backgroundColor:'white'},__source:{fileName:_jsxFileName,lineNumber:298,columnNumber:13}},!isHiddenSwitch&&this.renderSwitchReturnSelection(),this.renderHeaderPanel(),_react.default.createElement(_CalendarPro.default,{ref:this.calendarPicker,startDate:doubleDate==null?void 0:doubleDate.first,endDate:doubleDate==null?void 0:doubleDate.second,onDateChange:this.onDateChange,isDoubleDateMode:isDoubleDateMode,selectedDate:this.selectedDate,isShowLunar:isShowLunar,onCallbackCalendar:onCallbackCalendar,priceList:priceList,labelFrom:labelFrom,labelTo:labelTo,isHideLabel:isHideLabel,minDate:minDate,maxDate:maxDate,isHideHoliday:isHideHoliday,isOffLunar:isOffLunar,__source:{fileName:_jsxFileName,lineNumber:301,columnNumber:17}}));}}]);return Calendar;}(_react.Component);var _default=Calendar;exports.default=_default;Calendar.propTypes={doubleDate:_propTypes.default.shape({first:_propTypes.default.any,second:_propTypes.default.any}),id:_propTypes.default.any,isHiddenSwitch:_propTypes.default.bool,isShowLunar:_propTypes.default.bool,mode:_propTypes.default.string,onCTAStateChange:_propTypes.default.func,onCallbackCalendar:_propTypes.default.func,onDateChange:_propTypes.default.func,selectedDate:_propTypes.default.any,priceList:_propTypes.default.any,labelFrom:_propTypes.default.string,labelTo:_propTypes.default.string,headerFrom:_propTypes.default.string,headerTo:_propTypes.default.string,isHideLabel:_propTypes.default.bool,isHideHoliday:_propTypes.default.bool,minDate:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.instanceOf(Date)]),maxDate:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.instanceOf(Date)])};Calendar.defaultProps={mode:'single',isHiddenSwitch:false};var styles=_reactNative.StyleSheet.create({viewPanel_2:{height:46,paddingVertical:10,justifyContent:'center',alignItems:'center',backgroundColor:'white',borderRadius:8},viewPanel:{height:50,marginHorizontal:12,marginTop:6,marginBottom:25,padding:2,flexDirection:'row',backgroundColor:'#eeeeef',justifyContent:'space-around',borderRadius:8},textSwitch:{fontWeight:'bold',color:'#222222'},viewSwitch:{flexDirection:'row',justifyContent:'space-between',paddingHorizontal:12,alignItems:'center',backgroundColor:'#f2f3f5',paddingVertical:9,height:42}});
+import PropTypes from 'prop-types';
+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';
+import TabHeader from './TabHeader';
+
+const DOUBLE = 'doubleDate';
+// const SIGNLE = 'signleDate';
+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.tabSelected = 0;
+        this.selectedDate = props.selectedDate ? moment(props.selectedDate) : moment();
+
+        this.state = {
+            isDoubleDateMode: props.mode === DOUBLE
+        };
+        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) => {
+        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.second) {
+                this.doubleDate.first = this.selectedDate;
+                this.tabSelected = 1;
+                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);
+                if (onDateChange) {
+                    // const cloned = {
+                    //     first: this.doubleDate.first ? this.doubleDate.first.toDate() : null,
+                    // this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
+                    //     second: this.doubleDate.second ? this.doubleDate.second.toDate() : null
+                    // 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
+                    });
+                }
+            } 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
+                    });
+                    // const cloned = {
+                    //     first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
+                    //     second: this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
+                    // };
+                    // onDateChange(cloned);
+                }
+            }
+        }
+        if (onCTAStateChange) {
+            onCTAStateChange(!!(this.doubleDate.second));
+        }
+    }
+
+    processDateSecond() {
+        const { onDateChange, onCTAStateChange } = this.props;
+        if (this.cellHeader2.current) {
+            this.cellHeader2.current.updateView(this.selectedDate, false);
+            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);
+            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
+                });
+                // const cloned = {
+                //     first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
+                //     second: this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
+                // };
+                // onDateChange(cloned);
+            }
+        }
+    }
+
+    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) => {
+        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
+                    });
+                    // const cloned = {
+                    //     first: this.doubleDate.first ? new Date(this.doubleDate.first.year(), this.doubleDate.first.month(), this.doubleDate.first.date()) : null,
+                    //     second: this.doubleDate.second ? new Date(this.doubleDate.second.year(), this.doubleDate.second.month(), this.doubleDate.second.date()) : null
+                    // };
+                    // onDateChange(cloned);
+                }
+            }
+        } 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) {
+                    // const clone = moment(this.selectedDate);
+                    // const cloned = new Date(clone.year(), clone.month(), clone.date());
+                    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;
+        return (
+            <View style={styles.viewSwitch}>
+                <Text.Caption style={styles.textSwitch}>
+                    {SwitchLanguage.chooseRoundtrip}
+                </Text.Caption>
+                <Switch
+                    value={isDoubleDateMode}
+                    onValueChange={this.toggleSelectionDateMode}
+                    thumbColor={isDoubleDateMode ? '#78ca32' : 'white'}
+                    trackColor={{ false: '#e5e7ec', true: '#e5e7ec' }}
+                    style={[Platform.OS === 'ios' && { transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }]}
+                />
+            </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 || SwitchLanguage.depart}
+                    activeTab
+                    date={this.doubleDate.first}
+                />
+
+                <TabHeader
+                    id={1}
+                    ref={this.cellHeader2}
+                    onChangeTab={this.onChangeTab}
+                    label={headerTo || SwitchLanguage.return}
+                    activeTab={false}
+                    date=""
+                />
+            </View>
+        ) : (
+            <View style={styles.viewPanel_2}>
+                <TabHeader
+                    id={1}
+                    disabled
+                    ref={this.cellHeaderSingle}
+                    label={headerFrom || SwitchLanguage.depart}
+                    activeTab
+                    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
+            } : {};
+        }
+    }
+
+    render() {
+        const {
+            isOffLunar, isHideHoliday, isHiddenSwitch, isShowLunar, onCallbackCalendar, priceList, labelFrom, labelTo, isHideLabel, minDate, maxDate, doubleDate,
+            isHideHeaderPanel
+        } = this.props;
+        const { isDoubleDateMode } = this.state;
+        return (
+            <ScrollView style={{ flex: 1, backgroundColor: 'white' }}>
+                {!isHiddenSwitch && this.renderSwitchReturnSelection()}
+                {!isHideHeaderPanel && this.renderHeaderPanel()}
+                <CalendarPro
+                    ref={this.calendarPicker}
+                    startDate={doubleDate?.first}
+                    endDate={doubleDate?.second}
+                    onDateChange={this.onDateChange}
+                    isDoubleDateMode={isDoubleDateMode}
+                    selectedDate={this.selectedDate}
+                    isShowLunar={isShowLunar}
+                    onCallbackCalendar={onCallbackCalendar}
+                    priceList={priceList}
+                    labelFrom={labelFrom}
+                    labelTo={labelTo}
+                    isHideLabel={isHideLabel}
+                    minDate={minDate}
+                    maxDate={maxDate}
+                    isHideHoliday={isHideHoliday}
+                    isOffLunar={isOffLunar}
+                />
+            </ScrollView>
+        );
+    }
+}
+
+export default Calendar;
+
+Calendar.propTypes = {
+    doubleDate: PropTypes.shape({
+        first: PropTypes.any,
+        second: PropTypes.any
+    }),
+    id: PropTypes.any,
+    isHiddenSwitch: PropTypes.bool,
+    isShowLunar: PropTypes.bool,
+    mode: PropTypes.string,
+    onCTAStateChange: PropTypes.func,
+    onCallbackCalendar: PropTypes.func,
+    onDateChange: PropTypes.func,
+    selectedDate: PropTypes.any,
+    priceList: PropTypes.any,
+    labelFrom: PropTypes.string,
+    labelTo: PropTypes.string,
+    headerFrom: PropTypes.string,
+    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)])
+};
+
+Calendar.defaultProps = {
+    mode: 'single',
+    isHiddenSwitch: false
+};
+
+const styles = StyleSheet.create({
+    viewPanel_2: {
+        height: 46,
+        paddingVertical: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'white',
+        borderRadius: 8
+    },
+    viewPanel: {
+        height: 50,
+        marginHorizontal: 12,
+        marginTop: 6,
+        marginBottom: 25,
+        padding: 2,
+        flexDirection: 'row',
+        backgroundColor: '#eeeeef',
+        justifyContent: 'space-around',
+        borderRadius: 8
+    },
+    textSwitch: {
+        // fontSize: 10,
+        fontWeight: 'bold',
+        color: '#222222'
+    },
+    viewSwitch: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        alignItems: 'center',
+        backgroundColor: '#f2f3f5',
+        paddingVertical: 9,
+        height: 42
+    },
+});