mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-03-03 20:07:11 +01:00
Code Issues Projects Releases Packages Wiki Activity

REF: StyledButton to TS

Browse source
This commit is contained in:
Daniel Padrino 2024-04-09 17:47:13 -03:00 • committed by Overtorment
parent b299fcd6fa
commit 34952a00fe
1 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
components/StyledButton.js → components/StyledButton.tsx
View file

@ -1,11 +1,22 @@
import React from 'react'; import React, { FC } from 'react';
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native'; import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { useTheme } from './themes'; import { useTheme } from './themes';
export const StyledButtonType = { default: 'default', destroy: 'destroy', grey: 'grey' }; export const StyledButtonType: Record<string, string> = { default: 'default', destroy: 'destroy', grey: 'grey' };
const StyledButton = props => {
const { onPress, text = '', disabled = false, buttonStyle = StyledButtonType.default } = props; interface StyledButtonProps {
onPress: () => void;
text: string;
disabled?: boolean;
buttonStyle?: keyof typeof StyledButtonType;
}
const StyledButton: FC<StyledButtonProps> = ({
onPress,
text,
disabled = false,
buttonStyle = StyledButtonType.default
}) => {
const { colors } = useTheme(); const { colors } = useTheme();
const stylesHook = StyleSheet.create({ const stylesHook = StyleSheet.create({
buttonGrey: { buttonGrey: {
@ -14,6 +25,9 @@ const StyledButton = props => {
textGray: { textGray: {
color: colors.buttonTextColor, color: colors.buttonTextColor,
}, },
container: {
opacity: disabled ? 0.5 : 1.0
}
}); });
const textStyles = () => { const textStyles = () => {
if (buttonStyle === StyledButtonType.grey) { if (buttonStyle === StyledButtonType.grey) {
@ -35,10 +49,8 @@ const StyledButton = props => {
} }
}; };
const opacity = { opacity: disabled ? 0.5 : 1.0 };
return ( return (
<TouchableOpacity accessibilityRole="button" onPress={onPress} disabled={disabled} style={opacity}> <TouchableOpacity accessibilityRole="button" onPress={onPress} disabled={disabled} style={stylesHook.container}>
<View style={[styles.buttonContainer, buttonStyles()]}> <View style={[styles.buttonContainer, buttonStyles()]}>
<Text style={[styles.text, textStyles()]}>{text}</Text> <Text style={[styles.text, textStyles()]}>{text}</Text>
</View> </View>
@ -77,9 +89,3 @@ const styles = StyleSheet.create({
}); });
export default StyledButton; export default StyledButton;
StyledButton.propTypes = {
onPress: PropTypes.func.isRequired,
text: PropTypes.string.isRequired,
disabled: PropTypes.bool,
buttonStyle: PropTypes.string,
};