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 + }, });