Home Reference Source

src/views/assessment/menu/components/MenuIcon.js

import React from 'react';
import {Image, StyleSheet, TouchableOpacity} from 'react-native';
import Animated, {ZoomIn} from 'react-native-reanimated';

import Avatar from '../../../../components/avatar/Avatar';

import {globalStyles} from '../../../../styles/styles';
import {MoodContext} from '../../../../utils/Contexts';

/**
 * Makes an icon in the assessment menu.
 * @param {number} delay - Delay before icon is displayed
 * @param {function} onPress - Function to be run when icon is pressed
 * @param {string} png - Path of the icon picture
 * @returns {Object} The icon component
 */
export default function MenuIcon({delay, onPress, png}) {
    //If no path, we should use avatar face
    const useAvatar = png == undefined;

    //Fetch mood state, to draw avatar with current mood
    const {mood} = React.useContext(MoodContext);

    return (
        //The icons are animated and displayed after delay
        <Animated.View style={{flex: 1}} entering={ZoomIn.delay(delay)}>
            <TouchableOpacity
                style={globalStyles.coverAll}
                //When pressed => onPress function
                onPress={() => onPress()}>
                {useAvatar ? (
                    //If no path
                    <Avatar full={false} mood={mood} />
                ) : (
                    //If path
                    <Image
                        source={png}
                        style={[styles.icon, globalStyles.shadow]}
                    />
                )}
            </TouchableOpacity>
        </Animated.View>
    );
}

/**
 * Local styles
 * @type {Object}
 */
const styles = StyleSheet.create({
    icon: {
        flex: 1,
        resizeMode: 'contain',
        width: '100%',
    },
});