styles
deskripsi: - fix styles Text input & Text area
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user