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(); const { colors } = useTheme();
if (itemLeft != undefined || itemRight != undefined) { 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 ( return (
<View style={[mb && Styles.mb10]}> <View style={[mb && Styles.mb10]}>
{ {
@@ -42,7 +46,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
} }
<View style={[ <View style={[
Styles.inputRoundForm, Styles.inputRoundForm,
itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft, hasBothItems ? Styles.inputRoundFormLeft : itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
multiline && { alignItems: 'flex-end' }, multiline && { alignItems: 'flex-end' },
round && Styles.round30, round && Styles.round30,
{ {
@@ -50,12 +54,11 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
}, },
error ? { borderColor: colors.error } : { borderColor: colors.icon + '20' }, error ? { borderColor: colors.error } : { borderColor: colors.icon + '20' },
Platform.OS == 'ios' ? { paddingVertical: 10 } : { paddingVertical: 0, minHeight: 40 }, Platform.OS == 'ios' ? { paddingVertical: 10 } : { paddingVertical: 0, minHeight: 40 },
{ alignItems: 'center' },
multiline multiline
? { alignItems: "flex-end" } ? { alignItems: "flex-end" }
: { alignItems: "center" }, : { alignItems: "center" },
]}> ]}>
{itemRight != undefined ? itemRight : itemLeft} {hasBothItems ? itemLeft : (itemRight != undefined ? itemRight : itemLeft)}
<TextInput <TextInput
editable={!disable} editable={!disable}
value={value} value={value}
@@ -68,10 +71,11 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
style={[ style={[
Styles.mh05, Styles.mh05,
multiline && { height: '100%', maxHeight: 100 }, 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 }, Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 4 } : { paddingVertical: 0 },
]} ]}
/> />
{hasBothItems && itemRight}
</View> </View>
{error && (<Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>{errorText}</Text>)} {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>)} {info != undefined && (<Text style={[Styles.textInformation, { color: colors.dimmed }, Styles.mt05]}>{info}</Text>)}