eletrotupi / tcc/ commit / ed34b04

frontend: hoist the theme reads out of Button's conditional getters

Pedro Lucas Porcellis porcellis@eletrotupi.com · 12 days ago ed34b0497a309385687884b59eaa3b57c205df3d Browse files
Parents bb0d5b0
Changed files
1
Additions
+14
Deletions
-8
frontend/components/ui/Button.tsx modified+14 -8
frontend/components/ui/Button.tsx
1 1 
import React from 'react';
2 2 
import {
3 3 
  TouchableOpacity,
4 4 
  StyleSheet,
5 5 
  ActivityIndicator,
41 41 
  ...props
42 42 
}) => {
43 43 
  const primaryColor = useThemeColor({}, 'tint');
44 44 
  const textColor = useThemeColor({}, 'text');
45 45 
  const textSecondaryColor = useThemeColor({}, 'textSecondary');
46 - 
  const backgroundColor = useThemeColor({}, 'background');
47 - 
  const borderColor = useThemeColor({}, 'border');
46 + 
  const secondaryBackgroundColor = useThemeColor({}, 'secondaryBackground');
47 + 
  const dangerColor = useThemeColor({}, 'danger');
48 + 
  const whiteColor = useThemeColor({}, 'white');
49 + 
  const disabledBackgroundColor = useThemeColor(
50 + 
    { light: '#e5e5e5', dark: '#404040' },
51 + 
    'background',
52 + 
  );
53 + 
  const disabledBorderColor = useThemeColor({}, 'disabled');
48 54 
  const borderDashedColor = useThemeColor({}, 'borderDashed');
49 55
50 56 
  const getBackgroundColor = () => {
51 - 
    if (disabled) return useThemeColor({ light: '#e5e5e5', dark: '#404040' }, 'background');
57 + 
    if (disabled) return disabledBackgroundColor;
52 58 
    switch (variant) {
53 59 
      case 'primary':
54 60 
        return primaryColor;
55 61 
      case 'secondary':
56 - 
        return useThemeColor({}, 'secondaryBackground');
62 + 
        return secondaryBackgroundColor;
57 63 
      case 'danger':
58 - 
        return useThemeColor({}, 'danger');
64 + 
        return dangerColor;
59 65 
      case 'outline':
60 66 
      case 'ghost':
61 67 
      case 'dashed':
62 68 
        return 'transparent';
63 69 
      default:
64 70 
        return primaryColor;
65 71 
    }
66 72 
  };
67 73
68 74 
  const getTextColor = () => {
69 - 
    if (disabled) return useThemeColor({}, 'text');
75 + 
    if (disabled) return textColor;
70 76
71 77 
    switch (variant) {
72 78 
      case 'primary':
73 79 
        return textColor;
74 80 
      case 'secondary':
75 - 
        return useThemeColor({}, 'white');
81 + 
        return whiteColor;
76 82 
      case 'outline':
77 83 
      case 'ghost':
78 84 
        return textColor;
79 85 
      case 'dashed':
80 86 
        return textSecondaryColor;
92 98 
  };
93 99
94 100 
  const getBorderColor = () => {
95 101 
    if (variant === 'outline' || variant === 'dashed') {
96 102 
      if (disabled) {
97 - 
        return borderColor;
103 + 
        return disabledBorderColor;
98 104 
      } else if (variant === 'dashed') {
99 105 
        return borderDashedColor;
100 106 
      } else {
101 107 
        return primaryColor;
102 108 
      }
198 204 
  },
199 205 
  text: {
200 206 
    fontWeight: '600',
201 207 
  },
202 208 
});