src/views/diary/components/Drawing.js
import React from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import DetailsRoundButton from '../../../components/buttons/DetailsRoundButton';
import DrawingDetails from './DrawingDetails';
import InfoBoxOverlay from '../../../components/dialogBoxes/InfoBoxOverlay';
import TeddyBearStickerSvgr from '../../../assets/stickersSvgr/TeddyBearStickerSvgr';
import {ColorPalette} from '../../../utils/ColorConstants';
import {RoundButtonSize} from '../../../utils/DimensionsConstants';
import {diaryStyles} from '../Styles';
import {globalStyles} from '../../../styles/styles';
import {iOSxxxLargeTypo} from '../../../styles/Typography';
/**
* Component displaying the drawing made by the user, on a diary page.
* - If none, displays a sticker instead.
* - If drawing is not null, but not a valid name, a message saying that the drawing
* cannot be displayed will be shown.
* @param {Object} props - Properties
* @param {Object} props.source - Source of the image
* @param {Object} props.componentStyle - Styling of the component
* @returns {Object} Drawing displayed on a page of the diary
*/
export default function Drawing(props) {
// Retrieve props:
const source = props.source;
const componentStyle = props.componentStyle;
// Displays the drawing if there is a valid one.
// A valid drawing source is a require (number)
if (source !== null && typeof source === 'number') {
// Variables setting the visibility of the modal overlay view
const [modalVisible, setModalVisible] = React.useState(false);
const toggleModalVisibility = () => {
setModalVisible(!modalVisible);
};
const displayModal = () => setModalVisible(true);
return (
<View style={componentStyle}>
<InfoBoxOverlay
modalVisible={modalVisible}
onModalRequestCloseAction={toggleModalVisibility}
onPressButtonAction={toggleModalVisibility}>
<DrawingDetails source={source} />
</InfoBoxOverlay>
<TouchableOpacity
style={styles.imageContainer}
onPress={displayModal}>
<Image source={source} style={[globalStyles.resetImage]} />
<DetailsRoundButton
buttonSize={RoundButtonSize.TINY}
containerStyle={diaryStyles.detailButtonContainer}
onPress={displayModal}
/>
</TouchableOpacity>
</View>
);
} else if (source !== null && typeof source !== 'number') {
// User has drawn a drawing, but the source is not valid.
return (
<View style={styles.textContainer}>
<Text style={iOSxxxLargeTypo.body}>
Din tegning kan dessverre ikke vises. Vi jobber med saken!
</Text>
</View>
);
} else {
// Displays a sticker if there is no drawing.
return (
<View style={styles.stickerContainer}>
<TeddyBearStickerSvgr style={[globalStyles.fillWidth]} />
</View>
);
}
}
/** Local styles */
const styles = StyleSheet.create({
imageContainer: {
flex: 1,
position: 'absolute',
width: '100%',
height: '100%',
padding: 3,
borderColor: ColorPalette.ROCKET_METALLIC,
borderWidth: 4,
},
textContainer: {
position: 'absolute',
width: '25%',
padding: 20,
top: '60%',
left: '63%',
borderWidth: 2,
borderColor: ColorPalette.ATOMIC_TANGERINE,
borderBottomRightRadius: 30,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
alignContent: 'center',
justifyContent: 'center',
alignItems: 'center',
},
stickerContainer: {
position: 'absolute',
width: '25%',
aspectRatio: 1,
top: '60%',
left: '63%',
transform: [{rotate: '7deg'}],
},
});