wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tampilkan ikon search dan ikon x secara bersamaan di input pencarian

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
amaliadwiy
2026-05-05 16:26:07 +08:00
parent 36c2519fa0
commit a5e379cc7f
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/inputForm.tsx
View File

@@ -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>)}