Home Reference Source

src/views/diary/components/Drawing.js

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

import DetailsRoundButton from '../../../components/buttons/DetailsRoundButton';
import DrawingDetails from './DrawingDetails';
import InfoBoxOverlay from '../../../components/dialogBoxes/InfoBoxOverlay';
import TeddyBearStickerSvgr from '../../../assets/stickersSvgr/TeddyBearStickerSvgr';

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

/**
 * Component displaying the drawing made by the user, on a diary page.
 * - If none, displays a sticker instead.
 * - If drawing is not null, but not a valid name, a message saying that the drawing
 *   cannot be displayed will be shown.
 * @param {Object} props - Properties
 * @param {Object} props.source - Source of the image
 * @param {Object} props.componentStyle - Styling of the component
 * @returns {Object} Drawing displayed on a page of the diary
 */
export default function Drawing(props) {
    // Retrieve props:
    const source = props.source;
    const componentStyle = props.componentStyle;

    // Displays the drawing if there is a valid one.
    // A valid drawing source is a require (number)
    if (source !== null && typeof source === 'number') {
        // 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}>
                <InfoBoxOverlay
                    modalVisible={modalVisible}
                    onModalRequestCloseAction={toggleModalVisibility}
                    onPressButtonAction={toggleModalVisibility}>
                    <DrawingDetails source={source} />
                </InfoBoxOverlay>

                <TouchableOpacity
                    style={styles.imageContainer}
                    onPress={displayModal}>
                    <Image source={source} style={[globalStyles.resetImage]} />

                    <DetailsRoundButton
                        buttonSize={RoundButtonSize.TINY}
                        containerStyle={diaryStyles.detailButtonContainer}
                        onPress={displayModal}
                    />
                </TouchableOpacity>
            </View>
        );
    } else if (source !== null && typeof source !== 'number') {
        // User has drawn a drawing, but the source is not valid.
        return (
            <View style={styles.textContainer}>
                <Text style={iOSxxxLargeTypo.body}>
                    Din tegning kan dessverre ikke vises. Vi jobber med saken!
                </Text>
            </View>
        );
    } else {
        // Displays a sticker if there is no drawing.
        return (
            <View style={styles.stickerContainer}>
                <TeddyBearStickerSvgr style={[globalStyles.fillWidth]} />
            </View>
        );
    }
}

/** Local styles */
const styles = StyleSheet.create({
    imageContainer: {
        flex: 1,
        position: 'absolute',
        width: '100%',
        height: '100%',
        padding: 3,
        borderColor: ColorPalette.ROCKET_METALLIC,
        borderWidth: 4,
    },
    textContainer: {
        position: 'absolute',
        width: '25%',
        padding: 20,
        top: '60%',
        left: '63%',
        borderWidth: 2,
        borderColor: ColorPalette.ATOMIC_TANGERINE,
        borderBottomRightRadius: 30,
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        alignContent: 'center',
        justifyContent: 'center',
        alignItems: 'center',
    },
    stickerContainer: {
        position: 'absolute',
        width: '25%',
        aspectRatio: 1,
        top: '60%',
        left: '63%',
        transform: [{rotate: '7deg'}],
    },
});