Home Reference Source

src/views/diary/components/FreeTextDetails.js

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

import {diaryStyles} from '../Styles';
import {globalStyles} from '../../../styles/styles';
import {iOSxxxLargeTypo} from '../../../styles/Typography';
import {setBorderStyle} from '../../../utils/FormatterUtils';

/**
 * Detailed view of free text
 * @param {Object} props - Properties
 * @param {string} props.freeText - Free text
 * @returns {Object} A detailed and large view of the free text
 */
export default function FreeTextDetails(props) {
    // Retrieve props
    const freeText = props.freeText;

    const containerStyle = [
        styles.container,
        globalStyles.shadow,
        {backgroundColor: freeText.paperColor},
    ];
    const textContainerStyle = setBorderStyle(
        freeText.paperColor,
        diaryStyles.freeTextContainer,
        {backgroundColor: freeText.paperColor},
    );
    const textStyle = [
        styles.text,
        iOSxxxLargeTypo.body,
        {color: freeText.textColor},
    ];

    return (
        <View style={containerStyle}>
            <View style={[textContainerStyle]}>
                <ScrollView>
                    <Text style={textStyle}>{freeText.content}</Text>
                </ScrollView>
            </View>
        </View>
    );
}

/** Local styles */
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: '100%',
        height: '100%',
        padding: 10,
    },
    text: {
        flex: 1,
        width: '100%',
        height: '100%',
        padding: 15,
    },
});