Home Reference Source

src/views/diary/components/DateCalendar.js

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

import {convertDate} from '../../../utils/FormatterUtils';

import {ColorPalette} from '../../../utils/ColorConstants';
import {globalStyles} from '../../../styles/styles';

/**
 * Component that display the date with year, month, day and weekday like on
 * single page single day calendars
 * @param {Object} props - Properties
 * @param {string} props.date - The date (YYY-MM-DD)
 * @returns {Object} The date shown as on a single page single day calendar
 */
export default function DateCalendar(props) {
    // Convert string to ISO date and convert to local date
    const [weekDay, day, month, year] = convertDate(props.date);

    return (
        <View style={[styles.container, globalStyles.lightShadow]}>
            <Text style={styles.month}>{month}</Text>
            <Text style={styles.day}>{day}</Text>
            <Text style={styles.weekDay}>{weekDay}</Text>
            <Text style={styles.year}>{year}</Text>
        </View>
    );
}

/** Local styles */
const styles = StyleSheet.create({
    container: {
        alignSelf: 'flex-end',
        position: 'absolute',
        justifyContent: 'space-around',
        alignItems: 'center',
        width: 95,
        aspectRatio: 3 / 4,
        top: '30%',
        right: 20,
        transform: [{rotate: '10deg'}],
        backgroundColor: ColorPalette.VERY_LIGHT_GRAY,
    },
    month: {
        textTransform: 'uppercase',
        fontSize: 16,
        paddingTop: 10,
    },
    day: {
        fontSize: 44,
        fontWeight: '700',
        lineHeight: 48,
    },
    weekDay: {
        textTransform: 'capitalize',
        fontWeight: '600',
        fontSize: 16,
        lineHeight: 16,
    },
    year: {
        fontSize: 14,
        lineHeight: 20,
        paddingBottom: 10,
    },
});