feat: Migrate Job screens to NewWrapper_V2 with keyboard handling
- Migrate ScreenJobCreate.tsx to NewWrapper_V2
- Migrate ScreenJobEdit.tsx to NewWrapper_V2
- Add NewWrapper_V2 component with auto-scroll keyboard handling
- Add useKeyboardForm hook for keyboard management
- Add FormWrapper component for forms
- Create ScreenJobEdit.tsx from edit route (separation of concerns)
- Add documentation for keyboard implementation
- Add TASK-004 migration plan
- Fix: Footer width 100% with safe positioning
- Fix: Content padding bottom 80px for navigation bar
- Fix: Auto-scroll to focused input
- Fix: No white area when keyboard close
- Fix: Footer not raised after keyboard close
Phase 1 completed: Job screens migrated
### No Issue
This commit is contained in:
73
components/_ShareComponent/FormWrapper.tsx
Normal file
73
components/_ShareComponent/FormWrapper.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
// FormWrapper.tsx - Reusable wrapper untuk form dengan keyboard handling
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { Keyboard, KeyboardAvoidingView, Platform, ScrollView, TouchableWithoutFeedback, View } from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import { ReactNode } from "react";
|
||||
import { useKeyboardForm } from "@/hooks/useKeyboardForm";
|
||||
|
||||
interface FormWrapperProps {
|
||||
children: ReactNode;
|
||||
footerComponent?: ReactNode;
|
||||
/**
|
||||
* Offset scroll saat keyboard muncul (default: 100)
|
||||
*/
|
||||
scrollOffset?: number;
|
||||
/**
|
||||
* Padding bottom untuk content (default: 100)
|
||||
*/
|
||||
contentPaddingBottom?: number;
|
||||
/**
|
||||
* Padding untuk content container (default: 16)
|
||||
*/
|
||||
contentPadding?: number;
|
||||
}
|
||||
|
||||
export function FormWrapper({
|
||||
children,
|
||||
footerComponent,
|
||||
scrollOffset = 100,
|
||||
contentPaddingBottom = 100,
|
||||
contentPadding = 16,
|
||||
}: FormWrapperProps) {
|
||||
const { scrollViewRef, handleInputFocus } = useKeyboardForm(scrollOffset);
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
style={{ flex: 1, backgroundColor: MainColor.darkblue }}
|
||||
>
|
||||
<ScrollView
|
||||
ref={scrollViewRef}
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
paddingBottom: contentPaddingBottom,
|
||||
}}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
<View style={{ flex: 1, padding: contentPadding }}>
|
||||
{children}
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
</ScrollView>
|
||||
|
||||
{/* Footer - Fixed di bawah */}
|
||||
{footerComponent && (
|
||||
<SafeAreaView
|
||||
edges={["bottom"]}
|
||||
style={{
|
||||
backgroundColor: MainColor.darkblue,
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
}}
|
||||
>
|
||||
{footerComponent}
|
||||
</SafeAreaView>
|
||||
)}
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user