src/views/diary/components/GradingCardFront.js
import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {getEmojiImage, getLegend} from '../../../utils/GradingScale';
import {getQuestion} from '../../../database/ActivityTypesDAO';
import {globalStyles} from '../../../styles/styles';
import {typography} from '../../../styles/Typography';
/**
* Component displaying the front size of a grading card. It displays the question
* number and the grad, shown with an emoticon having the corresponding mood.
* @param {Object} props - Properties
* @param {Object} props.grading - The grading with question id, question and answer
* @param {string} props.cardColor - Color of the grading card
* @param {number} props.activityType - Type of activity
* @returns {Object} The front size of the grading card
*/
export default function GradingCard(props) {
// Retrieve props
const grading = props.grading;
const cardColor = props.cardColor;
const activityType = props.activityType;
// Set the "random" background color of the card
const emojiImage = getEmojiImage(grading.grading);
const legend = getLegend(grading.grading);
return (
<View
style={[
styles.container,
globalStyles.shadow,
{backgroundColor: cardColor},
]}>
<Text style={[typography.title2, styles.label]}>
{getQuestion(activityType, grading.questionId).question}
</Text>
<View style={styles.image}>
<Image source={emojiImage} style={globalStyles.resetImage} />
</View>
<Text style={[typography.headline, styles.legend]}>{legend}</Text>
</View>
);
}
/** Local styles
* @type {Object}
*/
const styles = StyleSheet.create({
container: {
justifyContent: 'space-evenly',
alignItems: 'center',
alignContent: 'center',
width: 500,
aspectRatio: 3 / 2,
margin: 5,
paddingTop: 3,
paddingHorizontal: 2,
borderWidth: 10,
borderRadius: 25,
borderColor: '#FFCD4C',
},
label: {
color: 'white',
},
image: {
width: 100,
height: 100,
},
legend: {
color: 'white',
lineHeight: 24,
},
});