Home Reference Source

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