diff --git a/app/(application)/(user)/portofolio/[id]/create.tsx b/app/(application)/(user)/portofolio/[id]/create.tsx
index 6a9c7aa..0405867 100644
--- a/app/(application)/(user)/portofolio/[id]/create.tsx
+++ b/app/(application)/(user)/portofolio/[id]/create.tsx
@@ -1,14 +1,14 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import {
- ButtonCustom,
- Grid,
- SelectCustom,
- Spacing,
- StackCustom,
- TextAreaCustom,
- TextCustom,
- TextInputCustom,
- ViewWrapper,
+ ButtonCustom,
+ Grid,
+ SelectCustom,
+ Spacing,
+ StackCustom,
+ TextAreaCustom,
+ TextCustom,
+ TextInputCustom,
+ ViewWrapper,
} from "@/components";
import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
import InformationBox from "@/components/Box/InformationBox";
@@ -100,11 +100,7 @@ export default function PortofolioCreate() {
Tambah Pilihan
-
+
@@ -123,6 +119,13 @@ export default function PortofolioCreate() {
/>
+
+
+
= ({
const renderIcon = (icon: IconType) => {
if (!icon) return null;
return typeof icon === "string" ? (
- {icon}
+ {icon}
) : (
icon
);
};
return (
-
+
{label && (
-
+
{label}
- {required && *}
+ {required && *}
)}
{iconLeft && (
- {renderIcon(iconLeft)}
+ {renderIcon(iconLeft)}
)}
= ({
multiline
numberOfLines={numberOfLines}
style={[
- textInputStyles.input,
- textInputStyles.textArea,
+ GStyles.inputInput,
+ GStyles.textAreaInput,
{ color: fontColor },
]}
editable={!disabled}
@@ -114,7 +113,7 @@ const TextAreaCustom: React.FC = ({
/>
{iconRight && (
- {renderIcon(iconRight)}
+ {renderIcon(iconRight)}
)}
@@ -128,11 +127,11 @@ const TextAreaCustom: React.FC = ({
}}
>
{hasError ? (
- {error}
+ {error}
) : null}
{showCount && maxLength ? (
-
+
{(value as string)?.length || 0}/{maxLength}
) : null}
diff --git a/components/TextInput/TextInputCustom.tsx b/components/TextInput/TextInputCustom.tsx
index 405e7b1..0ff2789 100644
--- a/components/TextInput/TextInputCustom.tsx
+++ b/components/TextInput/TextInputCustom.tsx
@@ -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" ? (
- {icon}
+ {icon}
) : (
icon
);
@@ -73,27 +74,27 @@ export const TextInputCustom = ({
};
return (
-
+
{label && (
-
+
{label}
- {required && *}
+ {required && *}
)}
{iconLeft && (
- {renderIcon(iconLeft)}
+ {renderIcon(iconLeft)}
)}
setIsPasswordVisible((prev) => !prev)}
- style={textInputStyles.icon}
+ style={GStyles.iconInput}
>
)}
{iconRight && (
- {renderIcon(iconRight)}
+ {renderIcon(iconRight)}
)}
{/* Prioritaskan error eksternal */}
{externalError || internalError ? (
-
+
{externalError || internalError}
) : null}
diff --git a/components/TextInput/textInputStyles.ts b/components/TextInput/textInputStyles.ts
deleted file mode 100644
index ed300bc..0000000
--- a/components/TextInput/textInputStyles.ts
+++ /dev/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
- },
-});
diff --git a/styles/global-styles.ts b/styles/global-styles.ts
index d79c2f1..8eabd9d 100644
--- a/styles/global-styles.ts
+++ b/styles/global-styles.ts
@@ -1,4 +1,4 @@
-import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
+import { TEXT_SIZE_LARGE, TEXT_SIZE_MEDIUM, TEXT_SIZE_SMALL } from "@/constants/constans-value";
import { Dimensions, StyleSheet } from "react-native";
import { AccentColor, MainColor } from "../constants/color-palet";
@@ -141,14 +141,6 @@ export const GStyles = StyleSheet.create({
backgroundColor: MainColor.darkblue,
borderTopColor: AccentColor.blue,
borderTopWidth: 1,
- // shadowColor: AccentColor.blue,
- // shadowOffset: {
- // width: 0,
- // height: -1,
- // },
- // shadowOpacity: 0.9,
- // shadowRadius: 5,
- // elevation: 5,
},
bottomBarContainer: {
paddingHorizontal: 15,
@@ -161,4 +153,85 @@ export const GStyles = StyleSheet.create({
width: "50%",
alignSelf: "center",
},
+ // =============== BUTTON =============== //
+
+ // =============== TEXT INPUT =============== //
+ // Container utama input (View luar)
+ containerAreaInput: {
+ marginBottom: 16,
+ },
+
+ // Label di atas input
+ labelInput: {
+ fontSize: TEXT_SIZE_MEDIUM,
+ marginBottom: 6,
+ fontWeight: "500",
+ color: MainColor.white_gray,
+ },
+
+ // Tanda bintang merah untuk required
+ requiredInput: {
+ color: "red",
+ },
+
+ // Pesan error di bawah input
+ errorMessageInput: {
+ marginTop: 4,
+ fontSize: TEXT_SIZE_SMALL,
+ color: MainColor.red,
+ },
+
+ // Input Length
+ inputMaxLength: {
+ fontSize: TEXT_SIZE_SMALL,
+ color: MainColor.white_gray,
+ },
+
+ // Wrapper input (View pembungkus TextInput)
+ inputContainerInput: {
+ flexDirection: "row",
+ alignItems: "center",
+ borderWidth: 1,
+ borderColor: MainColor.white_gray,
+ backgroundColor: MainColor.white,
+ paddingHorizontal: 10,
+ height: 50,
+ },
+
+ // Style saat disabled
+ disabledInput: {
+ backgroundColor: "#f9f9f9",
+ borderColor: "#e0e0e0",
+ },
+
+ // Input utama (TextInput)
+ inputInput: {
+ flex: 1,
+ fontSize: TEXT_SIZE_MEDIUM,
+ paddingVertical: 0,
+ },
+
+ // Ikon di kiri/kanan
+ iconInput: {
+ marginHorizontal: 4,
+ justifyContent: "center",
+ },
+
+ // Teks ikon jika berupa string
+ iconTextInput: {
+ fontSize: TEXT_SIZE_LARGE,
+ color: "#000",
+ },
+
+ // Border merah jika ada error
+ errorBorderInput: {
+ borderColor: "red",
+ },
+
+ // Untuk TextArea tambahan
+ textAreaInput: {
+ textAlignVertical: "top",
+ padding: 5,
+ height: undefined, // biar multiline bebas tinggi
+ },
});