upd: redesign

Deskripsi:
- fitur ganti mode tema
- penerapan tema pada semua fitur

NO Issues
This commit is contained in:
2026-02-09 17:49:25 +08:00
parent ddfee00410
commit d3802ca26c
157 changed files with 1278 additions and 692 deletions

View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Dimensions, Platform, TextInput, View } from "react-native";
import Text from "./Text";
@@ -15,7 +16,7 @@ type Props = {
type: 'default' | 'visible-password' | 'numeric'
round?: boolean
width?: number
bg?: 'white' | 'transparent'
bg?: string
value?: string
disable?: boolean
multiline?: boolean
@@ -26,13 +27,14 @@ type Props = {
export function InputForm({ label, value, placeholder, onChange, info, disable, error, errorText, required, itemLeft, itemRight, type, round, width, bg, multiline, mb = true, focus }: Props) {
const lebar = Dimensions.get("window").width;
const { colors } = useTheme();
if (itemLeft != undefined || itemRight != undefined) {
return (
<View style={[mb && Styles.mb10]}>
{
label != undefined && (
<Text style={[{ marginBottom: 5, textTransform: "capitalize" }, error && Styles.cError]}>
<Text style={[{ marginBottom: 5, textTransform: "capitalize", color: colors.text }, error && Styles.cError]}>
{label}
{required && (<Text style={Styles.cError}>*</Text>)}
</Text>
@@ -43,13 +45,18 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
multiline && { alignItems: 'flex-end' },
round && Styles.round30,
{ backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' },
{
backgroundColor: bg
? (bg === 'white' ? (colors.background === '#151718' ? '#2d2e2f' : 'white') : bg)
: 'transparent',
borderColor: colors.icon
},
error && { borderColor: "red" },
Platform.OS == 'ios' ? { paddingVertical: 10 } : { paddingVertical: 0, minHeight: 40 },
{ alignItems: 'center' },
multiline
? { alignItems: "flex-end" } // multiline: tombol send di bawah
: { alignItems: "center" }, // default: tetap di tengah
? { alignItems: "flex-end" }
: { alignItems: "center" },
]}>
{itemRight != undefined ? itemRight : itemLeft}
<TextInput
@@ -58,19 +65,19 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
placeholder={placeholder}
keyboardType={type}
onChangeText={onChange}
placeholderTextColor={'gray'}
placeholderTextColor={colors.icon}
multiline={multiline}
numberOfLines={3}
style={[
Styles.mh05,
multiline && { height: '100%', maxHeight: 100 },
{ width: width ? lebar * width / 100 : lebar * 0.78, color: 'black' },
{ width: width ? lebar * width / 100 : lebar * 0.78, color: colors.text },
Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 3 } : { paddingVertical: 0 },
]}
/>
</View>
{error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.cGray, Styles.mt05]}>{info}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, { color: colors.icon }, Styles.mt05]}>{info}</Text>)}
</View>
)
}
@@ -81,7 +88,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
<View style={[Styles.mb10]}>
{
label != undefined && (
<Text style={[Styles.mb05, error && Styles.cError]}>
<Text style={[Styles.mb05, error && Styles.cError, { color: colors.text }]}>
{label}
{required && (<Text style={Styles.cError}>*</Text>)}
</Text>
@@ -92,14 +99,27 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
placeholder={placeholder}
keyboardType={type}
editable={!disable}
style={[Styles.inputRoundForm, Platform.OS == 'ios' ? { paddingVertical: 11 } : { paddingVertical: 6 }, error && { borderColor: "red" }, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }, { color: 'black' }, multiline && { height: 150, textAlignVertical: 'top' }]}
style={[
Styles.inputRoundForm,
Platform.OS == 'ios' ? { paddingVertical: 11 } : { paddingVertical: 6 },
error && { borderColor: "red" },
round && Styles.round30,
{
backgroundColor: bg
? (bg === 'white' ? (colors.background === '#151718' ? '#2d2e2f' : 'white') : bg)
: 'transparent',
borderColor: colors.icon
},
{ color: colors.text },
multiline && { height: 150, textAlignVertical: 'top' }
]}
onChangeText={onChange}
placeholderTextColor={'gray'}
placeholderTextColor={colors.icon}
multiline={multiline}
numberOfLines={multiline ? 5 : undefined}
/>
{error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, { color: colors.icon }]}>{info}</Text>)}
</View>
)
}
}