@momo-kits/calendar 0.0.62-beta.1 → 0.0.62-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calendar",
-    "version": "0.0.62-beta.1",
+    "version": "0.0.62-beta.4",
     "private": false,
     "main": "index.js",
     "dependencies": {
@@ -12,7 +12,7 @@
         "react": "16.9.0",
         "react-native": ">=0.55",
         "prop-types": "^15.7.2",
-        "@momo-kits/core-v2": ">=0.0.5-beta"
+        "@momo-kits/core": ">=0.0.5-beta"
     },
     "devDependencies": {},
     "license": "MoMo"

package/src/Calendar.js

@@ -15,7 +15,7 @@ import {
     Spacing,
     Radius,
     ScaleSize,
-} from '@momo-kits/core-v2';
+} from '@momo-kits/core';
 import Switch from '@momo-kits/switch';
 import CalendarPro from './CalendarPro';
 import TabHeader from './TabHeader';
@@ -349,9 +349,9 @@ class Calendar extends Component {
         return (
             <View style={styles.headerContainer}>
                 <View style={styles.viewSwitch}>
-                    <Text.Label1 weight="medium" style={styles.textSwitch}>
+                    <Text.Title weight="medium" style={styles.textSwitch}>
                         {SwitchLanguage.chooseRoundtrip}
-                    </Text.Label1>
+                    </Text.Title>
                     <Switch
                         value={isDoubleDateMode}
                         onChange={this.toggleSelectionDateMode}

package/src/CalendarPro.js

@@ -19,7 +19,7 @@ import {
     Colors,
     Spacing,
     Radius,
-} from '@momo-kits/core-v2';
+} from '@momo-kits/core';
 import MonthList from './MonthList';
 import HeaderControl from './HeaderControl';
 import LunarDateConverter from './LunarDateConverter';
@@ -254,20 +254,19 @@ 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
                                     style={[
                                         styles.textDay,
                                         {
                                             color:
                                                 item === 6 || item === 7
-                                                    ? Colors.red_03
-                                                    : Colors.black_17,
+                                                    ? Colors.red_05
+                                                    : Colors.black_12,
                                         },
                                     ]}
                                     key={item}>
                                     {Util.mapWeeKDate(item)}
-                                </Text.Label2>
+                                </Text>
                             ))}
                         </View>
                         <MonthList
@@ -299,7 +298,9 @@ export default class CalendarPro extends Component {
                             onPress={this.toggleLunarDate}>
                             <Image
                                 tintColor={
-                                    showLunar ? Colors.pink_03 : Colors.black_17
+                                    showLunar
+                                        ? Colors.pink_05_b
+                                        : Colors.black_17
                                 }
                                 source={
                                     showLunar
@@ -309,11 +310,11 @@ export default class CalendarPro extends Component {
                                 style={styles.iconSelected}
                             />
                         </TouchableWithoutFeedback>
-                        <Text.Description1
+                        <Text
                             style={styles.txtLunar}
                             onPress={this.toggleLunarDate}>
                             {SwitchLanguage.showLunar}
-                        </Text.Description1>
+                        </Text>
                     </View>
                 )}
 
@@ -342,14 +343,14 @@ export default class CalendarPro extends Component {
                                     <View
                                         style={styles.row}
                                         key={idx.toString()}>
-                                        <Text.Description2
+                                        <Text.SubTitle
                                             style={styles.txtMonthLunar}>
                                             {labelDate}
-                                        </Text.Description2>
-                                        <Text.Description2
+                                        </Text.SubTitle>
+                                        <Text.SubTitle
                                             style={styles.subTextLunar}>
                                             {`${labelHoliday} `}
-                                        </Text.Description2>
+                                        </Text.SubTitle>
                                     </View>
                                 );
                             })}
@@ -385,9 +386,12 @@ CalendarPro.defaultProps = {
 
 const styles = StyleSheet.create({
     row: { flexDirection: 'row' },
-    txtMonthLunar: { color: Colors.red_03, marginRight: Spacing.S },
+    txtMonthLunar: { color: Colors.red_05, marginRight: Spacing.S },
     subTextLunar: {
-        color: Colors.black_17,
+        // fontSize: 12,
+        color: '#222222',
+        paddingLeft: 6,
+        flexShrink: 1,
     },
     contentScroll: { paddingHorizontal: 12, paddingVertical: 10 },
     iconSelected: { width: 24, height: 24, resizeMode: 'cover' },
@@ -407,8 +411,11 @@ const styles = StyleSheet.create({
     },
     viewDate: {},
     textDay: {
+        fontSize: 12,
+        lineHeight: 16,
         width: (widthScreen - 38) / 7,
         textAlign: 'center',
+        fontWeight: 'bold',
     },
     viewDay: {
         flexDirection: 'row',

package/src/Day/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import { View, TouchableHighlight } from 'react-native';
-import { Spacing, SwitchLanguage, Colors, Text } from '@momo-kits/core-v2';
+import { Spacing, SwitchLanguage, Colors, Text } from '@momo-kits/core';
 import style from './style';
 
 class Day extends Component {
@@ -156,7 +156,7 @@ class Day extends Component {
                             onPress={this.chooseDay}>
                             <>
                                 {this.lunarDate && this.showLunar && (
-                                    <Text.Label4
+                                    <Text.Caption
                                         style={[
                                             style.lunarDayText,
                                             (this.isLunarHoliday ||
@@ -168,9 +168,9 @@ class Day extends Component {
                                         {this.lunarDate.lunarDay === 1
                                             ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
                                             : this.lunarDate.lunarDay}
-                                    </Text.Label4>
+                                    </Text.Caption>
                                 )}
-                                <Text.Label1
+                                <Text.Title
                                     style={[
                                         style.dayText,
                                         { paddingTop: !!price ? 4 : 0 },
@@ -180,9 +180,9 @@ class Day extends Component {
                                             style.focusedText,
                                     ]}>
                                     {text}
-                                </Text.Label1>
+                                </Text.Title>
                                 {!!price ? (
-                                    <Text.Label3
+                                    <Text.Caption
                                         style={[
                                             this.isValid && this.isInScope
                                                 ? style.price
@@ -195,7 +195,7 @@ class Day extends Component {
                                             },
                                         ]}>
                                         {price}
-                                    </Text.Label3>
+                                    </Text.Caption>
                                 ) : (
                                     <View
                                         style={{
@@ -219,7 +219,7 @@ class Day extends Component {
                                 },
                             ]}>
                             {this.lunarDate && this.showLunar && text ? (
-                                <Text.Label4
+                                <Text.Caption
                                     style={[
                                         style.lunarDayText,
                                         style.dayTextDisabled,
@@ -227,26 +227,26 @@ class Day extends Component {
                                     {this.lunarDate.lunarDay === 1
                                         ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
                                         : this.lunarDate.lunarDay}
-                                </Text.Label4>
+                                </Text.Caption>
                             ) : (
                                 <View />
                             )}
-                            <Text.Action2
+                            <Text.Title
                                 style={[style.dayText, style.dayTextDisabled]}>
                                 {text}
-                            </Text.Action2>
+                            </Text.Title>
                             {text && !!price ? (
-                                <Text.Label3
+                                <Text.Caption
                                     style={[
                                         this.isValid && this.isInScope
                                             ? style.price
                                             : style.dayTextDisabled,
                                         isBestPrice && {
-                                            color: Colors.pink_03,
+                                            color: Colors.pink_05_b,
                                         },
                                     ]}>
                                     {price}
-                                </Text.Label3>
+                                </Text.Caption>
                             ) : (
                                 <View
                                     style={{

package/src/Day/style.js

@@ -1,5 +1,5 @@
 import { Dimensions } from 'react-native';
-import { Spacing, Colors } from '@momo-kits/core-v2';
+import { Spacing, Colors } from '@momo-kits/core';
 
 const dayWidth = (Dimensions.get('window').width - 38) / 7;
 const SCREEN_WIDTH = Dimensions.get('window').width;
@@ -29,6 +29,7 @@ export default {
         borderRadius: 4,
     },
     dayText: {
+        lineHeight: 24,
         textAlign: 'center',
     },
     lunarDayText: {
@@ -37,7 +38,7 @@ export default {
         paddingRight: Spacing.XS,
         position: 'absolute',
         top: Spacing.XXS,
-        color: Colors.black_12,
+        lineHeight: 14,
     },
     todayText: {
         color: 'blue',
@@ -50,7 +51,7 @@ export default {
     },
 
     focused: {
-        backgroundColor: Colors.pink_03,
+        backgroundColor: Colors.pink_05_b,
     },
     focusedText: {
         fontWeight: 'bold',
@@ -59,15 +60,15 @@ export default {
     dayStartContainer: {
         borderTopLeftRadius: 4,
         borderBottomLeftRadius: 4,
-        backgroundColor: Colors.pink_03,
+        backgroundColor: Colors.pink_05_b,
     },
     dayEndContainer: {
         borderTopRightRadius: 4,
         borderBottomRightRadius: 4,
-        backgroundColor: Colors.pink_03,
+        backgroundColor: Colors.pink_05_b,
     },
     mid: {
-        backgroundColor: Colors.pink_09,
+        backgroundColor: Colors.pink_10,
         // height: heightDefault
     },
     departLabel: {

package/src/HeaderControl.js

@@ -1,7 +1,7 @@
 import React, { useState, forwardRef, useImperativeHandle } from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import moment from 'moment';
-import { Icon, ScaleSize, Text, Colors, Spacing } from '@momo-kits/core-v2';
+import { Icon, ScaleSize, Text, Colors, Spacing } from '@momo-kits/core';
 
 import Util from './Util';
 
@@ -34,11 +34,9 @@ const HeaderControl = forwardRef(
                             style={styles.icon}
                         />
                     </TouchableOpacity>
-                    <Text.HeaderText2
-                        weight="semibold"
-                        style={styles.txtHeader}>
+                    <Text.Title style={styles.txtHeader}>
                         {headerFormat}
-                    </Text.HeaderText2>
+                    </Text.Title>
                     <TouchableOpacity
                         style={styles.btnRight}
                         onPress={onPressNextArrow}>
@@ -60,6 +58,7 @@ const styles = StyleSheet.create({
     icon: { width: 24, height: 24, resizeMode: 'contain' },
     txtHeader: {
         // fontSize: 15,
+        fontWeight: 'bold',
         textAlign: 'center',
     },
     btnRight: {
@@ -78,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

@@ -3,7 +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';
+import { Spacing, ScaleSize } from '@momo-kits/core';
 
 const { width } = Dimensions.get('window');
 

package/src/MonthList.js

@@ -5,7 +5,7 @@ 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/core';
 
 const ITEM_WIDTH = Dimensions.get('window').width - ScaleSize(24);
 const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;

package/src/TabHeader.js

@@ -2,7 +2,7 @@ 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 { Colors, Text } from '@momo-kits/core';
 
 export default class TabHeader extends React.Component {
     constructor(props) {
@@ -55,23 +55,26 @@ export default class TabHeader extends React.Component {
                         flex: 1,
                         backgroundColor: Colors.white,
                     }}>
-                    <Text.Description2
+                    <Text.SubTitle
                         style={{
                             fontSize: 12,
                             lineHeight: 16,
-                            color: Colors.black_12,
+                            color: Colors.black_09,
                         }}>
                         {label}
-                    </Text.Description2>
-                    <Text.Description1
-                        style={{ fontWeight: active ? '600' : '400' }}>
+                    </Text.SubTitle>
+                    <Text.Title
+                        weight={active ? 'bold' : 'regular'}
+                        style={{
+                            marginTop: 3,
+                        }}>
                         {`${
                             dayOfWeekFromState || dayOfWeekFromDefault || '--'
                         } `}
                         {formattedDateFromState ||
                             formattedDateFromDefault ||
                             '--/--/----'}
-                    </Text.Description1>
+                    </Text.Title>
                 </View>
             </TouchableWithoutFeedback>
         );

package/src/holidayData.js

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