Home Reference Source

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,
    },
});