mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-02-23 23:27:26 +01:00
84 lines
2 KiB
TypeScript
84 lines
2 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;
|