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