@momo-kits/calendar 0.79.4 → 0.79.6

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

@@ -1,10 +1,11 @@
 import React, {Component} from 'react';
 
 import {TouchableHighlight, View} from 'react-native';
-import {Colors, Spacing, Text} from '@momo-kits/core-v2';
+import {ApplicationContext, Colors, Spacing, Text} from '@momo-kits/foundation';
 import style from './style';
 
 class Day extends Component {
+  static contextType = ApplicationContext;
   constructor(props) {
     super(props);
     this.statusCheck();
@@ -108,69 +109,81 @@ class Day extends Component {
   }
 
   render() {
-    const {date, empty, price, isBestPrice, disabledWeekend} = this.props;
+    const {date, empty, price, isBestPrice, disabledWeekend, width} =
+      this.props;
+    const {theme, translate} = this.context;
 
     const text = date ? date.date() : '';
+    let textDayColor = theme.colors.text.default;
+    let lunarDayColor = theme.colors.text.hint;
+
+    if (this.isWeekEnd || this.isSolarHoliday || this.isWeekEnd) {
+      textDayColor = theme.colors.error.primary;
+    }
+
+    if (this.isStart || this.isEnd) {
+      textDayColor = Colors.black_01;
+      lunarDayColor = Colors.black_01;
+    }
+
+    if (this.isLunarHoliday || this.isLunarDayStart) {
+      lunarDayColor = theme.colors.error.primary;
+    }
+
     return (
-      <View style={style.dayContainer}>
+      <View style={[style.dayContainer, {width, borderWidth: 1}]}>
         <View
           style={[
-            this.isMid && !empty && style.mid,
+            this.isMid &&
+              !empty && {backgroundColor: theme.colors.background.tonal},
             this.isStartPart && style.dayStartContainer,
             this.isEnd && style.dayEndContainer,
           ]}>
           {this.isValid && this.isInScope ? (
             <TouchableHighlight
-              disabled={disabledWeekend && this.isWeekEnd}
               style={[
                 style.day,
                 {
                   paddingVertical: !!price ? Spacing.XS : Spacing.S,
                 },
-                (this.isStart || this.isEnd) && style.focused,
+                (this.isStart || this.isEnd) && {
+                  backgroundColor: theme.colors.primary,
+                },
               ]}
               underlayColor="rgba(255, 255, 255, 0.35)"
               onPress={this.chooseDay}>
               <>
                 {this.lunarDate && this.showLunar && (
-                  <Text.Label4
-                    style={[
-                      style.lunarDayText,
-                      (this.isLunarHoliday || this.isLunarDayStart) &&
-                        style.weekendDay,
-                      (this.isStart || this.isEnd) && style.focusedText,
-                    ]}>
+                  <Text
+                    color={lunarDayColor}
+                    typography={'label_xxs'}
+                    style={style.lunarDayText}>
                     {this.lunarDate.lunarDay === 1
                       ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
                       : this.lunarDate.lunarDay}
-                  </Text.Label4>
+                  </Text>
                 )}
-                <Text.Label1
-                  style={[
-                    style.dayText,
-                    {paddingTop: !!price ? 4 : 0},
-                    this.isWeekEnd && style.weekendDay,
-                    this.isSolarHoliday && style.weekendDay,
-                    (this.isStart || this.isEnd) && style.focusedText,
-                    this.isWeekEnd && disabledWeekend && style.disabledWeekend,
-                  ]}>
+                <Text
+                  color={textDayColor}
+                  typography={'header_s'}
+                  style={[style.dayText, {paddingTop: !!price ? 4 : 0}]}>
                   {text}
-                </Text.Label1>
+                </Text>
                 {!!price ? (
-                  <Text.Label3
+                  <Text
                     style={[
                       this.isValid && this.isInScope
                         ? style.price
                         : style.dayTextDisabled,
                       isBestPrice && {
-                        color: Colors.pink_03,
+                        color: theme.colors.primary,
                       },
                       (this.isStart || this.isEnd) && {
                         color: Colors.black_01,
                       },
                     ]}>
                     {price}
-                  </Text.Label3>
+                  </Text>
                 ) : (
                   <View
                     style={{
@@ -191,30 +204,32 @@ class Day extends Component {
                 },
               ]}>
               {this.lunarDate && this.showLunar && text ? (
-                <Text.Label4
-                  style={[style.lunarDayText, style.dayTextDisabled]}>
+                <Text
+                  color={theme.colors.text.disable}
+                  typography={'label_xxs'}
+                  style={style.lunarDayText}>
                   {this.lunarDate.lunarDay === 1
                     ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
                     : this.lunarDate.lunarDay}
-                </Text.Label4>
+                </Text>
               ) : (
                 <View />
               )}
-              <Text.Action2 style={[style.dayText, style.dayTextDisabled]}>
+              <Text color={theme.colors.text.disable} style={style.dayText}>
                 {text}
-              </Text.Action2>
+              </Text>
               {text && !!price ? (
-                <Text.Label3
+                <Text
                   style={[
                     this.isValid && this.isInScope
                       ? style.price
                       : style.dayTextDisabled,
                     isBestPrice && {
-                      color: Colors.pink_03,
+                      color: theme.colors.primary,
                     },
                   ]}>
                   {price}
-                </Text.Label3>
+                </Text>
               ) : (
                 <View
                   style={{

package/src/Day/{style.js → style.ts}

@@ -1,5 +1,5 @@
-import {Dimensions} from 'react-native';
-import {Spacing, Colors} from '@momo-kits/core-v2';
+import {Dimensions, StyleSheet} from 'react-native';
+import {Spacing, Colors, scaleSize} from '@momo-kits/foundation';
 
 const dayWidth = (Dimensions.get('window').width - 38) / 7;
 const SCREEN_WIDTH = Dimensions.get('window').width;
@@ -14,17 +14,13 @@ const lineHeightPriceText = 1.3 * priceTextSize;
 const containerDayHeight =
   lineHeightDayText + lineHeightLunarText + lineHeightPriceText + 10;
 const heightDefault = lineHeightDayText + lineHeightLunarText;
-export default {
+export default StyleSheet.create({
   dayContainer: {
-    width: dayWidth,
     borderRadius: 4,
     alignItems: 'center',
-    height: containerDayHeight,
+    height: scaleSize(48),
   },
-  disabledWeekend: {color: Colors.red_07},
   day: {
-    width: dayWidth,
-    overflow: 'hidden',
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 4,
@@ -38,25 +34,15 @@ export default {
     paddingRight: Spacing.XS,
     position: 'absolute',
     top: Spacing.XXS,
-    color: Colors.black_12,
   },
   todayText: {
     color: 'blue',
   },
-  weekendDay: {
-    color: Colors.red_05,
-  },
-  dayTextDisabled: {
-    opacity: 0.4,
-  },
 
   focused: {
     backgroundColor: Colors.pink_03,
   },
-  focusedText: {
-    fontWeight: 'bold',
-    color: 'white',
-  },
+
   dayStartContainer: {
     borderTopLeftRadius: 4,
     borderBottomLeftRadius: 4,
@@ -124,4 +110,4 @@ export default {
     lineHeight: 14,
   },
   lineHeightPriceText,
-};
+});

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

@@ -1,7 +1,7 @@
-import React, {useState, forwardRef, useImperativeHandle} from 'react';
-import {View, TouchableOpacity, StyleSheet} from 'react-native';
+import React, {forwardRef, useImperativeHandle, useState} from 'react';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import moment from 'moment';
-import {Icon, ScaleSize, Text, Colors, Spacing} from '@momo-kits/core-v2';
+import {Colors, Icon, scaleSize, Text} from '@momo-kits/foundation';
 
 import Util from './Util';
 
@@ -26,21 +26,13 @@ const HeaderControl = forwardRef(
       return (
         <View style={styles.container}>
           <TouchableOpacity style={styles.btnLeft} onPress={onPressBackArrow}>
-            <Icon
-              name="24_arrow_chevron_left_small"
-              tintColor={Colors.black_17}
-              style={styles.icon}
-            />
+            <Icon source="24_arrow_chevron_left_small" />
           </TouchableOpacity>
-          <Text.HeaderText2 weight="semibold" style={styles.txtHeader}>
+          <Text typography={'header_s'} style={styles.txtHeader}>
             {headerFormat}
-          </Text.HeaderText2>
+          </Text>
           <TouchableOpacity style={styles.btnRight} onPress={onPressNextArrow}>
-            <Icon
-              name="24_arrow_chevron_right_small"
-              tintColor={Colors.black_17}
-              style={styles.icon}
-            />
+            <Icon source="24_arrow_chevron_right_small" />
           </TouchableOpacity>
         </View>
       );
@@ -51,13 +43,7 @@ const HeaderControl = forwardRef(
 
 export default HeaderControl;
 const styles = StyleSheet.create({
-  icon: {
-    width: 24,
-    height: 24,
-    resizeMode: 'contain',
-  },
   txtHeader: {
-    // fontSize: 15,
     textAlign: 'center',
   },
   btnRight: {
@@ -73,7 +59,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   container: {
-    height: ScaleSize(44),
+    height: scaleSize(44),
     flexDirection: 'row',
     justifyContent: 'space-between',
     backgroundColor: Colors.blue_10,

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

@@ -3,9 +3,7 @@ import React, {PureComponent} from 'react';
 import {View, Dimensions} from 'react-native';
 import moment from 'moment';
 import Day from '../Day';
-import {Spacing, ScaleSize} from '@momo-kits/core-v2';
-
-const {width} = Dimensions.get('window');
+import {Spacing, scaleSize} from '@momo-kits/foundation';
 
 export default class Month extends PureComponent {
   constructor(props) {
@@ -45,7 +43,7 @@ export default class Month extends PureComponent {
       {dayList.map((item, i) => {
         const keyDay = moment(item.date).format('YYYY-MM-DD');
         const priceInfo = this.props?.priceListDate?.[keyDay];
-
+        const itemWidth = (this.props.containerWidth - Spacing.M) / 7;
         return (
           <Day
             {...this.props}
@@ -59,6 +57,7 @@ export default class Month extends PureComponent {
             index={i}
             price={priceInfo?.priceAsString}
             isBestPrice={priceInfo?.isBestPrice}
+            width={itemWidth}
           />
         );
       })}
@@ -75,7 +74,7 @@ export default class Month extends PureComponent {
             style={{
               paddingHorizontal: Spacing.S,
               paddingVertical: 5,
-              width: width - ScaleSize(24),
+              width: '100%',
             }}>
             {this.temp.map((item, i) =>
               this.renderDayRow(item, i, disabledWeekend),

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

@@ -5,9 +5,9 @@ import moment from 'moment';
 import Month from './Month';
 import style from './Day/style';
 import LunarDateConverter from './LunarDateConverter';
-import {ScaleSize} from '@momo-kits/core-v2';
+import {scaleSize} from '@momo-kits/foundation';
 
-const ITEM_WIDTH = Dimensions.get('window').width - ScaleSize(24);
+const ITEM_WIDTH = Dimensions.get('window').width - scaleSize(24);
 const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
 
 const converter = new LunarDateConverter();
@@ -30,12 +30,14 @@ export default class MonthList extends Component {
   }
 
   renderMonth = ({item, index}) => {
-    const {isDoubleDateMode, priceList, disabledWeekend} = this.props;
+    const {isDoubleDateMode, priceList, disabledWeekend, containerWidth} =
+      this.props;
     const keyMonth = moment(item.date)?.format('YYYY-MM');
     const priceListDate = priceList?.[keyMonth]?.day;
 
     return (
       <Month
+        containerWidth={containerWidth}
         disabledWeekend={disabledWeekend}
         {...this.props}
         key={index}

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

@@ -2,9 +2,10 @@ import React from 'react';
 import {TouchableWithoutFeedback, View} from 'react-native';
 import Moment from 'moment';
 import Util from './Util';
-import {Colors, Text} from '@momo-kits/core-v2';
+import {ApplicationContext, Colors, Text} from '@momo-kits/foundation';
 
 export default class TabHeader extends React.Component {
+  static contextType = ApplicationContext;
   constructor(props) {
     super(props);
     this.state = {
@@ -35,15 +36,17 @@ export default class TabHeader extends React.Component {
   render() {
     const {label, disabled} = this.props;
     const {date, active} = this.state;
+    const {theme, translate} = this.context;
+
     const formattedDateFromState = date ? date.format('DD/MM/YYYY') : '';
     const formattedDateFromDefault = this.defaultDate
       ? this.defaultDate.format('DD/MM/YYYY')
       : '';
     const dayOfWeekFromState = date
-      ? `${Util.WEEKDAYSFROMMOMENT[date.day()]} -`
+      ? `${translate(Util.WEEKDAYSFROMMOMENT[date.day()])} -`
       : '';
     const dayOfWeekFromDefault = this.defaultDate
-      ? `${Util.WEEKDAYSFROMMOMENT[this.defaultDate.day()]} -`
+      ? `${translate(Util.WEEKDAYSFROMMOMENT[this.defaultDate.day()])} -`
       : '';
 
     return (
@@ -51,20 +54,15 @@ export default class TabHeader extends React.Component {
         <View
           style={{
             flex: 1,
-            backgroundColor: Colors.white,
+            backgroundColor: theme.colors.background.surface,
           }}>
-          <Text.Description2
-            style={{
-              fontSize: 12,
-              lineHeight: 16,
-              color: Colors.black_12,
-            }}>
-            {label}
-          </Text.Description2>
-          <Text.Description1 style={{fontWeight: active ? '600' : '400'}}>
+          <Text typography={'description_s'} color={Colors.black_12}>
+            {translate(label)}
+          </Text>
+          <Text typography={'header_s'}>
             {`${dayOfWeekFromState || dayOfWeekFromDefault || '--'} `}
             {formattedDateFromState || formattedDateFromDefault || '--/--/----'}
-          </Text.Description1>
+          </Text>
         </View>
       </TouchableWithoutFeedback>
     );

package/src/{holidayData.js → holidayData.ts}

@@ -1,80 +1,78 @@
-import {SwitchLanguage} from '@momo-kits/core-v2';
-
 module.exports = {
   solar: {
     1: [
       {
         day: 1,
         month: 1,
-        label: SwitchLanguage.newYear,
+        label: 'newYear',
       },
     ],
     2: [
       {
         day: 14,
         month: 2,
-        label: SwitchLanguage.valentine,
+        label: 'valentine',
       },
     ],
     3: [
       {
         day: 8,
         month: 3,
-        label: SwitchLanguage.womenDay,
+        label: 'womenDay',
       },
     ],
     4: [
       {
         day: 30,
         month: 4,
-        label: SwitchLanguage.liberationDay,
+        label: 'liberationDay',
       },
     ],
     5: [
       {
         day: 1,
         month: 5,
-        label: SwitchLanguage.laborDay,
+        label: 'laborDay',
       },
     ],
     6: [
       {
         day: 1,
         month: 6,
-        label: SwitchLanguage.childrenDay,
+        label: 'childrenDay',
       },
     ],
     9: [
       {
         day: 2,
         month: 9,
-        label: SwitchLanguage.nationalDay,
+        label: 'nationalDay',
       },
     ],
     10: [
       {
         day: 20,
         month: 10,
-        label: SwitchLanguage.womenDayVN,
+        label: 'womenDayVN',
       },
     ],
     11: [
       {
         day: 20,
         month: 11,
-        label: SwitchLanguage.teacherDay,
+        label: 'teacherDay',
       },
     ],
     12: [
       {
         day: 24,
         month: 12,
-        label: SwitchLanguage.christmasEve,
+        label: 'christmasEve',
       },
       {
         day: 25,
         month: 12,
-        label: SwitchLanguage.christmas,
+        label: 'christmas',
       },
     ],
   },
@@ -83,42 +81,42 @@ module.exports = {
       lunarDay: 30,
       lunarMonth: 12,
       lunar: true,
-      label: SwitchLanguage.lunarNewYear,
+      label: 'lunarNewYear',
       highlight: '(30/12)',
     },
     {
       lunarDay: 1,
       lunarMonth: 1,
       lunar: true,
-      label: SwitchLanguage.lunarNewYear,
+      label: 'lunarNewYear',
       highlight: '(1/1)',
     },
     {
       lunarDay: 2,
       lunarMonth: 1,
       lunar: true,
-      label: SwitchLanguage.lunarNewYear,
+      label: 'lunarNewYear',
       highlight: '(2/1)',
     },
     {
       lunarDay: 3,
       lunarMonth: 1,
       lunar: true,
-      label: SwitchLanguage.lunarNewYear,
+      label: 'lunarNewYear',
       highlight: '(3/1)',
     },
     {
       lunarDay: 4,
       lunarMonth: 1,
       lunar: true,
-      label: SwitchLanguage.lunarNewYear,
+      label: 'lunarNewYear',
       highlight: '(4/1)',
     },
     {
       lunarDay: 10,
       lunarMonth: 3,
       lunar: true,
-      label: SwitchLanguage.hungKingDay,
+      label: 'hungKingDay',
       highlight: '(10/3)',
     },
   ],

package/types.ts

@@ -0,0 +1,70 @@
+import Moment from 'moment';
+import {ViewStyle} from 'react-native';
+
+export type CalendarProProps = {
+  startDate: Moment.Moment | number | null;
+  endDate: Moment.Moment | number | null;
+  maxDate: Date;
+  minDate: Date;
+  format: string;
+  isShowLunar?: boolean;
+  selectedDate: Date;
+  isDoubleDateMode?: boolean;
+  onDateChange: (day: number) => void;
+  priceList: any;
+  labelFrom?: string;
+  labelTo?: string;
+  isHideLabel?: boolean;
+  isHideHoliday?: boolean;
+  isOffLunar?: boolean;
+  disabledWeekend?: boolean;
+  onCallbackCalendar?: (lunar: string, nextStateShowLunar: boolean) => void;
+  containerWidth: number;
+};
+
+export type CalendarProState = {
+  startDate?: Moment.Moment | number | null;
+  endDate?: Moment.Moment | number | null;
+  showLunar?: boolean;
+  tabSelected?: number;
+  holidays?: any[];
+  ownUpdate?: boolean;
+  temp?: any;
+  headerKey?: string;
+};
+
+export type DoubleDate = {
+  first: Moment.Moment | Date | null;
+  second: Moment.Moment | Date | null;
+};
+
+export type CalendarProps = {
+  doubleDate: DoubleDate;
+  selectedDate: Moment.Moment;
+  mode: 'doubleDate' | 'singleDate';
+  id: number;
+  onChangeTab: (id: number) => void;
+  onDateChange: (date: DoubleDate | Date) => void;
+  onCTAStateChange: (b: boolean) => void;
+  onCallbackCalendar: (type: string, isDoubleDateMode: boolean) => void;
+  headerFrom?: string;
+  headerTo?: string;
+  isOffLunar?: boolean;
+  isHideHoliday?: boolean;
+  isHiddenSwitch?: boolean;
+  isShowLunar?: boolean;
+  priceList?: any;
+  labelFrom?: string;
+  labelTo?: string;
+  isHideLabel?: boolean;
+  minDate: Date;
+  maxDate: Date;
+  isHideHeaderPanel?: boolean;
+  disabledWeekend?: boolean;
+  style: ViewStyle | ViewStyle[];
+};
+
+export type CalendarState = {
+  isDoubleDateMode: boolean;
+  containerWidth: number;
+};

package/index.js

@@ -1,4 +0,0 @@
-import Calendar from './src/Calendar';
-import CalendarPicker from './src/calendarPicker/index';
-
-export {Calendar, CalendarPicker};