From 34952a00fee06a71ca718ee448828fe808ca811d Mon Sep 17 00:00:00 2001
From: Daniel Padrino <danswarrior1@gmail.com>
Date: Tue, 9 Apr 2024 17:47:13 -0300
Subject: [PATCH] REF: StyledButton to TS

---
 .../{StyledButton.js => StyledButton.tsx}     | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)
 rename components/{StyledButton.js => StyledButton.tsx} (75%)

diff --git a/components/StyledButton.js b/components/StyledButton.tsx
similarity index 75%
rename from components/StyledButton.js
rename to components/StyledButton.tsx
index e3e802e47..614ba33cd 100644
--- a/components/StyledButton.js
+++ b/components/StyledButton.tsx
@@ -1,11 +1,22 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
 import { useTheme } from './themes';
 
-export const StyledButtonType = { default: 'default', destroy: 'destroy', grey: 'grey' };
-const StyledButton = props => {
-  const { onPress, text = '', disabled = false, buttonStyle = StyledButtonType.default } = props;
+export const StyledButtonType: Record<string, string> = { default: 'default', destroy: 'destroy', grey: 'grey' };
+
+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 stylesHook = StyleSheet.create({
     buttonGrey: {
@@ -14,6 +25,9 @@ const StyledButton = props => {
     textGray: {
       color: colors.buttonTextColor,
     },
+    container: {
+      opacity: disabled ? 0.5 : 1.0
+    }
   });
   const textStyles = () => {
     if (buttonStyle === StyledButtonType.grey) {
@@ -35,10 +49,8 @@ const StyledButton = props => {
     }
   };
 
-  const opacity = { opacity: disabled ? 0.5 : 1.0 };
-
   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()]}>
         <Text style={[styles.text, textStyles()]}>{text}</Text>
       </View>
@@ -77,9 +89,3 @@ const styles = StyleSheet.create({
 });
 
 export default StyledButton;
-StyledButton.propTypes = {
-  onPress: PropTypes.func.isRequired,
-  text: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  buttonStyle: PropTypes.string,
-};