Home Reference Source

src/views/assessment/components/LeftMenu.js

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

import Avatar from '../../../components/avatar/Avatar';
import ClearAllButton from './buttons/ClearAllButton';
import UndoButton from './buttons/UndoButton';

import {getActivityType} from '../../../objects/Assessment';
import {getPicture} from '../../../database/ActivityTypesDAO';

import {ColorPalette} from '../../../utils/ColorConstants';
import {Module} from '../../../utils/ModuleConstants';
import {MoodContext} from '../../../utils/Contexts';
import {globalStyles} from '../../../styles/styles';

/**
 * The left side menu of FreeTextView and DrawingView.
 * @param {Object} props - Properties
 * @param {Module} props.module Type of module
 * @param {function} props.toggleBackgroundImage - Toggle the background image on and off
 * @param {function} props.canvasRef - Reference to the canvas
 * @returns {Object} Left side menu of FreeTextView and DrawingView
 */
export default function LeftMenu(props) {
    // Retrieve props
    const assessmentModule = props.module;
    const toggleBackgroundImage = props.toggleBackgroundImage;
    const canvasRef = props.canvasRef;

    const isDrawingModule = assessmentModule === Module.DRAWING;
    const isFreeTextModule = assessmentModule === Module.FREE_TEXT;

    const {mood} = React.useContext(MoodContext);

    const activityImage = getPicture(getActivityType());
    const activityImageComponent = (
        <Image source={activityImage} style={styles.activityImageIcon} />
    );
    const activityImageStyle = [
        styles.pictureBox,
        globalStyles.softEdges,
        globalStyles.lightShadow,
        styles.menuElement,
    ];

    return (
        <View style={styles.leftMenuContainer}>
            <View
                style={[
                    globalStyles.avatarFace,
                    globalStyles.circle,
                    styles.menuElement,
                ]}>
                <Avatar full={false} mood={mood} />
            </View>

            {isFreeTextModule && (
                <View
                    style={activityImageStyle}
                    onPress={toggleBackgroundImage}>
                    {activityImageComponent}
                </View>
            )}
            {isDrawingModule && (
                <TouchableOpacity
                    style={[activityImageStyle, styles.touchableImage]}
                    onPress={toggleBackgroundImage}>
                    {activityImageComponent}
                </TouchableOpacity>
            )}

            {isDrawingModule && (
                <View style={[styles.buttonContainer, styles.menuElement]}>
                    <UndoButton
                        componentStyle={styles.button}
                        onPress={() => {
                            canvasRef.current.undo();
                        }}
                    />
                    <ClearAllButton
                        componentStyle={styles.button}
                        onPress={() => {
                            canvasRef.current.clear();
                        }}
                    />
                </View>
            )}
        </View>
    );
}

/**
 * Local styles
 * @type {Object}
 */
const styles = StyleSheet.create({
    leftMenuContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        height: '70%',
        alignItems: 'center',
        marginTop: '5%',
        marginHorizontal: 5,
    },
    menuElement: {
        marginVertical: 20,
    },
    pictureBox: {
        height: '20%',
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'center',
    },
    activityImageIcon: {
        height: '100%',
        width: '90%',
        borderRadius: 20,
    },
    touchableImage: {
        padding: 5,
        backgroundColor: ColorPalette.ALMOST_WHITE,
    },

    buttonContainer: {
        flexDirection: 'row',
    },
    button: {
        width: 80,
        height: 80,
        margin: 5,
    },
});