amalia/05-mei-26 #43
@@ -30,6 +30,10 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
|
||||
const { colors } = useTheme();
|
||||
|
||||
if (itemLeft != undefined || itemRight != undefined) {
|
||||
const hasBothItems = itemLeft != undefined && itemRight != undefined;
|
||||
const baseInputWidth = width ? lebar * width / 100 : lebar * 0.78;
|
||||
// When both icons present, shrink TextInput by right icon size to keep container width stable
|
||||
const textInputWidth = hasBothItems ? baseInputWidth - 30 : baseInputWidth;
|
||||
return (
|
||||
<View style={[mb && Styles.mb10]}>
|
||||
{
|
||||
@@ -42,7 +46,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
|
||||
}
|
||||
<View style={[
|
||||
Styles.inputRoundForm,
|
||||
itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
|
||||
hasBothItems ? Styles.inputRoundFormLeft : itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
|
||||
multiline && { alignItems: 'flex-end' },
|
||||
round && Styles.round30,
|
||||
{
|
||||
@@ -50,12 +54,11 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
|
||||
},
|
||||
error ? { borderColor: colors.error } : { borderColor: colors.icon + '20' },
|
||||
Platform.OS == 'ios' ? { paddingVertical: 10 } : { paddingVertical: 0, minHeight: 40 },
|
||||
{ alignItems: 'center' },
|
||||
multiline
|
||||
? { alignItems: "flex-end" }
|
||||
: { alignItems: "center" },
|
||||
]}>
|
||||
{itemRight != undefined ? itemRight : itemLeft}
|
||||
{hasBothItems ? itemLeft : (itemRight != undefined ? itemRight : itemLeft)}
|
||||
<TextInput
|
||||
editable={!disable}
|
||||
value={value}
|
||||
@@ -68,10 +71,11 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
|
||||
style={[
|
||||
Styles.mh05,
|
||||
multiline && { height: '100%', maxHeight: 100 },
|
||||
{ width: width ? lebar * width / 100 : lebar * 0.78, color: colors.text },
|
||||
{ width: textInputWidth, color: colors.text },
|
||||
Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 4 } : { paddingVertical: 0 },
|
||||
]}
|
||||
/>
|
||||
{hasBothItems && itemRight}
|
||||
</View>
|
||||
{error && (<Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>{errorText}</Text>)}
|
||||
{info != undefined && (<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mt05]}>{info}</Text>)}
|
||||
|
||||
Reference in New Issue
Block a user