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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/calendar",
-    "version": "0.0.55-beta.1",
+    "version": "0.0.55-beta.11",
     "private": false,
     "main": "index.js",
     "dependencies": {

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, Radius } 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>
         );
     };
@@ -420,9 +419,15 @@ class Calendar extends Component {
         } = this.props;
         const { isDoubleDateMode } = this.state;
         return (
-            <ScrollView style={{ flex: 1, backgroundColor: 'white' }}>
-                {!isHiddenSwitch && this.renderSwitchReturnSelection()}
-                {!isHideHeaderPanel && this.renderHeaderPanel()}
+            <ScrollView style={{ flex: 1, backgroundColor: 'transparent' }}>
+                <View
+                    style={{
+                        backgroundColor: Colors.black_01,
+                        borderRadius: Radius.XS,
+                    }}>
+                    {!isHiddenSwitch && this.renderSwitchReturnSelection()}
+                    {!isHideHeaderPanel && this.renderHeaderPanel()}
+                </View>
                 <CalendarPro
                     ref={this.calendarPicker}
                     startDate={doubleDate?.first}
@@ -485,36 +490,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,8 @@ import {
     Colors,
     Image,
     IconSource,
+    Spacing,
+    Radius,
 } from '@momo-kits/core';
 import MonthList from './MonthList';
 import HeaderControl from './HeaderControl';
@@ -248,44 +250,47 @@ export default class CalendarPro extends Component {
                         onPressBackArrow={this.onPressBackArrow}
                         onPressNextArrow={this.onPressNextArrow}
                     />
-                    <View style={styles.viewDay}>
-                        {[1, 2, 3, 4, 5, 6, 7].map((item) => (
-                            <Text
-                                style={[
-                                    styles.textDay,
-                                    {
-                                        color:
-                                            item === 6 || item === 7
-                                                ? Colors.red_05
-                                                : Colors.black_12,
-                                    },
-                                ]}
-                                key={item}>
-                                {Util.mapWeeKDate(item)}
-                            </Text>
-                        ))}
+                    <View style={styles.blueSeperator} />
+                    <View style={{ paddingHorizontal: Spacing.M }}>
+                        <View style={styles.viewDay}>
+                            {[1, 2, 3, 4, 5, 6, 7].map((item) => (
+                                <Text
+                                    style={[
+                                        styles.textDay,
+                                        {
+                                            color:
+                                                item === 6 || item === 7
+                                                    ? Colors.red_05
+                                                    : Colors.black_12,
+                                        },
+                                    ]}
+                                    key={item}>
+                                    {Util.mapWeeKDate(item)}
+                                </Text>
+                            ))}
+                        </View>
+                        <MonthList
+                            ref="MonthList"
+                            today={this.today}
+                            minDate={this.minDate}
+                            maxDate={this.maxDate}
+                            startDate={startDate}
+                            endDate={endDate}
+                            onChoose={this.onChoose}
+                            i18n={i18n}
+                            onScrollCalendar={this.onScrollCalendar}
+                            isShowLunar={!isOffLunar && showLunar}
+                            isDoubleDateMode={isDoubleDateMode}
+                            tabSelected={tabSelected}
+                            lunarConverter={this.converter}
+                            holidays={holidays}
+                            selectedDate={this.selectedDate}
+                            priceList={priceListFormat}
+                            labelFrom={labelFrom}
+                            labelTo={labelTo}
+                            isHideLabel={isHideLabel}
+                        />
                     </View>
-                    <MonthList
-                        ref="MonthList"
-                        today={this.today}
-                        minDate={this.minDate}
-                        maxDate={this.maxDate}
-                        startDate={startDate}
-                        endDate={endDate}
-                        onChoose={this.onChoose}
-                        i18n={i18n}
-                        onScrollCalendar={this.onScrollCalendar}
-                        isShowLunar={!isOffLunar && showLunar}
-                        isDoubleDateMode={isDoubleDateMode}
-                        tabSelected={tabSelected}
-                        lunarConverter={this.converter}
-                        holidays={holidays}
-                        selectedDate={this.selectedDate}
-                        priceList={priceListFormat}
-                        labelFrom={labelFrom}
-                        labelTo={labelTo}
-                        isHideLabel={isHideLabel}
-                    />
                 </View>
                 {!isOffLunar && (
                     <View style={styles.viewLunar}>
@@ -407,7 +412,7 @@ const styles = StyleSheet.create({
         borderStyle: 'solid',
         borderColor: '#c7c7cd',
     },
-    viewDate: { paddingHorizontal: 12 },
+    viewDate: {},
     textDay: {
         // fontSize: 14,
         lineHeight: 16,
@@ -418,9 +423,19 @@ 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 },
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+        marginTop: Spacing.S,
+        borderRadius: Radius.XS,
+    },
+    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>