feat: Complete OS_Wrapper implementation with keyboard handling and PADDING_INLINE

OS_Wrapper System:
- Simplify API: Remove PageWrapper, merge keyboard props into OS_Wrapper
- Add auto-scroll when keyboard appears (Android only)
- Add tap-to-dismiss keyboard for both Static and List modes
- Fix contentPaddingBottom default to 250px (prevent keyboard overlap)
- Change default contentPadding to 0 (per-screen control)
- Remove Platform.OS checks from IOSWrapper and AndroidWrapper

Constants:
- Add PADDING_INLINE constant (16px) for consistent inline padding
- Add OS_PADDING_TOP constants for tab layouts

Job Screens Migration (9 files):
- Apply PADDING_INLINE to all Job screens:
  - ScreenBeranda, ScreenBeranda2
  - ScreenArchive, ScreenArchive2
  - MainViewStatus, MainViewStatus2
  - ScreenJobCreate, ScreenJobEdit
  - Job detail screen

Keyboard Handling:
- Simplified useKeyboardForm hook
- Auto-scroll by keyboard height when keyboard appears
- Track scroll position for accurate scroll targets
- TouchableWithoutFeedback wraps all content for tap-to-dismiss

Documentation:
- Update TASK-005 with Phase 1 completion status
- Update Quick Reference with unified API examples

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
2026-04-07 17:50:15 +08:00
parent 502cd7bc65
commit 1a5ca78041
20 changed files with 349 additions and 238 deletions

View File

@@ -5,15 +5,17 @@ import { IconHome, IconStatus } from "@/components/_Icon";
import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
import { TabsStyles } from "@/styles/tabs-styles";
import { Ionicons } from "@expo/vector-icons";
import {
router,
Tabs,
useLocalSearchParams
} from "expo-router";
import { router, Tabs, useLocalSearchParams } from "expo-router";
import { View } from "react-native";
import { MainColor } from "@/constants/color-palet";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Platform } from "react-native";
import {
OS_ANDROID_HEIGHT,
OS_ANDROID_PADDING_TOP,
OS_IOS_HEIGHT,
OS_IOS_PADDING_TOP,
} from "@/constants/constans-value";
function JobTabsWrapper() {
const insets = useSafeAreaInsets();
@@ -31,20 +33,23 @@ function JobTabsWrapper() {
tabBarStyle: Platform.select({
ios: {
borderTopWidth: 0,
paddingTop: 12,
height: 80,
paddingTop: OS_IOS_PADDING_TOP,
height: OS_IOS_HEIGHT,
},
android: {
borderTopWidth: 0,
paddingTop: 5,
height: 70 + paddingBottom,
paddingTop: OS_ANDROID_PADDING_TOP,
height: OS_ANDROID_HEIGHT + paddingBottom,
},
}),
header: () => (
<AppHeader
title="Job Vacancy"
left={
<BackButtonFromNotification from={from || ""} category={category} />
<BackButtonFromNotification
from={from || ""}
category={category}
/>
}
/>
),

View File

@@ -5,7 +5,7 @@ import {
DrawerCustom,
LoaderCustom,
MenuDrawerDynamicGrid,
NewWrapper_V2,
OS_Wrapper,
Spacing,
StackCustom,
} from "@/components";
@@ -23,6 +23,7 @@ import {
useLocalSearchParams,
} from "expo-router";
import { useCallback, useState } from "react";
import { PADDING_INLINE } from "@/constants/constans-value";
export default function JobDetailStatus() {
const { id, status } = useLocalSearchParams();
@@ -72,7 +73,7 @@ export default function JobDetailStatus() {
),
}}
/>
<NewWrapper_V2>
<OS_Wrapper contentPadding={PADDING_INLINE}>
{isLoadData ? (
<LoaderCustom />
) : (
@@ -96,7 +97,7 @@ export default function JobDetailStatus() {
<Spacing />
</>
)}
</NewWrapper_V2>
</OS_Wrapper>
<DrawerCustom
isVisible={openDrawer}