eletrotupi / tcc/ commit / 0cf854c

frontend/components: unify the label component so we can use on other places

Also makes it easier to change stuff around. Btw, I gotta find time to
rework this whole components thing, it's getting a bit out of hand
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago 0cf854c934d9213cafffde1bada0ac913e4716ab Browse files
Parents c36c1f2
Changed files
1
Additions
+32
Deletions
-4
frontend/components/ui/Input.tsx modified+32 -4
frontend/components/ui/Input.tsx
1 1 
import React, { useState } from 'react';
2 2 
import {
3 3 
  TextInput,
4 4 
  TextInputProps,
5 5 
  StyleSheet,
63 63 
  showPasswordToggle = false,
64 64 
  style,
65 65 
  ...props
66 66 
}) => {
67 67 
  const [showPassword, setShowPassword] = useState(false);
68 - 
  const { textColor, placeholderColor, errorColor, inputStyle } = useInputStyles(variant, error);
68 + 
  const {
69 + 
    textColor,
70 + 
    placeholderColor,
71 + 
    errorColor,
72 + 
    inputStyle
73 + 
  } = useInputStyles(variant, error);
69 74
70 75 
  const keyboardType = type === 'email' ? 'email-address' : 'default';
71 76 
  const secureTextEntry = type === 'password' && !showPassword;
72 77
73 78 
  return (
74 79 
    <View style={styles.container}>
75 80 
      {label && (
76 - 
        <Text style={[styles.label, { color: textColor }]}>{label}</Text>
81 + 
        <Label text={label} />
77 82 
      )}
78 83 
      <View style={styles.inputContainer}>
79 84 
        <TextInput
80 85 
          key={`${type}-${showPassword}`}
81 86 
          style={[styles.input, inputStyle, style]}
119 124 
  minRows = 3,
120 125 
  maxRows,
121 126 
  style,
122 127 
  ...props
123 128 
}) => {
124 - 
  const { textColor, placeholderColor, errorColor, inputStyle } = useInputStyles(variant, error);
129 + 
  const {
130 + 
    textColor,
131 + 
    placeholderColor,
132 + 
    errorColor,
133 + 
    inputStyle
134 + 
  } = useInputStyles(variant, error);
125 135
126 136 
  const minHeight = minRows * 24;
127 137 
  const maxHeight = maxRows ? maxRows * 24 : undefined;
128 138
129 139 
  return (
130 140 
    <View style={styles.container}>
131 141 
      {label && (
132 - 
        <Text style={[styles.label, { color: textColor }]}>{label}</Text>
142 + 
        <Label text={label} />
133 143 
      )}
134 144 
      <TextInput
135 145 
        style={[
136 146 
          styles.textArea,
137 147 
          inputStyle,
146 156 
      />
147 157 
      {error && (
148 158 
        <Text style={[styles.errorText, { color: errorColor }]}>{error}</Text>
149 159 
      )}
150 160 
    </View>
161 + 
  );
162 + 
};
163 +
164 + 
interface LabelProps extends React.ComponentProps<typeof Text> {
165 + 
  text: string;
166 + 
}
167 +
168 + 
export const Label: React.FC<LabelProps> = ({
169 + 
  text,
170 + 
  style,
171 + 
  ...props
172 + 
}) => {
173 + 
  const textColor = useThemeColor({}, 'text');
174 +
175 + 
  return (
176 + 
    <Text style={[styles.label, { color: textColor }, style]} {...props}>
177 + 
      {text}
178 + 
    </Text>
151 179 
  );
152 180 
};
153 181
154 182 
const styles = StyleSheet.create({
155 183 
  container: {
186 214 
  errorText: {
187 215 
    fontSize: 12,
188 216 
    marginTop: 4,
189 217 
  },
190 218 
});