src/components/buttons/JournalButton.js
import React from 'react';
import {StyleSheet, Text, TouchableOpacity} from 'react-native';
import {iOSxLargeTypo} from '../../styles/Typography';
import {
ButtonLightness,
ButtonLength,
JournalButtonDimensions,
} from '../../utils/DimensionsConstants';
import {JournalColors} from '../../utils/ColorConstants';
/**
* Component displaying a square button for the journal module, with the specified label.
* @param {Object} props - Properties
* @param {ButtonLightness} props.lightness - Lightness of the color of the button
* @param {ButtonLength} props.length - Length of the button
* @param {string} label - Text label of the button
* @param {Object} style - Styling of the component
* @param {function} props.onPress - Action for the button
* @returns {Object} A square button with specified text label
*/
export default function JournalButton(props) {
// Retrieve props:
const lightness = props.lightness;
const length = props.length;
const label = props.label === undefined ? 'The Button' : props.label;
const customStyle = props.style;
const onPress = props.onPress;
// Set style
let containerStyle = [styles.container];
if (customStyle !== undefined) containerStyle.push(customStyle);
let labelStyle = [styles.label, iOSxLargeTypo.headline];
if (lightness === ButtonLightness.LIGHT) {
containerStyle.push(styles.lightContainer);
labelStyle.push(styles.lightLabel);
}
// Set legnth of button
switch (length) {
case ButtonLength.FULL_LENGTH:
containerStyle.push({width: '100%'});
break;
case ButtonLength.SHORT:
containerStyle.push(styles.containerInTable);
break;
case ButtonLength.NORMAL:
containerStyle.push({
width: JournalButtonDimensions.NORMAL_BUTTON.width,
});
break;
default:
containerStyle.push({
width: JournalButtonDimensions.NORMAL_BUTTON.width,
});
}
return (
<TouchableOpacity style={containerStyle} onPress={onPress}>
<Text style={labelStyle}>{label}</Text>
</TouchableOpacity>
);
}
/** Local styles
* @type {Object}
*/
const styles = StyleSheet.create({
container: {
backgroundColor: JournalColors.BACKGROUND_BUTTON_NORMAL,
alignItems: 'center',
justifyContent: 'center',
width: 300,
height: JournalButtonDimensions.NORMAL_BUTTON.height,
marginTop: 10,
marginBottom: 10,
borderRadius: JournalButtonDimensions.NORMAL_BUTTON.borderRadius,
},
label: {
color: JournalColors.BACKGROUND_BUTTON_NORMAL_TEXT,
textAlignVertical: 'center',
},
lightContainer: {
backgroundColor: JournalColors.BACKGROUND_BUTTON_LIGHT,
},
lightLabel: {
color: JournalColors.BACKGROUND_BUTTON_LIGHT_TEXT,
},
containerInTable: {
width: JournalButtonDimensions.SMALL_BUTTON.width,
height: JournalButtonDimensions.SMALL_BUTTON.height,
borderRadius: JournalButtonDimensions.SMALL_BUTTON.borderRadius,
marginLeft: 0,
},
});