@momo-kits/calendar 0.0.34-beta → 0.0.34

package/src/CalendarPro.js

@@ -1 +1,363 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));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 _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _moment=_interopRequireDefault(require("moment"));var _core=require("@momo-kits/core");var _MonthList=_interopRequireDefault(require("./MonthList"));var _HeaderControl=_interopRequireDefault(require("./HeaderControl"));var _LunarDateConverter=_interopRequireDefault(require("./LunarDateConverter"));var _Util=_interopRequireDefault(require("./Util"));var _jsxFileName="/Users/trinh.ho2/momo-folk/kits/src/libs/calendar/dist/src/CalendarPro.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 ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});}keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}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 widthScreen=_reactNative.Dimensions.get('window').width;var CalendarPro=function(_Component){(0,_inherits2.default)(CalendarPro,_Component);var _super=_createSuper(CalendarPro);function CalendarPro(props){var _this;(0,_classCallCheck2.default)(this,CalendarPro);_this=_super.call(this,props);_this.setDateRange=function(dateRange,isScrollToStartDate){if(dateRange&&dateRange.startDate&&dateRange.endDate){_this.setState({startDate:dateRange.startDate,endDate:dateRange.endDate},function(){var dateScroll=isScrollToStartDate?dateRange.startDate:dateRange.endDate;_this.refs.MonthList.scrollToMonth(dateScroll);});}};_this.loadLabel=function(data,type){var _this$props=_this.props,i18n=_this$props.i18n,customI18n=_this$props.customI18n;if(~['w','weekday','text'].indexOf(type)){return(customI18n[type]||{})[data]||_Util.default.I18N_MAP[i18n][type][data];}if(type==='date'){return data.format(customI18n[type]||_Util.default.I18N_MAP[i18n][type]);}};_this.getDateRange=function(){var _this$props2=_this.props,maxDate=_this$props2.maxDate,minDate=_this$props2.minDate,format=_this$props2.format;var max=(0,_moment.default)(maxDate,format);var min=(0,_moment.default)(minDate,format);var maxValid=max.isValid();var minValid=min.isValid();if(!maxValid&&!minValid){max=(0,_moment.default)().add(12,'months');min=(0,_moment.default)();}if(!maxValid&&minValid){max=min.add(12,'months');}if(maxValid&&!minValid){min=max.subtract(12,'months');}if(min.isSameOrAfter(max))return{};_this.minDate=min;_this.maxDate=max;};_this.onChoose=function(day){var _this$state=_this.state,startDate=_this$state.startDate,tabSelected=_this$state.tabSelected;var _this$props3=_this.props,isDoubleDateMode=_this$props3.isDoubleDateMode,onDateChange=_this$props3.onDateChange;if(isDoubleDateMode){if(tabSelected===1){if(startDate&&day>=startDate){_this.ownSetState({endDate:day});}else if(startDate&&day<startDate){_this.ownSetState({startDate:day,endDate:null});}}else{_this.ownSetState({startDate:day});}}else{_this.ownSetState({startDate:day,endDate:null});}if(onDateChange){onDateChange(day);}};_this.executeProcessAfterScrollCalendar=function(date,key){var holidays=Object.values(_Util.default.getHolidaysInMonth((0,_moment.default)(date)));var showLunar=_this.state.showLunar;if(_this.refs&&_this.refs.HeaderControl){_this.refs.HeaderControl.onUpdateInfo({date:date});_this.header=date.clone().startOf('month');}var data=[];if(!showLunar){data=holidays.filter(function(item){return!item.lunar||item.mixedLabel;});}else{data=holidays;}_this.ownSetState({holidays:holidays,temp:data,headerKey:key});};_this.onScrollCalendar=function(data){var headerKey=_this.state.headerKey;if(data){if(data.key!==headerKey){_this.executeProcessAfterScrollCalendar(data.date,data.key);}}};_this.setDoubleDateAndTabIndex=function(firstDate,secondDate,tabSelected){_this.ownSetState({startDate:firstDate?(0,_moment.default)(firstDate):null,endDate:secondDate?(0,_moment.default)(secondDate):null,tabSelected:tabSelected});};_this.toggleLunarDate=function(){var _this$state2=_this.state,showLunar=_this$state2.showLunar,holidays=_this$state2.holidays;var onCallbackCalendar=_this.props.onCallbackCalendar;var data=[];var nextStateShowLunar=!showLunar;if(!nextStateShowLunar){data=holidays.filter(function(item){return!item.lunar||item.mixedLabel;});}else{data=holidays;}if(onCallbackCalendar){onCallbackCalendar('lunar',nextStateShowLunar);}_this.ownSetState({showLunar:!showLunar,temp:data,ownUpdate:true});};_this.onPressBackArrow=function(){var previousDate=(0,_moment.default)(_this.header).startOf('month').subtract(1,'months');if(_this.refs&&_this.refs.HeaderControl&&previousDate.isSameOrAfter(_this.minDate,'month')){_this.header=previousDate;_this.refs.HeaderControl.onUpdateInfo({date:previousDate});_this.refs.MonthList.scrollToMonth(previousDate);}};_this.onPressNextArrow=function(){var nextDate=(0,_moment.default)(_this.header).startOf('month').add(1,'months');if(_this.refs&&_this.refs.HeaderControl&&nextDate.isSameOrBefore(_this.maxDate,'month')){_this.header=nextDate;_this.refs.HeaderControl.onUpdateInfo({date:nextDate});_this.refs.MonthList.scrollToMonth(nextDate);}};_this.today=(0,_moment.default)();_this.year=_this.today.year();_this.getDateRange();_this.header=_this.today.clone();_this.selectedDate=props.selectedDate;_this.state={startDate:props.startDate,endDate:props.endDate,showLunar:props.isShowLunar,tabSelected:0,holidays:[],ownUpdate:false};_this.converter=new _LunarDateConverter.default();return _this;}(0,_createClass2.default)(CalendarPro,[{key:"ownSetState",value:function ownSetState(state){this.setState(_objectSpread(_objectSpread({},state),{},{ownUpdate:true}));}},{key:"render",value:function render(){var _this$state3=this.state,startDate=_this$state3.startDate,endDate=_this$state3.endDate,showLunar=_this$state3.showLunar,tabSelected=_this$state3.tabSelected,holidays=_this$state3.holidays,temp=_this$state3.temp;var _this$props4=this.props,i18n=_this$props4.i18n,isDoubleDateMode=_this$props4.isDoubleDateMode,priceList=_this$props4.priceList,labelFrom=_this$props4.labelFrom,labelTo=_this$props4.labelTo,isHideLabel=_this$props4.isHideLabel,isHideHoliday=_this$props4.isHideHoliday,isOffLunar=_this$props4.isOffLunar;var priceListFormat=priceList==null?void 0:priceList.outbound;if(isDoubleDateMode){priceListFormat=tabSelected===0?priceList==null?void 0:priceList.outbound:priceList==null?void 0:priceList.inbound;}return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:219,columnNumber:13}},_react.default.createElement(_reactNative.View,{style:styles.viewDate,__source:{fileName:_jsxFileName,lineNumber:220,columnNumber:17}},_react.default.createElement(_HeaderControl.default,{ref:"HeaderControl",onPressBackArrow:this.onPressBackArrow,onPressNextArrow:this.onPressNextArrow,__source:{fileName:_jsxFileName,lineNumber:221,columnNumber:21}}),_react.default.createElement(_reactNative.View,{style:styles.viewDay,__source:{fileName:_jsxFileName,lineNumber:227,columnNumber:21}},[1,2,3,4,5,6,7].map(function(item){return _react.default.createElement(_core.Text,{style:[styles.textDay,{color:item===6||item===7?_core.Colors.red_05:_core.Colors.black_12}],key:item,__source:{fileName:_jsxFileName,lineNumber:229,columnNumber:29}},_Util.default.mapWeeKDate(item));})),_react.default.createElement(_MonthList.default,{ref:"MonthList",today:this.today,minDate:this.minDate,maxDate:this.maxDate,startDate:startDate,endDate:endDate,onChoose:this.onChoose,i18n:i18n,onScrollCalendar:this.onScrollCalendar,isShowLunar:!isOffLunar&&showLunar,isDoubleDateMode:isDoubleDateMode,tabSelected:tabSelected,lunarConverter:this.converter,holidays:holidays,selectedDate:this.selectedDate,priceList:priceListFormat,labelFrom:labelFrom,labelTo:labelTo,isHideLabel:isHideLabel,__source:{fileName:_jsxFileName,lineNumber:238,columnNumber:21}})),!isOffLunar&&_react.default.createElement(_reactNative.View,{style:styles.viewLunar,__source:{fileName:_jsxFileName,lineNumber:262,columnNumber:25}},_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this.toggleLunarDate,__source:{fileName:_jsxFileName,lineNumber:263,columnNumber:29}},_react.default.createElement(_core.Image,{source:showLunar?_core.IconSource.ic_checkbox_checked_24:_core.IconSource.ic_checkbox_unchecked_24,style:styles.iconSelected,__source:{fileName:_jsxFileName,lineNumber:264,columnNumber:33}})),_react.default.createElement(_core.Text.SubTitle,{style:styles.txtLunar,onPress:this.toggleLunarDate,__source:{fileName:_jsxFileName,lineNumber:266,columnNumber:29}},_core.SwitchLanguage.showLunar)),!isHideHoliday&&_react.default.createElement(_reactNative.ScrollView,{contentContainerStyle:styles.contentScroll,showsVerticalScrollIndicator:false,enabledNestedScroll:true,__source:{fileName:_jsxFileName,lineNumber:278,columnNumber:25}},temp&&temp.length>0&&temp.map(function(item,idx){var labelHoliday=showLunar?item.mixedLabel||item.label||'':item.label||'';var labelHighlight=showLunar?item.highlight||'':'';var labelDate=_core.Language.defaultLanguage==='en'?_Util.default.mapMonthShorten(item.month)+" "+item.day:item.day+" th\xE1ng "+item.month;return _react.default.createElement(_reactNative.View,{style:styles.row,key:idx.toString(),__source:{fileName:_jsxFileName,lineNumber:288,columnNumber:37}},_react.default.createElement(_core.Text.SubTitle,{style:styles.txtMonthLunar,__source:{fileName:_jsxFileName,lineNumber:289,columnNumber:41}},labelDate),_react.default.createElement(_core.Text.SubTitle,{style:styles.subTextLunar,__source:{fileName:_jsxFileName,lineNumber:292,columnNumber:41}},labelHoliday+" ",labelHighlight?_react.default.createElement(_core.Text,{style:{color:_core.Colors.red_05},__source:{fileName:_jsxFileName,lineNumber:295,columnNumber:66}},labelHighlight):''));})));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,prevState){if(prevState.ownUpdate){return{ownUpdate:false};}if(nextProps.isShowLunar!==prevState.showLunar){return{showLunar:nextProps.isShowLunar};}return null;}}]);return CalendarPro;}(_react.Component);exports.default=CalendarPro;CalendarPro.propTypes={i18n:_propTypes.default.string,format:_propTypes.default.string,customI18n:_propTypes.default.object,isShowLunar:_propTypes.default.bool,onCallbackCalendar:_propTypes.default.func,minDate:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.instanceOf(Date)]),maxDate:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.instanceOf(Date)])};CalendarPro.defaultProps={format:'YYYY-MM-DD',i18n:'vi',customI18n:{},isShowLunar:true};var styles=_reactNative.StyleSheet.create({row:{flexDirection:'row'},txtMonthLunar:{color:_core.Colors.red_05,width:80},subTextLunar:{color:'#222222',paddingLeft:6,flexShrink:1},contentScroll:{paddingHorizontal:12,paddingVertical:10},iconSelected:{width:24,height:24,resizeMode:'cover'},txtLunar:{paddingLeft:6,color:'#222222',lineHeight:14},viewLunar:{flexDirection:'row',alignItems:'center',marginHorizontal:12,paddingVertical:12,borderBottomWidth:1,borderStyle:'solid',borderColor:'#c7c7cd'},viewDate:{paddingHorizontal:12},textDay:{lineHeight:16,width:(widthScreen-38)/7,textAlign:'center',fontWeight:'bold'},viewDay:{flexDirection:'row',justifyContent:'space-between',paddingHorizontal:7,paddingTop:15,paddingBottom:10},container:{flex:1,backgroundColor:'white',marginTop:20}});
+/* eslint-disable no-bitwise */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    View,
+    Dimensions,
+    ScrollView,
+    TouchableWithoutFeedback,
+    StyleSheet
+} from 'react-native';
+import Moment from 'moment';
+import {
+    Text, SwitchLanguage, LocalizedStrings, Colors, Image, IconSource
+} from '@momo-kits/core';
+import MonthList from './MonthList';
+import HeaderControl from './HeaderControl';
+import LunarDateConverter from './LunarDateConverter';
+import Util from './Util';
+
+const widthScreen = Dimensions.get('window').width;
+
+export default class CalendarPro extends Component {
+    constructor(props) {
+        super(props);
+        this.today = Moment();
+        this.year = this.today.year();
+        this.getDateRange();
+        this.header = this.today.clone();
+        this.selectedDate = props.selectedDate;
+        this.state = {
+            startDate: props.startDate,
+            endDate: props.endDate,
+            showLunar: props.isShowLunar,
+            tabSelected: 0,
+            holidays: [],
+            ownUpdate: false,
+        };
+        this.converter = new LunarDateConverter();
+    }
+
+    static getDerivedStateFromProps(nextProps, prevState) {
+        if (prevState.ownUpdate) {
+            return {
+                ownUpdate: false,
+            };
+        } if (nextProps.isShowLunar !== prevState.showLunar) {
+            return { showLunar: nextProps.isShowLunar };
+        }
+        return null;
+    }
+
+    setDateRange = (dateRange, isScrollToStartDate) => {
+        if (dateRange && dateRange.startDate && dateRange.endDate) {
+            this.setState({ startDate: dateRange.startDate, endDate: dateRange.endDate }, () => {
+                const dateScroll = isScrollToStartDate ? dateRange.startDate : dateRange.endDate;
+                this.refs.MonthList.scrollToMonth(dateScroll);
+            });
+        }
+    }
+
+    ownSetState(state) {
+        this.setState({ ...state, ownUpdate: true });
+    }
+
+    loadLabel = (data, type) => {
+        const {
+            i18n,
+            customI18n
+        } = this.props;
+        if (~['w', 'weekday', 'text'].indexOf(type)) {
+            return (customI18n[type] || {})[data] || Util.I18N_MAP[i18n][type][data];
+        }
+        if (type === 'date') {
+            return data.format(customI18n[type] || Util.I18N_MAP[i18n][type]);
+        }
+    };
+
+    getDateRange = () => {
+        const {
+            maxDate,
+            minDate,
+            format
+        } = this.props;
+        let max = Moment(maxDate, format);
+        let min = Moment(minDate, format);
+        const maxValid = max.isValid();
+        const minValid = min.isValid();
+        if (!maxValid && !minValid) {
+            max = Moment().add(12, 'months');
+            min = Moment();
+        }
+        if (!maxValid && minValid) {
+            max = min.add(12, 'months');
+        }
+        if (maxValid && !minValid) {
+            min = max.subtract(12, 'months');
+        }
+        if (min.isSameOrAfter(max)) return {};
+        this.minDate = min;
+        this.maxDate = max;
+    };
+
+    onChoose = (day) => {
+        const {
+            startDate, tabSelected
+        } = this.state;
+        const { isDoubleDateMode, onDateChange } = this.props;
+        if (isDoubleDateMode) {
+            if (tabSelected === 1) {
+                if (startDate && day >= startDate) {
+                    this.ownSetState({
+                        endDate: day
+                    });
+                } else if (startDate && day < startDate) {
+                    this.ownSetState({
+                        startDate: day,
+                        endDate: null
+                    });
+                }
+            } else {
+                this.ownSetState({
+                    startDate: day
+                });
+            }
+        } else {
+            this.ownSetState({
+                startDate: day,
+                endDate: null,
+            });
+        }
+        if (onDateChange) {
+            onDateChange(day);
+        }
+    };
+
+    executeProcessAfterScrollCalendar = (date, key) => {
+        const holidays = Object.values(Util.getHolidaysInMonth(Moment(date)));
+        const {
+            showLunar
+        } = this.state;
+        if (this.refs && this.refs.HeaderControl) {
+            this.refs.HeaderControl.onUpdateInfo({ date });
+            this.header = date.clone().startOf('month');
+        }
+        let data = [];
+        if (!showLunar) {
+            data = holidays.filter((item) => !item.lunar || item.mixedLabel);
+        } else {
+            data = holidays;
+        }
+        this.ownSetState({ holidays, temp: data, headerKey: key });
+    };
+
+    onScrollCalendar = (data) => {
+        const { headerKey } = this.state;
+        if (data) {
+            if (data.key !== headerKey) {
+                this.executeProcessAfterScrollCalendar(data.date, data.key);
+            }
+        }
+    };
+
+    setDoubleDateAndTabIndex = (firstDate, secondDate, tabSelected) => {
+        this.ownSetState({
+            startDate: firstDate ? Moment(firstDate) : null,
+            endDate: secondDate ? Moment(secondDate) : null,
+            tabSelected
+        });
+    };
+
+    toggleLunarDate = () => {
+        const { showLunar, holidays } = this.state;
+        const { onCallbackCalendar } = this.props;
+        let data = [];
+        const nextStateShowLunar = !showLunar;
+        if (!nextStateShowLunar) {
+            data = holidays.filter((item) => !item.lunar || item.mixedLabel);
+        } else {
+            data = holidays;
+        }
+        if (onCallbackCalendar) {
+            onCallbackCalendar('lunar', nextStateShowLunar);
+        }
+
+        this.ownSetState({ showLunar: !showLunar, temp: data, ownUpdate: true });
+    };
+
+    onPressBackArrow = () => {
+        const previousDate = Moment(this.header).startOf('month').subtract(1, 'months');
+        if (this.refs && this.refs.HeaderControl && previousDate.isSameOrAfter(this.minDate, 'month')) {
+            this.header = previousDate;
+            this.refs.HeaderControl.onUpdateInfo({ date: previousDate });
+            this.refs.MonthList.scrollToMonth(previousDate);
+        }
+    };
+
+    onPressNextArrow = () => {
+        const nextDate = Moment(this.header).startOf('month').add(1, 'months');
+        if (this.refs && this.refs.HeaderControl && nextDate.isSameOrBefore(this.maxDate, 'month')) {
+            this.header = nextDate;
+            this.refs.HeaderControl.onUpdateInfo({ date: nextDate });
+            this.refs.MonthList.scrollToMonth(nextDate);
+        }
+    };
+
+    render() {
+        const {
+            startDate, endDate, showLunar, tabSelected, holidays, temp
+        } = this.state;
+        const {
+            i18n, isDoubleDateMode, priceList, labelFrom, labelTo, isHideLabel, isHideHoliday, isOffLunar
+        } = this.props;
+        let priceListFormat = priceList?.outbound;
+        if (isDoubleDateMode) {
+            priceListFormat = tabSelected === 0 ? priceList?.outbound : priceList?.inbound;
+        }
+        return (
+            <View style={styles.container}>
+                <View style={styles.viewDate}>
+                    <HeaderControl
+                        ref="HeaderControl"
+                        // selectedDate={this.selectedDate}
+                        onPressBackArrow={this.onPressBackArrow}
+                        onPressNextArrow={this.onPressNextArrow}
+                    />
+                    <View style={styles.viewDay}>
+                        {[1, 2, 3, 4, 5, 6, 7].map((item) => (
+                            <Text
+                                style={[styles.textDay, { color: item === 6 || item === 7 ? Colors.red_05 : Colors.black_12 }]}
+                                key={item}
+                            >
+                                {Util.mapWeeKDate(item)}
+                            </Text>
+                        )
+                        )}
+                    </View>
+                    <MonthList
+                        ref="MonthList"
+                        today={this.today}
+                        minDate={this.minDate}
+                        maxDate={this.maxDate}
+                        startDate={startDate}
+                        endDate={endDate}
+                        onChoose={this.onChoose}
+                        i18n={i18n}
+                        onScrollCalendar={this.onScrollCalendar}
+                        isShowLunar={!isOffLunar && showLunar}
+                        isDoubleDateMode={isDoubleDateMode}
+                        tabSelected={tabSelected}
+                        lunarConverter={this.converter}
+                        holidays={holidays}
+                        selectedDate={this.selectedDate}
+                        priceList={priceListFormat}
+                        labelFrom={labelFrom}
+                        labelTo={labelTo}
+                        isHideLabel={isHideLabel}
+                    />
+                </View>
+                {
+                    !isOffLunar && (
+                        <View style={styles.viewLunar}>
+                            <TouchableWithoutFeedback onPress={this.toggleLunarDate}>
+                                <Image source={showLunar ? IconSource.ic_checkbox_checked_24 : IconSource.ic_checkbox_unchecked_24} style={styles.iconSelected} />
+                            </TouchableWithoutFeedback>
+                            <Text.SubTitle
+                                style={styles.txtLunar}
+                                onPress={this.toggleLunarDate}
+                            >
+                                {SwitchLanguage.showLunar}
+                            </Text.SubTitle>
+                        </View>
+                    )
+                }
+
+                {
+                    !isHideHoliday && (
+                        <ScrollView
+                            contentContainerStyle={styles.contentScroll}
+                            showsVerticalScrollIndicator={false}
+                            enabledNestedScroll
+                        >
+                            {temp && temp.length > 0 && temp.map((item, idx) => {
+                                const labelHoliday = showLunar ? (item.mixedLabel || item.label || '') : (item.label || '');
+                                const labelHighlight = showLunar ? (item.highlight || '') : '';
+                                const labelDate = LocalizedStrings.defaultLanguage === 'en' ? `${Util.mapMonthShorten(item.month)} ${item.day}` : `${item.day} tháng ${item.month}`;
+                                return (
+                                    <View style={styles.row} key={idx.toString()}>
+                                        <Text.SubTitle style={styles.txtMonthLunar}>
+                                            {labelDate}
+                                        </Text.SubTitle>
+                                        <Text.SubTitle style={styles.subTextLunar}>
+                                            {`${labelHoliday} `}
+                                            {
+                                                labelHighlight ? <Text style={{ color: Colors.red_05 }}>{labelHighlight}</Text> : ''
+                                            }
+                                        </Text.SubTitle>
+                                    </View>
+                                );
+                            })}
+                        </ScrollView>
+                    )
+                }
+
+            </View>
+        );
+    }
+}
+
+CalendarPro.propTypes = {
+    i18n: PropTypes.string,
+    format: PropTypes.string,
+    customI18n: PropTypes.object,
+    isShowLunar: PropTypes.bool,
+    onCallbackCalendar: PropTypes.func,
+    minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+    maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
+};
+
+CalendarPro.defaultProps = {
+    format: 'YYYY-MM-DD',
+    i18n: 'vi',
+    customI18n: {},
+    isShowLunar: true
+};
+
+const styles = StyleSheet.create({
+    row: { flexDirection: 'row' },
+    txtMonthLunar: { color: Colors.red_05, width: 80 },
+    subTextLunar: {
+        // fontSize: 12,
+        color: '#222222',
+        paddingLeft: 6,
+        flexShrink: 1
+    },
+    contentScroll: { paddingHorizontal: 12, paddingVertical: 10 },
+    iconSelected: { width: 24, height: 24, resizeMode: 'cover' },
+    txtLunar: {
+        paddingLeft: 6,
+        color: '#222222',
+        // fontSize: 12,
+        lineHeight: 14
+    },
+    viewLunar: {
+        flexDirection: 'row', alignItems: 'center', marginHorizontal: 12, paddingVertical: 12, borderBottomWidth: 1, borderStyle: 'solid', borderColor: '#c7c7cd'
+    },
+    viewDate: { paddingHorizontal: 12 },
+    textDay: {
+        // fontSize: 14,
+        lineHeight: 16,
+        width: (widthScreen - 38) / 7,
+        textAlign: 'center',
+        fontWeight: 'bold',
+    },
+    viewDay: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingHorizontal: 7,
+        paddingTop: 15,
+        paddingBottom: 10,
+    },
+    container: { flex: 1, backgroundColor: 'white', marginTop: 20, },
+});

package/src/Day/index.js

@@ -1 +1,210 @@
-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 _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _core=require("@momo-kits/core");var _style=_interopRequireDefault(require("./style"));var _jsxFileName="/Users/trinh.ho2/momo-folk/kits/src/libs/calendar/dist/src/Day/index.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 Day=function(_Component){(0,_inherits2.default)(Day,_Component);var _super=_createSuper(Day);function Day(_props){var _this;(0,_classCallCheck2.default)(this,Day);_this=_super.call(this,_props);_this.chooseDay=function(){var _this$props=_this.props,onChoose=_this$props.onChoose,date=_this$props.date;onChoose&&onChoose(date);};_this.findHoliday=function(date,holidays){if(date&&holidays&&holidays.length>0){var day=date.date();var month=date.month()+1;return holidays.find(function(item){return item.day===day&&item.month===month;});}return null;};_this.checkHoliday=function(date,holidays){var holiday=_this.findHoliday(date,holidays);return{solarHoliday:!!(holiday&&!holiday.lunar),lunarHoliday:!!(holiday&&holiday.lunar)};};_this.statusCheck=function(props){var _ref=props||_this.props,startDate=_ref.startDate,endDate=_ref.endDate,_ref$date=_ref.date,date=_ref$date===void 0?null:_ref$date,minDate=_ref.minDate,maxDate=_ref.maxDate,empty=_ref.empty,index=_ref.index,isShowLunar=_ref.isShowLunar,tabSelected=_ref.tabSelected,isDoubleDateMode=_ref.isDoubleDateMode,lunarDate=_ref.lunarDate,isSolarHoliday=_ref.isSolarHoliday,isLunarHoliday=_ref.isLunarHoliday,price=_ref.price;_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;};_this.statusCheck();return _this;}(0,_createClass2.default)(Day,[{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){var _this$props2=this.props,isDoubleDateMode=_this$props2.isDoubleDateMode,isShowLunar=_this$props2.isShowLunar,tabSelected=_this$props2.tabSelected,isSolarHoliday=_this$props2.isSolarHoliday,isLunarHoliday=_this$props2.isLunarHoliday,price=_this$props2.price,isBestPrice=_this$props2.isBestPrice,startDate=_this$props2.startDate,endDate=_this$props2.endDate;var prevStatus=this.isFocus;var selectionModeChange=isDoubleDateMode!==nextProps.isDoubleDateMode;var lunarChange=isShowLunar!==nextProps.isShowLunar;var nextStatus=this.statusCheck(nextProps);var tabChange=tabSelected!==nextProps.tabSelected;var solarHoliday=isSolarHoliday!==nextProps.isSolarHoliday;var lunarHoliday=isLunarHoliday!==nextProps.isLunarHoliday;var diffPrice=price!==nextProps.price&&isBestPrice!==nextProps.isBestPrice;var startDateChange=startDate&&!(startDate!=null&&startDate.isSame!=null&&startDate.isSame(nextProps.startDate,'day'));var endDateChange=endDate&&!(endDate!=null&&endDate.isSame!=null&&endDate.isSame(nextProps.endDate,'day'));return!!(prevStatus!==nextStatus||selectionModeChange||lunarChange||tabChange||solarHoliday||lunarHoliday||diffPrice||startDateChange||endDateChange);}},{key:"render",value:function render(){var _this$props3=this.props,date=_this$props3.date,empty=_this$props3.empty,isDoubleDateMode=_this$props3.isDoubleDateMode,price=_this$props3.price,isBestPrice=_this$props3.isBestPrice,isShowPrice=_this$props3.isShowPrice,labelFrom=_this$props3.labelFrom,labelTo=_this$props3.labelTo,isHideLabel=_this$props3.isHideLabel;var text=date?date.date():'';return _react.default.createElement(_reactNative.View,{style:_style.default.dayContainer,__source:{fileName:_jsxFileName,lineNumber:103,columnNumber:13}},_react.default.createElement(_reactNative.View,{style:[this.isMid&&!empty&&_style.default.mid,this.isStartPart&&_style.default.dayStartContainer,this.isEnd&&_style.default.dayEndContainer],__source:{fileName:_jsxFileName,lineNumber:104,columnNumber:17}},this.isValid&&this.isInScope?_react.default.createElement(_reactNative.TouchableHighlight,{style:[_style.default.day,(this.isStart||this.isEnd)&&_style.default.focused],underlayColor:"rgba(255, 255, 255, 0.35)",onPress:this.chooseDay,__source:{fileName:_jsxFileName,lineNumber:113,columnNumber:29}},_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.Text,{style:[_style.default.dayText,this.isWeekEnd&&_style.default.weekendDay,this.isSolarHoliday&&_style.default.weekendDay,(this.isStart||this.isEnd)&&_style.default.focusedText],__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:37}},text),this.lunarDate&&this.showLunar&&_react.default.createElement(_reactNative.Text,{style:[_style.default.lunarDayText,(this.isLunarHoliday||this.isLunarDayStart)&&_style.default.weekendDay,(this.isStart||this.isEnd)&&_style.default.focusedText],__source:{fileName:_jsxFileName,lineNumber:133,columnNumber:45}},this.lunarDate.lunarDay===1?this.lunarDate.lunarDay+"/"+this.lunarDate.lunarMonth:this.lunarDate.lunarDay))):_react.default.createElement(_reactNative.View,{style:[_style.default.day],__source:{fileName:_jsxFileName,lineNumber:147,columnNumber:29}},_react.default.createElement(_reactNative.Text,{style:[_style.default.dayText,_style.default.dayTextDisabled],__source:{fileName:_jsxFileName,lineNumber:148,columnNumber:33}},text),this.lunarDate&&this.showLunar&&text?_react.default.createElement(_reactNative.Text,{style:[_style.default.lunarDayText,_style.default.dayTextDisabled],__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:41}},this.lunarDate.lunarDay===1?this.lunarDate.lunarDay+"/"+this.lunarDate.lunarMonth:this.lunarDate.lunarDay):_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:164,columnNumber:41}}))),isDoubleDateMode&&this.isStart&&!isHideLabel&&_react.default.createElement(_reactNative.View,{style:_style.default.txtGo,__source:{fileName:_jsxFileName,lineNumber:171,columnNumber:21}},_react.default.createElement(_reactNative.Text,{style:{fontSize:8,color:'white'},__source:{fileName:_jsxFileName,lineNumber:172,columnNumber:25}},labelFrom||_core.SwitchLanguage.departing)),isDoubleDateMode&&this.isEnd&&!isHideLabel&&_react.default.createElement(_reactNative.View,{style:_style.default.txtBack,__source:{fileName:_jsxFileName,lineNumber:178,columnNumber:21}},_react.default.createElement(_reactNative.Text,{style:{fontSize:8,color:'white'},__source:{fileName:_jsxFileName,lineNumber:179,columnNumber:25}},labelTo||_core.SwitchLanguage.returning)),this.isValid&&this.isInScope&&!!price&&_react.default.createElement(_reactNative.Text,{style:[_style.default.price,isBestPrice&&{color:_core.Colors.pink_05_b}],__source:{fileName:_jsxFileName,lineNumber:187,columnNumber:20}},price));}}]);return Day;}(_react.Component);var _default=Day;exports.default=_default;
+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 style from './style';
+
+class Day extends Component {
+  constructor(props) {
+    super(props);
+    this.statusCheck();
+  }
+
+  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;
+  };
+
+  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;
+  };
+
+  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>
+        )}
+        {this.isValid && this.isInScope && !!price && (
+          <Text style={[style.price, isBestPrice && {color: Colors.pink_05_b}]}>
+            {price}
+          </Text>
+        )}
+      </View>
+    );
+  }
+}
+
+export default Day;