BlueWallet/components/Button.tsx
2023-11-15 04:40:22 -04:00

84 lines
2.0 KiB
TypeScript

import React from 'react';
import { TouchableOpacity, View, Text, StyleSheet, StyleProp, ViewStyle } from 'react-native';
import { Icon } from 'react-native-elements';
import { useTheme } from './themes';
// Define an interface for the props
interface ButtonProps {
backgroundColor?: string;
buttonTextColor?: string;
disabled?: boolean;
testID?: string;
icon?: {
name: string;
type: string;
color: string;
};
title?: string;
style?: StyleProp<ViewStyle>;
onPress?: () => void;
}
export const Button: React.FC<ButtonProps> = props => {
const { colors } = useTheme();
let backgroundColor = props.backgroundColor ?? colors.mainColor;
let fontColor = props.buttonTextColor ?? colors.buttonTextColor;
if (props.disabled) {
backgroundColor = colors.buttonDisabledBackgroundColor;
fontColor = colors.buttonDisabledTextColor;
}
const buttonStyle = {
...styles.button,
backgroundColor,
borderColor: props.disabled ? colors.buttonDisabledBackgroundColor : 'transparent',
};
const textStyle = {
...styles.text,
color: fontColor,
};
return (
<TouchableOpacity
testID={props.testID}
style={[buttonStyle, props.style]}
accessibilityRole="button"
onPress={props.onPress}
disabled={props.disabled}
>
<View style={styles.content}>
{props.icon && <Icon name={props.icon.name} type={props.icon.type} color={props.icon.color} />}
{props.title && <Text style={textStyle}>{props.title}</Text>}
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
button: {
borderWidth: 0.7,
minHeight: 45,
height: 45,
maxHeight: 45,
borderRadius: 25,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 16,
flexGrow: 1,
},
content: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
text: {
marginHorizontal: 8,
fontSize: 16,
fontWeight: '500',
},
});
export default Button;