@momo-kits/calendar 0.0.33-beta → 0.0.35

package/src/calendarPicker/Days.js

@@ -0,0 +1,203 @@
+import React, { Component, } from 'react';
+import { View, } from 'react-native';
+import styles from './styles';
+import { getDaysInMonth, MAX_COLUMNS, MAX_ROWS, } from './util';
+import Day from './Day';
+
+export default class Days extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedDay: 0,
+            selectedMonth: 0,
+            selectedYear: 0,
+        };
+        this.selectedDate = null;
+    }
+
+    componentDidMount() {
+        const { selectedDate } = this.props;
+        if (selectedDate) {
+            const temp = selectedDate;
+            if (typeof temp.getDate === 'function') {
+                this.selectedDate = temp;
+            } else {
+                this.selectedDate = new Date(temp);
+            }
+            this.updateSelectedStates(
+                this.selectedDate.getDate(),
+                this.selectedDate.getMonth(),
+                this.selectedDate.getFullYear(),
+            );
+        }
+    }
+
+    updateSelectedStates = (day, month, year) => {
+        const { onDayChange } = this.props;
+        // const monthTmp = month + 1;
+        this.setState({
+            selectedDay: day,
+            selectedMonth: month,
+            selectedYear: year,
+        });
+        if (onDayChange) {
+            onDayChange(day, month, year);
+        }
+    }
+
+    onPressDay = (day, month, year) => {
+        const { minDate, maxDate } = this.props;
+        const selectDate = new Date(year, month, day);
+        selectDate.setHours(0, 0, 0, 0);
+        if (minDate) {
+            minDate.setHours(0, 0, 0, 0);
+            if (selectDate < minDate) {
+                return;
+            }
+        }
+
+        if (maxDate) {
+            maxDate.setHours(0, 0, 0, 0);
+            if (selectDate > maxDate) {
+                return;
+            }
+        }
+        this.updateSelectedStates(day, month, year);
+    }
+
+    getCalendarDays = () => {
+        const {
+            month, year, mode, minDate, maxDate, firstDate, secondDate, tabSelected
+        } = this.props;
+        const { selectedMonth, selectedDay, selectedYear } = this.state;
+        let columns;
+        const matrix = [];
+        let i;
+        let j;
+        let currentDay = 0;
+        const thisMonthFirstDay = new Date(year, month, 1);
+        let slotsAccumulator = 1;
+
+        let goNextMonth = false;
+        for (i = 0; i < MAX_ROWS; i += 1) { // Week rows
+            columns = [];
+            if (goNextMonth) { break; }
+            for (j = 0; j < MAX_COLUMNS; j += 1) { // Day columns
+                // HungHC: getDay() Sunday is 0, Monday is 1, and so on.
+                let tmp = thisMonthFirstDay.getDay();
+                if (tmp === 0) { tmp = 7; }
+                if (slotsAccumulator >= tmp) {
+                    if (currentDay < getDaysInMonth(month, year)) {
+                        const day = currentDay + 1;
+                        const selected = (selectedDay === day
+                        && selectedMonth === month
+                        && selectedYear === year);
+                        const date = Date(year, month, day);
+
+                        columns.push(<Day
+                            mode={mode}
+                            key={j.toString()}
+                            column={j}
+                            day={day}
+                            month={month}
+                            year={year}
+                            selected={selected}
+                            date={date}
+                            minDate={minDate}
+                            maxDate={maxDate}
+                            firstDate={firstDate}
+                            secondDate={secondDate}
+                            tabSelected={tabSelected}
+
+                            otherMonth={false}
+                            onDayChange={this.onPressDay}
+                        />);
+                        currentDay += 1;
+                    } else {
+                        // HungHC: show next month
+                        goNextMonth = true;
+                        if (j === 0) {
+                            break;
+                        }
+
+                        let nextMonth = month + 1;
+                        const day = currentDay + 1 - getDaysInMonth(month, year);
+                        let yearTmp = year;
+                        if (nextMonth > 11) {
+                            nextMonth = 0;
+                            yearTmp = year + 1;
+                        }
+                        const date = Date(yearTmp, nextMonth, day);
+                        const selected = (selectedDay === day
+                        && selectedMonth === nextMonth
+                        && selectedYear === yearTmp);
+                        columns.push(<Day
+                            mode={mode}
+                            key={j.toString()}
+                            column={j}
+                            day={day}
+                            month={nextMonth}
+                            year={yearTmp}
+                            selected={selected}
+                            date={date}
+                            minDate={minDate}
+                            maxDate={maxDate}
+                            firstDate={firstDate}
+                            secondDate={secondDate}
+                            tabSelected={tabSelected}
+                            otherMonth
+                            onDayChange={this.onPressDay}
+                        />);
+                        currentDay += 1;
+                    }
+                } else {
+                    // HungHC: show prev month
+                    let prevMonth = month - 1;
+                    let yearTmp = year;
+                    if (prevMonth < 0) {
+                        prevMonth = 11;
+                        yearTmp = year - 1;
+                    }
+                    const daysPrev = getDaysInMonth(prevMonth, yearTmp);
+                    let tmpDay = thisMonthFirstDay.getDay();
+                    if (tmpDay === 0) { tmpDay = 7; }
+                    const delta = (slotsAccumulator - tmpDay + 1);
+                    const day = daysPrev + delta;
+
+                    const selected = (selectedDay === day
+                    && selectedMonth === prevMonth
+                    && selectedYear === yearTmp);
+
+                    const date = Date(yearTmp, prevMonth, day);
+                    columns.push(<Day
+                        mode={mode}
+                        key={j.toString()}
+                        column={j}
+                        day={day}
+                        month={prevMonth}
+                        year={yearTmp}
+                        selected={selected}
+                        date={date}
+                        minDate={minDate}
+                        maxDate={maxDate}
+                        firstDate={firstDate}
+                        secondDate={secondDate}
+                        tabSelected={tabSelected}
+                        otherMonth
+                        onDayChange={this.onPressDay}
+                    />);
+                }
+
+                slotsAccumulator += 1;
+            }
+            matrix[i] = [];
+            matrix[i].push(<View key={i.toString()} style={styles.weekRow}>{columns}</View>);
+        }
+
+        return matrix;
+    }
+
+    render() {
+        return <View style={styles.daysWrapper}>{ this.getCalendarDays()}</View>;
+    }
+}

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;