@momo-kits/calendar 0.73.3-beta.5 → 0.74.2-react-native.1

package/{src/Calendar.js → index.tsx}

@@ -1,23 +1,33 @@
-import PropTypes from 'prop-types';
-import React, {Component} from 'react';
-import {Dimensions, ScrollView, StyleSheet, View} from 'react-native';
+import React, {Component, createContext, RefObject} from 'react';
+import {Dimensions, LayoutChangeEvent, View} from 'react-native';
 import moment from 'moment';
 import {
-  Colors,
+  ApplicationContext,
   Radius,
-  ScaleSize,
-  SwitchLanguage,
+  scaleSize,
+  Spacing,
+  Switch,
   Text,
-} from '@momo-kits/core-v2';
-import Switch from '@momo-kits/switch';
+} from '@momo-kits/foundation';
 import CalendarPro from './CalendarPro';
 import TabHeader from './TabHeader';
+import {CalendarProps, CalendarState} from './types';
+import styles from './styles';
 
 const DOUBLE = 'doubleDate';
 
-// const SIGNLE = 'signleDate';
-class Calendar extends Component {
-  constructor(props) {
+export const ContainerContext = createContext({width: 0, height: 0});
+
+class Calendar extends Component<CalendarProps, CalendarState> {
+  static contextType = ApplicationContext;
+  doubleDate: any;
+  tabSelected;
+  selectedDate: moment.Moment;
+  calendarPicker: RefObject<CalendarPro>;
+  cellHeader1: RefObject<TabHeader>;
+  cellHeader2: RefObject<TabHeader>;
+  cellHeaderSingle: RefObject<TabHeader>;
+  constructor(props: CalendarProps) {
     super(props);
     this.doubleDate = props.doubleDate
       ? {
@@ -35,11 +45,12 @@ class Calendar extends Component {
 
     this.state = {
       isDoubleDateMode: props.mode === DOUBLE,
+      containerWidth: Dimensions.get('window').width,
     };
-    this.calendarPicker = React.createRef();
-    this.cellHeader1 = React.createRef();
-    this.cellHeader2 = React.createRef();
-    this.cellHeaderSingle = React.createRef();
+    this.calendarPicker = React.createRef<CalendarPro>();
+    this.cellHeader1 = React.createRef<TabHeader>();
+    this.cellHeader2 = React.createRef<TabHeader>();
+    this.cellHeaderSingle = React.createRef<TabHeader>();
   }
 
   componentDidMount() {
@@ -71,10 +82,10 @@ class Calendar extends Component {
     }
   }
 
-  onChangeTab = idTab => {
-    this.props.onChangeTab && this.props.onChangeTab(idTab);
-
+  onChangeTab = (idTab: number) => {
+    this.props.onChangeTab?.(idTab);
     this.tabSelected = idTab;
+
     if (this.cellHeader1.current && this.cellHeader2.current) {
       this.cellHeader1.current.setActiveTab(idTab === 0);
       this.cellHeader2.current.setActiveTab(idTab === 1);
@@ -122,12 +133,6 @@ class Calendar extends Component {
           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()
@@ -157,11 +162,6 @@ class Calendar extends Component {
               ? 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);
         }
       }
     }
@@ -178,9 +178,9 @@ class Calendar extends Component {
     ) {
       this.doubleDate.second = this.selectedDate;
       this.cellHeader2.current.updateView(this.selectedDate, false);
-      this.cellHeader1.current.setActiveTab(true);
+      this.cellHeader1?.current?.setActiveTab(true);
       this.tabSelected = 0;
-      this.calendarPicker.current.setDoubleDateAndTabIndex(
+      this.calendarPicker?.current?.setDoubleDateAndTabIndex(
         this.doubleDate.first,
         this.doubleDate.second,
         this.tabSelected,
@@ -195,18 +195,13 @@ class Calendar extends Component {
             ? 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 {
       this.doubleDate.first = this.selectedDate;
       this.doubleDate.second = null;
 
-      this.cellHeader1.current.updateView(this.selectedDate, false);
-      this.cellHeader2.current.updateView(null, false);
+      this.cellHeader1?.current?.updateView(this.selectedDate, false);
+      this.cellHeader2?.current?.updateView(null, false);
     }
   }
 
@@ -235,7 +230,7 @@ class Calendar extends Component {
     }
   }
 
-  onDateChange = date => {
+  onDateChange = (date: moment.Moment) => {
     this.selectedDate = date;
     this.updateView();
   };
@@ -247,14 +242,22 @@ 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.calendarPicker.current?.setDoubleDateAndTabIndex(
           this.selectedDate,
           null,
           this.tabSelected,
         );
         this.doubleDate.first = moment(this.selectedDate);
         this.doubleDate.second = null;
-        this.tabSelected = 0;
+
+        this.tabSelected = 1;
+        this.cellHeader2.current?.setActiveTab(true);
+        this.cellHeader1.current?.setActiveTab(false);
+        this.calendarPicker?.current?.setDoubleDateAndTabIndex(
+          this.doubleDate.first,
+          this.doubleDate.second,
+          this.tabSelected,
+        );
 
         if (onCTAStateChange) {
           onCTAStateChange(false);
@@ -268,11 +271,6 @@ class Calendar extends Component {
               ? 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 {
@@ -286,10 +284,7 @@ class Calendar extends Component {
         } 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());
         }
       }
@@ -312,57 +307,64 @@ class Calendar extends Component {
 
   renderSwitchReturnSelection = () => {
     const {isDoubleDateMode} = this.state;
+    const {translate, theme} = this.context;
     return (
       <View style={styles.headerContainer}>
-        <View style={styles.viewSwitch}>
-          <Text.Label1 weight="medium" style={styles.textSwitch}>
-            {SwitchLanguage.chooseRoundtrip}
-          </Text.Label1>
+        <View
+          style={[
+            styles.viewSwitch,
+            {backgroundColor: theme.colors.background.surface},
+          ]}>
+          <Text typography={'label_default_medium'}>
+            {translate('chooseRoundtrip')}
+          </Text>
           <Switch
             value={isDoubleDateMode}
             onChange={this.toggleSelectionDateMode}
-            thumbColor={isDoubleDateMode ? '#78ca32' : 'white'}
-            trackColor={{
-              false: '#e5e7ec',
-              true: '#e5e7ec',
-            }}
           />
         </View>
-        <View style={styles.seperator} />
       </View>
     );
   };
 
-  renderHeaderPanel = () => {
+  renderHeaderPanel = (theme: {colors: {background: {default: string}}}) => {
     const {isDoubleDateMode} = this.state;
     const {headerFrom, headerTo} = this.props;
     return isDoubleDateMode ? (
-      <View style={styles.viewPanel}>
+      <View
+        style={[
+          styles.viewPanel,
+          {backgroundColor: theme.colors.background.default},
+        ]}>
         <TabHeader
           id={0}
           ref={this.cellHeader1}
           onChangeTab={this.onChangeTab}
-          label={headerFrom || SwitchLanguage.depart}
+          label={headerFrom || 'depart'}
           activeTab
           date={this.doubleDate.first}
         />
-
+        <View style={{width: 4, height: '100%'}} />
         <TabHeader
           id={1}
           ref={this.cellHeader2}
           onChangeTab={this.onChangeTab}
-          label={headerTo || SwitchLanguage.return}
+          label={headerTo || 'return'}
           activeTab={false}
           date=""
         />
       </View>
     ) : (
-      <View style={styles.viewPanel_2}>
+      <View
+        style={[
+          styles.viewPanel,
+          {backgroundColor: theme.colors.background.default},
+        ]}>
         <TabHeader
-          id={1}
+          id={0}
           disabled
           ref={this.cellHeaderSingle}
-          label={headerFrom || SwitchLanguage.depart}
+          label={headerFrom || 'depart'}
           activeTab
           date={this.selectedDate}
         />
@@ -370,14 +372,20 @@ class Calendar extends Component {
     );
   };
 
-  setDateRange = (dateRange, isScrollToStartDate) => {
+  setDateRange = (
+    dateRange: {
+      startDate: moment.Moment | undefined;
+      endDate: moment.Moment | undefined;
+    },
+    isScrollToStartDate: any,
+  ) => {
     const {mode, doubleDate = {}} = this.props;
     if (mode === 'doubleDate') {
-      this.cellHeader1.current.updateView(
+      this.cellHeader1?.current?.updateView(
         dateRange.startDate,
         this.tabSelected === 0,
       );
-      this.cellHeader2.current.updateView(
+      this.cellHeader2?.current?.updateView(
         dateRange.endDate,
         this.tabSelected === 1,
       );
@@ -394,134 +402,77 @@ class Calendar extends Component {
     }
   };
 
+  onLayout = (e: LayoutChangeEvent) => {
+    this.setState({containerWidth: e.nativeEvent.layout.width});
+  };
+
   render() {
+    const currentDate = new Date();
+    const minDateDefault = new Date(currentDate);
+    const maxDateDefault = new Date(currentDate);
+    minDateDefault.setFullYear(minDateDefault.getFullYear() - 1);
+    maxDateDefault.setFullYear(maxDateDefault.getFullYear() + 1);
+
     const {
       isOffLunar,
       isHideHoliday,
-      isHiddenSwitch,
       isShowLunar,
       onCallbackCalendar,
       priceList,
       labelFrom,
       labelTo,
       isHideLabel,
-      minDate,
-      maxDate,
+      minDate = minDateDefault,
+      maxDate = maxDateDefault,
       doubleDate,
-      isHideHeaderPanel,
-      disabledWeekend,
       style,
+      disabledDays = [],
+      hideHeaderTab = false,
     } = this.props;
-    const {isDoubleDateMode} = this.state;
-    const {width} = Dimensions.get('window');
+    const {isDoubleDateMode, containerWidth} = this.state;
+    const {theme} = this.context;
     return (
-      <ScrollView
-        style={[
-          styles.scrollView,
-          {
-            width: width - ScaleSize(24),
-          },
-          style,
-        ]}>
-        <View
-          style={{
-            backgroundColor: Colors.black_01,
-            borderRadius: Radius.XS,
-          }}>
-          {!isHiddenSwitch && this.renderSwitchReturnSelection()}
-          {!isHideHeaderPanel && this.renderHeaderPanel()}
+      <ContainerContext.Provider
+        value={{
+          width: containerWidth,
+          height: priceList ? scaleSize(48) : scaleSize(34),
+        }}>
+        <View onLayout={this.onLayout} style={[style, styles.scrollView]}>
+          <View
+            style={[
+              {
+                backgroundColor: theme.colors.background.surface,
+                borderRadius: Radius.XS,
+                marginBottom: Spacing.S,
+              },
+              hideHeaderTab && styles.invisible,
+            ]}>
+            {this.renderSwitchReturnSelection()}
+            {this.renderHeaderPanel(theme)}
+          </View>
+          <CalendarPro
+            priceList={priceList}
+            ref={this.calendarPicker}
+            startDate={doubleDate?.first}
+            endDate={doubleDate?.second}
+            onDateChange={this.onDateChange}
+            isDoubleDateMode={isDoubleDateMode}
+            selectedDate={this.selectedDate}
+            isShowLunar={isShowLunar}
+            onCallbackCalendar={onCallbackCalendar}
+            labelFrom={labelFrom}
+            labelTo={labelTo}
+            isHideLabel={isHideLabel}
+            minDate={minDate}
+            maxDate={maxDate}
+            isHideHoliday={isHideHoliday}
+            isOffLunar={isOffLunar}
+            disabledDays={disabledDays}
+          />
         </View>
-        <CalendarPro
-          disabledWeekend={disabledWeekend}
-          priceList={priceList}
-          ref={this.calendarPicker}
-          startDate={doubleDate?.first}
-          endDate={doubleDate?.second}
-          onDateChange={this.onDateChange}
-          isDoubleDateMode={isDoubleDateMode}
-          selectedDate={this.selectedDate}
-          isShowLunar={isShowLunar}
-          onCallbackCalendar={onCallbackCalendar}
-          labelFrom={labelFrom}
-          labelTo={labelTo}
-          isHideLabel={isHideLabel}
-          minDate={minDate}
-          maxDate={maxDate}
-          isHideHoliday={isHideHoliday}
-          isOffLunar={isOffLunar}
-        />
-      </ScrollView>
+      </ContainerContext.Provider>
     );
   }
 }
 
-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)]),
-  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-};
-
-Calendar.defaultProps = {
-  mode: 'single',
-  isHiddenSwitch: false,
-};
-
-const styles = StyleSheet.create({
-  viewPanel_2: {
-    height: 50,
-    marginHorizontal: 12,
-    marginTop: 6,
-    flexDirection: 'row',
-  },
-  viewPanel: {
-    height: 50,
-    marginHorizontal: 12,
-    marginTop: 6,
-    flexDirection: 'row',
-  },
-  textSwitch: {
-    color: Colors.black_15,
-  },
-  viewSwitch: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    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',
-  },
-});
+export {Calendar};

package/package.json

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

package/styles.ts

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