@momo-kits/calendar 0.0.61-beta.9 → 0.0.62-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calendar",
-    "version": "0.0.61-beta.9",
+    "version": "0.0.62-alpha.2",
     "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": ">=0.0.5-beta"
+        "@momo-kits/core-v2": ">=0.0.5-beta"
     },
     "devDependencies": {},
     "license": "MoMo"

package/src/Calendar.js

@@ -15,7 +15,7 @@ import {
     Spacing,
     Radius,
     ScaleSize,
-} from '@momo-kits/core';
+} from '@momo-kits/core-v2';
 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.Title weight="medium" style={styles.textSwitch}>
+                    <Text.Label1 weight="medium" style={styles.textSwitch}>
                         {SwitchLanguage.chooseRoundtrip}
-                    </Text.Title>
+                    </Text.Label1>
                     <Switch
                         value={isDoubleDateMode}
                         onChange={this.toggleSelectionDateMode}

package/src/CalendarPro.js

@@ -19,7 +19,7 @@ import {
     Colors,
     Spacing,
     Radius,
-} from '@momo-kits/core';
+} from '@momo-kits/core-v2';
 import MonthList from './MonthList';
 import HeaderControl from './HeaderControl';
 import LunarDateConverter from './LunarDateConverter';
@@ -254,19 +254,20 @@ export default class CalendarPro extends Component {
                     <View>
                         <View style={styles.viewDay}>
                             {[1, 2, 3, 4, 5, 6, 7].map((item) => (
-                                <Text
+                                <Text.Label2
+                                    weight="medium"
                                     style={[
                                         styles.textDay,
                                         {
                                             color:
                                                 item === 6 || item === 7
-                                                    ? Colors.red_05
-                                                    : Colors.black_12,
+                                                    ? Colors.red_03
+                                                    : Colors.black_17,
                                         },
                                     ]}
                                     key={item}>
                                     {Util.mapWeeKDate(item)}
-                                </Text>
+                                </Text.Label2>
                             ))}
                         </View>
                         <MonthList
@@ -298,9 +299,7 @@ export default class CalendarPro extends Component {
                             onPress={this.toggleLunarDate}>
                             <Image
                                 tintColor={
-                                    showLunar
-                                        ? Colors.pink_05_b
-                                        : Colors.black_17
+                                    showLunar ? Colors.pink_03 : Colors.black_17
                                 }
                                 source={
                                     showLunar
@@ -310,11 +309,11 @@ export default class CalendarPro extends Component {
                                 style={styles.iconSelected}
                             />
                         </TouchableWithoutFeedback>
-                        <Text
+                        <Text.Description1
                             style={styles.txtLunar}
                             onPress={this.toggleLunarDate}>
                             {SwitchLanguage.showLunar}
-                        </Text>
+                        </Text.Description1>
                     </View>
                 )}
 
@@ -343,14 +342,14 @@ export default class CalendarPro extends Component {
                                     <View
                                         style={styles.row}
                                         key={idx.toString()}>
-                                        <Text.SubTitle
+                                        <Text.Description2
                                             style={styles.txtMonthLunar}>
                                             {labelDate}
-                                        </Text.SubTitle>
-                                        <Text.SubTitle
+                                        </Text.Description2>
+                                        <Text.Description2
                                             style={styles.subTextLunar}>
                                             {`${labelHoliday} `}
-                                        </Text.SubTitle>
+                                        </Text.Description2>
                                     </View>
                                 );
                             })}
@@ -386,12 +385,9 @@ CalendarPro.defaultProps = {
 
 const styles = StyleSheet.create({
     row: { flexDirection: 'row' },
-    txtMonthLunar: { color: Colors.red_05, marginRight: Spacing.S },
+    txtMonthLunar: { color: Colors.red_03, marginRight: Spacing.S },
     subTextLunar: {
-        // fontSize: 12,
-        color: '#222222',
-        paddingLeft: 6,
-        flexShrink: 1,
+        color: Colors.black_17,
     },
     contentScroll: { paddingHorizontal: 12, paddingVertical: 10 },
     iconSelected: { width: 24, height: 24, resizeMode: 'cover' },
@@ -411,11 +407,8 @@ 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';
+import { Spacing, SwitchLanguage, Colors, Text } from '@momo-kits/core-v2';
 import style from './style';
 
 class Day extends Component {
@@ -156,7 +156,7 @@ class Day extends Component {
                             onPress={this.chooseDay}>
                             <>
                                 {this.lunarDate && this.showLunar && (
-                                    <Text.Caption
+                                    <Text.Label4
                                         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.Caption>
+                                    </Text.Label4>
                                 )}
-                                <Text.Title
+                                <Text.Label1
                                     style={[
                                         style.dayText,
                                         { paddingTop: !!price ? 4 : 0 },
@@ -180,9 +180,9 @@ class Day extends Component {
                                             style.focusedText,
                                     ]}>
                                     {text}
-                                </Text.Title>
+                                </Text.Label1>
                                 {!!price ? (
-                                    <Text.Caption
+                                    <Text.Label3
                                         style={[
                                             this.isValid && this.isInScope
                                                 ? style.price
@@ -195,7 +195,7 @@ class Day extends Component {
                                             },
                                         ]}>
                                         {price}
-                                    </Text.Caption>
+                                    </Text.Label3>
                                 ) : (
                                     <View
                                         style={{
@@ -219,7 +219,7 @@ class Day extends Component {
                                 },
                             ]}>
                             {this.lunarDate && this.showLunar && text ? (
-                                <Text.Caption
+                                <Text.Label4
                                     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.Caption>
+                                </Text.Label4>
                             ) : (
                                 <View />
                             )}
-                            <Text.Title
+                            <Text.Action2
                                 style={[style.dayText, style.dayTextDisabled]}>
                                 {text}
-                            </Text.Title>
+                            </Text.Action2>
                             {text && !!price ? (
-                                <Text.Caption
+                                <Text.Label3
                                     style={[
                                         this.isValid && this.isInScope
                                             ? style.price
                                             : style.dayTextDisabled,
                                         isBestPrice && {
-                                            color: Colors.pink_05_b,
+                                            color: Colors.pink_03,
                                         },
                                     ]}>
                                     {price}
-                                </Text.Caption>
+                                </Text.Label3>
                             ) : (
                                 <View
                                     style={{

package/src/Day/style.js

@@ -1,5 +1,5 @@
 import { Dimensions } from 'react-native';
-import { Spacing, Colors } from '@momo-kits/core';
+import { Spacing, Colors } from '@momo-kits/core-v2';
 
 const dayWidth = (Dimensions.get('window').width - 38) / 7;
 const SCREEN_WIDTH = Dimensions.get('window').width;
@@ -29,7 +29,6 @@ export default {
         borderRadius: 4,
     },
     dayText: {
-        lineHeight: 24,
         textAlign: 'center',
     },
     lunarDayText: {
@@ -38,7 +37,7 @@ export default {
         paddingRight: Spacing.XS,
         position: 'absolute',
         top: Spacing.XXS,
-        lineHeight: 14,
+        color: Colors.black_12,
     },
     todayText: {
         color: 'blue',
@@ -51,7 +50,7 @@ export default {
     },
 
     focused: {
-        backgroundColor: Colors.pink_05_b,
+        backgroundColor: Colors.pink_03,
     },
     focusedText: {
         fontWeight: 'bold',
@@ -60,15 +59,15 @@ export default {
     dayStartContainer: {
         borderTopLeftRadius: 4,
         borderBottomLeftRadius: 4,
-        backgroundColor: Colors.pink_05_b,
+        backgroundColor: Colors.pink_03,
     },
     dayEndContainer: {
         borderTopRightRadius: 4,
         borderBottomRightRadius: 4,
-        backgroundColor: Colors.pink_05_b,
+        backgroundColor: Colors.pink_03,
     },
     mid: {
-        backgroundColor: Colors.pink_10,
+        backgroundColor: Colors.pink_09,
         // 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';
+import { Icon, ScaleSize, Text, Colors, Spacing } from '@momo-kits/core-v2';
 
 import Util from './Util';
 
@@ -34,9 +34,11 @@ const HeaderControl = forwardRef(
                             style={styles.icon}
                         />
                     </TouchableOpacity>
-                    <Text.Title style={styles.txtHeader}>
+                    <Text.HeaderText2
+                        weight="semibold"
+                        style={styles.txtHeader}>
                         {headerFormat}
-                    </Text.Title>
+                    </Text.HeaderText2>
                     <TouchableOpacity
                         style={styles.btnRight}
                         onPress={onPressNextArrow}>
@@ -58,7 +60,6 @@ const styles = StyleSheet.create({
     icon: { width: 24, height: 24, resizeMode: 'contain' },
     txtHeader: {
         // fontSize: 15,
-        fontWeight: 'bold',
         textAlign: 'center',
     },
     btnRight: {
@@ -77,7 +78,7 @@ const styles = StyleSheet.create({
         height: ScaleSize(44),
         flexDirection: 'row',
         justifyContent: 'space-between',
-        backgroundColor: Colors.blue_11,
+        backgroundColor: Colors.blue_10,
         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';
+import { Spacing, ScaleSize } from '@momo-kits/core-v2';
 
 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';
+import { ScaleSize } from '@momo-kits/core-v2';
 
 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';
+import { Colors, Text } from '@momo-kits/core-v2';
 
 export default class TabHeader extends React.Component {
     constructor(props) {
@@ -55,26 +55,23 @@ export default class TabHeader extends React.Component {
                         flex: 1,
                         backgroundColor: Colors.white,
                     }}>
-                    <Text.SubTitle
+                    <Text.Description2
                         style={{
                             fontSize: 12,
                             lineHeight: 16,
-                            color: Colors.black_09,
+                            color: Colors.black_12,
                         }}>
                         {label}
-                    </Text.SubTitle>
-                    <Text.Title
-                        weight={active ? 'bold' : 'regular'}
-                        style={{
-                            marginTop: 3,
-                        }}>
+                    </Text.Description2>
+                    <Text.Description1
+                        style={{ fontWeight: active ? '600' : '400' }}>
                         {`${
                             dayOfWeekFromState || dayOfWeekFromDefault || '--'
                         } `}
                         {formattedDateFromState ||
                             formattedDateFromDefault ||
                             '--/--/----'}
-                    </Text.Title>
+                    </Text.Description1>
                 </View>
             </TouchableWithoutFeedback>
         );

package/src/holidayData.js

@@ -1,6 +1,4 @@
-import {
-    SwitchLanguage
-} from '@momo-kits/core';
+import { SwitchLanguage } from '@momo-kits/core-v2';
 
 module.exports = {
     solar: {
@@ -8,77 +6,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: [
         {
@@ -86,42 +84,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)',
+        },
+    ],
 };