@momo-kits/calendar 0.0.55-beta.1 → 0.0.55-beta.3

package/package.json

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

package/src/Calendar.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { View, Switch, ScrollView, Platform, StyleSheet } from 'react-native';
+import { View, ScrollView, Platform, StyleSheet } from 'react-native';
 import moment from 'moment';
-import { Text, SwitchLanguage } from '@momo-kits/core';
+import { Text, SwitchLanguage, Colors, Spacing } from '@momo-kits/core';
+import Switch from '@momo-kits/switch';
 import CalendarPro from './CalendarPro';
 import TabHeader from './TabHeader';
 
@@ -318,21 +319,19 @@ class Calendar extends Component {
     renderSwitchReturnSelection = () => {
         const { isDoubleDateMode } = this.state;
         return (
-            <View style={styles.viewSwitch}>
-                <Text.Caption style={styles.textSwitch}>
-                    {SwitchLanguage.chooseRoundtrip}
-                </Text.Caption>
-                <Switch
-                    value={isDoubleDateMode}
-                    onValueChange={this.toggleSelectionDateMode}
-                    thumbColor={isDoubleDateMode ? '#78ca32' : 'white'}
-                    trackColor={{ false: '#e5e7ec', true: '#e5e7ec' }}
-                    style={[
-                        Platform.OS === 'ios' && {
-                            transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],
-                        },
-                    ]}
-                />
+            <View style={styles.headerContainer}>
+                <View style={styles.viewSwitch}>
+                    <Text.Title weight="medium" style={styles.textSwitch}>
+                        {SwitchLanguage.chooseRoundtrip}
+                    </Text.Title>
+                    <Switch
+                        value={isDoubleDateMode}
+                        onChange={this.toggleSelectionDateMode}
+                        thumbColor={isDoubleDateMode ? '#78ca32' : 'white'}
+                        trackColor={{ false: '#e5e7ec', true: '#e5e7ec' }}
+                    />
+                </View>
+                <View style={styles.seperator} />
             </View>
         );
     };
@@ -485,36 +484,35 @@ Calendar.defaultProps = {
 
 const styles = StyleSheet.create({
     viewPanel_2: {
-        height: 46,
         paddingVertical: 10,
-        justifyContent: 'center',
-        alignItems: 'center',
+        alignItems: 'flex-start',
         backgroundColor: 'white',
         borderRadius: 8,
+        paddingHorizontal: Spacing.M,
     },
     viewPanel: {
         height: 50,
         marginHorizontal: 12,
         marginTop: 6,
-        marginBottom: 25,
-        padding: 2,
         flexDirection: 'row',
-        backgroundColor: '#eeeeef',
-        justifyContent: 'space-around',
-        borderRadius: 8,
     },
     textSwitch: {
-        // fontSize: 10,
-        fontWeight: 'bold',
-        color: '#222222',
+        color: Colors.black_15,
     },
     viewSwitch: {
         flexDirection: 'row',
         justifyContent: 'space-between',
-        paddingHorizontal: 12,
         alignItems: 'center',
-        backgroundColor: '#f2f3f5',
-        paddingVertical: 9,
+        backgroundColor: Colors.white,
         height: 42,
     },
+    seperator: {
+        height: 1,
+        width: '100%',
+        backgroundColor: Colors.black_04,
+    },
+    headerContainer: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
 });

package/src/CalendarPro.js

@@ -17,6 +17,7 @@ import {
     Colors,
     Image,
     IconSource,
+    Spacing,
 } from '@momo-kits/core';
 import MonthList from './MonthList';
 import HeaderControl from './HeaderControl';
@@ -248,6 +249,7 @@ export default class CalendarPro extends Component {
                         onPressBackArrow={this.onPressBackArrow}
                         onPressNextArrow={this.onPressNextArrow}
                     />
+                    <View style={styles.blueSeperator} />
                     <View style={styles.viewDay}>
                         {[1, 2, 3, 4, 5, 6, 7].map((item) => (
                             <Text
@@ -418,9 +420,14 @@ const styles = StyleSheet.create({
     viewDay: {
         flexDirection: 'row',
         justifyContent: 'space-between',
-        paddingHorizontal: 7,
+        paddingHorizontal: Spacing.S,
         paddingTop: 15,
         paddingBottom: 10,
     },
     container: { flex: 1, backgroundColor: 'white', marginTop: 20 },
+    blueSeperator: {
+        height: 1,
+        width: '100%',
+        backgroundColor: Colors.blue_05,
+    },
 });

package/src/HeaderControl.js

@@ -1,50 +1,54 @@
 import React, { useState, forwardRef, useImperativeHandle } from 'react';
-import {
-    View, TouchableOpacity, StyleSheet
-} from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import moment from 'moment';
-import {
-    Text, Icon, Colors
-} from '@momo-kits/core';
+import { Text, Icon, Colors, Spacing, ScaleSize } from '@momo-kits/core';
 import Util from './Util';
 
-const HeaderControl = forwardRef(({ onPressBackArrow, onPressNextArrow, selectedDate }, ref) => {
-    const [info, setInfo] = useState({
-        date: moment(selectedDate || new Date())
-    });
+const HeaderControl = forwardRef(
+    ({ onPressBackArrow, onPressNextArrow, selectedDate }, ref) => {
+        const [info, setInfo] = useState({
+            date: moment(selectedDate || new Date()),
+        });
 
-    useImperativeHandle(ref, () => ({
-        onUpdateInfo
-    }));
+        useImperativeHandle(ref, () => ({
+            onUpdateInfo,
+        }));
 
-    const onUpdateInfo = (date) => {
-        setInfo(date);
-    };
+        const onUpdateInfo = (date) => {
+            setInfo(date);
+        };
 
-    if (info && info.date) {
-        const headerFormat = `${Util.mapMonth(info.date.month() + 1)}/${info.date.year()}`;
-        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} />
-                </TouchableOpacity>
-                <Text.H4 style={styles.txtHeader}>
-                    {headerFormat}
-                </Text.H4>
-                <TouchableOpacity
-                    style={styles.btnRight}
-                    onPress={onPressNextArrow}
-                >
-                    <Icon name="24_arrow_chevron_right_small" tintColor={Colors.black_17} style={styles.icon} />
-                </TouchableOpacity>
-            </View>
-        );
-    }
-    return <View />;
-});
+        if (info && info.date) {
+            const headerFormat = `${Util.mapMonth(
+                info.date.month() + 1,
+            )}/${info.date.year()}`;
+            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}
+                        />
+                    </TouchableOpacity>
+                    <Text.H4 style={styles.txtHeader}>{headerFormat}</Text.H4>
+                    <TouchableOpacity
+                        style={styles.btnRight}
+                        onPress={onPressNextArrow}>
+                        <Icon
+                            name="24_arrow_chevron_right_small"
+                            tintColor={Colors.black_17}
+                            style={styles.icon}
+                        />
+                    </TouchableOpacity>
+                </View>
+            );
+        }
+        return <View />;
+    },
+);
 
 export default HeaderControl;
 const styles = StyleSheet.create({
@@ -54,26 +58,26 @@ const styles = StyleSheet.create({
         lineHeight: 19,
         fontWeight: 'bold',
         textAlign: 'center',
-        color: Colors.black_17
+        color: Colors.black_17,
     },
     btnRight: {
         width: 36,
         height: 36,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
     },
     btnLeft: {
         width: 36,
         height: 36,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
     },
     container: {
-        height: 36,
+        height: ScaleSize(44),
         flexDirection: 'row',
         justifyContent: 'space-between',
-        backgroundColor: '#edf6fe',
+        backgroundColor: Colors.blue_10,
         alignItems: 'center',
-        borderRadius: 4
+        borderRadius: 4,
     },
 });

package/src/TabHeader.js

@@ -1,13 +1,14 @@
 import React from 'react';
-import { TouchableWithoutFeedback, View, Text } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
 import Moment from 'moment';
 import Util from './Util';
+import { Colors, Text } from '@momo-kits/core';
 
 export default class TabHeader extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            active: props.activeTab
+            active: props.activeTab,
         };
         this.label = props.label;
         this.defaultDate = props.date ? Moment(props.date) : '';
@@ -23,7 +24,7 @@ export default class TabHeader extends React.Component {
     updateView = (date, activeTab) => {
         this.setState({
             date: date ? Moment(date) : '',
-            active: activeTab
+            active: activeTab,
         });
     };
 
@@ -35,42 +36,54 @@ export default class TabHeader extends React.Component {
         const { label, disabled } = this.props;
         const { date, active } = this.state;
         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()]} -` : '';
-        const dayOfWeekFromDefault = this.defaultDate ? `${Util.WEEKDAYSFROMMOMENT[this.defaultDate.day()]} -` : '';
+        const formattedDateFromDefault = this.defaultDate
+            ? this.defaultDate.format('DD/MM/YYYY')
+            : '';
+        const dayOfWeekFromState = date
+            ? `${Util.WEEKDAYSFROMMOMENT[date.day()]} -`
+            : '';
+        const dayOfWeekFromDefault = this.defaultDate
+            ? `${Util.WEEKDAYSFROMMOMENT[this.defaultDate.day()]} -`
+            : '';
 
         return (
-            <TouchableWithoutFeedback disabled={disabled} onPress={this.onChangeTab}>
-                <View style={{
-                    flex: 1,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    backgroundColor: active ? 'white' : '#eeeeef',
-                    borderRadius: 8
-                }}
-                >
-                    <Text style={{
-                        fontSize: 12,
-                        // lineHeight: 14,
-                        color: active ? '#222222' : '#8d919d',
-                        fontWeight: 'bold'
-                    }}
-                    >
+            <TouchableWithoutFeedback
+                disabled={disabled}
+                onPress={this.onChangeTab}>
+                <View
+                    style={{
+                        flex: 1,
+                        backgroundColor: Colors.white,
+                    }}>
+                    <Text
+                        style={{
+                            fontSize: 12,
+                            lineHeight: 16,
+                            color: Colors.black_09,
+                        }}>
                         {label}
-
                     </Text>
-                    <Text style={{
-                        marginTop: 3,
-                        fontSize: 12,
-                        // lineHeight: 14,
-                        color: '#8d919d'
-                    }}
-                    >
-                        <Text style={{ color: active ? '#b0006d' : '#8d919d', fontWeight: 'bold' }}>
-                            {`${dayOfWeekFromState || dayOfWeekFromDefault || '--'} `}
-
+                    <Text
+                        weight={active ? 'semibold' : 'regular'}
+                        style={{
+                            marginTop: 3,
+                            fontSize: 14,
+                            color: Colors.black_17,
+                        }}>
+                        <Text
+                            weight={active ? 'semibold' : 'regular'}
+                            style={{
+                                color: Colors.black_17,
+                            }}>
+                            {`${
+                                dayOfWeekFromState ||
+                                dayOfWeekFromDefault ||
+                                '--'
+                            } `}
                         </Text>
-                        {formattedDateFromState || formattedDateFromDefault || '--/--/----'}
+                        {formattedDateFromState ||
+                            formattedDateFromDefault ||
+                            '--/--/----'}
                     </Text>
                 </View>
             </TouchableWithoutFeedback>