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,
},
});