Home Reference Source

src/views/diary/components/FreeText.js

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

import BookShelfStickerSvgr from '../../../assets/stickersSvgr/BookshelfStickerSvgr';
import DetailsRoundButton from '../../../components/buttons/DetailsRoundButton';
import FreeTextDetails from './FreeTextDetails';
import InfoBoxOverlay from '../../../components/dialogBoxes/InfoBoxOverlay';

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

import {RoundButtonSize} from '../../../utils/DimensionsConstants';
import {diaryStyles} from '../Styles';
import {globalStyles} from '../../../styles/styles';
import {iOSxLargeTypo} from '../../../styles/Typography';

/**
 * Component displaying the free text element on the diary page.
 * If there is no free text, the image of a sticker is displayed instead.
 * @param {Object} props - Properties
 * @param {string} props.freeText - Free text
 * @param {Object} props.componentStyle - Styling of the component
 * @returns {Object} The free text element as displayed on a diary page
 */
export default function FreeText(props) {
    // Retrive props
    const freeText = props.freeText;
    const componentStyle = props.componentStyle;

    // Displays free text if any
    if (freeText.content !== null && freeText.content !== '') {
        const textContainerStyle = setBorderStyle(
            freeText.paperColor,
            diaryStyles.freeTextContainer,
        );

        // Variables setting the visibility of the modal overlay view
        const [modalVisible, setModalVisible] = React.useState(false);
        const toggleModalVisibility = () => {
            setModalVisible(!modalVisible);
        };
        const displayModal = () => setModalVisible(true);

        return (
            <View
                style={[
                    componentStyle,
                    {backgroundColor: freeText.paperColor},
                ]}>
                <InfoBoxOverlay
                    modalVisible={modalVisible}
                    onModalRequestCloseAction={toggleModalVisibility}
                    onPressButtonAction={toggleModalVisibility}>
                    <View style={styles.overlay}>
                        <FreeTextDetails freeText={freeText} />
                    </View>
                </InfoBoxOverlay>

                <View style={textContainerStyle}>
                    <ScrollView>
                        <TouchableOpacity onPress={displayModal}>
                            <Text
                                style={[
                                    iOSxLargeTypo.body,
                                    styles.text,
                                    {color: freeText.textColor},
                                ]}>
                                {freeText.content}
                            </Text>
                        </TouchableOpacity>
                    </ScrollView>
                </View>

                <DetailsRoundButton
                    buttonSize={RoundButtonSize.TINY}
                    containerStyle={diaryStyles.detailButtonContainer}
                    onPress={displayModal}
                />
            </View>
        );
    } else {
        // Display a sticker if there is no free text assessment
        return (
            <View style={styles.image}>
                <BookShelfStickerSvgr style={[globalStyles.fillWidth]} />
            </View>
        );
    }
}

/** Local styles */
const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        justifyContent: 'center',
        alignContent: 'center',
        width: '100%',
        height: '100%',
        padding: 50,
    },
    text: {
        flex: 1,
        width: '100%',
        height: '100%',
    },
    image: {
        position: 'absolute',
        width: '25%',
        aspectRatio: 1,
        bottom: '3%',
        left: '12%',
        transform: [{rotate: '-4deg'}],
    },
});