src/components/buttons/BaseRoundButtonShadow.js
import React from 'react';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {
RoundButtonDimensions,
RoundButtonSize,
} from '../../utils/DimensionsConstants';
import {UIColors} from '../../utils/ColorConstants';
/**
* Component representing the base for a round button with shadow.
* @param {Object} props - Properties
* @param {RoundButtonSize} props.buttonSize - Size of the button
* @param {Object} props.componentStyle - Styling of component
* @param {function} props.onPress - Action to be executed when the button is pressedz
* @param {Object} props.children - Content of the button
* @returns {Object} Basis round button
*/
export default function BaseRoundButtonShadow(props) {
// Retrieve props
const buttonSize = props.buttonSize;
const componentStyle = props.componentStyle;
const onPressAction = props.onPress;
const children = props.children;
// Set width of button
let buttonWidth;
switch (buttonSize) {
case RoundButtonSize.NORMAL:
buttonWidth = RoundButtonDimensions.NORMAL_BUTTON.width;
break;
case RoundButtonSize.SMALL:
buttonWidth = RoundButtonDimensions.SMALL_BUTTON.width;
break;
case RoundButtonSize.TINY:
buttonWidth = RoundButtonDimensions.TINY_BUTTON.width;
break;
default:
buttonWidth = RoundButtonDimensions.NORMAL_BUTTON.width;
}
const borderRadius = buttonWidth / 2;
let containerStyle;
if (componentStyle === undefined) {
containerStyle = StyleSheet.create({
flex: 1,
padding: 20,
});
} else {
containerStyle = componentStyle;
}
return (
<View style={containerStyle}>
<TouchableOpacity
onPress={onPressAction}
style={[
styles.roundContainer,
{width: buttonWidth, borderRadius: borderRadius},
]}>
{children}
</TouchableOpacity>
</View>
);
}
/** Local styles */
const styles = StyleSheet.create({
roundContainer: {
shadowOffset: {
width: 0,
height: 0,
},
shadowColor: UIColors.SHADOW,
shadowRadius: 3,
shadowOpacity: 0.25,
aspectRatio: 1,
},
});