frontend: conditionally add padding when there's a password toggle
Pedro Lucas Porcellis porcellis@eletrotupi.com · 4 months ago
2dea64dc3ee07b4462518384906f36f6f786fad9 Browse filesParents
35cadbaChanged files
1
Additions
+3
Deletions
-3
frontend/components/ui/Input.tsx
1 1
import React, { useState } from 'react';
2 2
import {
3 3
TextInput,
4 4
TextInputProps,
5 5
StyleSheet,
17 17
label?: string;
18 18
error?: string;
19 19
variant?: InputVariant;
20 20
}
21 21
22 -
function useInputStyles(variant: InputVariant, error?: string) {
22 +
function useInputStyles(variant: InputVariant, error?: string, hasPasswordToggle?: boolean) {
23 23
let backgroundColor = null;
24 24
25 25
const textColor = useThemeColor({}, 'text');
26 26
const defaultBackgroundColor = useThemeColor({}, 'inputBackgroundColor');
27 27
const backgroundDarkGhostColor = useThemeColor({}, 'inputBackgroundDarkGhostColor');
43 43
const inputStyle = {
44 44
color: textColor,
45 45
backgroundColor: backgroundColor,
46 46
borderColor: error ? errorColor : borderColor,
47 47
borderWidth: isGhost || isDarkGhost ? 0 : 1,
48 +
paddingRight: hasPasswordToggle ? 44 : 0
48 49
};
49 50
50 51
return { textColor, placeholderColor, errorColor, inputStyle };
51 52
}
52 53
68 69
const {
69 70
textColor,
70 71
placeholderColor,
71 72
errorColor,
72 73
inputStyle
73 -
} = useInputStyles(variant, error);
74 +
} = useInputStyles(variant, error, showPasswordToggle);
74 75
75 76
const keyboardType = type === 'email' ? 'email-address' : 'default';
76 77
const secureTextEntry = type === 'password' && !showPassword;
77 78
78 79
return (
192 193
position: 'relative',
193 194
},
194 195
input: {
195 196
height: 48,
196 197
paddingHorizontal: 12,
197 -
paddingRight: 44,
198 198
borderWidth: 1,
199 199
borderRadius: 8,
200 200
fontSize: 16,
201 201
},
202 202
textArea: {
214 214
errorText: {
215 215
fontSize: 12,
216 216
marginTop: 4,
217 217
},
218 218
});