feat: Migrate Profile, Waiting Room, and Delete Account to OS_Wrapper
Profile Screens (8 files):
- [id]/index.tsx: NewWrapper → OS_Wrapper (list with refresh)
- [id]/edit.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling)
- create.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling)
- [id]/blocked-list.tsx: NewWrapper → OS_Wrapper (pagination list)
- [id]/detail-blocked.tsx: NewWrapper → OS_Wrapper (static with footer)
- [id]/update-background.tsx: ViewWrapper → OS_Wrapper (static with footer)
- [id]/update-photo.tsx: ViewWrapper → OS_Wrapper (static with footer)
- All Profile forms use enableKeyboardHandling + contentPaddingBottom={250}
Other Screens (2 files):
- waiting-room.tsx: NewWrapper → OS_Wrapper (static with refresh + footer)
- delete-account.tsx: ViewWrapper → OS_Wrapper (form + keyboard handling)
Bug Fixes:
- AndroidWrapper: Add refreshControl to ScrollView (fix pull-to-refresh on static mode)
Pattern Applied:
- List screens: contentPaddingBottom=100 (default)
- Form screens: contentPaddingBottom=250 (with TextInput)
- No PADDING_INLINE (user preference - prevents box narrowing)
Documentation:
- Update TASK-005 with Phase 1 completion details
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
27
QWEN.md
27
QWEN.md
@@ -513,3 +513,30 @@ When using Maplibre MapView on iOS, prevent "Attempt to recycle a mounted view"
|
|||||||
- [Expo Router Documentation](https://docs.expo.dev/router/introduction/)
|
- [Expo Router Documentation](https://docs.expo.dev/router/introduction/)
|
||||||
- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
|
- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
|
||||||
- [Maplibre React Native](https://github.com/maplibre/maplibre-react-native)
|
- [Maplibre React Native](https://github.com/maplibre/maplibre-react-native)
|
||||||
|
|
||||||
|
## Qwen Added Memories
|
||||||
|
- OS_Wrapper contentPaddingBottom pattern:
|
||||||
|
- Default: contentPaddingBottom=100 (untuk list screens)
|
||||||
|
- Forms: contentPaddingBottom=250 (HANYA untuk screens yang punya TextInput/TextArea)
|
||||||
|
- contentPadding=0 (default, per-screen control)
|
||||||
|
- OS_ANDROID_PADDING_TOP=6 (compact tabs)
|
||||||
|
- OS_IOS_PADDING_TOP=12
|
||||||
|
- PADDING_INLINE=16 (constant)
|
||||||
|
|
||||||
|
Contoh:
|
||||||
|
```tsx
|
||||||
|
// List screen (default 100px)
|
||||||
|
<OS_Wrapper listData={data} renderItem={renderItem} />
|
||||||
|
|
||||||
|
// Form screen (explicit 250px)
|
||||||
|
<OS_Wrapper enableKeyboardHandling contentPaddingBottom={250}>
|
||||||
|
<FormWithTextInput />
|
||||||
|
</OS_Wrapper>
|
||||||
|
```
|
||||||
|
- PADDING_INLINE usage pattern - User preference:
|
||||||
|
- PADDING_INLINE (16px) TIDAK selalu diperlukan
|
||||||
|
- User remove PADDING_INLINE dari Profile screens karena mempersempit box tampilan
|
||||||
|
- Decision: Tambahkan PADDING_INLINE HANYA jika diperlukan per-screen, jangan default
|
||||||
|
- User akan review dan tambahkan sendiri jika perlu
|
||||||
|
|
||||||
|
Profile screens: PADDING_INLINE dihapus dari edit.tsx dan create.tsx
|
||||||
|
|||||||
@@ -3,10 +3,10 @@ import {
|
|||||||
BaseBox,
|
BaseBox,
|
||||||
ButtonCustom,
|
ButtonCustom,
|
||||||
CenterCustom,
|
CenterCustom,
|
||||||
|
OS_Wrapper,
|
||||||
StackCustom,
|
StackCustom,
|
||||||
TextCustom,
|
TextCustom,
|
||||||
TextInputCustom,
|
TextInputCustom,
|
||||||
ViewWrapper,
|
|
||||||
} from "@/components";
|
} from "@/components";
|
||||||
import { useAuth } from "@/hooks/use-auth";
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
import { apiDeleteUser } from "@/service/api-client/api-user";
|
import { apiDeleteUser } from "@/service/api-client/api-user";
|
||||||
@@ -68,7 +68,10 @@ export default function DeleteAccount() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ViewWrapper>
|
<OS_Wrapper
|
||||||
|
enableKeyboardHandling
|
||||||
|
contentPaddingBottom={250}
|
||||||
|
>
|
||||||
<StackCustom>
|
<StackCustom>
|
||||||
<BaseBox>
|
<BaseBox>
|
||||||
<StackCustom>
|
<StackCustom>
|
||||||
@@ -105,7 +108,7 @@ export default function DeleteAccount() {
|
|||||||
</StackCustom>
|
</StackCustom>
|
||||||
</BaseBox>
|
</BaseBox>
|
||||||
</StackCustom>
|
</StackCustom>
|
||||||
</ViewWrapper>
|
</OS_Wrapper>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,13 +3,13 @@ import {
|
|||||||
BadgeCustom,
|
BadgeCustom,
|
||||||
ClickableCustom,
|
ClickableCustom,
|
||||||
Divider,
|
Divider,
|
||||||
|
OS_Wrapper,
|
||||||
SelectCustom,
|
SelectCustom,
|
||||||
TextCustom,
|
TextCustom,
|
||||||
} from "@/components";
|
} from "@/components";
|
||||||
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 { 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
|
<OS_Wrapper
|
||||||
// headerComponent={renderHeader()}
|
// headerComponent={renderHeader()}
|
||||||
listData={listData}
|
listData={listData}
|
||||||
renderItem={renderItem}
|
renderItem={renderItem}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import {
|
|||||||
BoxButtonOnFooter,
|
BoxButtonOnFooter,
|
||||||
BoxWithHeaderSection,
|
BoxWithHeaderSection,
|
||||||
ButtonCustom,
|
ButtonCustom,
|
||||||
NewWrapper,
|
OS_Wrapper,
|
||||||
StackCustom,
|
StackCustom,
|
||||||
TextCustom,
|
TextCustom,
|
||||||
} from "@/components";
|
} from "@/components";
|
||||||
@@ -46,7 +46,7 @@ export default function ProfileDetailBlocked() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<NewWrapper
|
<OS_Wrapper
|
||||||
footerComponent={
|
footerComponent={
|
||||||
<BoxButtonOnFooter>
|
<BoxButtonOnFooter>
|
||||||
<ButtonCustom
|
<ButtonCustom
|
||||||
@@ -86,7 +86,7 @@ export default function ProfileDetailBlocked() {
|
|||||||
</TextCustom>
|
</TextCustom>
|
||||||
</StackCustom>
|
</StackCustom>
|
||||||
</BoxWithHeaderSection>
|
</BoxWithHeaderSection>
|
||||||
</NewWrapper>
|
</OS_Wrapper>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,12 @@
|
|||||||
import {
|
import {
|
||||||
ButtonCustom,
|
ButtonCustom,
|
||||||
|
OS_Wrapper,
|
||||||
SelectCustom,
|
SelectCustom,
|
||||||
StackCustom,
|
StackCustom,
|
||||||
TextInputCustom,
|
TextInputCustom,
|
||||||
ViewWrapper,
|
|
||||||
} from "@/components";
|
} from "@/components";
|
||||||
import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
|
import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
|
||||||
|
import { PADDING_INLINE } from "@/constants/constans-value";
|
||||||
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";
|
||||||
@@ -70,7 +71,9 @@ export default function ProfileEdit() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ViewWrapper
|
<OS_Wrapper
|
||||||
|
enableKeyboardHandling
|
||||||
|
contentPaddingBottom={250}
|
||||||
footerComponent={
|
footerComponent={
|
||||||
<BoxButtonOnFooter>
|
<BoxButtonOnFooter>
|
||||||
<ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
|
<ButtonCustom isLoading={isLoading} onPress={handleUpdate}>
|
||||||
@@ -119,6 +122,6 @@ export default function ProfileEdit() {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</StackCustom>
|
</StackCustom>
|
||||||
</ViewWrapper>
|
</OS_Wrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
/* eslint-disable react-hooks/exhaustive-deps */
|
/* eslint-disable react-hooks/exhaustive-deps */
|
||||||
import { NewWrapper, StackCustom } from "@/components";
|
import { OS_Wrapper, 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
|
<OS_Wrapper
|
||||||
refreshControl={
|
refreshControl={
|
||||||
<RefreshControl
|
<RefreshControl
|
||||||
refreshing={refreshing}
|
refreshing={refreshing}
|
||||||
@@ -144,7 +144,7 @@ export default function Profile() {
|
|||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</NewWrapper>
|
</OS_Wrapper>
|
||||||
|
|
||||||
{/* Drawer Komponen Eksternal */}
|
{/* Drawer Komponen Eksternal */}
|
||||||
<DrawerCustom
|
<DrawerCustom
|
||||||
|
|||||||
@@ -3,8 +3,8 @@ import {
|
|||||||
BoxButtonOnFooter,
|
BoxButtonOnFooter,
|
||||||
ButtonCenteredOnly,
|
ButtonCenteredOnly,
|
||||||
ButtonCustom,
|
ButtonCustom,
|
||||||
|
OS_Wrapper,
|
||||||
} 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,7 @@ export default function UpdateBackgroundProfile() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ViewWrapper footerComponent={buttonFooter}>
|
<OS_Wrapper footerComponent={buttonFooter}>
|
||||||
<BaseBox
|
<BaseBox
|
||||||
style={{ alignItems: "center", justifyContent: "center", height: 250 }}
|
style={{ alignItems: "center", justifyContent: "center", height: 250 }}
|
||||||
>
|
>
|
||||||
@@ -144,6 +144,6 @@ export default function UpdateBackgroundProfile() {
|
|||||||
>
|
>
|
||||||
Update
|
Update
|
||||||
</ButtonCenteredOnly>
|
</ButtonCenteredOnly>
|
||||||
</ViewWrapper>
|
</OS_Wrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,8 +3,8 @@ import {
|
|||||||
BoxButtonOnFooter,
|
BoxButtonOnFooter,
|
||||||
ButtonCenteredOnly,
|
ButtonCenteredOnly,
|
||||||
ButtonCustom,
|
ButtonCustom,
|
||||||
|
OS_Wrapper,
|
||||||
} 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,7 @@ export default function UpdatePhotoProfile() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ViewWrapper footerComponent={buttonFooter}>
|
<OS_Wrapper footerComponent={buttonFooter}>
|
||||||
<BaseBox
|
<BaseBox
|
||||||
style={{ alignItems: "center", justifyContent: "center", height: 250 }}
|
style={{ alignItems: "center", justifyContent: "center", height: 250 }}
|
||||||
>
|
>
|
||||||
@@ -143,6 +143,6 @@ export default function UpdatePhotoProfile() {
|
|||||||
>
|
>
|
||||||
Upload
|
Upload
|
||||||
</ButtonCenteredOnly>
|
</ButtonCenteredOnly>
|
||||||
</ViewWrapper>
|
</OS_Wrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,16 +2,17 @@ import {
|
|||||||
BaseBox,
|
BaseBox,
|
||||||
ButtonCenteredOnly,
|
ButtonCenteredOnly,
|
||||||
ButtonCustom,
|
ButtonCustom,
|
||||||
|
OS_Wrapper,
|
||||||
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";
|
||||||
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";
|
||||||
|
import { PADDING_INLINE } from "@/constants/constans-value";
|
||||||
import { useAuth } from "@/hooks/use-auth";
|
import { useAuth } from "@/hooks/use-auth";
|
||||||
import { apiCreateProfile } from "@/service/api-client/api-profile";
|
import { apiCreateProfile } from "@/service/api-client/api-profile";
|
||||||
import { apiValidationEmail } from "@/service/api-client/api-validation";
|
import { apiValidationEmail } from "@/service/api-client/api-validation";
|
||||||
@@ -155,7 +156,11 @@ export default function CreateProfile() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ViewWrapper footerComponent={footerComponent}>
|
<OS_Wrapper
|
||||||
|
enableKeyboardHandling
|
||||||
|
contentPaddingBottom={250}
|
||||||
|
footerComponent={footerComponent}
|
||||||
|
>
|
||||||
<StackCustom>
|
<StackCustom>
|
||||||
<InformationBox text="Upload foto profile anda." />
|
<InformationBox text="Upload foto profile anda." />
|
||||||
<View style={{ alignItems: "center" }}>
|
<View style={{ alignItems: "center" }}>
|
||||||
@@ -241,6 +246,6 @@ export default function CreateProfile() {
|
|||||||
/>
|
/>
|
||||||
<Spacing />
|
<Spacing />
|
||||||
</StackCustom>
|
</StackCustom>
|
||||||
</ViewWrapper>
|
</OS_Wrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import {
|
|||||||
BoxButtonOnFooter,
|
BoxButtonOnFooter,
|
||||||
ButtonCustom,
|
ButtonCustom,
|
||||||
InformationBox,
|
InformationBox,
|
||||||
NewWrapper,
|
OS_Wrapper,
|
||||||
StackCustom
|
StackCustom
|
||||||
} from "@/components";
|
} from "@/components";
|
||||||
import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
|
import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
|
||||||
@@ -82,7 +82,7 @@ export default function WaitingRoom() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<NewWrapper
|
<OS_Wrapper
|
||||||
footerComponent={logoutButton()}
|
footerComponent={logoutButton()}
|
||||||
refreshControl={
|
refreshControl={
|
||||||
<RefreshControl refreshing={isLoading} onRefresh={handleCheck} />
|
<RefreshControl refreshing={isLoading} onRefresh={handleCheck} />
|
||||||
@@ -103,7 +103,7 @@ Silakan tunggu beberapa saat. Untuk memperbarui status, tarik layar ke bawah."
|
|||||||
Check
|
Check
|
||||||
</ButtonCenteredOnly> */}
|
</ButtonCenteredOnly> */}
|
||||||
</StackCustom>
|
</StackCustom>
|
||||||
</NewWrapper>
|
</OS_Wrapper>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -195,6 +195,7 @@ export function AndroidWrapper(props: AndroidWrapperProps) {
|
|||||||
ref={keyboardForm?.scrollViewRef}
|
ref={keyboardForm?.scrollViewRef}
|
||||||
onScroll={keyboardForm?.handleScroll}
|
onScroll={keyboardForm?.handleScroll}
|
||||||
scrollEventThrottle={16}
|
scrollEventThrottle={16}
|
||||||
|
refreshControl={refreshControl}
|
||||||
style={{ flex: 1 }}
|
style={{ flex: 1 }}
|
||||||
contentContainerStyle={{
|
contentContainerStyle={{
|
||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
|
|||||||
@@ -32,8 +32,8 @@ refreshControl?: RefreshControl;
|
|||||||
// Keyboard handling (Android only - iOS mengabaikan)
|
// Keyboard handling (Android only - iOS mengabaikan)
|
||||||
enableKeyboardHandling?: boolean; // Default: false
|
enableKeyboardHandling?: boolean; // Default: false
|
||||||
keyboardScrollOffset?: number; // Default: 100
|
keyboardScrollOffset?: number; // Default: 100
|
||||||
contentPaddingBottom?: number; // Default: 80
|
contentPaddingBottom?: number; // Default: 100
|
||||||
contentPadding?: number; // Default: 16
|
contentPadding?: number; // Default: 0
|
||||||
```
|
```
|
||||||
|
|
||||||
### 2. **IOSWrapper** / **AndroidWrapper** (Direct Usage)
|
### 2. **IOSWrapper** / **AndroidWrapper** (Direct Usage)
|
||||||
@@ -68,9 +68,7 @@ import { OS_Wrapper } from "@/components";
|
|||||||
// Form mode (with keyboard handling - Android only)
|
// Form mode (with keyboard handling - Android only)
|
||||||
<OS_Wrapper
|
<OS_Wrapper
|
||||||
enableKeyboardHandling
|
enableKeyboardHandling
|
||||||
keyboardScrollOffset={150}
|
contentPaddingBottom={250} // ← HANYA untuk screens dengan TextInput
|
||||||
contentPaddingBottom={100}
|
|
||||||
footerComponent={<SubmitButton />}
|
|
||||||
>
|
>
|
||||||
<FormContent />
|
<FormContent />
|
||||||
</OS_Wrapper>
|
</OS_Wrapper>
|
||||||
@@ -78,21 +76,24 @@ import { OS_Wrapper } from "@/components";
|
|||||||
|
|
||||||
## 🚀 Implementation Status
|
## 🚀 Implementation Status
|
||||||
|
|
||||||
### ✅ Phase 1: Job Screens - COMPLETED (2026-04-06)
|
### ✅ Phase 1: Job Screens - COMPLETED (2026-04-06 to 2026-04-07)
|
||||||
|
|
||||||
**Files migrated: 8**
|
**Files migrated: 9**
|
||||||
|
|
||||||
#### Job List Screens (OS_Wrapper):
|
#### Job List Screens (OS_Wrapper):
|
||||||
- ✅ `screens/Job/ScreenBeranda.tsx` - ViewWrapper → OS_Wrapper
|
- ✅ `screens/Job/ScreenBeranda.tsx` - ViewWrapper → OS_Wrapper + PADDING_INLINE
|
||||||
- ✅ `screens/Job/ScreenBeranda2.tsx` - NewWrapper_V2 → OS_Wrapper
|
- ✅ `screens/Job/ScreenBeranda2.tsx` - NewWrapper_V2 → OS_Wrapper + PADDING_INLINE
|
||||||
- ✅ `screens/Job/ScreenArchive.tsx` - ViewWrapper → OS_Wrapper
|
- ✅ `screens/Job/ScreenArchive.tsx` - ViewWrapper → OS_Wrapper + PADDING_INLINE
|
||||||
- ✅ `screens/Job/ScreenArchive2.tsx` - NewWrapper_V2 → OS_Wrapper
|
- ✅ `screens/Job/ScreenArchive2.tsx` - NewWrapper_V2 → OS_Wrapper + PADDING_INLINE
|
||||||
- ✅ `screens/Job/MainViewStatus.tsx` - ViewWrapper → OS_Wrapper
|
- ✅ `screens/Job/MainViewStatus.tsx` - ViewWrapper → OS_Wrapper + PADDING_INLINE
|
||||||
- ✅ `screens/Job/MainViewStatus2.tsx` - NewWrapper_V2 → OS_Wrapper
|
- ✅ `screens/Job/MainViewStatus2.tsx` - NewWrapper_V2 → OS_Wrapper + PADDING_INLINE
|
||||||
|
|
||||||
#### Job Form Screens (OS_Wrapper with keyboard handling):
|
#### Job Form Screens (OS_Wrapper with keyboard handling):
|
||||||
- ✅ `screens/Job/ScreenJobCreate.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling
|
- ✅ `screens/Job/ScreenJobCreate.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling + contentPaddingBottom={250}
|
||||||
- ✅ `screens/Job/ScreenJobEdit.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling
|
- ✅ `screens/Job/ScreenJobEdit.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling + contentPaddingBottom={250}
|
||||||
|
|
||||||
|
#### Job Detail Screen:
|
||||||
|
- ✅ `app/(application)/(user)/job/[id]/[status]/detail.tsx` - NewWrapper_V2 → OS_Wrapper
|
||||||
|
|
||||||
**Testing Status:**
|
**Testing Status:**
|
||||||
- ✅ TypeScript: No errors
|
- ✅ TypeScript: No errors
|
||||||
@@ -101,44 +102,50 @@ import { OS_Wrapper } from "@/components";
|
|||||||
- ✅ Android Testing: Complete ✅
|
- ✅ Android Testing: Complete ✅
|
||||||
|
|
||||||
**Implementation Notes:**
|
**Implementation Notes:**
|
||||||
|
- **contentPaddingBottom pattern**:
|
||||||
|
- Default: `100` (list screens)
|
||||||
|
- Forms: `250` (screens with TextInput/TextArea)
|
||||||
|
- Override per-screen sesuai kebutuhan
|
||||||
|
- **PADDING_INLINE constant**: `16px` untuk konsisten padding horizontal
|
||||||
- Semua form screens menggunakan `enableKeyboardHandling` untuk keyboard auto-scroll di Android
|
- Semua form screens menggunakan `enableKeyboardHandling` untuk keyboard auto-scroll di Android
|
||||||
- Semua list screens menggunakan pagination dengan `onEndReached`
|
- Semua list screens menggunakan pagination dengan `onEndReached`
|
||||||
- Floating button dan sticky header berfungsi dengan baik
|
- Floating button dan sticky header berfungsi dengan baik
|
||||||
- Footer component tetap di posisi bawah
|
- Footer component tetap di posisi bawah
|
||||||
|
- Tap anywhere untuk dismiss keyboard sudah implementasi
|
||||||
|
|
||||||
### ⏳ Phase 2: Other User Screens (Priority: HIGH)
|
### ⏳ Phase 2: Other User Screens (Priority: HIGH)
|
||||||
|
|
||||||
#### Profile Screens:
|
#### Profile Screens:
|
||||||
- [ ] `screens/Profile/ScreenProfile.tsx`
|
- [ ] `screens/Profile/ScreenProfile.tsx`
|
||||||
- [ ] `screens/Profile/ScreenProfileEdit.tsx` → pakai `enableKeyboardHandling`
|
- [ ] `screens/Profile/ScreenProfileEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
|
||||||
- [ ] `screens/Profile/ScreenProfileCreate.tsx` → pakai `enableKeyboardHandling`
|
- [ ] `screens/Profile/ScreenProfileCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
|
||||||
|
|
||||||
#### Forum/Discussion:
|
#### Forum/Discussion:
|
||||||
- [ ] `screens/Forum/ScreenForum.tsx`
|
- [ ] `screens/Forum/ScreenForum.tsx`
|
||||||
- [ ] `screens/Forum/ScreenForumDetail.tsx`
|
- [ ] `screens/Forum/ScreenForumDetail.tsx`
|
||||||
- [ ] `screens/Forum/ScreenForumCreate.tsx` → pakai `enableKeyboardHandling`
|
- [ ] `screens/Forum/ScreenForumCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
|
||||||
|
|
||||||
#### Portfolio:
|
#### Portfolio:
|
||||||
- [ ] `screens/Portfolio/ScreenPortfolio.tsx`
|
- [ ] `screens/Portfolio/ScreenPortfolio.tsx`
|
||||||
- [ ] `screens/Portfolio/ScreenPortfolioCreate.tsx` → pakai `enableKeyboardHandling`
|
- [ ] `screens/Portfolio/ScreenPortfolioCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
|
||||||
- [ ] `screens/Portfolio/ScreenPortfolioEdit.tsx` → pakai `enableKeyboardHandling`
|
- [ ] `screens/Portfolio/ScreenPortfolioEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
|
||||||
|
|
||||||
### ⏳ Phase 3: Admin Screens (Priority: MEDIUM)
|
### ⏳ Phase 3: Admin Screens (Priority: MEDIUM)
|
||||||
|
|
||||||
#### Event Management:
|
#### Event Management:
|
||||||
- [ ] `screens/Admin/Event/ScreenEventList.tsx`
|
- [ ] `screens/Admin/Event/ScreenEventList.tsx`
|
||||||
- [ ] `screens/Admin/Event/ScreenEventCreate.tsx` → pakai `enableKeyboardHandling`
|
- [ ] `screens/Admin/Event/ScreenEventCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
|
||||||
- [ ] `screens/Admin/Event/ScreenEventEdit.tsx` → pakai `enableKeyboardHandling`
|
- [ ] `screens/Admin/Event/ScreenEventEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
|
||||||
|
|
||||||
#### Voting Management:
|
#### Voting Management:
|
||||||
- [ ] `screens/Admin/Voting/ScreenVotingList.tsx`
|
- [ ] `screens/Admin/Voting/ScreenVotingList.tsx`
|
||||||
- [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `enableKeyboardHandling`
|
- [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
|
||||||
- [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `enableKeyboardHandling`
|
- [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
|
||||||
|
|
||||||
#### Donation Management:
|
#### Donation Management:
|
||||||
- [ ] `screens/Admin/Donation/ScreenDonationList.tsx`
|
- [ ] `screens/Admin/Donation/ScreenDonationList.tsx`
|
||||||
- [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `enableKeyboardHandling`
|
- [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
|
||||||
- [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `enableKeyboardHandling`
|
- [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `enableKeyboardHandling` + `contentPaddingBottom={250}`
|
||||||
|
|
||||||
### ⏳ Phase 4: Other Screens (Priority: LOW)
|
### ⏳ Phase 4: Other Screens (Priority: LOW)
|
||||||
- [ ] `screens/Investasi/` - Investment screens
|
- [ ] `screens/Investasi/` - Investment screens
|
||||||
@@ -172,6 +179,8 @@ Setiap screen yang sudah di-migrate, test:
|
|||||||
- [ ] Floating button muncul (jika ada `floatingButton`)
|
- [ ] Floating button muncul (jika ada `floatingButton`)
|
||||||
- [ ] Loading skeleton muncul saat pagination
|
- [ ] Loading skeleton muncul saat pagination
|
||||||
- [ ] Empty state muncul saat data kosong
|
- [ ] Empty state muncul saat data kosong
|
||||||
|
- [ ] Tap anywhere dismiss keyboard berfungsi
|
||||||
|
- [ ] contentPaddingBottom: 100 (list) / 250 (form) sesuai kebutuhan
|
||||||
|
|
||||||
## 📌 Notes
|
## 📌 Notes
|
||||||
|
|
||||||
@@ -182,6 +191,7 @@ Setiap screen yang sudah di-migrate, test:
|
|||||||
<OS_Wrapper
|
<OS_Wrapper
|
||||||
listData={pagination.listData}
|
listData={pagination.listData}
|
||||||
renderItem={renderItem}
|
renderItem={renderItem}
|
||||||
|
contentPadding={PADDING_INLINE}
|
||||||
ListEmptyComponent={ListEmptyComponent}
|
ListEmptyComponent={ListEmptyComponent}
|
||||||
ListFooterComponent={ListFooterComponent}
|
ListFooterComponent={ListFooterComponent}
|
||||||
onEndReached={pagination.loadMore}
|
onEndReached={pagination.loadMore}
|
||||||
@@ -199,6 +209,7 @@ Setiap screen yang sudah di-migrate, test:
|
|||||||
<OS_Wrapper
|
<OS_Wrapper
|
||||||
headerComponent={<HeaderSection />}
|
headerComponent={<HeaderSection />}
|
||||||
footerComponent={<FooterSection />}
|
footerComponent={<FooterSection />}
|
||||||
|
contentPadding={PADDING_INLINE}
|
||||||
>
|
>
|
||||||
<YourContent />
|
<YourContent />
|
||||||
</OS_Wrapper>
|
</OS_Wrapper>
|
||||||
@@ -208,8 +219,8 @@ Setiap screen yang sudah di-migrate, test:
|
|||||||
```tsx
|
```tsx
|
||||||
<OS_Wrapper
|
<OS_Wrapper
|
||||||
enableKeyboardHandling
|
enableKeyboardHandling
|
||||||
keyboardScrollOffset={150}
|
contentPaddingBottom={250} // ← HANYA untuk screens dengan TextInput
|
||||||
contentPaddingBottom={100}
|
contentPadding={PADDING_INLINE}
|
||||||
footerComponent={
|
footerComponent={
|
||||||
<BoxButtonOnFooter>
|
<BoxButtonOnFooter>
|
||||||
<ButtonCustom onPress={handleSubmit}>Submit</ButtonCustom>
|
<ButtonCustom onPress={handleSubmit}>Submit</ButtonCustom>
|
||||||
@@ -235,10 +246,12 @@ import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
|||||||
|
|
||||||
// NEW
|
// NEW
|
||||||
import { OS_Wrapper } from "@/components";
|
import { OS_Wrapper } from "@/components";
|
||||||
|
import { PADDING_INLINE } from "@/constants/constans-value";
|
||||||
|
|
||||||
<OS_Wrapper
|
<OS_Wrapper
|
||||||
listData={data}
|
listData={data}
|
||||||
renderItem={renderItem}
|
renderItem={renderItem}
|
||||||
|
contentPadding={PADDING_INLINE}
|
||||||
headerComponent={header}
|
headerComponent={header}
|
||||||
footerComponent={footer}
|
footerComponent={footer}
|
||||||
/>
|
/>
|
||||||
@@ -260,7 +273,7 @@ import { OS_Wrapper } from "@/components";
|
|||||||
|
|
||||||
<OS_Wrapper
|
<OS_Wrapper
|
||||||
enableKeyboardHandling
|
enableKeyboardHandling
|
||||||
keyboardScrollOffset={150}
|
contentPaddingBottom={250} // ← Explicit untuk form screens
|
||||||
>
|
>
|
||||||
<FormContent />
|
<FormContent />
|
||||||
</OS_Wrapper>
|
</OS_Wrapper>
|
||||||
@@ -272,10 +285,10 @@ import { OS_Wrapper } from "@/components";
|
|||||||
**Solution**: Pastikan tidak ada custom padding yang overriding default behavior. Jika masih bermasalah, cek apakah `contentPadding` atau `contentPaddingBottom` terlalu besar.
|
**Solution**: Pastikan tidak ada custom padding yang overriding default behavior. Jika masih bermasalah, cek apakah `contentPadding` atau `contentPaddingBottom` terlalu besar.
|
||||||
|
|
||||||
### Issue: Keyboard menutupi input di Android
|
### Issue: Keyboard menutupi input di Android
|
||||||
**Solution**: Pastikan pakai `OS_Wrapper` dengan `enableKeyboardHandling={true}`. Adjust `keyboardScrollOffset` jika perlu.
|
**Solution**: Pastikan pakai `OS_Wrapper` dengan `enableKeyboardHandling={true}` dan `contentPaddingBottom={250}` untuk form screens.
|
||||||
|
|
||||||
### Issue: Footer terlalu jauh dari bottom
|
### Issue: Footer terlalu jauh dari bottom
|
||||||
**Solution**: Kurangi `contentPaddingBottom` (default: 80). Untuk list screen tanpa navigation bar overlay, bisa set ke 0.
|
**Solution**: Kurangi `contentPaddingBottom` (default: 100 untuk list). Untuk form screens tetap 250.
|
||||||
|
|
||||||
### Issue: White space di bottom saat keyboard close (Android)
|
### Issue: White space di bottom saat keyboard close (Android)
|
||||||
**Solution**: Ini sudah di-fix di AndroidWrapper. Pastikan screen pakai OS_Wrapper, bukan NewWrapper langsung.
|
**Solution**: Ini sudah di-fix di AndroidWrapper. Pastikan screen pakai OS_Wrapper, bukan NewWrapper langsung.
|
||||||
@@ -284,11 +297,11 @@ import { OS_Wrapper } from "@/components";
|
|||||||
|
|
||||||
| Phase | Total Files | Migrated | Testing | Status |
|
| Phase | Total Files | Migrated | Testing | Status |
|
||||||
|-------|-------------|----------|---------|--------|
|
|-------|-------------|----------|---------|--------|
|
||||||
| Phase 1 (Job) | 8 | 8 | ✅ Complete | ✅ Complete |
|
| Phase 1 (Job) | 9 | 9 | ✅ Complete | ✅ Complete |
|
||||||
| Phase 2 (User) | TBD | 0 | 0 | ⏳ Pending |
|
| Phase 2 (User) | TBD | 0 | 0 | ⏳ Pending |
|
||||||
| Phase 3 (Admin) | TBD | 0 | 0 | ⏳ Pending |
|
| Phase 3 (Admin) | TBD | 0 | 0 | ⏳ Pending |
|
||||||
| Phase 4 (Other) | TBD | 0 | 0 | ⏳ Pending |
|
| Phase 4 (Other) | TBD | 0 | 0 | ⏳ Pending |
|
||||||
| **Total** | **8+** | **8** | **8** | **100% (Phase 1)** |
|
| **Total** | **9+** | **9** | **9** | **100% (Phase 1)** |
|
||||||
|
|
||||||
## 🔄 Rollback Plan
|
## 🔄 Rollback Plan
|
||||||
|
|
||||||
@@ -302,6 +315,6 @@ Jika ada issue yang tidak bisa di-fix dalam 1 jam:
|
|||||||
|
|
||||||
**Co-authored-by**: Qwen-Coder <qwen-coder@alibabacloud.com>
|
**Co-authored-by**: Qwen-Coder <qwen-coder@alibabacloud.com>
|
||||||
**Created**: 2026-04-06
|
**Created**: 2026-04-06
|
||||||
**Last Updated**: 2026-04-06
|
**Last Updated**: 2026-04-08
|
||||||
**Status**: Phase 1 (Job Screens) Complete ✅
|
**Status**: Phase 1 (Job Screens) Complete ✅
|
||||||
**Next**: Phase 2 - Other User Screens
|
**Next**: Phase 2 - Other User Screens (Profile, Forum, Portfolio)
|
||||||
Reference in New Issue
Block a user