wibu/hipmi-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Migrate Profile screens to NewWrapper_V2

Browse Source 
- Replace ViewWrapper/NewWrapper with NewWrapper_V2 in all Profile screens
- Add enableKeyboardHandling to form screens (create, edit, detail-blocked)
- Wrap all TextInput/SelectCustom with View onStartShouldSetResponder
- Fix keyboard handling issues (footer lift, white area, input cutoff)
- Migrate 7 Profile screens: create, edit, index, detail-blocked, blocked-list, update-photo, update-background

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
bagasbanuna
2026-04-04 13:00:36 +08:00
parent 3290fa99d2
commit 3382c16cdb
7 changed files with 128 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/(application)/(user)/profile/[id]/blocked-list.tsx
View File

@@ -9,7 +9,7 @@ import {
import ListEmptyComponent from "@/components/_ShareComponent/ListEmptyComponent"; import ListEmptyComponent from "@/components/_ShareComponent/ListEmptyComponent";
import ListLoaderFooterComponent from "@/components/_ShareComponent/ListLoaderFooterComponent"; import ListLoaderFooterComponent from "@/components/_ShareComponent/ListLoaderFooterComponent";
import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent"; import ListSkeletonComponent from "@/components/_ShareComponent/ListSkeletonComponent";
import NewWrapper from "@/components/_ShareComponent/NewWrapper"; import { NewWrapper_V2 } from "@/components";
import { MainColor } from "@/constants/color-palet"; import { MainColor } from "@/constants/color-palet";
import { useAuth } from "@/hooks/use-auth"; import { useAuth } from "@/hooks/use-auth";
import { usePaginatedApi } from "@/hooks/use-paginated-api"; import { usePaginatedApi } from "@/hooks/use-paginated-api";
@@ -120,7 +120,7 @@ export default function ProfileBlockedList() {
return ( return (
<> <>
<NewWrapper <NewWrapper_V2
// headerComponent={renderHeader()} // headerComponent={renderHeader()}
listData={listData} listData={listData}
renderItem={renderItem} renderItem={renderItem}

8
app/(application)/(user)/profile/[id]/detail-blocked.tsx
View File

@@ -5,7 +5,7 @@ import {
BoxButtonOnFooter, BoxButtonOnFooter,
BoxWithHeaderSection, BoxWithHeaderSection,
ButtonCustom, ButtonCustom,
NewWrapper, NewWrapper_V2,
StackCustom, StackCustom,
TextCustom, TextCustom,
} from "@/components"; } from "@/components";
@@ -46,7 +46,9 @@ export default function ProfileDetailBlocked() {
return ( return (
<> <>
<NewWrapper <NewWrapper_V2
enableKeyboardHandling
keyboardScrollOffset={100}
footerComponent={ footerComponent={
<BoxButtonOnFooter> <BoxButtonOnFooter>
<ButtonCustom <ButtonCustom
@@ -86,7 +88,7 @@ export default function ProfileDetailBlocked() {
</TextCustom> </TextCustom>
</StackCustom> </StackCustom>
</BoxWithHeaderSection> </BoxWithHeaderSection>
</NewWrapper> </NewWrapper_V2>
</> </>
); );
} }

93
app/(application)/(user)/profile/[id]/edit.tsx
View File

@@ -1,15 +1,16 @@
import { import {
ButtonCustom, ButtonCustom,
NewWrapper_V2,
SelectCustom, SelectCustom,
StackCustom, StackCustom,
TextInputCustom, TextInputCustom,
ViewWrapper,
} from "@/components"; } from "@/components";
import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter"; import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile"; import { apiProfile, apiUpdateProfile } from "@/service/api-client/api-profile";
import { IProfile } from "@/types/Type-Profile"; import { IProfile } from "@/types/Type-Profile";
import { router, useLocalSearchParams } from "expo-router"; import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { View } from "react-native";
import Toast from "react-native-toast-message"; import Toast from "react-native-toast-message";
export default function ProfileEdit() { export default function ProfileEdit() {
@@ -70,7 +71,9 @@ export default function ProfileEdit() {
}; };
return ( return (
<ViewWrapper <NewWrapper_V2
enableKeyboardHandling
keyboardScrollOffset={100}
footerComponent={ footerComponent={
<BoxButtonOnFooter> <BoxButtonOnFooter>
<ButtonCustom isLoading={isLoading} onPress={handleUpdate}> <ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
@@ -80,45 +83,53 @@ export default function ProfileEdit() {
} }
> >
<StackCustom gap={"xs"}> <StackCustom gap={"xs"}>
<TextInputCustom <View onStartShouldSetResponder={() => true}>
label="Nama" <TextInputCustom
placeholder="Nama" label="Nama"
value={data?.name} placeholder="Nama"
onChangeText={(text) => { value={data?.name}
setData({ ...data, name: text }); onChangeText={(text) => {
}} setData({ ...data, name: text });
required }}
/> required
<TextInputCustom />
keyboardType="email-address" </View>
label="Email" <View onStartShouldSetResponder={() => true}>
placeholder="Email" <TextInputCustom
value={data?.email} keyboardType="email-address"
onChangeText={(text) => { label="Email"
setData({ ...data, email: text }); placeholder="Email"
}} value={data?.email}
required onChangeText={(text) => {
/> setData({ ...data, email: text });
<TextInputCustom }}
label="Alamat" required
placeholder="Alamat" />
value={data?.alamat} </View>
onChangeText={(text) => { <View onStartShouldSetResponder={() => true}>
setData({ ...data, alamat: text }); <TextInputCustom
}} label="Alamat"
required placeholder="Alamat"
/> value={data?.alamat}
<SelectCustom onChangeText={(text) => {
required setData({ ...data, alamat: text });
label="Jenis Kelamin" }}
placeholder="Pilih jenis kelamin" required
data={options} />
value={data?.jenisKelamin} </View>
onChange={(value) => { <View onStartShouldSetResponder={() => true}>
setData({ ...(data as any), jenisKelamin: value }); <SelectCustom
}} required
/> label="Jenis Kelamin"
placeholder="Pilih jenis kelamin"
data={options}
value={data?.jenisKelamin}
onChange={(value) => {
setData({ ...(data as any), jenisKelamin: value });
}}
/>
</View>
</StackCustom> </StackCustom>
</ViewWrapper> </NewWrapper_V2>
); );
} }

6
app/(application)/(user)/profile/[id]/index.tsx
View File

@@ -1,5 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */
import { NewWrapper, StackCustom } from "@/components"; import { NewWrapper_V2, StackCustom } from "@/components";
import AppHeader from "@/components/_ShareComponent/AppHeader"; import AppHeader from "@/components/_ShareComponent/AppHeader";
import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom"; import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
import LeftButtonCustom from "@/components/Button/BackButton"; import LeftButtonCustom from "@/components/Button/BackButton";
@@ -119,7 +119,7 @@ export default function Profile() {
}} }}
/> />
{/* Main View */} {/* Main View */}
<NewWrapper <NewWrapper_V2
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
@@ -144,7 +144,7 @@ export default function Profile() {
/> />
</> </>
)} )}
</NewWrapper> </NewWrapper_V2>
{/* Drawer Komponen Eksternal */} {/* Drawer Komponen Eksternal */}
<DrawerCustom <DrawerCustom

17
app/(application)/(user)/profile/[id]/update-background.tsx
View File

@@ -1,10 +1,10 @@
import { import {
BaseBox, BaseBox,
BoxButtonOnFooter, BoxButtonOnFooter,
ButtonCenteredOnly, ButtonCenteredOnly,
ButtonCustom, ButtonCustom,
NewWrapper_V2,
} from "@/components"; } from "@/components";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import API_STRORAGE from "@/constants/base-url-api-strorage"; import API_STRORAGE from "@/constants/base-url-api-strorage";
import DIRECTORY_ID from "@/constants/directory-id"; import DIRECTORY_ID from "@/constants/directory-id";
import DUMMY_IMAGE from "@/constants/dummy-image-value"; import DUMMY_IMAGE from "@/constants/dummy-image-value";
@@ -127,7 +127,10 @@ export default function UpdateBackgroundProfile() {
); );
return ( return (
<ViewWrapper footerComponent={buttonFooter}> <NewWrapper_V2
contentPaddingHorizontal={16}
footerComponent={buttonFooter}
>
<BaseBox <BaseBox
style={{ alignItems: "center", justifyContent: "center", height: 250 }} style={{ alignItems: "center", justifyContent: "center", height: 250 }}
> >
@@ -144,6 +147,6 @@ export default function UpdateBackgroundProfile() {
> >
Update Update
</ButtonCenteredOnly> </ButtonCenteredOnly>
</ViewWrapper> </NewWrapper_V2>
); );
} }

9
app/(application)/(user)/profile/[id]/update-photo.tsx
View File

@@ -3,8 +3,8 @@ import {
BoxButtonOnFooter, BoxButtonOnFooter,
ButtonCenteredOnly, ButtonCenteredOnly,
ButtonCustom, ButtonCustom,
NewWrapper_V2,
} from "@/components"; } from "@/components";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import API_STRORAGE from "@/constants/base-url-api-strorage"; import API_STRORAGE from "@/constants/base-url-api-strorage";
import DIRECTORY_ID from "@/constants/directory-id"; import DIRECTORY_ID from "@/constants/directory-id";
import DUMMY_IMAGE from "@/constants/dummy-image-value"; import DUMMY_IMAGE from "@/constants/dummy-image-value";
@@ -125,7 +125,10 @@ export default function UpdatePhotoProfile() {
); );
return ( return (
<ViewWrapper footerComponent={buttonFooter}> <NewWrapper_V2
contentPaddingHorizontal={16}
footerComponent={buttonFooter}
>
<BaseBox <BaseBox
style={{ alignItems: "center", justifyContent: "center", height: 250 }} style={{ alignItems: "center", justifyContent: "center", height: 250 }}
> >
@@ -143,6 +146,6 @@ export default function UpdatePhotoProfile() {
> >
Upload Upload
</ButtonCenteredOnly> </ButtonCenteredOnly>
</ViewWrapper> </NewWrapper_V2>
); );
} }

88
app/(application)/(user)/profile/create.tsx
View File

@@ -2,11 +2,11 @@ import {
BaseBox, BaseBox,
ButtonCenteredOnly, ButtonCenteredOnly,
ButtonCustom, ButtonCustom,
NewWrapper_V2,
SelectCustom, SelectCustom,
Spacing, Spacing,
StackCustom, StackCustom,
TextInputCustom, TextInputCustom,
ViewWrapper,
} from "@/components"; } from "@/components";
import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter"; import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
import InformationBox from "@/components/Box/InformationBox"; import InformationBox from "@/components/Box/InformationBox";
@@ -155,7 +155,11 @@ export default function CreateProfile() {
); );
return ( return (
<ViewWrapper footerComponent={footerComponent}> <NewWrapper_V2
enableKeyboardHandling
keyboardScrollOffset={100}
footerComponent={footerComponent}
>
<StackCustom> <StackCustom>
<InformationBox text="Upload foto profile anda." /> <InformationBox text="Upload foto profile anda." />
<View style={{ alignItems: "center" }}> <View style={{ alignItems: "center" }}>
@@ -204,43 +208,51 @@ export default function CreateProfile() {
</View> </View>
<Spacing /> <Spacing />
<TextInputCustom <View onStartShouldSetResponder={() => true}>
required <TextInputCustom
label="Nama" required
placeholder="Masukkan nama" label="Nama"
value={data.name} placeholder="Masukkan nama"
onChangeText={(text) => setData({ ...data, name: text })} value={data.name}
/> onChangeText={(text) => setData({ ...data, name: text })}
<TextInputCustom />
keyboardType="email-address" </View>
required <View onStartShouldSetResponder={() => true}>
label="Email" <TextInputCustom
placeholder="Masukkan email" keyboardType="email-address"
value={data.email} required
onChangeText={(text) => setData({ ...data, email: text })} label="Email"
/> placeholder="Masukkan email"
<TextInputCustom value={data.email}
required onChangeText={(text) => setData({ ...data, email: text })}
label="Alamat" />
placeholder="Masukkan alamat" </View>
value={data.alamat} <View onStartShouldSetResponder={() => true}>
onChangeText={(text) => setData({ ...data, alamat: text })} <TextInputCustom
/> required
<SelectCustom label="Alamat"
label="Jenis Kelamin" placeholder="Masukkan alamat"
placeholder="Pilih jenis kelamin" value={data.alamat}
data={[ onChangeText={(text) => setData({ ...data, alamat: text })}
{ label: "Laki-laki", value: "laki-laki" }, />
{ label: "Perempuan", value: "perempuan" }, </View>
]} <View onStartShouldSetResponder={() => true}>
value={data.jenisKelamin} <SelectCustom
required label="Jenis Kelamin"
onChange={(value) => placeholder="Pilih jenis kelamin"
setData({ ...(data as any), jenisKelamin: value }) data={[
} { label: "Laki-laki", value: "laki-laki" },
/> { label: "Perempuan", value: "perempuan" },
]}
value={data.jenisKelamin}
required
onChange={(value) =>
setData({ ...(data as any), jenisKelamin: value })
}
/>
</View>
<Spacing /> <Spacing />
</StackCustom> </StackCustom>
</ViewWrapper> </NewWrapper_V2>
); );
} }