Home Reference Source

src/views/assessment/components/buttons/BaseDrawingButton.js

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

import {ButtonPosition} from '../../../../utils/DimensionsConstants';
import {ColorPalette} from '../../../../utils/ColorConstants';
import {globalStyles} from '../../../../styles/styles';

/**
 * The base button used in the drawing and free text menu.
 * @param {Object} props - Properties
 * @param {Object} props.componentStyle - The style of the button
 * @param {ButtonPosition} props.position - Positioning of the button
 * @param {function} props.onPress - Action for the button
 * @param {Object} props.children - Child components of the button
 * @returns {Object} The base button used in the drawing and free text menu.
 */
export default function BaseDrawingButton(props) {
    // Retrieve props
    const componentStyle = props.componentStyle;
    const position = props.position;
    const onPressAction = props.onPress;
    const children = props.children;

    const containerStyle = [styles.container, globalStyles.lightShadow];

    // Button positioning
    switch (position) {
        case ButtonPosition.LEFT:
            containerStyle.push(styles.left);
            break;
        case ButtonPosition.RIGHT:
            containerStyle.push(styles.right);
            break;
        default:
            containerStyle.push(styles.default);
    }

    containerStyle.push(componentStyle);
    return (
        <TouchableOpacity style={containerStyle} onPress={onPressAction}>
            {children}
        </TouchableOpacity>
    );
}

/** Local styles
 * @type {Object}
 */
const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignContent: 'center',
        alignItems: 'center',
        alignSelf: 'flex-end',
        backgroundColor: ColorPalette.ALMOST_WHITE,
        width: 110,
        height: 100,
        marginTop: 10,
        marginBottom: 10,
        padding: 14,
    },
    right: {
        borderTopLeftRadius: 30,
        borderBottomLeftRadius: 30,
    },
    left: {
        borderTopRightRadius: 30,
        borderBottomRigthRadius: 30,
    },
    default: {
        borderRadius: 30,
        width: 100,
        margin: 10,
    },
});