eletrotupi / tcc/ frontend/components/ui/Button.tsxfa665bdbab7d637d3dccb1a31808acb9611fb861
3.9 KB | 178 lines Raw
1
import React from 'react';
2
import {
3
  TouchableOpacity,
4
  Text,
5
  StyleSheet,
6
  ActivityIndicator,
7
  TouchableOpacityProps,
8
  ViewStyle,
9
  TextStyle,
10
} from 'react-native';
11
import { useThemeColor } from '@/hooks/use-theme-color';
12
13
interface ButtonProps extends TouchableOpacityProps {
14
  title: string;
15
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'dashed' | 'danger';
16
  size?: 'small' | 'medium' | 'large';
17
  loading?: boolean;
18
  disabled?: boolean;
19
  style?: ViewStyle;
20
  textStyle?: TextStyle;
21
}
22
23
export const Button: React.FC<ButtonProps> = ({
24
  title,
25
  variant = 'primary',
26
  size = 'medium',
27
  loading = false,
28
  disabled = false,
29
  style,
30
  textStyle,
31
  onPress,
32
  ...props
33
}) => {
34
  const primaryColor = useThemeColor({}, 'tint');
35
  const textColor = useThemeColor({}, 'text');
36
  const textSecondaryColor = useThemeColor({}, 'textSecondary');
37
  const backgroundColor = useThemeColor({}, 'background');
38
  const borderColor = useThemeColor({}, 'border');
39
  const borderDashedColor = useThemeColor({}, 'borderDashed');
40
41
  const getBackgroundColor = () => {
42
    if (disabled) return useThemeColor({ light: '#e5e5e5', dark: '#404040' }, 'background');
43
    switch (variant) {
44
      case 'primary':
45
        return primaryColor;
46
      case 'secondary':
47
        return useThemeColor({}, 'secondaryBackground');
48
      case 'danger':
49
        return useThemeColor({}, 'danger');
50
      case 'outline':
51
      case 'ghost':
52
      case 'dashed':
53
        return 'transparent';
54
      default:
55
        return primaryColor;
56
    }
57
  };
58
59
  const getTextColor = () => {
60
    if (disabled) return useThemeColor({}, 'text');
61
62
    switch (variant) {
63
      case 'primary':
64
        return textColor;
65
      case 'secondary':
66
        return useThemeColor({}, 'white');
67
      case 'outline':
68
      case 'ghost':
69
        return textColor;
70
      case 'dashed':
71
        return textSecondaryColor;
72
      default:
73
        return '#fff';
74
    }
75
  };
76
77
  const getBorderWidth = () => {
78
    if (variant === 'outline' || variant === 'dashed') {
79
      return 1;
80
    } else {
81
      return 0;
82
    }
83
  };
84
85
  const getBorderColor = () => {
86
    if (variant === 'outline' || variant === 'dashed') {
87
      if (disabled) {
88
        return borderColor;
89
      } else if (variant === 'dashed') {
90
        return borderDashedColor;
91
      } else {
92
        return primaryColor;
93
      }
94
    }
95
96
    return 'transparent';
97
  };
98
99
  const getBorderStyle = () => {
100
    return variant === 'dashed' ? 'dashed' : 'solid';
101
  }
102
103
  const getHeight = () => {
104
    switch (size) {
105
      case 'small':
106
        return 36;
107
      case 'medium':
108
        return 44;
109
      case 'large':
110
        return 52;
111
      default:
112
        return 44;
113
    }
114
  };
115
116
  const getFontSize = () => {
117
    switch (size) {
118
      case 'small':
119
        return 14;
120
      case 'medium':
121
        return 16;
122
      case 'large':
123
        return 18;
124
      default:
125
        return 16;
126
    }
127
  };
128
129
  return (
130
    <TouchableOpacity
131
      style={[
132
        styles.button,
133
        {
134
          backgroundColor: getBackgroundColor(),
135
          borderWidth: getBorderWidth(),
136
          borderColor: getBorderColor(),
137
          borderStyle: getBorderStyle(),
138
          height: getHeight(),
139
          opacity: disabled || loading ? 0.6 : 1,
140
        },
141
        style,
142
      ]}
143
      disabled={disabled || loading}
144
      onPress={onPress}
145
      {...props}
146
    >
147
      {loading ? (
148
        <ActivityIndicator color={getTextColor()} />
149
      ) : (
150
        <Text
151
          style={[
152
            styles.text,
153
            {
154
              color: getTextColor(),
155
              fontSize: getFontSize(),
156
            },
157
            textStyle,
158
          ]}
159
        >
160
          {title}
161
        </Text>
162
      )}
163
    </TouchableOpacity>
164
  );
165
};
166
167
const styles = StyleSheet.create({
168
  button: {
169
    borderRadius: 8,
170
    paddingHorizontal: 20,
171
    alignItems: 'center',
172
    justifyContent: 'center',
173
    marginVertical: 8,
174
  },
175
  text: {
176
    fontWeight: '600',
177
  },
178
});