src/views/diary/components/FreeTextDetails.js
import React from 'react';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {diaryStyles} from '../Styles';
import {globalStyles} from '../../../styles/styles';
import {iOSxxxLargeTypo} from '../../../styles/Typography';
import {setBorderStyle} from '../../../utils/FormatterUtils';
/**
* Detailed view of free text
* @param {Object} props - Properties
* @param {string} props.freeText - Free text
* @returns {Object} A detailed and large view of the free text
*/
export default function FreeTextDetails(props) {
// Retrieve props
const freeText = props.freeText;
const containerStyle = [
styles.container,
globalStyles.shadow,
{backgroundColor: freeText.paperColor},
];
const textContainerStyle = setBorderStyle(
freeText.paperColor,
diaryStyles.freeTextContainer,
{backgroundColor: freeText.paperColor},
);
const textStyle = [
styles.text,
iOSxxxLargeTypo.body,
{color: freeText.textColor},
];
return (
<View style={containerStyle}>
<View style={[textContainerStyle]}>
<ScrollView>
<Text style={textStyle}>{freeText.content}</Text>
</ScrollView>
</View>
</View>
);
}
/** Local styles */
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
height: '100%',
padding: 10,
},
text: {
flex: 1,
width: '100%',
height: '100%',
padding: 15,
},
});