Home Reference Source

src/components/buttons/BaseSquareButtonLeftIcon.js

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

import BaseSquareButton from './BaseSquareButton';

import {ColorPalette} from '../../utils/ColorConstants';
import {iOSxxxLargeTypo} from '../../styles/Typography';

/**
 * Component representing the base for a square button with shadow. Used in dialog boxes.
 * @param {Object} props - Properties
 * @param {Object} props.icon - Icon of the button
 * @param {string[]} props.label - Text label of the button
 * @param {Object} props.componentStyle - Styling of component
 * @param {Object} props.labelStyle - Styling of label
 * @param {function} props.onPress - Action to be executed when the button is pressed
 * @returns {Object} Base for constructing a square button with shadow, to be used in dialog boxes.
 */

export default function BaseSquareButtonLeftIcon(props) {
    // Retrieve props
    const icon = props.icon;
    const [label1, label2] = props.label;
    const componentStyle = props.componentStyle;
    const labelStyle = props.labelStyle;
    const onPressAction = props.onPress;

    return (
        <BaseSquareButton
            onPress={onPressAction}
            componentStyle={[styles.container, componentStyle]}>
            <View style={styles.icon}>{icon}</View>

            <View style={styles.textContainer}>
                <Text style={[iOSxxxLargeTypo.headline, labelStyle]}>
                    {label1}
                </Text>

                {label2 !== undefined && (
                    <Text style={[iOSxxxLargeTypo.subhead, labelStyle]}>
                        {label2}
                    </Text>
                )}
            </View>
        </BaseSquareButton>
    );
}

/**
 * Local styles
 */
const styles = StyleSheet.create({
    container: {
        backgroundColor: ColorPalette.SOFT_ORANGE,
    },
    icon: {
        height: 70,
        width: '35%',
        margin: 15,
    },
    textContainer: {
        flex: 1,
        width: '60%',
        height: '100%',
        justifyContent: 'center',
        alignContent: 'center',
    },
});