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
2026-04-02 15:01:38 +08:00
parent 98f8c7e2bf
commit 90bc8ae343
15 changed files with 2016 additions and 364 deletions
--- a/components/_ShareComponent/FormWrapper.tsx
+++ b/components/_ShareComponent/FormWrapper.tsx
@@ -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>
+  );
+}
--- a/components/_ShareComponent/NewWrapper.tsx
+++ b/components/_ShareComponent/NewWrapper.tsx
@@ -117,15 +117,15 @@ const NewWrapper = (props: NewWrapperProps) => {
            ListHeaderComponent={listProps.ListHeaderComponent}
            ListFooterComponent={listProps.ListFooterComponent}
            ListEmptyComponent={listProps.ListEmptyComponent}
-            contentContainerStyle={{ 
+            contentContainerStyle={{
              flexGrow: 1,
-              paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0 
+              paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
            }}
            keyboardShouldPersistTaps="handled"
          />
        </View>

-        {/* Footer dengan position absolute untuk stay di bawah */}
+        {/* Footer - tetap di bawah dengan position absolute */}
        {footerComponent && !hideFooter && (
          <View style={styles.footerContainer}>
            <SafeAreaView
@@ -133,7 +133,7 @@ const NewWrapper = (props: NewWrapperProps) => {
              style={{ backgroundColor: MainColor.darkblue }}
            >
              {footerComponent}
-            </SafeAreaView>   
+            </SafeAreaView>
          </View>
        )}

@@ -163,11 +163,11 @@ const NewWrapper = (props: NewWrapperProps) => {
        <View style={GStyles.stickyHeader}>{headerComponent}</View>
      )}

-      <View style={{ flex: 0 }} collapsable={false}>
+      <View style={{ flex: 1 }}>
        <ScrollView
-          contentContainerStyle={{ 
+          contentContainerStyle={{
            flexGrow: 1,
-            paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0 
+            paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
          }}
          keyboardShouldPersistTaps="handled"
          refreshControl={refreshControl}
@@ -178,7 +178,7 @@ const NewWrapper = (props: NewWrapperProps) => {
        </ScrollView>
      </View>

-      {/* Footer dengan position absolute untuk stay di bawah */}
+      {/* Footer - tetap di bawah dengan position absolute */}
      {footerComponent && !hideFooter && (
        <View style={styles.footerContainer}>
          <SafeAreaView
--- a/components/_ShareComponent/NewWrapper_V2.tsx
+++ b/components/_ShareComponent/NewWrapper_V2.tsx
@@ -0,0 +1,223 @@
+// NewWrapper_V2.tsx - Wrapper baru dengan keyboard handling
+import { MainColor } from "@/constants/color-palet";
+import { OS_HEIGHT } from "@/constants/constans-value";
+import { GStyles } from "@/styles/global-styles";
+import {
+  ImageBackground,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  FlatList,
+  TouchableWithoutFeedback,
+  View,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import {
+  NativeSafeAreaViewProps,
+  SafeAreaView,
+} from "react-native-safe-area-context";
+import type { ScrollViewProps, FlatListProps } from "react-native";
+import Spacing from "./Spacing";
+import { useKeyboardForm } from "@/hooks/useKeyboardForm";
+
+interface BaseProps {
+  withBackground?: boolean;
+  headerComponent?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  floatingButton?: React.ReactNode;
+  hideFooter?: boolean;
+  edgesFooter?: NativeSafeAreaViewProps["edges"];
+  style?: StyleProp<ViewStyle>;
+  refreshControl?: ScrollViewProps["refreshControl"];
+  /**
+   * Enable keyboard handling with auto-scroll
+   * @default false
+   */
+  enableKeyboardHandling?: boolean;
+  /**
+   * Scroll offset when keyboard appears (default: 100)
+   */
+  keyboardScrollOffset?: number;
+  /**
+   * Extra padding bottom for content to avoid navigation bar (default: 80)
+   */
+  contentPaddingBottom?: number;
+}
+
+interface StaticModeProps extends BaseProps {
+  children: React.ReactNode;
+  listData?: never;
+  renderItem?: never;
+}
+
+interface ListModeProps extends BaseProps {
+  children?: never;
+  listData?: any[];
+  renderItem?: FlatListProps<any>["renderItem"];
+  onEndReached?: () => void;
+  ListHeaderComponent?: React.ReactElement | null;
+  ListFooterComponent?: React.ReactElement | null;
+  ListEmptyComponent?: React.ReactElement | null;
+  keyExtractor?: FlatListProps<any>["keyExtractor"];
+}
+
+type NewWrapper_V2_Props = StaticModeProps | ListModeProps;
+
+export function NewWrapper_V2(props: NewWrapper_V2_Props) {
+  const {
+    withBackground = false,
+    headerComponent,
+    footerComponent,
+    floatingButton,
+    hideFooter = false,
+    edgesFooter = [],
+    style,
+    refreshControl,
+    enableKeyboardHandling = false,
+    keyboardScrollOffset = 100,
+    contentPaddingBottom = 80, // Default 80 untuk navigasi device
+  } = props;
+
+  const assetBackground = require("../../assets/images/main-background.png");
+
+  // Use keyboard hook if enabled
+  const keyboardForm = enableKeyboardHandling 
+    ? useKeyboardForm(keyboardScrollOffset) 
+    : null;
+
+  const renderContainer = (content: React.ReactNode) => {
+    if (withBackground) {
+      return (
+        <ImageBackground
+          source={assetBackground}
+          resizeMode="cover"
+          style={GStyles.imageBackground}
+        >
+          <View style={[GStyles.containerWithBackground, style]}>
+            {content}
+          </View>
+        </ImageBackground>
+      );
+    }
+    return <View style={[GStyles.container, style]}>{content}</View>;
+  };
+
+  // 🔹 Mode Dinamis (FlatList)
+  if ("listData" in props) {
+    const listProps = props as ListModeProps;
+
+    return (
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+      >
+        {headerComponent && (
+          <View style={GStyles.stickyHeader}>{headerComponent}</View>
+        )}
+        <FlatList
+          data={listProps.listData}
+          renderItem={listProps.renderItem}
+          keyExtractor={
+            listProps.keyExtractor ||
+            ((item, index) => `${String(item.id)}-${index}`)
+          }
+          refreshControl={refreshControl}
+          onEndReached={listProps.onEndReached}
+          onEndReachedThreshold={0.5}
+          ListHeaderComponent={listProps.ListHeaderComponent}
+          ListFooterComponent={listProps.ListFooterComponent}
+          ListEmptyComponent={listProps.ListEmptyComponent}
+          contentContainerStyle={{
+            flexGrow: 1,
+            paddingBottom: (footerComponent && !hideFooter ? OS_HEIGHT : 0) + contentPaddingBottom,
+          }}
+          keyboardShouldPersistTaps="handled"
+        />
+
+        {/* Footer - Fixed di bawah dengan width 100% */}
+        {footerComponent && !hideFooter && (
+          <SafeAreaView
+            edges={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue, width: "100%" }}
+          >
+            <View style={{ width: "100%" }}>
+              {footerComponent}
+            </View>
+          </SafeAreaView>
+        )}
+
+        {!footerComponent && !hideFooter && (
+          <SafeAreaView
+            edges={["bottom"]}
+            style={{ backgroundColor: MainColor.darkblue }}
+          />
+        )}
+
+        {floatingButton && (
+          <View style={GStyles.floatingContainer}>{floatingButton}</View>
+        )}
+      </KeyboardAvoidingView>
+    );
+  }
+
+  // 🔹 Mode Statis (ScrollView)
+  const staticProps = props as StaticModeProps;
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+      style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+    >
+      {headerComponent && (
+        <View style={GStyles.stickyHeader}>{headerComponent}</View>
+      )}
+
+      <ScrollView
+        ref={keyboardForm?.scrollViewRef}
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          flexGrow: 1,
+          paddingBottom: (footerComponent && !hideFooter ? OS_HEIGHT : 0) + contentPaddingBottom,
+        }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          {renderContainer(staticProps.children)}
+        </TouchableWithoutFeedback>
+      </ScrollView>
+
+      {/* Footer - Fixed di bawah dengan width 100% */}
+      {footerComponent && !hideFooter && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{
+            backgroundColor: MainColor.darkblue,
+            width: "100%",
+            position: Platform.OS === "android" ? "absolute" : undefined,
+            bottom: Platform.OS === "android" ? 0 : undefined,
+            left: 0,
+            right: 0,
+          }}
+        >
+          <View style={{ width: "100%" }}>
+            {footerComponent}
+          </View>
+        </SafeAreaView>
+      )}
+
+      {!footerComponent && !hideFooter && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{ backgroundColor: MainColor.darkblue }}
+        />
+      )}
+
+      {floatingButton && (
+        <View style={GStyles.floatingContainer}>{floatingButton}</View>
+      )}
+    </KeyboardAvoidingView>
+  );
+}
--- a/components/_ShareComponent/TestWrapper.tsx
+++ b/components/_ShareComponent/TestWrapper.tsx
@@ -0,0 +1,45 @@
+// TestWrapper.tsx - Wrapper sederhana untuk test keyboard handling
+import { MainColor } from "@/constants/color-palet";
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  View,
+} from "react-native";
+import {
+  NativeSafeAreaViewProps,
+  SafeAreaView,
+} from "react-native-safe-area-context";
+
+interface TestWrapperProps {
+  children: React.ReactNode;
+  footerComponent?: React.ReactNode;
+}
+
+export function TestWrapper({ children, footerComponent }: TestWrapperProps) {
+  return (
+    <KeyboardAvoidingView
+      behavior="padding" // ← FIX: Gunakan padding untuk iOS & Android (NOT "height" untuk Android!)
+      style={{ flex: 1, backgroundColor: MainColor.darkblue }}
+      keyboardVerticalOffset={0}
+    >
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ flexGrow: 1 }}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={{ flex: 1, padding: 10 }}>{children}</View>
+      </ScrollView>
+
+      {footerComponent && (
+        <SafeAreaView
+          edges={["bottom"]}
+          style={{ flex: 1, backgroundColor: MainColor.red }}
+        >
+          {footerComponent}
+        </SafeAreaView>
+      )}
+    </KeyboardAvoidingView>
+  );
+}