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