deskripsi:
- fix styles Text input & Text area
This commit is contained in:
2025-07-09 10:58:47 +08:00
parent 16559b94fe
commit 6ac122c631
6 changed files with 133 additions and 142 deletions

View File

@@ -1,3 +1,4 @@
import { GStyles } from "@/styles/global-styles";
import Ionicons from "@expo/vector-icons/Ionicons";
import React, { useState } from "react";
import {
@@ -8,7 +9,7 @@ import {
View,
ViewStyle,
} from "react-native";
import { textInputStyles } from "./textInputStyles";
type IconType = React.ReactNode | string;
@@ -49,7 +50,7 @@ export const TextInputCustom = ({
const renderIcon = (icon: IconType) => {
if (!icon) return null;
return typeof icon === "string" ? (
<Text style={textInputStyles.iconText}>{icon}</Text>
<Text style={GStyles.iconTextInput}>{icon}</Text>
) : (
icon
);
@@ -73,27 +74,27 @@ export const TextInputCustom = ({
};
return (
<View style={textInputStyles.container}>
<View style={GStyles.containerAreaInput}>
{label && (
<Text style={textInputStyles.label}>
<Text style={GStyles.labelInput}>
{label}
{required && <Text style={textInputStyles.required}> *</Text>}
{required && <Text style={GStyles.requiredInput}> *</Text>}
</Text>
)}
<View
style={[
textInputStyles.inputContainer,
disabled && textInputStyles.disabled,
GStyles.inputContainerInput,
disabled && GStyles.disabledInput,
{ borderRadius },
externalError || internalError ? textInputStyles.errorBorder : null,
externalError || internalError ? GStyles.errorBorderInput : null,
style,
]}
>
{iconLeft && (
<View style={textInputStyles.icon}>{renderIcon(iconLeft)}</View>
<View style={GStyles.iconInput}>{renderIcon(iconLeft)}</View>
)}
<RNTextInput
style={[textInputStyles.input, { color: fontColor }]}
style={[GStyles.inputInput, { color: fontColor }]}
editable={!disabled}
secureTextEntry={secureTextEntry && !isPasswordVisible}
keyboardType={keyboardType}
@@ -104,7 +105,7 @@ export const TextInputCustom = ({
{secureTextEntry && (
<TouchableOpacity
onPress={() => setIsPasswordVisible((prev) => !prev)}
style={textInputStyles.icon}
style={GStyles.iconInput}
>
<Ionicons
name={isPasswordVisible ? "eye-off" : "eye"}
@@ -114,12 +115,12 @@ export const TextInputCustom = ({
</TouchableOpacity>
)}
{iconRight && (
<View style={textInputStyles.icon}>{renderIcon(iconRight)}</View>
<View style={GStyles.iconInput}>{renderIcon(iconRight)}</View>
)}
</View>
{/* Prioritaskan error eksternal */}
{externalError || internalError ? (
<Text style={textInputStyles.errorMessage}>
<Text style={GStyles.errorMessageInput}>
{externalError || internalError}
</Text>
) : null}

View File

@@ -1,85 +0,0 @@
// components/text-input.styles.ts
import { MainColor } from "@/constants/color-palet";
import { TEXT_SIZE_LARGE, TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
import { StyleSheet } from "react-native";
export const textInputStyles = StyleSheet.create({
// Container utama input (View luar)
container: {
marginBottom: 16,
},
// Label di atas input
label: {
fontSize: 14,
marginBottom: 6,
fontWeight: "500",
color: MainColor.white_gray,
},
// Tanda bintang merah untuk required
required: {
color: "red",
},
// Pesan error di bawah input
errorMessage: {
marginTop: 4,
fontSize: 12,
color: MainColor.red,
},
// Input Length
inputLength: {
fontSize: 12,
color: MainColor.white_gray,
},
// Wrapper input (View pembungkus TextInput)
inputContainer: {
flexDirection: "row",
alignItems: "center",
borderWidth: 1,
borderColor: MainColor.white_gray,
backgroundColor: MainColor.white,
paddingHorizontal: 12,
height: 50,
},
// Style saat disabled
disabled: {
backgroundColor: "#f9f9f9",
borderColor: "#e0e0e0",
},
// Input utama (TextInput)
input: {
flex: 1,
fontSize: TEXT_SIZE_MEDIUM,
paddingVertical: 0,
},
// Ikon di kiri/kanan
icon: {
marginHorizontal: 4,
justifyContent: "center",
},
// Teks ikon jika berupa string
iconText: {
fontSize: TEXT_SIZE_LARGE,
color: "#000",
},
// Border merah jika ada error
errorBorder: {
borderColor: "red",
},
// Untuk TextArea tambahan
textArea: {
textAlignVertical: "top",
padding: 12,
height: undefined, // biar multiline bebas tinggi
},
});