Home Reference Source

src/views/diary/components/PictureActivity.js

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

import PhotoCornerTopLeftSvgr from '../../../assets/itemsSvgr/PhotoCornerTopLeftSvgr';
import PhotoCornerTopRightSvgr from '../../../assets/itemsSvgr/PhotoCornerTopRightSvgr';
import PhotoCornerBottomLeftSvgr from '../../../assets/itemsSvgr/PhotoCornerBottomLeftSvgr';
import PhotoCornerBottomRightSvgr from '../../../assets/itemsSvgr/PhotoCornerBottomRightSvgr';

import {globalStyles} from '../../../styles/styles';

/**
 * Component displaying the picture of the activity with photo corners.
 * @param {Object} props - Properties
 * @param {Object} props.source - Source of the image
 * @returns {Object} Picture of the activity
 */
export default function PictureActivity(props) {
    // Retrieve props
    const source = props.source;

    return (
        <View style={styles.container}>
            <View style={styles.innerContainer}>
                <ImageBackground
                    source={source}
                    style={globalStyles.resetImage}>
                    <PhotoCornerTopLeftSvgr
                        style={[
                            styles.corner,
                            styles.topLeft,
                            globalStyles.lightShadow,
                        ]}
                    />
                    <PhotoCornerTopRightSvgr
                        style={[
                            styles.corner,
                            styles.topRight,
                            globalStyles.lightShadow,
                        ]}
                    />
                    <PhotoCornerBottomLeftSvgr
                        style={[
                            styles.corner,
                            styles.bottomLeft,
                            globalStyles.lightShadow,
                        ]}
                    />
                    <PhotoCornerBottomRightSvgr
                        style={[
                            styles.corner,
                            styles.bottomRight,
                            globalStyles.lightShadow,
                        ]}
                    />
                </ImageBackground>
            </View>
        </View>
    );
}

/** Local styles */
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignSelf: 'flex-end',
        justifyContent: 'space-between',
        alignContent: 'space-between',
        position: 'absolute',
        top: 50,
        right: 5,
        height: '40%',
        width: '43%',
    },
    innerContainer: {
        height: '98%',
        width: '98%',
    },
    corner: {
        height: 30,
        width: 30,
    },
    topLeft: {
        position: 'absolute',
        top: -4,
        left: -4,
    },
    topRight: {
        position: 'absolute',
        alignSelf: 'flex-end',
        top: -4,
        right: -4,
    },
    bottomLeft: {
        position: 'absolute',
        bottom: -4,
        left: -4,
    },
    bottomRight: {
        position: 'absolute',
        bottom: -4,
        right: -4,
    },
});