@momo-kits/calendar 0.0.55-beta.21 → 0.0.55-beta.22

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calendar",
-    "version": "0.0.55-beta.21",
+    "version": "0.0.55-beta.22",
     "private": false,
     "main": "index.js",
     "dependencies": {
@@ -16,4 +16,4 @@
     },
     "devDependencies": {},
     "license": "MoMo"
-}
+}

package/src/Calendar.js

@@ -1,8 +1,21 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { View, ScrollView, Platform, StyleSheet } from 'react-native';
+import {
+    View,
+    ScrollView,
+    Platform,
+    StyleSheet,
+    Dimensions,
+} from 'react-native';
 import moment from 'moment';
-import { Text, SwitchLanguage, Colors, Spacing, Radius } 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';
@@ -416,10 +429,19 @@ class Calendar extends Component {
             maxDate,
             doubleDate,
             isHideHeaderPanel,
+            style,
         } = this.props;
         const { isDoubleDateMode } = this.state;
+        const { width } = Dimensions.get('window');
         return (
-            <ScrollView style={{ flex: 1, backgroundColor: 'transparent' }}>
+            <ScrollView
+                style={[
+                    styles.scrollView,
+                    {
+                        width: width - ScaleSize(24),
+                    },
+                    style,
+                ]}>
                 <View
                     style={{
                         backgroundColor: Colors.black_01,
@@ -429,6 +451,7 @@ class Calendar extends Component {
                     {!isHideHeaderPanel && this.renderHeaderPanel()}
                 </View>
                 <CalendarPro
+                    priceList={priceList}
                     ref={this.calendarPicker}
                     startDate={doubleDate?.first}
                     endDate={doubleDate?.second}
@@ -437,7 +460,6 @@ class Calendar extends Component {
                     selectedDate={this.selectedDate}
                     isShowLunar={isShowLunar}
                     onCallbackCalendar={onCallbackCalendar}
-                    priceList={priceList}
                     labelFrom={labelFrom}
                     labelTo={labelTo}
                     isHideLabel={isHideLabel}
@@ -481,6 +503,7 @@ Calendar.propTypes = {
         PropTypes.string,
         PropTypes.instanceOf(Date),
     ]),
+    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 };
 
 Calendar.defaultProps = {
@@ -521,4 +544,9 @@ const styles = StyleSheet.create({
         paddingHorizontal: 12,
         paddingVertical: 8,
     },
+    scrollView: {
+        flex: 1,
+        backgroundColor: 'transparent',
+        alignSelf: 'center',
+    },
 });

package/src/CalendarPro.js

@@ -11,12 +11,12 @@ import {
 } from 'react-native';
 import Moment from 'moment';
 import {
-    Text,
     SwitchLanguage,
     LocalizedStrings,
-    Colors,
     Image,
     IconSource,
+    Text,
+    Colors,
     Spacing,
     Radius,
 } from '@momo-kits/core';
@@ -251,7 +251,7 @@ export default class CalendarPro extends Component {
                         onPressNextArrow={this.onPressNextArrow}
                     />
                     <View style={styles.blueSeperator} />
-                    <View style={{ paddingHorizontal: Spacing.M }}>
+                    <View>
                         <View style={styles.viewDay}>
                             {[1, 2, 3, 4, 5, 6, 7].map((item) => (
                                 <Text
@@ -293,10 +293,15 @@ export default class CalendarPro extends Component {
                     </View>
                 </View>
                 {!isOffLunar && (
-                    <View style={styles.viewLunar}>
+                    <View style={[styles.viewLunar]}>
                         <TouchableWithoutFeedback
                             onPress={this.toggleLunarDate}>
                             <Image
+                                tintColor={
+                                    showLunar
+                                        ? Colors.pink_05_b
+                                        : Colors.black_17
+                                }
                                 source={
                                     showLunar
                                         ? IconSource.ic_checkbox_checked_24
@@ -305,11 +310,11 @@ export default class CalendarPro extends Component {
                                 style={styles.iconSelected}
                             />
                         </TouchableWithoutFeedback>
-                        <Text.SubTitle
+                        <Text
                             style={styles.txtLunar}
                             onPress={this.toggleLunarDate}>
                             {SwitchLanguage.showLunar}
-                        </Text.SubTitle>
+                        </Text>
                     </View>
                 )}
 
@@ -327,12 +332,13 @@ export default class CalendarPro extends Component {
                                 const labelHighlight = showLunar
                                     ? item.highlight || ''
                                     : '';
-                                const labelDate =
-                                    LocalizedStrings.defaultLanguage === 'en'
-                                        ? `${Util.mapMonthShorten(
-                                              item.month,
-                                          )} ${item.day}`
-                                        : `${item.day} tháng ${item.month}`;
+                                const labelDate = `${
+                                    item.day > 9 ? item.day : `0${item.day}`
+                                }/${
+                                    item.month > 9
+                                        ? item.month
+                                        : `0${item.month}`
+                                }`;
                                 return (
                                     <View
                                         style={styles.row}
@@ -344,16 +350,6 @@ export default class CalendarPro extends Component {
                                         <Text.SubTitle
                                             style={styles.subTextLunar}>
                                             {`${labelHoliday} `}
-                                            {labelHighlight ? (
-                                                <Text
-                                                    style={{
-                                                        color: Colors.red_05,
-                                                    }}>
-                                                    {labelHighlight}
-                                                </Text>
-                                            ) : (
-                                                ''
-                                            )}
                                         </Text.SubTitle>
                                     </View>
                                 );
@@ -390,7 +386,7 @@ CalendarPro.defaultProps = {
 
 const styles = StyleSheet.create({
     row: { flexDirection: 'row' },
-    txtMonthLunar: { color: Colors.red_05, width: 80 },
+    txtMonthLunar: { color: Colors.red_05, marginRight: Spacing.S },
     subTextLunar: {
         // fontSize: 12,
         color: '#222222',
@@ -402,21 +398,20 @@ const styles = StyleSheet.create({
     txtLunar: {
         paddingLeft: 6,
         color: '#222222',
-        // fontSize: 12,
-        lineHeight: 14,
+        fontSize: 14,
     },
     viewLunar: {
         flexDirection: 'row',
         alignItems: 'center',
-        marginHorizontal: 12,
-        paddingVertical: 12,
-        borderBottomWidth: 1,
+        marginHorizontal: Spacing.M,
+        borderTopWidth: 1,
+        paddingTop: Spacing.M,
         borderStyle: 'solid',
-        borderColor: '#c7c7cd',
+        borderColor: Colors.black_04,
     },
     viewDate: {},
     textDay: {
-        // fontSize: 14,
+        fontSize: 12,
         lineHeight: 16,
         width: (widthScreen - 38) / 7,
         textAlign: 'center',

package/src/Day/index.js

@@ -1,8 +1,8 @@
 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 { View, TouchableHighlight } from 'react-native';
+import { Spacing, SwitchLanguage, Colors, Text } from '@momo-kits/core';
 import style from './style';
 
 class Day extends Component {
@@ -144,13 +144,18 @@ class Day extends Component {
                         <TouchableHighlight
                             style={[
                                 style.day,
+                                {
+                                    paddingVertical: !!price
+                                        ? Spacing.XS
+                                        : Spacing.S,
+                                },
                                 (this.isStart || this.isEnd) && style.focused,
                             ]}
                             underlayColor="rgba(255, 255, 255, 0.35)"
                             onPress={this.chooseDay}>
                             <>
                                 {this.lunarDate && this.showLunar && (
-                                    <Text
+                                    <Text.Caption
                                         style={[
                                             style.lunarDayText,
                                             (this.isLunarHoliday ||
@@ -162,24 +167,58 @@ class Day extends Component {
                                         {this.lunarDate.lunarDay === 1
                                             ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
                                             : this.lunarDate.lunarDay}
-                                    </Text>
+                                    </Text.Caption>
                                 )}
-                                <Text
+                                <Text.Title
                                     style={[
                                         style.dayText,
+                                        { paddingTop: !!price ? 4 : 0 },
                                         this.isWeekEnd && style.weekendDay,
                                         this.isSolarHoliday && style.weekendDay,
                                         (this.isStart || this.isEnd) &&
                                             style.focusedText,
                                     ]}>
                                     {text}
-                                </Text>
+                                </Text.Title>
+                                {!!price ? (
+                                    <Text.Caption
+                                        style={[
+                                            this.isValid && this.isInScope
+                                                ? style.price
+                                                : style.dayTextDisabled,
+                                            isBestPrice && {
+                                                color: Colors.pink_03,
+                                            },
+                                            (this.isStart || this.isEnd) && {
+                                                color: Colors.black_01,
+                                            },
+                                        ]}>
+                                        {price}
+                                    </Text.Caption>
+                                ) : (
+                                    <View
+                                        style={{
+                                            paddingBottom: this.props
+                                                .havePriceList
+                                                ? Spacing.S
+                                                : 0,
+                                        }}
+                                    />
+                                )}
                             </>
                         </TouchableHighlight>
                     ) : (
-                        <View style={[style.day]}>
+                        <View
+                            style={[
+                                style.day,
+                                {
+                                    paddingVertical: !!price
+                                        ? Spacing.XS + Spacing.XXS
+                                        : Spacing.S,
+                                },
+                            ]}>
                             {this.lunarDate && this.showLunar && text ? (
-                                <Text
+                                <Text.Caption
                                     style={[
                                         style.lunarDayText,
                                         style.dayTextDisabled,
@@ -187,27 +226,38 @@ class Day extends Component {
                                     {this.lunarDate.lunarDay === 1
                                         ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
                                         : this.lunarDate.lunarDay}
-                                </Text>
+                                </Text.Caption>
                             ) : (
                                 <View />
                             )}
-                            <Text
+                            <Text.Title
                                 style={[style.dayText, style.dayTextDisabled]}>
                                 {text}
-                            </Text>
+                            </Text.Title>
+                            {text && !!price ? (
+                                <Text.Caption
+                                    style={[
+                                        this.isValid && this.isInScope
+                                            ? style.price
+                                            : style.dayTextDisabled,
+                                        isBestPrice && {
+                                            color: Colors.pink_05_b,
+                                        },
+                                    ]}>
+                                    {price}
+                                </Text.Caption>
+                            ) : (
+                                <View
+                                    style={{
+                                        paddingBottom: this.props.havePriceList
+                                            ? Spacing.S
+                                            : 0,
+                                    }}
+                                />
+                            )}
                         </View>
                     )}
                 </View>
-
-                {this.isValid && this.isInScope && !!price && (
-                    <Text
-                        style={[
-                            style.price,
-                            isBestPrice && { color: Colors.pink_05_b },
-                        ]}>
-                        {price}
-                    </Text>
-                )}
             </View>
         );
     }

package/src/Day/style.js

@@ -1,9 +1,9 @@
 import { Dimensions } from 'react-native';
-import { Colors } from '@momo-kits/core';
+import { Spacing, Colors } from '@momo-kits/core';
 
 const dayWidth = (Dimensions.get('window').width - 38) / 7;
 const SCREEN_WIDTH = Dimensions.get('window').width;
-const SCREEN_DPI_WIDTH = (SCREEN_WIDTH * Dimensions.get('window').scale);
+const SCREEN_DPI_WIDTH = SCREEN_WIDTH * Dimensions.get('window').scale;
 const IPHONE_4_5_WIDTH = 640;
 const dayTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 13 : 15;
 const lunarTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10;
@@ -11,7 +11,8 @@ const priceTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10;
 const lineHeightDayText = 1.3 * dayTextSize;
 const lineHeightLunarText = 1.3 * lunarTextSize;
 const lineHeightPriceText = 1.3 * priceTextSize;
-const containerDayHeight = lineHeightDayText + lineHeightLunarText + lineHeightPriceText + 10;
+const containerDayHeight =
+    lineHeightDayText + lineHeightLunarText + lineHeightPriceText + 10;
 const heightDefault = lineHeightDayText + lineHeightLunarText;
 export default {
     dayContainer: {
@@ -22,55 +23,52 @@ export default {
     },
     day: {
         width: dayWidth,
-        paddingVertical: 5,
         overflow: 'hidden',
         justifyContent: 'center',
         alignItems: 'center',
         borderRadius: 4,
-        height: heightDefault + 5
     },
     dayText: {
-        fontSize: dayTextSize,
+        lineHeight: 24,
         textAlign: 'center',
-        fontWeight: 'bold',
-        color: '#222222'
     },
     lunarDayText: {
         width: dayWidth,
         textAlign: 'right',
-        fontSize: SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10,
-        paddingRight: 5,
-        color: '#222222'
+        paddingRight: Spacing.XS,
+        position: 'absolute',
+        top: Spacing.XXS,
+        lineHeight: 14,
     },
     todayText: {
-        color: 'blue'
+        color: 'blue',
     },
     weekendDay: {
-        color: '#e82956'
+        color: Colors.red_05,
     },
     dayTextDisabled: {
-        opacity: 0.2
+        opacity: 0.4,
     },
+
     focused: {
-        backgroundColor: Colors.pink_05_b
+        backgroundColor: Colors.pink_05_b,
     },
     focusedText: {
-        color: 'white'
+        fontWeight: 'bold',
+        color: 'white',
     },
     dayStartContainer: {
         borderTopLeftRadius: 4,
         borderBottomLeftRadius: 4,
-        backgroundColor: Colors.pink_09,
-        // height: heightDefault
+        backgroundColor: Colors.pink_05_b,
     },
     dayEndContainer: {
         borderTopRightRadius: 4,
         borderBottomRightRadius: 4,
-        backgroundColor: Colors.pink_09,
-        // height: heightDefault
+        backgroundColor: Colors.pink_05_b,
     },
     mid: {
-        backgroundColor: Colors.pink_09,
+        backgroundColor: Colors.pink_11,
         // height: heightDefault
     },
     departLabel: {
@@ -80,7 +78,7 @@ export default {
         height: 20,
         borderRadius: 10,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
     },
     returnLabel: {
         position: 'absolute',
@@ -91,7 +89,7 @@ export default {
         justifyContent: 'center',
         alignItems: 'center',
         top: 0,
-        right: 0
+        right: 0,
     },
     containerDayHeight,
     txtBack: {
@@ -105,7 +103,7 @@ export default {
         width: 15,
         height: 15,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
     },
     txtGo: {
         position: 'absolute',
@@ -118,12 +116,12 @@ export default {
         width: 15,
         height: 15,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
     },
     price: {
-        fontSize: priceTextSize,
-        lineHeight: lineHeightPriceText,
-        color: '#8d919d'
+        color: Colors.black_15,
+        marginTop: -4,
+        lineHeight: 14,
     },
-    lineHeightPriceText
+    lineHeightPriceText,
 };

package/src/HeaderControl.js

@@ -1,7 +1,8 @@
 import React, { useState, forwardRef, useImperativeHandle } from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import moment from 'moment';
-import { Text, Icon, Colors, Spacing, ScaleSize } from '@momo-kits/core';
+import { Icon, ScaleSize, Text, Colors, Spacing } from '@momo-kits/core';
+
 import Util from './Util';
 
 const HeaderControl = forwardRef(
@@ -33,7 +34,9 @@ const HeaderControl = forwardRef(
                             style={styles.icon}
                         />
                     </TouchableOpacity>
-                    <Text.H4 style={styles.txtHeader}>{headerFormat}</Text.H4>
+                    <Text.Title style={styles.txtHeader}>
+                        {headerFormat}
+                    </Text.Title>
                     <TouchableOpacity
                         style={styles.btnRight}
                         onPress={onPressNextArrow}>
@@ -55,10 +58,8 @@ const styles = StyleSheet.create({
     icon: { width: 24, height: 24, resizeMode: 'contain' },
     txtHeader: {
         // fontSize: 15,
-        lineHeight: 19,
         fontWeight: 'bold',
         textAlign: 'center',
-        color: Colors.black_17,
     },
     btnRight: {
         width: 36,
@@ -76,7 +77,7 @@ const styles = StyleSheet.create({
         height: ScaleSize(44),
         flexDirection: 'row',
         justifyContent: 'space-between',
-        backgroundColor: Colors.blue_10,
+        backgroundColor: Colors.blue_11,
         alignItems: 'center',
         borderRadius: 4,
     },

package/src/Month/index.js

@@ -1,17 +1,20 @@
 import React, { PureComponent } from 'react';
 
-import {
-    View
-} from 'react-native';
+import { View, Dimensions } from 'react-native';
 import moment from 'moment';
 import Day from '../Day';
+import { Spacing, ScaleSize } from '@momo-kits/core';
+
+const { width } = Dimensions.get('window');
 
 export default class Month extends PureComponent {
     constructor(props) {
         super(props);
         const { dateList } = props;
         this.rowArray = new Array(dateList.length / 7).fill('');
-        this.temp = this.rowArray.map((item, i) => dateList.slice(i * 7, i * 7 + 7));
+        this.temp = this.rowArray.map((item, i) =>
+            dateList.slice(i * 7, i * 7 + 7),
+        );
     }
 
     findHoliday = (date) => {
@@ -19,7 +22,9 @@ export default class Month extends PureComponent {
         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 holidays.find(
+                (item) => item.day === day && item.month === month,
+            );
         }
         return null;
     };
@@ -28,7 +33,7 @@ export default class Month extends PureComponent {
         const holiday = this.findHoliday(date);
         return {
             isSolarHoliday: !!(holiday && !holiday.lunar),
-            isLunarHoliday: !!(holiday && holiday.lunar)
+            isLunarHoliday: !!(holiday && holiday.lunar),
         };
     };
 
@@ -36,10 +41,9 @@ export default class Month extends PureComponent {
         <View
             style={{
                 flexDirection: 'row',
-                justifyContent: 'space-between'
+                justifyContent: 'space-between',
             }}
-            key={`row${index}`}
-        >
+            key={`row${index}`}>
             {dayList.map((item, i) => {
                 const keyDay = moment(item.date).format('YYYY-MM-DD');
                 const priceInfo = this.props?.priceListDate?.[keyDay];
@@ -48,6 +52,7 @@ export default class Month extends PureComponent {
                         {...this.props}
                         {...this.checkHoliday(item.date)}
                         date={item.date}
+                        havePriceList={!!this.props.priceListDate}
                         lunarDate={item.lunarDate}
                         empty={item.empty}
                         key={`day${i.toString()}`}
@@ -56,25 +61,25 @@ export default class Month extends PureComponent {
                         isBestPrice={priceInfo?.isBestPrice}
                     />
                 );
-            }
-            )}
+            })}
         </View>
     );
-
     render() {
-        const {
-            month
-        } = this.props;
+        const { month } = this.props;
         if (month) {
             return (
                 <View>
-                    <View style={{ paddingHorizontal: 7, paddingVertical: 5 }}>
-                        {this.temp.map((item, i) => this.renderDayRow(item, i)
-                        )}
+                    <View
+                        style={{
+                            paddingHorizontal: Spacing.S,
+                            paddingVertical: 5,
+                            width: width - ScaleSize(24),
+                        }}>
+                        {this.temp.map((item, i) => this.renderDayRow(item, i))}
                     </View>
                 </View>
             );
         }
-        return (<View />);
+        return <View />;
     }
 }

package/src/MonthList.js

@@ -1,12 +1,13 @@
 /* eslint-disable react/no-did-update-set-state */
 import React, { Component } from 'react';
-import { FlatList, Dimensions, Platform } from 'react-native';
+import { FlatList, Dimensions, Platform, View } from 'react-native';
 import moment from 'moment';
 import Month from './Month';
 import style from './Day/style';
 import LunarDateConverter from './LunarDateConverter';
+import { ScaleSize } from '@momo-kits/core';
 
-const ITEM_WIDTH = Dimensions.get('window').width - 24;
+const ITEM_WIDTH = Dimensions.get('window').width - ScaleSize(24);
 const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
 
 const converter = new LunarDateConverter();
@@ -266,6 +267,7 @@ export default class MonthList extends Component {
                 onViewableItemsChanged={this.getCurrentVisibleMonth}
                 onScrollToIndexFailed={() => {}}
                 // removeClippedSubviews
+                scrollEnabled
                 initialNumToRender={1}
                 maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
                 windowSize={3}

package/src/TabHeader.js

@@ -55,36 +55,30 @@ export default class TabHeader extends React.Component {
                         flex: 1,
                         backgroundColor: Colors.white,
                     }}>
-                    <Text
+                    <Text.SubTitle
                         style={{
                             fontSize: 12,
                             lineHeight: 16,
                             color: Colors.black_09,
                         }}>
                         {label}
-                    </Text>
-                    <Text
-                        weight={active ? 'semibold' : 'regular'}
+                    </Text.SubTitle>
+                    <Text.Title
+                        weight={active ? 'bold' : 'regular'}
                         style={{
                             marginTop: 3,
-                            fontSize: 14,
-                            color: Colors.black_17,
                         }}>
-                        <Text
-                            weight={active ? 'semibold' : 'regular'}
-                            style={{
-                                color: Colors.black_17,
-                            }}>
+                        <Text.Title weight={active ? 'bold' : 'regular'}>
                             {`${
                                 dayOfWeekFromState ||
                                 dayOfWeekFromDefault ||
                                 '--'
                             } `}
-                        </Text>
+                        </Text.Title>
                         {formattedDateFromState ||
                             formattedDateFromDefault ||
                             '--/--/----'}
-                    </Text>
+                    </Text.Title>
                 </View>
             </TouchableWithoutFeedback>
         );

package/src/calendarPicker/Day.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View, Text } from 'react-native';
 import PropTypes from 'prop-types';
-import { Text } from '@momo-kits/core';
 import styles from './styles';
 
 export default class Day extends Component {

package/src/calendarPicker/WeekDaysLabels.js

@@ -9,11 +9,11 @@ const colorDay = '#9199a2';
 const WeekDaysLabels = () => (
     <View style={styles.dayLabelsWrapper}>
         {WEEKDAYS.map((day, key) => (
-            <Text.Title
+            <Text.Title1
                 key={key.toString()}
                 style={[styles.dayLabels, { color: colorDay, fontSize: 16 }]}>
                 {day}
-            </Text.Title>
+            </Text.Title1>
         ))}
     </View>
 );