src/views/diary/components/FreeText.js
import React from 'react';
import {
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import BookShelfStickerSvgr from '../../../assets/stickersSvgr/BookshelfStickerSvgr';
import DetailsRoundButton from '../../../components/buttons/DetailsRoundButton';
import FreeTextDetails from './FreeTextDetails';
import InfoBoxOverlay from '../../../components/dialogBoxes/InfoBoxOverlay';
import {setBorderStyle} from '../../../utils/FormatterUtils';
import {RoundButtonSize} from '../../../utils/DimensionsConstants';
import {diaryStyles} from '../Styles';
import {globalStyles} from '../../../styles/styles';
import {iOSxLargeTypo} from '../../../styles/Typography';
/**
* Component displaying the free text element on the diary page.
* If there is no free text, the image of a sticker is displayed instead.
* @param {Object} props - Properties
* @param {string} props.freeText - Free text
* @param {Object} props.componentStyle - Styling of the component
* @returns {Object} The free text element as displayed on a diary page
*/
export default function FreeText(props) {
// Retrive props
const freeText = props.freeText;
const componentStyle = props.componentStyle;
// Displays free text if any
if (freeText.content !== null && freeText.content !== '') {
const textContainerStyle = setBorderStyle(
freeText.paperColor,
diaryStyles.freeTextContainer,
);
// 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,
{backgroundColor: freeText.paperColor},
]}>
<InfoBoxOverlay
modalVisible={modalVisible}
onModalRequestCloseAction={toggleModalVisibility}
onPressButtonAction={toggleModalVisibility}>
<View style={styles.overlay}>
<FreeTextDetails freeText={freeText} />
</View>
</InfoBoxOverlay>
<View style={textContainerStyle}>
<ScrollView>
<TouchableOpacity onPress={displayModal}>
<Text
style={[
iOSxLargeTypo.body,
styles.text,
{color: freeText.textColor},
]}>
{freeText.content}
</Text>
</TouchableOpacity>
</ScrollView>
</View>
<DetailsRoundButton
buttonSize={RoundButtonSize.TINY}
containerStyle={diaryStyles.detailButtonContainer}
onPress={displayModal}
/>
</View>
);
} else {
// Display a sticker if there is no free text assessment
return (
<View style={styles.image}>
<BookShelfStickerSvgr style={[globalStyles.fillWidth]} />
</View>
);
}
}
/** Local styles */
const styles = StyleSheet.create({
overlay: {
flex: 1,
justifyContent: 'center',
alignContent: 'center',
width: '100%',
height: '100%',
padding: 50,
},
text: {
flex: 1,
width: '100%',
height: '100%',
},
image: {
position: 'absolute',
width: '25%',
aspectRatio: 1,
bottom: '3%',
left: '12%',
transform: [{rotate: '-4deg'}],
},
});