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:
@@ -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}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
),
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user