@momo-kits/calendar 0.0.32-beta → 0.0.32

package/src/calendarPicker/HeaderControls.js

@@ -0,0 +1,158 @@
+/* eslint-disable no-param-reassign */
+import React, { Component, } from 'react';
+import {
+    Text, TouchableOpacity, View
+} from 'react-native';
+import PropTypes from 'prop-types';
+import { IconSource, Image } from '@momo-kits/core';
+import { DatePicker } from '@momo-kits/date-picker';
+import styles from './styles';
+import { MONTHS } from './util';
+
+const padding = (input) => `${input > 9 ? input : `0${input}`}`;
+
+const formatDate = (date) => {
+    if (date && typeof date.getDate === 'function') {
+        return `${padding(date.getMonth() + 1)}/${(date.getFullYear()).toString()}`;
+    }
+    return null;
+};
+
+const makeRange = (min = 0, max = 9999, step = 1) => {
+    const range = [];
+    let entry = `${0}`;
+
+    for (min; min <= max; min += step) {
+        entry = `${min}`;
+        range.push(entry);
+    }
+
+    return range;
+};
+export default class HeaderControls extends Component {
+    constructor(props) {
+        super(props);
+        const { month } = this.props;
+        this.state = {
+            selectedMonth: month
+        };
+
+        const minYear = 1900 + (new Date()).getYear();
+        const maxYear = minYear + 5;
+        this.months = makeRange(1, 12);
+        this.years = makeRange(minYear, maxYear);
+        this.momoDatePicker = React.createRef();
+    }
+
+    setMonth = (month) => {
+        this.setState({
+            selectedMonth: month,
+        });
+    }
+
+    getNext = () => {
+        const { selectedMonth } = this.state;
+        const { getNextYear, onMonthChange } = this.props;
+        let next = selectedMonth + 1;
+        if (next > 11) {
+            next = 0;
+            this.setState({ selectedMonth: next });
+            getNextYear();
+        } else {
+            this.setState({ selectedMonth: next });
+        }
+
+        onMonthChange(next);
+    }
+
+    getPrevious = () => {
+        const { selectedMonth } = this.state;
+        const {
+            onMonthChange, year, minDate, getPrevYear
+        } = this.props;
+
+        let prev = selectedMonth - 1;
+        if (prev < 0) {
+            prev = 11;
+            this.setState({ selectedMonth: prev });
+            getPrevYear();
+            onMonthChange(prev);
+        } else if (year <= minDate.getFullYear() && prev < minDate.getMonth()) {
+            return null;
+        } else {
+            this.setState({ selectedMonth: prev });
+            onMonthChange(prev);
+        }
+    }
+
+    pickMonthYear = () => {
+        const { navigator, minDate, maxDate } = this.props;
+        navigator.showBottom({
+            screen: DatePicker,
+            params: {
+                dragDisabled: true,
+                onSelected: this.onMonthYearChange,
+                onClose: () => { },
+                selectedDate: formatDate(minDate),
+                minDate: formatDate(minDate),
+                maxDate: formatDate(maxDate),
+                format: 'MM/YYYY',
+            }
+        });
+    };
+
+    onMonthYearChange = (date) => {
+        const { onMonthYearChange } = this.props;
+        const splitDate = date.split('/');
+        const idM = +splitDate[0];
+        const idY = +splitDate[1];
+        this.setState({
+            selectedMonth: idM - 1
+        });
+        if (onMonthYearChange) {
+            onMonthYearChange(idM - 1, idY);
+        }
+    }
+
+    render() {
+        const { selectedMonth } = this.state;
+        const { year, minDate } = this.props;
+        const previous = selectedMonth - 1 < 0 ? 11 : selectedMonth - 1;
+        const opacity = (previous < minDate.getMonth() && minDate.getFullYear() === year) ? 0.2 : 1;
+        // const monthNow = (new Date()).getMonth() + 1;
+        // const yearNow = (new Date()).getYear() + 1900;
+        return (
+            <View style={styles.headerWrapper}>
+
+                <TouchableOpacity onPress={() => this.getPrevious()} style={{ paddingHorizontal: 20, }}>
+                    <Image style={{ width: 20, height: 20, opacity }} source={IconSource.ic_back_arrow} />
+                </TouchableOpacity>
+
+                <TouchableOpacity onPress={this.pickMonthYear}>
+                    <Text style={styles.monthLabel}>
+                        { MONTHS[selectedMonth] }
+                        /
+                        { year }
+                    </Text>
+                </TouchableOpacity>
+
+                <TouchableOpacity onPress={() => this.getNext()} style={{ paddingHorizontal: 20, }}>
+                    <Image style={{ width: 20, height: 20, }} source={IconSource.ic_arrow_next} />
+                </TouchableOpacity>
+            </View>
+        );
+    }
+}
+
+HeaderControls.propTypes = {
+    getNextYear: PropTypes.func,
+    onMonthChange: PropTypes.func,
+    onMonthYearChange: PropTypes.func,
+    getPrevYear: PropTypes.func,
+    year: PropTypes.number,
+    minDate: PropTypes.any,
+};
+
+HeaderControls.defaultProps = {
+
+};

package/src/calendarPicker/WeekDaysLabels.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@momo-kits/core';
+import styles from './styles';
+import { WEEKDAYS, } from './util';
+
+const colorDay = '#9199a2';
+const WeekDaysLabels = () => (
+    <View style={styles.dayLabelsWrapper}>
+        { WEEKDAYS.map((day, key) => (
+            <Text.Title
+                key={key.toString()}
+                style={[styles.dayLabels, { color: colorDay, fontSize: 16 }]}
+            >
+                {day}
+            </Text.Title>
+        )) }
+    </View>
+);
+
+export default WeekDaysLabels;

package/src/calendarPicker/index.js

@@ -0,0 +1,125 @@
+/* eslint-disable react/no-typos */
+import React, { Component, } from 'react';
+import { View, } from 'react-native';
+import PropTypes from 'prop-types';
+import styles from './styles';
+import HeaderControls from './HeaderControls';
+import Days from './Days';
+import WeekDaysLabels from './WeekDaysLabels';
+
+class CalendarPicker extends Component {
+    constructor(props) {
+        super(props);
+
+        this.selectedDate = null;
+        const temp = props.selectedDate;
+        try {
+            if (typeof temp.getDate === 'function') {
+                this.selectedDate = temp;
+            } else {
+                this.selectedDate = new Date(temp);
+            }
+        } catch (e) {
+            this.selectedDate = new Date();
+        }
+        this.state = {
+            // date: this.selectedDate,
+            month: this.selectedDate.getMonth(),
+            day: this.selectedDate.getDate(),
+            year: this.selectedDate.getFullYear(),
+            // selectedDay: [],
+            tabSelected: 0,
+        };
+    }
+
+    onDayChange = (day, month, year) => {
+        const { onDateChange } = this.props;
+        const date = new Date(year, month, day);
+        if (onDateChange) { onDateChange(date); }
+        if (this.refs.header) { this.refs.header.setMonth(month); }
+        this.setState({
+            year,
+            month,
+            day,
+        });
+    }
+
+    onMonthYearChange = (month, year) => {
+        this.setState({
+            month,
+            year
+        });
+    }
+
+    onMonthChange = (month) => {
+        this.setState({ month, });
+    }
+
+
+    getNextYear = () => {
+        const { year } = this.state;
+        this.setState({ year: parseInt(year) + 1, });
+    }
+
+    getPrevYear =() => {
+        const { year } = this.state;
+        this.setState({ year: parseInt(year) - 1, });
+    }
+
+    setDoubleDateAndTabIndex = (first, second, tabSelected) => {
+        this.setState({
+            firstDate: first,
+            secondDate: second,
+            tabSelected
+        });
+    }
+
+    render() {
+        const {
+            day, year, month, firstDate, secondDate, tabSelected
+        } = this.state;
+        const {
+            minDate, maxDate, mode, navigator
+        } = this.props;
+        return (
+            <View style={styles.calendar}>
+                <HeaderControls
+                    ref="header"
+                    year={year}
+                    month={month}
+                    navigator={navigator}
+                    onMonthYearChange={this.onMonthYearChange}
+                    onMonthChange={this.onMonthChange}
+                    getNextYear={this.getNextYear}
+                    getPrevYear={this.getPrevYear}
+                    minDate={minDate || null}
+                />
+                <WeekDaysLabels />
+
+                <Days
+                    mode={mode}
+                    firstDate={firstDate}
+                    secondDate={secondDate}
+                    tabSelected={tabSelected}
+                    month={month}
+                    year={year}
+                    day={day}
+                    minDate={minDate || new Date()}
+                    maxDate={maxDate}
+                    selectedDate={this.selectedDate}
+                    onDayChange={this.onDayChange}
+                />
+            </View>
+        );
+    }
+}
+export default CalendarPicker;
+
+CalendarPicker.propTypes = {
+    navigator: PropTypes.object.isRequired,
+    minDate: PropTypes.any,
+    maxDate: PropTypes.any,
+    mode: PropTypes.oneOf(['doubleDate', 'signleDate']),
+    selectedDate: PropTypes.any,
+    onDateChange: PropTypes.func,
+};

package/src/calendarPicker/styles.js

@@ -0,0 +1,184 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+const widthScreen = Dimensions.get('window').width;
+
+const styles = StyleSheet.create({
+    calendar: {
+    // height:widthScreen - 20,
+        backgroundColor: 'white',
+        borderColor: '#DADADA',
+        borderBottomWidth: 1,
+        borderTopWidth: 1,
+    },
+    dayWrapper: {
+        width: widthScreen / 7,
+        height: 40,
+        backgroundColor: 'rgba(0,0,0,0.0)'
+
+    },
+
+    dayButton: {
+        width: 50,
+        height: 50,
+        alignSelf: 'center'
+    },
+
+    styleFirstDate: {
+        position: 'absolute',
+        // width:45,
+        height: 40,
+        top: 0,
+        left: widthScreen / 14,
+        right: -1,
+        backgroundColor: '#90d6f3',
+        borderRadius: 0
+    },
+    styleSecondDate: {
+        position: 'absolute',
+        // width:45,
+        height: 40,
+        top: 0,
+        right: widthScreen / 14,
+        left: 0,
+        backgroundColor: '#90d6f3',
+        borderRadius: 0
+    },
+    styleBetween: {
+        height: 40,
+        // width:60,
+        top: 0,
+        left: 0,
+        right: -1,
+        position: 'absolute',
+        backgroundColor: '#90d6f3',
+        borderRadius: 0
+    },
+    dayButtonSelected: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#2eb3e8',
+        alignSelf: 'center'
+    },
+
+    dayButtonNow: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#8F8E94',
+        alignSelf: 'center'
+    },
+
+    dayLabel: {
+        fontSize: 16,
+        color: '#393939',
+        marginTop: 10,
+        alignSelf: 'center'
+    },
+
+    dayLabelsWrapper: {
+        width: widthScreen,
+        flexDirection: 'row',
+        marginBottom: 10,
+        paddingTop: 5,
+        paddingBottom: 5,
+        borderColor: '#DADADA',
+        borderBottomWidth: 1,
+        borderTopWidth: 1,
+    },
+
+    daysWrapper: {
+        alignSelf: 'center',
+    },
+
+    dayLabels: {
+        width: widthScreen / 7,
+        fontSize: 12,
+        color: '#000',
+        textAlign: 'center',
+    },
+
+    selectedDay: {
+        width: 60,
+        height: 60,
+        backgroundColor: '#5ce600',
+        borderRadius: 30,
+        alignSelf: 'center'
+    },
+
+    monthLabel: {
+        fontSize: widthScreen > 320 ? 20 : 17,
+        fontWeight: '300',
+        color: '#000',
+        width: 180,
+        textAlign: 'center'
+    },
+
+    headerWrapper: {
+        width: widthScreen,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexDirection: 'row',
+        marginVertical: 10,
+        backgroundColor: 'rgba(0,0,0,0.0)'
+    },
+
+    monthSelector: {
+        width: 80,
+    },
+
+    prev: {
+        textAlign: 'left',
+        fontSize: 16,
+        color: '#dadada',
+    },
+
+    next: {
+        textAlign: 'right',
+        fontSize: 16,
+        color: '#dadada',
+    },
+
+    yearLabel: {
+        fontSize: 14,
+        fontWeight: 'bold',
+        color: '#000',
+        textAlign: 'center'
+    },
+
+    weeks: {
+        flexDirection: 'column'
+    },
+
+    weekRow: {
+        flexDirection: 'row'
+    },
+    btnCellHeader: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: '#DADADA',
+        backgroundColor: 'white'
+    },
+    center: {
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    txtDate: {
+        color: '#4D4D4D',
+        fontSize: 18,
+        fontWeight: 'bold',
+        paddingVertical: 10
+    },
+    lineActiveTab: {
+        height: 3,
+        width: '100%',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        backgroundColor: '#49A3BC'
+    }
+});
+
+export default styles;

package/src/calendarPicker/util.js

@@ -0,0 +1,50 @@
+import { SwitchLanguage } from '@momo-kits/core';
+
+module.exports = {
+    WEEKDAYS: SwitchLanguage.getLocalize({
+        vi: [
+            'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN',
+        ],
+        en: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
+    }),
+
+    WEEKDAYSNAME: [
+        'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7', 'Chủ nhật',
+    ],
+
+    MONTHS: SwitchLanguage.getLocalize({
+        vi: [
+            'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7',
+            'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'
+        ],
+        en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    }),
+
+    MAX_ROWS: 7,
+
+    MAX_COLUMNS: 7,
+
+    getDaysInMonth(month, year) {
+        const lastDayOfMonth = new Date(year, month + 1, 0);
+        return lastDayOfMonth.getDate();
+    },
+
+    getDayofDate(date) {
+        const WEEKDAYSNAME = ['Thứ hai', 'Thứ ba', 'Thứ tư', 'Thứ năm', 'Thứ sáu', 'Thứ bảy', 'Chủ nhật'];
+        let day = date.getDay();
+        if (date.getDay() === 0) {
+            day = 7;
+        }
+        return WEEKDAYSNAME[day - 1];
+    },
+    formatDate(date) {
+        const padding = (input) => `${input > 9 ? input : `0${input}`}`;
+        if (date && typeof date.getDate === 'function') {
+            return `${padding(date.getDate())}/${
+                padding(date.getMonth() + 1)}/${
+                (date.getFullYear()).toString()}`;
+        }
+        return null;
+    },
+
+};

package/src/holidayData.js

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

package/babel.config.js

@@ -1 +0,0 @@
-module.exports={presets:['module:metro-react-native-babel-preset']};