refactor: Migrate Portofolio & Maps screens to NewWrapper_V2

Phase 3 Migration - Fix keyboard handling issues across 8 screens Portofolio Screens (5): - portofolio/[id]/edit-social-media.tsx: ViewWrapper → NewWrapper_V2 - portofolio/[id]/edit-logo.tsx: ViewWrapper → NewWrapper_V2 - portofolio/[id]/edit.tsx: NewWrapper → NewWrapper_V2 + fix React error - portofolio/[id]/index.tsx: ViewWrapper → NewWrapper_V2 - screens/Portofolio/ScreenPortofolioCreate.tsx: NewWrapper → NewWrapper_V2 Maps Screens (3): - screens/Maps/ScreenMapsCreate.tsx: NewWrapper → NewWrapper_V2 - screens/Maps/ScreenMapsEdit.tsx: ViewWrapper → NewWrapper_V2 - app/(application)/(user)/maps/[id]/custom-pin.tsx: ViewWrapper → NewWrapper_V2 Changes: - Add enableKeyboardHandling to all form screens - Wrap TextInputCustom/SelectCustom/TextAreaCustom with View onStartShouldSetResponder - Fix React static flag error in portofolio edit loading state - Update TASK-004 migration task file Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
2026-04-06 11:20:20 +08:00
parent 76759cc547
commit 6b786d7983
9 changed files with 504 additions and 358 deletions
--- a/screens/Maps/ScreenMapsCreate.tsx
+++ b/screens/Maps/ScreenMapsCreate.tsx
@@ -1,4 +1,3 @@
-import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import {
  BoxButtonOnFooter,
  ButtonCustom,
@@ -8,6 +7,7 @@ import {
  TextInputCustom,
  LandscapeFrameUploaded,
  ButtonCenteredOnly,
+  NewWrapper_V2,
 } from "@/components";
 import { MapSelectedPlatform } from "@/components/Map/MapSelectedPlatform";
 import DIRECTORY_ID from "@/constants/directory-id";
@@ -18,6 +18,7 @@ import { IFileData } from "@/utils/pickFile";
 import pickFile from "@/utils/pickFile";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
+import { View } from "react-native";
 import { LatLng } from "react-native-maps";
 import Toast from "react-native-toast-message";

@@ -142,10 +143,14 @@ export function Maps_ScreenMapsCreate() {
  );

  /**
-   * Render screen dengan NewWrapper
+   * Render screen dengan NewWrapper_V2
   */
  return (
-    <NewWrapper footerComponent={buttonFooter}>
+    <NewWrapper_V2
+      enableKeyboardHandling
+      keyboardScrollOffset={100}
+      footerComponent={buttonFooter}
+    >
      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />

      <BaseBox>
@@ -160,13 +165,15 @@ export function Maps_ScreenMapsCreate() {
        />
      </BaseBox>

-      <TextInputCustom
-        required
-        label="Nama Pin"
-        placeholder="Masukkan nama pin maps"
-        value={name}
-        onChangeText={setName}
-      />
+      <View onStartShouldSetResponder={() => true}>
+        <TextInputCustom
+          required
+          label="Nama Pin"
+          placeholder="Masukkan nama pin maps"
+          value={name}
+          onChangeText={setName}
+        />
+      </View>

      <Spacing height={50} />

@@ -179,7 +186,7 @@ export function Maps_ScreenMapsCreate() {
      </ButtonCenteredOnly>

      <Spacing height={50} />
-    </NewWrapper>
+    </NewWrapper_V2>
  );
 }

--- a/screens/Maps/ScreenMapsEdit.tsx
+++ b/screens/Maps/ScreenMapsEdit.tsx
@@ -7,7 +7,7 @@ import {
  LandscapeFrameUploaded,
  Spacing,
  TextInputCustom,
-  ViewWrapper,
+  NewWrapper_V2,
 } from "@/components";
 import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
 import { MapSelectedPlatform } from "@/components/Map/MapSelectedPlatform";
@@ -19,6 +19,7 @@ import { uploadFileService } from "@/service/upload-service";
 import pickFile, { IFileData } from "@/utils/pickFile";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useCallback, useState } from "react";
+import { View } from "react-native";
 import { LatLng } from "react-native-maps";
 import Toast from "react-native-toast-message";

@@ -166,7 +167,11 @@ export function Maps_ScreenMapsEdit() {
      : defaultRegion;

  return (
-    <ViewWrapper footerComponent={buttonFooter}>
+    <NewWrapper_V2
+      enableKeyboardHandling
+      keyboardScrollOffset={100}
+      footerComponent={buttonFooter}
+    >
      <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />

      {/* <MapSelectedPlatform
@@ -191,13 +196,15 @@ export function Maps_ScreenMapsEdit() {
        />
      )}

-      <TextInputCustom
-        required
-        label="Nama Pin"
-        placeholder="Masukkan nama pin maps"
-        value={data?.namePin}
-        onChangeText={(value) => setData({ ...data, namePin: value })}
-      />
+      <View onStartShouldSetResponder={() => true}>
+        <TextInputCustom
+          required
+          label="Nama Pin"
+          placeholder="Masukkan nama pin maps"
+          value={data?.namePin}
+          onChangeText={(value) => setData({ ...data, namePin: value })}
+        />
+      </View>

      <Spacing />

@@ -223,6 +230,6 @@ export function Maps_ScreenMapsEdit() {
        Upload
      </ButtonCenteredOnly>
      <Spacing height={50} />
-    </ViewWrapper>
+    </NewWrapper_V2>
  );
 }
--- a/screens/Portofolio/ScreenPortofolioCreate.tsx
+++ b/screens/Portofolio/ScreenPortofolioCreate.tsx
@@ -4,7 +4,7 @@ import {
  ButtonCenteredOnly,
  CenterCustom,
  InformationBox,
-  NewWrapper,
+  NewWrapper_V2,
  PhoneInputCustom,
  SelectCustom,
  Spacing,
@@ -142,7 +142,9 @@ export function ScreenPortofolioCreate() {
  };

  return (
-    <NewWrapper
+    <NewWrapper_V2
+      enableKeyboardHandling
+      keyboardScrollOffset={100}
      footerComponent={
        <Portofolio_ButtonCreate
          id={id as string}
@@ -158,57 +160,62 @@ export function ScreenPortofolioCreate() {
      <StackCustom gap="xs">
        <InformationBox text="Lengkapi data bisnis anda." />

-        <TextInputCustom
-          required
-          label="Nama Bisnis"
-          placeholder="Masukkan nama bisnis"
-          onChangeText={(value: any) => setData({ ...data, namaBisnis: value })}
-        />
-
-        <SelectCustom
-          label="Bidang Usaha"
-          required
-          data={bidangBisnis.map((item) => ({
-            label: item.name,
-            value: item.id,
-          }))}
-          value={data.masterBidangBisnisId}
-          onChange={(value) => {
-            const isSameBidang = data.masterBidangBisnisId === value;
-
-            if (!isSameBidang) {
-              setListSubBidangSelected([{ id: "" }]);
-            }
-
-            setData({ ...(data as any), masterBidangBisnisId: value });
-            handlerSelectedSubBidang({ id: value as string });
-          }}
-        />
-
-        {listSubBidangSelected.map((item, index) => (
-          <SelectCustom
-            key={index}
-            disabled={data.masterBidangBisnisId === ""}
-            label="Sub Bidang Usaha"
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
            required
-            data={_.map(selectedSubBidang as any)
-              .filter((option: any) => {
-                const selectedValues = listSubBidangSelected.map((s) => s.id);
-                return (
-                  option.id === item.id || !selectedValues.includes(option.id)
-                );
-              })
-              .map((e: any) => ({
-                value: e.id,
-                label: e.name,
-              }))}
-            value={item.id || null}
+            label="Nama Bisnis"
+            placeholder="Masukkan nama bisnis"
+            onChangeText={(value: any) => setData({ ...data, namaBisnis: value })}
+          />
+        </View>
+
+        <View onStartShouldSetResponder={() => true}>
+          <SelectCustom
+            label="Bidang Usaha"
+            required
+            data={bidangBisnis.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={data.masterBidangBisnisId}
            onChange={(value) => {
-              const list = _.clone(listSubBidangSelected);
-              list[index].id = value as any;
-              setListSubBidangSelected(list);
+              const isSameBidang = data.masterBidangBisnisId === value;
+
+              if (!isSameBidang) {
+                setListSubBidangSelected([{ id: "" }]);
+              }
+
+              setData({ ...(data as any), masterBidangBisnisId: value });
+              handlerSelectedSubBidang({ id: value as string });
            }}
          />
+        </View>
+
+        {listSubBidangSelected.map((item, index) => (
+          <View onStartShouldSetResponder={() => true} key={index}>
+            <SelectCustom
+              disabled={data.masterBidangBisnisId === ""}
+              label="Sub Bidang Usaha"
+              required
+              data={_.map(selectedSubBidang as any)
+                .filter((option: any) => {
+                  const selectedValues = listSubBidangSelected.map((s) => s.id);
+                  return (
+                    option.id === item.id || !selectedValues.includes(option.id)
+                  );
+                })
+                .map((e: any) => ({
+                  value: e.id,
+                  label: e.name,
+                }))}
+              value={item.id || null}
+              onChange={(value) => {
+                const list = _.clone(listSubBidangSelected);
+                list[index].id = value as any;
+                setListSubBidangSelected(list);
+              }}
+            />
+          </View>
        ))}

        <CenterCustom>
@@ -272,27 +279,31 @@ export function ScreenPortofolioCreate() {

        <Spacing />

-        <TextInputCustom
-          required
-          label="Alamat Bisnis"
-          placeholder="Masukkan alamat bisnis"
-          onChangeText={(value: any) =>
-            setData({ ...data, alamatKantor: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            required
+            label="Alamat Bisnis"
+            placeholder="Masukkan alamat bisnis"
+            onChangeText={(value: any) =>
+              setData({ ...data, alamatKantor: value })
+            }
+          />
+        </View>

-        <TextAreaCustom
-          label="Deskripsi Bisnis"
-          placeholder="Masukkan deskripsi bisnis"
-          value={data.deskripsi}
-          onChangeText={(value: any) => setData({ ...data, deskripsi: value })}
-          autosize
-          minRows={2}
-          maxRows={5}
-          required
-          showCount
-          maxLength={1000}
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextAreaCustom
+            label="Deskripsi Bisnis"
+            placeholder="Masukkan deskripsi bisnis"
+            value={data.deskripsi}
+            onChangeText={(value: any) => setData({ ...data, deskripsi: value })}
+            autosize
+            minRows={2}
+            maxRows={5}
+            required
+            showCount
+            maxLength={1000}
+          />
+        </View>

        <Spacing />

@@ -322,46 +333,56 @@ export function ScreenPortofolioCreate() {

        <InformationBox text="Isi hanya pada sosial media yang anda miliki." />

-        <TextInputCustom
-          label="Tiktok"
-          placeholder="Masukkan username tiktok"
-          onChangeText={(value: any) =>
-            setDataMedsos({ ...dataMedsos, tiktok: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            label="Tiktok"
+            placeholder="Masukkan username tiktok"
+            onChangeText={(value: any) =>
+              setDataMedsos({ ...dataMedsos, tiktok: value })
+            }
+          />
+        </View>

-        <TextInputCustom
-          label="Facebook"
-          placeholder="Masukkan username facebook"
-          onChangeText={(value: any) =>
-            setDataMedsos({ ...dataMedsos, facebook: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            label="Facebook"
+            placeholder="Masukkan username facebook"
+            onChangeText={(value: any) =>
+              setDataMedsos({ ...dataMedsos, facebook: value })
+            }
+          />
+        </View>

-        <TextInputCustom
-          label="Instagram"
-          placeholder="Masukkan username instagram"
-          onChangeText={(value: any) =>
-            setDataMedsos({ ...dataMedsos, instagram: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            label="Instagram"
+            placeholder="Masukkan username instagram"
+            onChangeText={(value: any) =>
+              setDataMedsos({ ...dataMedsos, instagram: value })
+            }
+          />
+        </View>

-        <TextInputCustom
-          label="Twitter"
-          placeholder="Masukkan username twitter"
-          onChangeText={(value: any) =>
-            setDataMedsos({ ...dataMedsos, twitter: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            label="Twitter"
+            placeholder="Masukkan username twitter"
+            onChangeText={(value: any) =>
+              setDataMedsos({ ...dataMedsos, twitter: value })
+            }
+          />
+        </View>

-        <TextInputCustom
-          label="Youtube"
-          placeholder="Masukkan username youtube"
-          onChangeText={(value: any) =>
-            setDataMedsos({ ...dataMedsos, youtube: value })
-          }
-        />
+        <View onStartShouldSetResponder={() => true}>
+          <TextInputCustom
+            label="Youtube"
+            placeholder="Masukkan username youtube"
+            onChangeText={(value: any) =>
+              setDataMedsos({ ...dataMedsos, youtube: value })
+            }
+          />
+        </View>
      </StackCustom>
-    </NewWrapper>
+    </NewWrapper_V2>
  );
 }