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 27 days ago 0cf854c934d9213cafffde1bada0ac913e4716ab

Parents: c36c1f2

1 file(s) changed

frontend/components/ui/Input.tsx +32 -4

frontend/components/ui/Input.tsx

@@ -65,7 +65,12 @@ style,
      ...props
    }) => {
      const [showPassword, setShowPassword] = useState(false);
  -   const { textColor, placeholderColor, errorColor, inputStyle } = useInputStyles(variant, error);
  +   const {
  +     textColor,
  +     placeholderColor,
  +     errorColor,
  +     inputStyle
  +   } = useInputStyles(variant, error);
    
      const keyboardType = type === 'email' ? 'email-address' : 'default';
      const secureTextEntry = type === 'password' && !showPassword;

@@ -73,7 +78,7 @@
      return (
        <View style={styles.container}>
          {label && (
  -         <Text style={[styles.label, { color: textColor }]}>{label}</Text>
  +         <Label text={label} />
          )}
          <View style={styles.inputContainer}>
            <TextInput

@@ -121,7 +126,12 @@ maxRows,
      style,
      ...props
    }) => {
  -   const { textColor, placeholderColor, errorColor, inputStyle } = useInputStyles(variant, error);
  +   const {
  +     textColor,
  +     placeholderColor,
  +     errorColor,
  +     inputStyle
  +   } = useInputStyles(variant, error);
    
      const minHeight = minRows * 24;
      const maxHeight = maxRows ? maxRows * 24 : undefined;

@@ -129,7 +139,7 @@
      return (
        <View style={styles.container}>
          {label && (
  -         <Text style={[styles.label, { color: textColor }]}>{label}</Text>
  +         <Label text={label} />
          )}
          <TextInput
            style={[

@@ -148,6 +158,24 @@ {error && (
            <Text style={[styles.errorText, { color: errorColor }]}>{error}</Text>
          )}
        </View>
  +   );
  + };
  + 
  + interface LabelProps extends React.ComponentProps<typeof Text> {
  +   text: string;
  + }
  + 
  + export const Label: React.FC<LabelProps> = ({
  +   text,
  +   style,
  +   ...props
  + }) => {
  +   const textColor = useThemeColor({}, 'text');
  + 
  +   return (
  +     <Text style={[styles.label, { color: textColor }, style]} {...props}>
  +       {text}
  +     </Text>
      );
    };
    