@momo-kits/calendar 0.79.4 → 0.79.6

package/index.tsx

@@ -0,0 +1,3 @@
+import Calendar from './src/Calendar';
+
+export {Calendar};

package/package.json

@@ -1,19 +1,17 @@
 {
     "name": "@momo-kits/calendar",
-    "version": "0.79.4",
+    "version": "0.79.6",
     "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": {
+        "@momo-kits/foundation": "latest",
         "react": "16.9.0",
         "react-native": ">=0.55",
-        "prop-types": "^15.7.2",
-        "@momo-kits/core-v2": ">=0.0.5-beta"
+        "prop-types": "^15.7.2"
     },
     "devDependencies": {},
-    "license": "MoMo"
+    "license": "MoMo",
+    "dependencies": {
+        "moment": "^2.24.0"
+    }
 }

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

@@ -1,23 +1,36 @@
-import PropTypes from 'prop-types';
-import React, {Component} from 'react';
-import {Dimensions, ScrollView, StyleSheet, View} from 'react-native';
+import React, {Component, useCallback} from 'react';
+import {
+  Dimensions,
+  LayoutChangeEvent,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native';
 import moment from 'moment';
 import {
+  ApplicationContext,
   Colors,
   Radius,
-  ScaleSize,
-  SwitchLanguage,
+  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';
 
 const DOUBLE = 'doubleDate';
+const SINGLE = 'singleDate';
 
-// const SIGNLE = 'signleDate';
-class Calendar extends Component {
-  constructor(props) {
+class Calendar extends Component<CalendarProps, CalendarState> {
+  static contextType = ApplicationContext;
+  doubleDate;
+  tabSelected;
+  selectedDate;
+  calendarPicker;
+  cellHeader1;
+  cellHeader2;
+  cellHeaderSingle;
+  constructor(props: CalendarProps) {
     super(props);
     this.doubleDate = props.doubleDate
       ? {
@@ -35,6 +48,7 @@ class Calendar extends Component {
 
     this.state = {
       isDoubleDateMode: props.mode === DOUBLE,
+      containerWidth: 0,
     };
     this.calendarPicker = React.createRef();
     this.cellHeader1 = React.createRef();
@@ -71,7 +85,7 @@ class Calendar extends Component {
     }
   }
 
-  onChangeTab = idTab => {
+  onChangeTab = (idTab: number) => {
     this.props.onChangeTab && this.props.onChangeTab(idTab);
 
     this.tabSelected = idTab;
@@ -122,12 +136,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 +165,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);
         }
       }
     }
@@ -195,11 +198,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 {
       this.doubleDate.first = this.selectedDate;
@@ -235,7 +233,7 @@ class Calendar extends Component {
     }
   }
 
-  onDateChange = date => {
+  onDateChange = (date: moment.Moment) => {
     this.selectedDate = date;
     this.updateView();
   };
@@ -268,11 +266,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 +279,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,20 +302,16 @@ class Calendar extends Component {
 
   renderSwitchReturnSelection = () => {
     const {isDoubleDateMode} = this.state;
+    const {translate} = this.context;
     return (
       <View style={styles.headerContainer}>
         <View style={styles.viewSwitch}>
-          <Text.Label1 weight="medium" style={styles.textSwitch}>
-            {SwitchLanguage.chooseRoundtrip}
-          </Text.Label1>
+          <Text typography={'label_default'} style={styles.textSwitch}>
+            {translate('chooseRoundtrip')}
+          </Text>
           <Switch
             value={isDoubleDateMode}
             onChange={this.toggleSelectionDateMode}
-            thumbColor={isDoubleDateMode ? '#78ca32' : 'white'}
-            trackColor={{
-              false: '#e5e7ec',
-              true: '#e5e7ec',
-            }}
           />
         </View>
         <View style={styles.seperator} />
@@ -342,7 +328,7 @@ class Calendar extends Component {
           id={0}
           ref={this.cellHeader1}
           onChangeTab={this.onChangeTab}
-          label={headerFrom || SwitchLanguage.depart}
+          label={headerFrom || 'depart'}
           activeTab
           date={this.doubleDate.first}
         />
@@ -351,7 +337,7 @@ class Calendar extends Component {
           id={1}
           ref={this.cellHeader2}
           onChangeTab={this.onChangeTab}
-          label={headerTo || SwitchLanguage.return}
+          label={headerTo || 'return'}
           activeTab={false}
           date=""
         />
@@ -362,7 +348,7 @@ class Calendar extends Component {
           id={1}
           disabled
           ref={this.cellHeaderSingle}
-          label={headerFrom || SwitchLanguage.depart}
+          label={headerFrom || 'depart'}
           activeTab
           date={this.selectedDate}
         />
@@ -370,7 +356,13 @@ class Calendar extends Component {
     );
   };
 
-  setDateRange = (dateRange, isScrollToStartDate) => {
+  setDateRange = (
+    dateRange: {
+      startDate: moment.MomentInput | undefined;
+      endDate: moment.MomentInput | undefined;
+    },
+    isScrollToStartDate: any,
+  ) => {
     const {mode, doubleDate = {}} = this.props;
     if (mode === 'doubleDate') {
       this.cellHeader1.current.updateView(
@@ -394,6 +386,10 @@ class Calendar extends Component {
     }
   };
 
+  onLayout = (e: LayoutChangeEvent) => {
+    this.setState({containerWidth: e.nativeEvent.layout.width});
+  };
+
   render() {
     const {
       isOffLunar,
@@ -412,17 +408,10 @@ class Calendar extends Component {
       disabledWeekend,
       style,
     } = this.props;
-    const {isDoubleDateMode} = this.state;
-    const {width} = Dimensions.get('window');
+
+    const {isDoubleDateMode, containerWidth} = this.state;
     return (
-      <ScrollView
-        style={[
-          styles.scrollView,
-          {
-            width: width - ScaleSize(24),
-          },
-          style,
-        ]}>
+      <ScrollView onLayout={this.onLayout} style={[styles.scrollView, style]}>
         <View
           style={{
             backgroundColor: Colors.black_01,
@@ -432,6 +421,7 @@ class Calendar extends Component {
           {!isHideHeaderPanel && this.renderHeaderPanel()}
         </View>
         <CalendarPro
+          containerWidth={containerWidth}
           disabledWeekend={disabledWeekend}
           priceList={priceList}
           ref={this.calendarPicker}
@@ -457,36 +447,6 @@ class Calendar extends Component {
 
 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,
@@ -507,7 +467,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.black_01,
     height: 42,
   },
   seperator: {
@@ -523,5 +483,6 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: 'transparent',
     alignSelf: 'center',
+    width: '100%',
   },
 });

package/src/{CalendarPro.js → CalendarPro.tsx}

@@ -1,33 +1,37 @@
-/* eslint-disable no-bitwise */
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 
-import {
-  Dimensions,
-  ScrollView,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
+import {Dimensions, ScrollView, StyleSheet, View} from 'react-native';
 import Moment from 'moment';
 import {
+  ApplicationContext,
+  CheckBox,
   Colors,
-  IconSource,
-  Image,
   Radius,
   Spacing,
-  SwitchLanguage,
   Text,
-} from '@momo-kits/core-v2';
+} from '@momo-kits/foundation';
 import MonthList from './MonthList';
 import HeaderControl from './HeaderControl';
 import LunarDateConverter from './LunarDateConverter';
 import Util from './Util';
+import {CalendarProProps, CalendarProState} from '../types';
 
 const widthScreen = Dimensions.get('window').width;
 
-export default class CalendarPro extends Component {
-  constructor(props) {
+export default class CalendarPro extends Component<
+  CalendarProProps,
+  CalendarProState
+> {
+  static contextType = ApplicationContext;
+  today: Moment.Moment;
+  year: number;
+  header: Moment.Moment;
+  selectedDate: Date;
+  converter: typeof LunarDateConverter;
+  minDate?: Moment.Moment;
+  maxDate?: Moment.Moment;
+
+  constructor(props: CalendarProProps) {
     super(props);
     this.today = Moment();
     this.year = this.today.year();
@@ -45,7 +49,10 @@ export default class CalendarPro extends Component {
     this.converter = new LunarDateConverter();
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
+  static getDerivedStateFromProps(
+    nextProps: {isShowLunar: any},
+    prevState: {ownUpdate: any; showLunar: any},
+  ) {
     if (prevState.ownUpdate) {
       return {
         ownUpdate: false,
@@ -57,7 +64,10 @@ export default class CalendarPro extends Component {
     return null;
   }
 
-  setDateRange = (dateRange, isScrollToStartDate) => {
+  setDateRange = (
+    dateRange: {startDate: any; endDate: any},
+    isScrollToStartDate: any,
+  ) => {
     if (dateRange && dateRange.startDate && dateRange.endDate) {
       this.setState(
         {
@@ -74,23 +84,13 @@ export default class CalendarPro extends Component {
     }
   };
 
-  ownSetState(state) {
+  ownSetState(state: CalendarProState) {
     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);
@@ -112,7 +112,7 @@ export default class CalendarPro extends Component {
     this.maxDate = max;
   };
 
-  onChoose = day => {
+  onChoose = (day: number) => {
     const {startDate, tabSelected} = this.state;
     const {isDoubleDateMode, onDateChange} = this.props;
     if (isDoubleDateMode) {
@@ -143,7 +143,10 @@ export default class CalendarPro extends Component {
     }
   };
 
-  executeProcessAfterScrollCalendar = (date, key) => {
+  executeProcessAfterScrollCalendar = (
+    date: Moment.MomentInput | undefined,
+    key: any,
+  ) => {
     const holidays = Object.values(Util.getHolidaysInMonth(Moment(date)));
     const {showLunar} = this.state;
     if (this.refs && this.refs.HeaderControl) {
@@ -163,7 +166,10 @@ export default class CalendarPro extends Component {
     });
   };
 
-  onScrollCalendar = data => {
+  onScrollCalendar = (data: {
+    key: any;
+    date: Moment.MomentInput | undefined;
+  }) => {
     const {headerKey} = this.state;
     if (data) {
       if (data.key !== headerKey) {
@@ -172,7 +178,11 @@ export default class CalendarPro extends Component {
     }
   };
 
-  setDoubleDateAndTabIndex = (firstDate, secondDate, tabSelected) => {
+  setDoubleDateAndTabIndex = (
+    firstDate: Moment.MomentInput | undefined,
+    secondDate: Moment.MomentInput | undefined,
+    tabSelected: any,
+  ) => {
     this.ownSetState({
       startDate: firstDate ? Moment(firstDate) : null,
       endDate: secondDate ? Moment(secondDate) : null,
@@ -230,8 +240,14 @@ export default class CalendarPro extends Component {
   };
 
   render() {
-    const {startDate, endDate, showLunar, tabSelected, holidays, temp} =
-      this.state;
+    const {
+      startDate,
+      endDate,
+      showLunar = false,
+      tabSelected,
+      holidays,
+      temp,
+    } = this.state;
     const {
       i18n,
       isDoubleDateMode,
@@ -243,6 +259,7 @@ export default class CalendarPro extends Component {
       isOffLunar,
       disabledWeekend,
       isShowLunar,
+      containerWidth,
     } = this.props;
     let priceListFormat = priceList?.outbound;
     if (isDoubleDateMode) {
@@ -252,12 +269,13 @@ export default class CalendarPro extends Component {
     const isDisabledWeekend =
       disabledWeekend && !priceList && !isShowLunar && !isDoubleDateMode;
 
+    const {theme, translate} = this.context;
+
     return (
       <View style={styles.container}>
         <View style={styles.viewDate}>
           <HeaderControl
             ref="HeaderControl"
-            // selectedDate={this.selectedDate}
             onPressBackArrow={this.onPressBackArrow}
             onPressNextArrow={this.onPressNextArrow}
           />
@@ -265,25 +283,22 @@ export default class CalendarPro extends Component {
           <View>
             <View style={styles.viewDay}>
               {[1, 2, 3, 4, 5, 6, 7].map(item => (
-                <Text.Label2
-                  weight="medium"
+                <Text
+                  color={
+                    item === 6 || item === 7 ? Colors.red_03 : Colors.black_17
+                  }
+                  typography={'label_s'}
                   style={[
                     styles.textDay,
-                    {
-                      color:
-                        item === 6 || item === 7
-                          ? isDisabledWeekend
-                            ? Colors.red_07
-                            : Colors.red_03
-                          : Colors.black_17,
-                    },
+                    {width: (containerWidth - Spacing.M) / 7},
                   ]}
                   key={item}>
                   {Util.mapWeeKDate(item)}
-                </Text.Label2>
+                </Text>
               ))}
             </View>
             <MonthList
+              containerWidth={containerWidth}
               disabledWeekend={isDisabledWeekend}
               ref="MonthList"
               today={this.today}
@@ -309,22 +324,11 @@ export default class CalendarPro extends Component {
         </View>
         {!isOffLunar && (
           <View style={[styles.viewLunar]}>
-            <TouchableWithoutFeedback onPress={this.toggleLunarDate}>
-              <Image
-                tintColor={showLunar ? Colors.pink_03 : Colors.black_17}
-                source={
-                  showLunar
-                    ? IconSource.ic_checkbox_checked_24
-                    : IconSource.ic_checkbox_unchecked_24
-                }
-                style={styles.iconSelected}
-              />
-            </TouchableWithoutFeedback>
-            <Text.Description1
-              style={styles.txtLunar}
-              onPress={this.toggleLunarDate}>
-              {SwitchLanguage.showLunar}
-            </Text.Description1>
+            <CheckBox
+              onChange={this.toggleLunarDate}
+              value={showLunar}
+              label={translate('showLunar')}
+            />
           </View>
         )}
 
@@ -332,28 +336,42 @@ export default class CalendarPro extends Component {
           <ScrollView
             contentContainerStyle={styles.contentScroll}
             showsVerticalScrollIndicator={false}
-            enabledNestedScroll>
+            nestedScrollEnabled>
             {temp &&
               temp.length > 0 &&
-              temp.map((item, idx) => {
-                const labelHoliday = showLunar
-                  ? item.mixedLabel || item.label || ''
-                  : item.label || '';
-                const labelHighlight = showLunar ? item.highlight || '' : '';
-                const labelDate = `${
-                  item.day > 9 ? item.day : `0${item.day}`
-                }/${item.month > 9 ? item.month : `0${item.month}`}`;
-                return (
-                  <View style={styles.row} key={idx.toString()}>
-                    <Text.Description2 style={styles.txtMonthLunar}>
-                      {labelDate}
-                    </Text.Description2>
-                    <Text.Description2 style={styles.subTextLunar}>
-                      {`${labelHoliday} `}
-                    </Text.Description2>
-                  </View>
-                );
-              })}
+              temp.map(
+                (
+                  item: {
+                    mixedLabel: any;
+                    label: any;
+                    day: number;
+                    month: number;
+                  },
+                  idx: {toString: () => React.Key | null | undefined},
+                ) => {
+                  const labelHoliday = showLunar
+                    ? item.mixedLabel || item.label || ''
+                    : item.label || '';
+                  const labelDate = `${
+                    item.day > 9 ? item.day : `0${item.day}`
+                  }/${item.month > 9 ? item.month : `0${item.month}`}`;
+                  return (
+                    <View style={styles.row} key={idx.toString()}>
+                      <Text
+                        color={theme.colors.error.primary}
+                        typography={'description_s'}
+                        style={styles.txtMonthLunar}>
+                        {labelDate}
+                      </Text>
+                      <Text
+                        typography={'description_s'}
+                        style={styles.subTextLunar}>
+                        {`${translate(labelHoliday)}`}
+                      </Text>
+                    </View>
+                  );
+                },
+              )}
           </ScrollView>
         )}
       </View>
@@ -361,23 +379,6 @@ export default class CalendarPro extends Component {
   }
 }
 
-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: {
@@ -412,7 +413,6 @@ const styles = StyleSheet.create({
   },
   viewDate: {},
   textDay: {
-    width: (widthScreen - 38) / 7,
     textAlign: 'center',
   },
   viewDay: {