@momo-kits/calendar 0.0.60-beta → 0.0.60-beta.2

package/package.json

@@ -1,18 +1,19 @@
 {
-  "name": "@momo-kits/calendar",
-  "version": "0.0.60-beta",
-  "private": false,
-  "main": "index.js",
-  "dependencies": {
-    "@momo-kits/date-picker": "latest",
-    "moment": "^2.24.0"
-  },
-  "peerDependencies": {
-    "react": "16.9.0",
-    "react-native": ">=0.55",
-    "prop-types": "^15.7.2",
-    "@momo-kits/core": ">=0.0.5-beta"
-  },
-  "devDependencies": {},
-  "license": "MoMo"
+    "name": "@momo-kits/calendar",
+    "version": "0.0.60-beta.2",
+    "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
 
 
-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"}'
+#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,10 +1,22 @@
 import PropTypes from 'prop-types';
-import React, { Component, } from 'react';
+import React, { Component } from 'react';
 import {
-    View, Switch, ScrollView, Platform, StyleSheet
+    View,
+    ScrollView,
+    Platform,
+    StyleSheet,
+    Dimensions,
 } from 'react-native';
 import moment from 'moment';
-import { Text, SwitchLanguage } from '@momo-kits/core';
+import {
+    Text,
+    SwitchLanguage,
+    Colors,
+    Spacing,
+    Radius,
+    ScaleSize,
+} from '@momo-kits/core';
+import Switch from '@momo-kits/switch';
 import CalendarPro from './CalendarPro';
 import TabHeader from './TabHeader';
 
@@ -13,15 +25,24 @@ 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 +59,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 +104,43 @@ 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.first
+            ) {
                 this.doubleDate.first = this.selectedDate;
+                this.doubleDate.second = null;
                 this.tabSelected = 1;
-                this.cellHeader1.current.updateView(this.selectedDate, this.tabSelected === 0);
+                this.cellHeader1.current.updateView(
+                    this.selectedDate,
+                    this.tabSelected === 0,
+                );
+                this.cellHeader2.current.updateView(
+                    this.doubleDate.second,
+                    this.tabSelected === 1,
+                );
                 this.cellHeader2.current.setActiveTab(this.tabSelected === 1);
-                this.calendarPicker.current.setDoubleDateAndTabIndex(this.doubleDate.first, this.doubleDate.second, this.tabSelected);
+                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 +149,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 +163,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,25 +186,36 @@ class Calendar extends Component {
             }
         }
         if (onCTAStateChange) {
-            onCTAStateChange(!!(this.doubleDate.second));
+            onCTAStateChange(!!this.doubleDate.second);
         }
     }
 
     processDateSecond() {
         const { onDateChange, onCTAStateChange } = this.props;
-        if (this.cellHeader2.current) {
+        if (
+            this.cellHeader2.current &&
+            this.selectedDate >= this.doubleDate.first
+        ) {
+            this.doubleDate.second = this.selectedDate;
             this.cellHeader2.current.updateView(this.selectedDate, false);
             this.cellHeader1.current.setActiveTab(true);
-            this.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,
@@ -133,6 +223,12 @@ class Calendar extends Component {
                 // };
                 // onDateChange(cloned);
             }
+        } else {
+            this.doubleDate.first = this.selectedDate;
+            this.doubleDate.second = null;
+
+            this.cellHeader1.current.updateView(this.selectedDate, false);
+            this.cellHeader2.current.updateView(null, false);
         }
     }
 
@@ -152,7 +248,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 +263,7 @@ class Calendar extends Component {
     onDateChange = (date) => {
         this.selectedDate = date;
         this.updateView();
-    }
+    };
 
     updateHeaderView = () => {
         const { onDateChange, onCTAStateChange } = this.props;
@@ -173,7 +272,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 +286,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 +306,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,29 +329,37 @@ 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 = () => {
         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 style={styles.headerContainer}>
+                <View style={styles.viewSwitch}>
+                    <Text.Title weight="medium" style={styles.textSwitch}>
+                        {SwitchLanguage.chooseRoundtrip}
+                    </Text.Title>
+                    <Switch
+                        value={isDoubleDateMode}
+                        onChange={this.toggleSelectionDateMode}
+                        thumbColor={isDoubleDateMode ? '#78ca32' : 'white'}
+                        trackColor={{ false: '#e5e7ec', true: '#e5e7ec' }}
+                    />
+                </View>
+                <View style={styles.seperator} />
             </View>
         );
     };
@@ -246,7 +367,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,33 +398,75 @@ 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,
+            style,
         } = this.props;
         const { isDoubleDateMode } = this.state;
+        const { width } = Dimensions.get('window');
         return (
-            <ScrollView style={{ flex: 1, backgroundColor: 'white' }}>
-                {!isHiddenSwitch && this.renderSwitchReturnSelection()}
-                {!isHideHeaderPanel && this.renderHeaderPanel()}
+            <ScrollView
+                style={[
+                    styles.scrollView,
+                    {
+                        width: width - ScaleSize(24),
+                    },
+                    style,
+                ]}>
+                <View
+                    style={{
+                        backgroundColor: Colors.black_01,
+                        borderRadius: Radius.XS,
+                    }}>
+                    {!isHiddenSwitch && this.renderSwitchReturnSelection()}
+                    {!isHideHeaderPanel && this.renderHeaderPanel()}
+                </View>
                 <CalendarPro
+                    priceList={priceList}
                     ref={this.calendarPicker}
                     startDate={doubleDate?.first}
                     endDate={doubleDate?.second}
@@ -312,7 +475,6 @@ class Calendar extends Component {
                     selectedDate={this.selectedDate}
                     isShowLunar={isShowLunar}
                     onCallbackCalendar={onCallbackCalendar}
-                    priceList={priceList}
                     labelFrom={labelFrom}
                     labelTo={labelTo}
                     isHideLabel={isHideLabel}
@@ -331,7 +493,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,47 +510,57 @@ 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),
+    ]),
+    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 };
 
 Calendar.defaultProps = {
     mode: 'single',
-    isHiddenSwitch: false
+    isHiddenSwitch: false,
 };
 
 const styles = StyleSheet.create({
     viewPanel_2: {
-        height: 46,
-        paddingVertical: 10,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'white',
-        borderRadius: 8
+        height: 50,
+        marginHorizontal: 12,
+        marginTop: 6,
+        flexDirection: 'row',
     },
     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'
+        color: Colors.black_15,
     },
     viewSwitch: {
         flexDirection: 'row',
         justifyContent: 'space-between',
-        paddingHorizontal: 12,
         alignItems: 'center',
-        backgroundColor: '#f2f3f5',
-        paddingVertical: 9,
-        height: 42
+        backgroundColor: Colors.white,
+        height: 42,
+    },
+    seperator: {
+        height: 1,
+        width: '100%',
+        backgroundColor: Colors.black_04,
+    },
+    headerContainer: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    scrollView: {
+        flex: 1,
+        backgroundColor: 'transparent',
+        alignSelf: 'center',
     },
 });