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

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

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

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

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

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

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

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

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

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

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

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

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