Compare commits
9 Commits
clean/31-m
...
qc-wrapper
| Author | SHA1 | Date | |
|---|---|---|---|
| b8f8a361d6 | |||
| 1a5ca78041 | |||
| 502cd7bc65 | |||
| 44d9025afe | |||
| b34bc3799e | |||
| 7cb4f30ae9 | |||
| 0f552443c4 | |||
| 90bc8ae343 | |||
| 98f8c7e2bf |
@@ -21,8 +21,7 @@ export default function UserLayout() {
|
||||
<Stack.Screen
|
||||
name="waiting-room"
|
||||
options={{
|
||||
title: "Waiting Room",
|
||||
headerBackVisible: false,
|
||||
header: () => <AppHeader title="Waiting Room" />,
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
@@ -2,35 +2,64 @@ import { IconHome } from "@/components/_Icon";
|
||||
import { TabsStyles } from "@/styles/tabs-styles";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Tabs } 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";
|
||||
|
||||
function CollaborationTabsWrapper() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||
|
||||
export default function CollaborationTabsLayout() {
|
||||
return (
|
||||
<Tabs screenOptions={TabsStyles}>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: "Beranda",
|
||||
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
||||
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
...TabsStyles,
|
||||
tabBarStyle: Platform.select({
|
||||
ios: {
|
||||
borderTopWidth: 0,
|
||||
paddingTop: 12,
|
||||
height: 80,
|
||||
},
|
||||
android: {
|
||||
borderTopWidth: 0,
|
||||
paddingTop: 5,
|
||||
height: 70 + paddingBottom,
|
||||
},
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="participant"
|
||||
options={{
|
||||
title: "Partisipan",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<Ionicons size={20} name="people" color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="group"
|
||||
options={{
|
||||
title: "Grup",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<Ionicons size={20} name="chatbox-ellipses" color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: "Beranda",
|
||||
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="participant"
|
||||
options={{
|
||||
title: "Partisipan",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<Ionicons size={20} name="people" color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="group"
|
||||
options={{
|
||||
title: "Grup",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<Ionicons size={20} name="chatbox-ellipses" color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CollaborationTabsLayout() {
|
||||
return <CollaborationTabsWrapper />;
|
||||
}
|
||||
|
||||
@@ -5,33 +5,62 @@ import {
|
||||
FontAwesome5
|
||||
} from "@expo/vector-icons";
|
||||
import { Tabs } 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";
|
||||
|
||||
function DonationTabsWrapper() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||
|
||||
export default function InvestmentTabsLayout() {
|
||||
return (
|
||||
<Tabs screenOptions={TabsStyles}>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: "Beranda",
|
||||
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
||||
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
...TabsStyles,
|
||||
tabBarStyle: Platform.select({
|
||||
ios: {
|
||||
borderTopWidth: 0,
|
||||
paddingTop: 12,
|
||||
height: 80,
|
||||
},
|
||||
android: {
|
||||
borderTopWidth: 0,
|
||||
paddingTop: 5,
|
||||
height: 70 + paddingBottom,
|
||||
},
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="status"
|
||||
options={{
|
||||
title: "Galang Dana",
|
||||
tabBarIcon: ({ color }) => <IconStatus color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="my-donation"
|
||||
options={{
|
||||
title: "Donasi Saya",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<FontAwesome5 name="donate" color={color} size={ICON_SIZE_SMALL} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: "Beranda",
|
||||
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="status"
|
||||
options={{
|
||||
title: "Galang Dana",
|
||||
tabBarIcon: ({ color }) => <IconStatus color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="my-donation"
|
||||
options={{
|
||||
title: "Donasi Saya",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<FontAwesome5 name="donate" color={color} size={ICON_SIZE_SMALL} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DonationTabsLayout() {
|
||||
return <DonationTabsWrapper />;
|
||||
}
|
||||
|
||||
@@ -185,7 +185,6 @@ export default function DonationEdit() {
|
||||
|
||||
return (
|
||||
<NewWrapper
|
||||
hideFooter
|
||||
footerComponent={
|
||||
<BoxButtonOnFooter>
|
||||
<ButtonCustom
|
||||
|
||||
@@ -114,7 +114,6 @@ export default function DonationCreateStory() {
|
||||
|
||||
return (
|
||||
<NewWrapper
|
||||
hideFooter
|
||||
footerComponent={
|
||||
<>
|
||||
<BoxButtonOnFooter>
|
||||
|
||||
@@ -127,7 +127,6 @@ export default function DonationCreate() {
|
||||
|
||||
return (
|
||||
<NewWrapper
|
||||
hideFooter
|
||||
footerComponent={
|
||||
<>
|
||||
<BoxButtonOnFooter>
|
||||
|
||||
@@ -8,58 +8,83 @@ import AppHeader from "@/components/_ShareComponent/AppHeader";
|
||||
import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
|
||||
import { TabsStyles } from "@/styles/tabs-styles";
|
||||
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_IOS_HEIGHT } from "@/constants/constans-value";
|
||||
|
||||
export default function EventTabsLayout() {
|
||||
function EventTabsWrapper() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||
const { from, category } = useLocalSearchParams<{
|
||||
from?: string;
|
||||
category?: string;
|
||||
}>();
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
...TabsStyles,
|
||||
header: () => (
|
||||
<AppHeader
|
||||
title="Event"
|
||||
left={
|
||||
<BackButtonFromNotification
|
||||
from={from as string}
|
||||
category={category as string}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: "Beranda",
|
||||
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
||||
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
...TabsStyles,
|
||||
tabBarStyle: Platform.select({
|
||||
ios: {
|
||||
borderTopWidth: 0,
|
||||
paddingTop: 12,
|
||||
height: OS_IOS_HEIGHT,
|
||||
},
|
||||
android: {
|
||||
borderTopWidth: 0,
|
||||
paddingTop: 5,
|
||||
height: OS_ANDROID_HEIGHT + paddingBottom,
|
||||
},
|
||||
}),
|
||||
header: () => (
|
||||
<AppHeader
|
||||
title="Event"
|
||||
left={
|
||||
<BackButtonFromNotification
|
||||
from={from || ""}
|
||||
category={category}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="status"
|
||||
options={{
|
||||
title: "Status",
|
||||
tabBarIcon: ({ color }) => <IconStatus color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="contribution"
|
||||
options={{
|
||||
title: "Kontribusi",
|
||||
tabBarIcon: ({ color }) => <IconContribution color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="history"
|
||||
options={{
|
||||
title: "Riwayat",
|
||||
tabBarIcon: ({ color }) => <IconHistory color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: "Beranda",
|
||||
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="status"
|
||||
options={{
|
||||
title: "Status",
|
||||
tabBarIcon: ({ color }) => <IconStatus color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="contribution"
|
||||
options={{
|
||||
title: "Kontribusi",
|
||||
tabBarIcon: ({ color }) => <IconContribution color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="history"
|
||||
options={{
|
||||
title: "Riwayat",
|
||||
tabBarIcon: ({ color }) => <IconHistory color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function EventTabsLayout() {
|
||||
return <EventTabsWrapper />;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { BasicWrapper, NewWrapper, StackCustom, ViewWrapper } from "@/components";
|
||||
import { BasicWrapper, Spacing, StackCustom, ViewWrapper } from "@/components";
|
||||
import AppHeader from "@/components/_ShareComponent/AppHeader";
|
||||
import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
@@ -8,19 +8,20 @@ import { useAuth } from "@/hooks/use-auth";
|
||||
import { useNotificationStore } from "@/hooks/use-notification-store";
|
||||
import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
|
||||
import HeaderBell from "@/screens/Home/HeaderBell";
|
||||
import HomeTabs from "@/screens/Home/HomeTabs";
|
||||
import { stylesHome } from "@/screens/Home/homeViewStyle";
|
||||
import Home_ImageSection from "@/screens/Home/imageSection";
|
||||
import TabSection from "@/screens/Home/tabSection";
|
||||
import { tabsHome } from "@/screens/Home/tabsList";
|
||||
import Home_FeatureSection from "@/screens/Home/topFeatureSection";
|
||||
import { apiJobGetAll } from "@/service/api-client/api-job";
|
||||
import { apiUser } from "@/service/api-client/api-user";
|
||||
import { apiVersion } from "@/service/api-config";
|
||||
import { GStyles } from "@/styles/global-styles";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Redirect, router, Stack, useFocusEffect } from "expo-router";
|
||||
import { useCallback, useState } from "react";
|
||||
import { RefreshControl, View } from "react-native";
|
||||
import { RefreshControl, ScrollView, View } from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { Platform } from "react-native";
|
||||
|
||||
export default function Application() {
|
||||
const { token, user, userData } = useAuth();
|
||||
@@ -28,6 +29,8 @@ export default function Application() {
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const { syncUnreadCount } = useNotificationStore();
|
||||
const [listData, setListData] = useState<any[] | null>(null);
|
||||
const insets = useSafeAreaInsets();
|
||||
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
@@ -105,15 +108,6 @@ export default function Application() {
|
||||
);
|
||||
}
|
||||
|
||||
// if (data && data?.masterUserRoleId !== "1") {
|
||||
// console.log("User is not admin");
|
||||
// return (
|
||||
// <BasicWrapper>
|
||||
// <Redirect href={`/admin/dashboard`} />
|
||||
// </BasicWrapper>
|
||||
// );
|
||||
// }
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen
|
||||
@@ -148,64 +142,61 @@ export default function Application() {
|
||||
}}
|
||||
/>
|
||||
|
||||
<NewWrapper
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={MainColor.yellow}
|
||||
colors={[MainColor.yellow]}
|
||||
/>
|
||||
}
|
||||
footerComponent={
|
||||
data && data ? (
|
||||
<TabSection
|
||||
tabs={tabsHome({
|
||||
acceptedForumTermsAt: data?.acceptedForumTermsAt,
|
||||
profileId: data?.Profile?.id,
|
||||
})}
|
||||
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||
<ScrollView
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
paddingInline: 10,
|
||||
paddingBottom: paddingBottom + 80, // Space for tabs + safe area
|
||||
}}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={MainColor.yellow}
|
||||
colors={[MainColor.yellow]}
|
||||
/>
|
||||
) : (
|
||||
null
|
||||
// <View style={GStyles.tabBar}>
|
||||
// <View style={[GStyles.tabContainer, { paddingTop: 10 }]}>
|
||||
// {Array.from({ length: 4 }).map((e, index) => (
|
||||
// <CustomSkeleton
|
||||
// key={index}
|
||||
// height={40}
|
||||
// width={40}
|
||||
// radius={100}
|
||||
// />
|
||||
// ))}
|
||||
// </View>
|
||||
// </View>
|
||||
)
|
||||
}
|
||||
>
|
||||
<StackCustom>
|
||||
<Home_ImageSection />
|
||||
}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
<StackCustom>
|
||||
<Home_ImageSection />
|
||||
|
||||
{data && data ? (
|
||||
<Home_FeatureSection />
|
||||
) : (
|
||||
<View style={stylesHome.gridContainer}>
|
||||
{Array.from({ length: 4 }).map((item, index) => (
|
||||
<CustomSkeleton
|
||||
key={index}
|
||||
style={stylesHome.gridItem}
|
||||
radius={50}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
{data && data ? (
|
||||
<Home_FeatureSection />
|
||||
) : (
|
||||
<View style={stylesHome.gridContainer}>
|
||||
{Array.from({ length: 4 }).map((_, index) => (
|
||||
<CustomSkeleton
|
||||
key={index}
|
||||
style={stylesHome.gridItem}
|
||||
radius={50}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{data ? (
|
||||
<Home_BottomFeatureSection listData={listData} />
|
||||
) : (
|
||||
<CustomSkeleton height={150} />
|
||||
)}
|
||||
</StackCustom>
|
||||
</NewWrapper>
|
||||
{data ? (
|
||||
<Home_BottomFeatureSection listData={listData} />
|
||||
) : (
|
||||
<CustomSkeleton height={150} />
|
||||
)}
|
||||
</StackCustom>
|
||||
</ScrollView>
|
||||
|
||||
{/* Home Tabs di bawah */}
|
||||
{data && data ? (
|
||||
<HomeTabs
|
||||
tabs={tabsHome({
|
||||
acceptedForumTermsAt: data?.acceptedForumTermsAt,
|
||||
profileId: data?.Profile?.id,
|
||||
})}
|
||||
/>
|
||||
) : (
|
||||
<View style={{ height: 80 + paddingBottom, backgroundColor: MainColor.darkblue }} />
|
||||
)}
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,80 +4,105 @@ import { TabsStyles } from "@/styles/tabs-styles";
|
||||
import { Feather, FontAwesome6, Ionicons } from "@expo/vector-icons";
|
||||
import { router, Tabs, useLocalSearchParams, useNavigation } from "expo-router";
|
||||
import { useLayoutEffect } from "react";
|
||||
import { View } from "react-native";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { Platform } from "react-native";
|
||||
|
||||
export default function InvestmentTabsLayout() {
|
||||
// const navigation = useNavigation();
|
||||
function InvestmentTabsWrapper() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||
const navigation = useNavigation();
|
||||
|
||||
// const { from, category } = useLocalSearchParams<{
|
||||
// from?: string;
|
||||
// category?: string;
|
||||
// }>();
|
||||
const { from, category } = useLocalSearchParams<{
|
||||
from?: string;
|
||||
category?: string;
|
||||
}>();
|
||||
|
||||
// console.log("from", from);
|
||||
// console.log("category", category);
|
||||
|
||||
// // Atur header secara dinamis
|
||||
// useLayoutEffect(() => {
|
||||
// navigation.setOptions({
|
||||
// headerLeft: () => (
|
||||
// <BackButtonFromNotification
|
||||
// from={from as string}
|
||||
// category={category as string}
|
||||
// />
|
||||
// ),
|
||||
// });
|
||||
// }, [from, router, navigation]);
|
||||
// Atur header secara dinamis
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
headerLeft: () => (
|
||||
<BackButtonFromNotification
|
||||
from={from || ""}
|
||||
category={category}
|
||||
/>
|
||||
),
|
||||
});
|
||||
}, [from, category, router, navigation]);
|
||||
|
||||
return (
|
||||
<Tabs screenOptions={TabsStyles}>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: "Bursa",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<Ionicons
|
||||
name="bar-chart-outline"
|
||||
color={color}
|
||||
size={ICON_SIZE_SMALL}
|
||||
/>
|
||||
),
|
||||
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
...TabsStyles,
|
||||
tabBarStyle: Platform.select({
|
||||
ios: {
|
||||
borderTopWidth: 0,
|
||||
paddingTop: 12,
|
||||
height: 80,
|
||||
},
|
||||
android: {
|
||||
borderTopWidth: 0,
|
||||
paddingTop: 5,
|
||||
height: 70 + paddingBottom,
|
||||
},
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="portofolio"
|
||||
options={{
|
||||
title: "Portofolio",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<Feather name="pie-chart" color={color} size={ICON_SIZE_SMALL} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="my-holding"
|
||||
options={{
|
||||
title: "Saham Saya",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<FontAwesome6
|
||||
name="hand-holding-dollar"
|
||||
color={color}
|
||||
size={ICON_SIZE_SMALL}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="transaction"
|
||||
options={{
|
||||
title: "Transaksi",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<FontAwesome6
|
||||
name="money-bill-transfer"
|
||||
color={color}
|
||||
size={ICON_SIZE_SMALL}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: "Bursa",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<Ionicons
|
||||
name="bar-chart-outline"
|
||||
color={color}
|
||||
size={ICON_SIZE_SMALL}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="portofolio"
|
||||
options={{
|
||||
title: "Portofolio",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<Feather name="pie-chart" color={color} size={ICON_SIZE_SMALL} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="my-holding"
|
||||
options={{
|
||||
title: "Saham Saya",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<FontAwesome6
|
||||
name="hand-holding-dollar"
|
||||
color={color}
|
||||
size={ICON_SIZE_SMALL}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="transaction"
|
||||
options={{
|
||||
title: "Transaksi",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<FontAwesome6
|
||||
name="money-bill-transfer"
|
||||
color={color}
|
||||
size={ICON_SIZE_SMALL}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function InvestmentTabsLayout() {
|
||||
return <InvestmentTabsWrapper />;
|
||||
}
|
||||
|
||||
@@ -5,28 +5,51 @@ 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 { View } from "react-native";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { Platform } from "react-native";
|
||||
import {
|
||||
router,
|
||||
Tabs,
|
||||
useLocalSearchParams
|
||||
} from "expo-router";
|
||||
OS_ANDROID_HEIGHT,
|
||||
OS_ANDROID_PADDING_TOP,
|
||||
OS_IOS_HEIGHT,
|
||||
OS_IOS_PADDING_TOP,
|
||||
} from "@/constants/constans-value";
|
||||
|
||||
export default function JobTabsLayout() {
|
||||
function JobTabsWrapper() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||
const { from, category } = useLocalSearchParams<{
|
||||
from?: string;
|
||||
category?: string;
|
||||
}>();
|
||||
|
||||
return (
|
||||
<>
|
||||
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
...TabsStyles,
|
||||
tabBarStyle: Platform.select({
|
||||
ios: {
|
||||
borderTopWidth: 0,
|
||||
paddingTop: OS_IOS_PADDING_TOP,
|
||||
height: OS_IOS_HEIGHT,
|
||||
},
|
||||
android: {
|
||||
borderTopWidth: 0,
|
||||
paddingTop: OS_ANDROID_PADDING_TOP,
|
||||
height: OS_ANDROID_HEIGHT + paddingBottom,
|
||||
},
|
||||
}),
|
||||
header: () => (
|
||||
<AppHeader
|
||||
title="Job Vacancy"
|
||||
left={
|
||||
<BackButtonFromNotification from={from as string} category={category as string} />
|
||||
<BackButtonFromNotification
|
||||
from={from || ""}
|
||||
category={category}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
),
|
||||
@@ -56,6 +79,10 @@ export default function JobTabsLayout() {
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
</>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function JobTabsLayout() {
|
||||
return <JobTabsWrapper />;
|
||||
}
|
||||
|
||||
@@ -5,9 +5,9 @@ import {
|
||||
DrawerCustom,
|
||||
LoaderCustom,
|
||||
MenuDrawerDynamicGrid,
|
||||
OS_Wrapper,
|
||||
Spacing,
|
||||
StackCustom,
|
||||
ViewWrapper,
|
||||
} from "@/components";
|
||||
import AppHeader from "@/components/_ShareComponent/AppHeader";
|
||||
import { IconEdit } from "@/components/_Icon";
|
||||
@@ -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() {
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<ViewWrapper>
|
||||
<OS_Wrapper >
|
||||
{isLoadData ? (
|
||||
<LoaderCustom />
|
||||
) : (
|
||||
@@ -83,7 +84,7 @@ export default function JobDetailStatus() {
|
||||
(status === "draft" || status === "reject") && (
|
||||
<ReportBox text={data?.catatan} />
|
||||
)}
|
||||
|
||||
|
||||
<Job_BoxDetailSection data={data} />
|
||||
<Job_ButtonStatusSection
|
||||
id={id as string}
|
||||
@@ -96,7 +97,7 @@ export default function JobDetailStatus() {
|
||||
<Spacing />
|
||||
</>
|
||||
)}
|
||||
</ViewWrapper>
|
||||
</OS_Wrapper>
|
||||
|
||||
<DrawerCustom
|
||||
isVisible={openDrawer}
|
||||
|
||||
@@ -1,198 +1,5 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import {
|
||||
BaseBox,
|
||||
ButtonCenteredOnly,
|
||||
ButtonCustom,
|
||||
DummyLandscapeImage,
|
||||
InformationBox,
|
||||
LandscapeFrameUploaded,
|
||||
LoaderCustom,
|
||||
Spacing,
|
||||
StackCustom,
|
||||
TextAreaCustom,
|
||||
TextInputCustom,
|
||||
ViewWrapper,
|
||||
} from "@/components";
|
||||
import DIRECTORY_ID from "@/constants/directory-id";
|
||||
import { apiJobGetOne, apiJobUpdateData } from "@/service/api-client/api-job";
|
||||
import {
|
||||
deleteFileService,
|
||||
uploadFileService,
|
||||
} from "@/service/upload-service";
|
||||
import pickImage from "@/utils/pickImage";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import Toast from "react-native-toast-message";
|
||||
import { Job_ScreenEdit } from "@/screens/Job/ScreenJobEdit";
|
||||
|
||||
export default function JobEdit() {
|
||||
const { id } = useLocalSearchParams();
|
||||
const [data, setData] = useState<any>({
|
||||
title: "",
|
||||
content: "",
|
||||
deskripsi: "",
|
||||
});
|
||||
const [isLoadData, setIsLoadData] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [imageUri, setImageUri] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
onLoadData();
|
||||
}, [id]);
|
||||
|
||||
const onLoadData = async () => {
|
||||
try {
|
||||
setIsLoadData(true);
|
||||
const response = await apiJobGetOne({ id: id as string });
|
||||
if (response.success) {
|
||||
setData(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
setIsLoadData(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlerOnUpdate = async () => {
|
||||
if (!data.title || !data.content || !data.deskripsi) {
|
||||
Toast.show({
|
||||
type: "info",
|
||||
text1: "Info",
|
||||
text2: "Harap isi semua data",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
let newImageId = "";
|
||||
|
||||
if (imageUri) {
|
||||
const responseUploadImage = await uploadFileService({
|
||||
imageUri: imageUri,
|
||||
dirId: DIRECTORY_ID.job_image,
|
||||
});
|
||||
|
||||
if (responseUploadImage.success) {
|
||||
newImageId = responseUploadImage.data.id;
|
||||
}
|
||||
}
|
||||
|
||||
if (data?.imageId) {
|
||||
const responseDeleteImage = await deleteFileService({
|
||||
id: data.imageId,
|
||||
});
|
||||
|
||||
if (!responseDeleteImage.success) {
|
||||
console.log("[ERROR DELETE IMAGE]", responseDeleteImage.message);
|
||||
}
|
||||
}
|
||||
|
||||
const newData = {
|
||||
title: data.title,
|
||||
content: data.content,
|
||||
deskripsi: data.deskripsi,
|
||||
imageId: newImageId,
|
||||
};
|
||||
|
||||
const response = await apiJobUpdateData({
|
||||
id: id as string,
|
||||
data: newData,
|
||||
category: "edit",
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: response.message,
|
||||
});
|
||||
router.back();
|
||||
} else {
|
||||
Toast.show({
|
||||
type: "info",
|
||||
text1: "Info",
|
||||
text2: response.message,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const buttonSubmit = () => {
|
||||
return (
|
||||
<>
|
||||
<ButtonCustom isLoading={isLoading} onPress={() => handlerOnUpdate()}>
|
||||
Update
|
||||
</ButtonCustom>
|
||||
<Spacing />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<ViewWrapper>
|
||||
{isLoadData ? (
|
||||
<LoaderCustom />
|
||||
) : (
|
||||
<StackCustom gap={"xs"}>
|
||||
<InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
|
||||
|
||||
{imageUri ? (
|
||||
<LandscapeFrameUploaded image={imageUri as any} />
|
||||
) : (
|
||||
<BaseBox>
|
||||
<DummyLandscapeImage imageId={data?.imageId} />
|
||||
</BaseBox>
|
||||
)}
|
||||
|
||||
<ButtonCenteredOnly
|
||||
onPress={() => {
|
||||
pickImage({
|
||||
setImageUri,
|
||||
});
|
||||
}}
|
||||
icon="upload"
|
||||
>
|
||||
Upload
|
||||
</ButtonCenteredOnly>
|
||||
|
||||
<Spacing />
|
||||
|
||||
<TextInputCustom
|
||||
label="Judul Lowongan"
|
||||
placeholder="Masukan Judul Lowongan Kerja"
|
||||
required
|
||||
value={data.title}
|
||||
onChangeText={(value) => setData({ ...data, title: value })}
|
||||
/>
|
||||
|
||||
<TextAreaCustom
|
||||
label="Syarat & Kualifikasi"
|
||||
placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
|
||||
required
|
||||
showCount
|
||||
maxLength={1000}
|
||||
value={data.content}
|
||||
onChangeText={(value) => setData({ ...data, content: value })}
|
||||
/>
|
||||
|
||||
<TextAreaCustom
|
||||
label="Deskripsi Lowongan"
|
||||
placeholder="Masukan Deskripsi Lowongan Kerja"
|
||||
required
|
||||
showCount
|
||||
maxLength={1000}
|
||||
value={data.deskripsi}
|
||||
onChangeText={(value) => setData({ ...data, deskripsi: value })}
|
||||
/>
|
||||
|
||||
{buttonSubmit()}
|
||||
</StackCustom>
|
||||
)}
|
||||
</ViewWrapper>
|
||||
);
|
||||
return <Job_ScreenEdit />;
|
||||
}
|
||||
|
||||
@@ -1,168 +1,5 @@
|
||||
import {
|
||||
BoxButtonOnFooter,
|
||||
ButtonCenteredOnly,
|
||||
ButtonCustom,
|
||||
InformationBox,
|
||||
LandscapeFrameUploaded,
|
||||
NewWrapper,
|
||||
Spacing,
|
||||
StackCustom,
|
||||
TextAreaCustom,
|
||||
TextInputCustom
|
||||
} from "@/components";
|
||||
import DIRECTORY_ID from "@/constants/directory-id";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { apiJobCreate } from "@/service/api-client/api-job";
|
||||
import { uploadFileService } from "@/service/upload-service";
|
||||
import pickImage from "@/utils/pickImage";
|
||||
import { router } from "expo-router";
|
||||
import { useState } from "react";
|
||||
import Toast from "react-native-toast-message";
|
||||
import { Job_ScreenCreate } from "@/screens/Job/ScreenJobCreate";
|
||||
|
||||
export default function JobCreate() {
|
||||
const nextUrl = "/(application)/(user)/job/(tabs)/status?status=review";
|
||||
const { user } = useAuth();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [image, setImage] = useState<string | null>(null);
|
||||
const [data, setData] = useState({
|
||||
title: "",
|
||||
content: "",
|
||||
deskripsi: "",
|
||||
authorId: "",
|
||||
});
|
||||
|
||||
const handlerOnSubmit = async () => {
|
||||
let imageId = "";
|
||||
const newData = {
|
||||
title: data.title,
|
||||
content: data.content,
|
||||
deskripsi: data.deskripsi,
|
||||
authorId: user?.id,
|
||||
imageId: "",
|
||||
};
|
||||
|
||||
if (!data.title || !data.content || !data.deskripsi || !user?.id) {
|
||||
Toast.show({
|
||||
type: "info",
|
||||
text1: "Info",
|
||||
text2: "Harap isi semua data",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
if (image === null || !image) {
|
||||
const response = await apiJobCreate(newData);
|
||||
if (response.success) {
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: "Berhasil",
|
||||
text2: "Lowongan berhasil dibuat",
|
||||
});
|
||||
router.replace(nextUrl);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const responseUploadImage = await uploadFileService({
|
||||
imageUri: image,
|
||||
dirId: DIRECTORY_ID.job_image,
|
||||
});
|
||||
|
||||
if (responseUploadImage.success) {
|
||||
imageId = responseUploadImage.data.id;
|
||||
}
|
||||
|
||||
const fixData = {
|
||||
...newData,
|
||||
imageId: imageId,
|
||||
};
|
||||
|
||||
const response = await apiJobCreate(fixData);
|
||||
if (response.success) {
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: "Berhasil",
|
||||
text2: "Lowongan berhasil dibuat",
|
||||
});
|
||||
router.replace(nextUrl);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const buttonSubmit = () => {
|
||||
return (
|
||||
<>
|
||||
<BoxButtonOnFooter>
|
||||
<ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
|
||||
Simpan
|
||||
</ButtonCustom>
|
||||
</BoxButtonOnFooter>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<NewWrapper footerComponent={buttonSubmit()}>
|
||||
<StackCustom gap={"xs"}>
|
||||
<InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
|
||||
|
||||
{/* <BaseBox>
|
||||
<Image
|
||||
source={image ? { uri: image } : DUMMY_IMAGE.dummy_image}
|
||||
style={{ width: "100%", height: 200 }}
|
||||
/>
|
||||
</BaseBox> */}
|
||||
<LandscapeFrameUploaded image={image as string} />
|
||||
<ButtonCenteredOnly
|
||||
onPress={() => {
|
||||
// router.push("/(application)/(image)/take-picture/123");
|
||||
pickImage({
|
||||
setImageUri: setImage,
|
||||
});
|
||||
}}
|
||||
icon="upload"
|
||||
>
|
||||
Upload
|
||||
</ButtonCenteredOnly>
|
||||
|
||||
<Spacing />
|
||||
|
||||
<TextInputCustom
|
||||
label="Judul Lowongan"
|
||||
placeholder="Masukan Judul Lowongan Kerja"
|
||||
required
|
||||
value={data.title}
|
||||
onChangeText={(value) => setData({ ...data, title: value })}
|
||||
/>
|
||||
|
||||
<TextAreaCustom
|
||||
label="Syarat & Kualifikasi"
|
||||
placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
|
||||
required
|
||||
showCount
|
||||
maxLength={1000}
|
||||
value={data.content}
|
||||
onChangeText={(value) => setData({ ...data, content: value })}
|
||||
/>
|
||||
|
||||
<TextAreaCustom
|
||||
label="Deskripsi Lowongan"
|
||||
placeholder="Masukan Deskripsi Lowongan Kerja"
|
||||
required
|
||||
showCount
|
||||
maxLength={1000}
|
||||
value={data.deskripsi}
|
||||
onChangeText={(value) => setData({ ...data, deskripsi: value })}
|
||||
/>
|
||||
</StackCustom>
|
||||
</NewWrapper>
|
||||
);
|
||||
return <Job_ScreenCreate />;
|
||||
}
|
||||
|
||||
@@ -23,7 +23,11 @@ export default function ProfileLayout() {
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="create"
|
||||
options={{ headerBackVisible: false }}
|
||||
options={{
|
||||
header: () => (
|
||||
<AppHeader title="Tambah Profil" showBack={false} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
|
||||
@@ -8,58 +8,82 @@ import AppHeader from "@/components/_ShareComponent/AppHeader";
|
||||
import BackButtonFromNotification from "@/components/Button/BackButtonFromNotification";
|
||||
import { TabsStyles } from "@/styles/tabs-styles";
|
||||
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";
|
||||
|
||||
export default function VotingTabsLayout() {
|
||||
function VotingTabsWrapper() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||
const { from, category } = useLocalSearchParams<{
|
||||
from?: string;
|
||||
category?: string;
|
||||
}>();
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
...TabsStyles,
|
||||
header: () => (
|
||||
<AppHeader
|
||||
title="Voting"
|
||||
left={
|
||||
<BackButtonFromNotification
|
||||
from={from as string}
|
||||
category={category as string}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: "Beranda",
|
||||
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
||||
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
...TabsStyles,
|
||||
tabBarStyle: Platform.select({
|
||||
ios: {
|
||||
borderTopWidth: 0,
|
||||
paddingTop: 12,
|
||||
height: 80,
|
||||
},
|
||||
android: {
|
||||
borderTopWidth: 0,
|
||||
paddingTop: 5,
|
||||
height: 70 + paddingBottom,
|
||||
},
|
||||
}),
|
||||
header: () => (
|
||||
<AppHeader
|
||||
title="Voting"
|
||||
left={
|
||||
<BackButtonFromNotification
|
||||
from={from || ""}
|
||||
category={category}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="status"
|
||||
options={{
|
||||
title: "Status",
|
||||
tabBarIcon: ({ color }) => <IconStatus color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="contribution"
|
||||
options={{
|
||||
title: "Kontribusi",
|
||||
tabBarIcon: ({ color }) => <IconContribution color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="history"
|
||||
options={{
|
||||
title: "Riwayat",
|
||||
tabBarIcon: ({ color }) => <IconHistory color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: "Beranda",
|
||||
tabBarIcon: ({ color }) => <IconHome color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="status"
|
||||
options={{
|
||||
title: "Status",
|
||||
tabBarIcon: ({ color }) => <IconStatus color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="contribution"
|
||||
options={{
|
||||
title: "Kontribusi",
|
||||
tabBarIcon: ({ color }) => <IconContribution color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="history"
|
||||
options={{
|
||||
title: "Riwayat",
|
||||
tabBarIcon: ({ color }) => <IconHistory color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function VotingTabsLayout() {
|
||||
return <VotingTabsWrapper />;
|
||||
}
|
||||
|
||||
245
components/_ShareComponent/AndroidWrapper.tsx
Normal file
245
components/_ShareComponent/AndroidWrapper.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
// @/components/AndroidWrapper.tsx
|
||||
// Android Wrapper - Based on NewWrapper_V2 (with keyboard handling for Android)
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { OS_HEIGHT } from "@/constants/constans-value";
|
||||
import { GStyles } from "@/styles/global-styles";
|
||||
import {
|
||||
ImageBackground,
|
||||
Keyboard,
|
||||
KeyboardAvoidingView,
|
||||
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 { useKeyboardForm } from "@/hooks/useKeyboardForm";
|
||||
|
||||
// --- Base Props ---
|
||||
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 (Android only)
|
||||
* @default false
|
||||
*/
|
||||
enableKeyboardHandling?: boolean;
|
||||
/**
|
||||
* Scroll offset when keyboard appears (Android only)
|
||||
* @default 100
|
||||
*/
|
||||
keyboardScrollOffset?: number;
|
||||
/**
|
||||
* Extra padding bottom for content to avoid navigation bar (Android only)
|
||||
* @default 80
|
||||
*/
|
||||
contentPaddingBottom?: number;
|
||||
/**
|
||||
* Padding untuk content container (Android only)
|
||||
* Set to 0 untuk tidak ada padding, atau custom value sesuai kebutuhan
|
||||
* @default 16
|
||||
*/
|
||||
contentPadding?: 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 AndroidWrapperProps = StaticModeProps | ListModeProps;
|
||||
|
||||
export function AndroidWrapper(props: AndroidWrapperProps) {
|
||||
const {
|
||||
withBackground = false,
|
||||
headerComponent,
|
||||
footerComponent,
|
||||
floatingButton,
|
||||
hideFooter = false,
|
||||
edgesFooter = [],
|
||||
style,
|
||||
refreshControl,
|
||||
enableKeyboardHandling = false,
|
||||
keyboardScrollOffset,
|
||||
contentPaddingBottom,
|
||||
contentPadding,
|
||||
} = props;
|
||||
|
||||
// Default values (should be set by OS_Wrapper, but fallback for direct usage)
|
||||
const finalKeyboardScrollOffset = keyboardScrollOffset ?? 100;
|
||||
const finalContentPaddingBottom = contentPaddingBottom ?? 250;
|
||||
const finalContentPadding = contentPadding ?? 0;
|
||||
|
||||
const assetBackground = require("../../assets/images/main-background.png");
|
||||
|
||||
// Use keyboard hook if enabled
|
||||
const keyboardForm = enableKeyboardHandling
|
||||
? useKeyboardForm(finalKeyboardScrollOffset)
|
||||
: 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 (
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss} style={{ flex: 1 }}>
|
||||
<KeyboardAvoidingView
|
||||
behavior={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) +
|
||||
finalContentPaddingBottom,
|
||||
padding: finalContentPadding,
|
||||
}}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
/>
|
||||
|
||||
{/* Footer - Fixed di bawah dengan width 100% */}
|
||||
{footerComponent && !hideFooter && (
|
||||
<SafeAreaView
|
||||
edges={["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>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
}
|
||||
|
||||
// 🔹 Mode Statis (ScrollView)
|
||||
const staticProps = props as StaticModeProps;
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior={undefined}
|
||||
style={{ flex: 1, backgroundColor: MainColor.darkblue }}
|
||||
>
|
||||
{headerComponent && (
|
||||
<View style={GStyles.stickyHeader}>{headerComponent}</View>
|
||||
)}
|
||||
|
||||
<ScrollView
|
||||
ref={keyboardForm?.scrollViewRef}
|
||||
onScroll={keyboardForm?.handleScroll}
|
||||
scrollEventThrottle={16}
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
paddingBottom:
|
||||
(footerComponent && !hideFooter ? OS_HEIGHT : 0) +
|
||||
finalContentPaddingBottom,
|
||||
padding: finalContentPadding,
|
||||
}}
|
||||
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: "absolute",
|
||||
bottom: 0,
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default AndroidWrapper;
|
||||
75
components/_ShareComponent/FormWrapper.tsx
Normal file
75
components/_ShareComponent/FormWrapper.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
// 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, handleScroll } = useKeyboardForm(scrollOffset);
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
style={{ flex: 1, backgroundColor: MainColor.darkblue }}
|
||||
>
|
||||
<ScrollView
|
||||
ref={scrollViewRef}
|
||||
onScroll={handleScroll}
|
||||
scrollEventThrottle={16}
|
||||
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>
|
||||
);
|
||||
}
|
||||
216
components/_ShareComponent/IOSWrapper.tsx
Normal file
216
components/_ShareComponent/IOSWrapper.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
// @/components/iOSWrapper.tsx
|
||||
// iOS Wrapper - Based on NewWrapper (stable version for iOS)
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { OS_HEIGHT } from "@/constants/constans-value";
|
||||
import { GStyles } from "@/styles/global-styles";
|
||||
import {
|
||||
ImageBackground,
|
||||
Keyboard,
|
||||
KeyboardAvoidingView,
|
||||
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";
|
||||
|
||||
// --- Base Props ---
|
||||
interface BaseProps {
|
||||
withBackground?: boolean;
|
||||
headerComponent?: React.ReactNode;
|
||||
footerComponent?: React.ReactNode;
|
||||
floatingButton?: React.ReactNode;
|
||||
hideFooter?: boolean;
|
||||
edgesFooter?: NativeSafeAreaViewProps["edges"];
|
||||
style?: StyleProp<ViewStyle>;
|
||||
refreshControl?: ScrollViewProps["refreshControl"];
|
||||
}
|
||||
|
||||
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 iOSWrapperProps = StaticModeProps | ListModeProps;
|
||||
|
||||
const iOSWrapper = (props: iOSWrapperProps) => {
|
||||
const {
|
||||
withBackground = false,
|
||||
headerComponent,
|
||||
footerComponent,
|
||||
floatingButton,
|
||||
hideFooter = false,
|
||||
edgesFooter = [],
|
||||
style,
|
||||
refreshControl,
|
||||
} = props;
|
||||
|
||||
const assetBackground = require("../../assets/images/main-background.png");
|
||||
|
||||
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="padding"
|
||||
style={{ flex: 1, backgroundColor: MainColor.darkblue }}
|
||||
>
|
||||
{headerComponent && (
|
||||
<View style={GStyles.stickyHeader}>{headerComponent}</View>
|
||||
)}
|
||||
<View style={[GStyles.container, style, { flex: 1 }]}>
|
||||
<FlatList
|
||||
data={listProps.listData}
|
||||
renderItem={listProps.renderItem}
|
||||
keyExtractor={
|
||||
listProps.keyExtractor ||
|
||||
((item, index) => {
|
||||
if (item.id == null) {
|
||||
console.warn("Item tanpa 'id':", item);
|
||||
return `fallback-${index}-${JSON.stringify(item)}`;
|
||||
}
|
||||
|
||||
return `${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
|
||||
}}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Footer - tetap di bawah dengan position absolute */}
|
||||
{footerComponent && !hideFooter && (
|
||||
<View style={styles.footerContainer}>
|
||||
<SafeAreaView
|
||||
edges={edgesFooter}
|
||||
style={{ backgroundColor: MainColor.darkblue }}
|
||||
>
|
||||
{footerComponent}
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{!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="padding"
|
||||
style={{ flex: 1, backgroundColor: MainColor.darkblue }}
|
||||
>
|
||||
{headerComponent && (
|
||||
<View style={GStyles.stickyHeader}>{headerComponent}</View>
|
||||
)}
|
||||
|
||||
<View style={{ flex: 1 }}>
|
||||
<ScrollView
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
paddingBottom: footerComponent && !hideFooter ? OS_HEIGHT : 0
|
||||
}}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
refreshControl={refreshControl}
|
||||
>
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
{renderContainer(staticProps.children)}
|
||||
</TouchableWithoutFeedback>
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* Footer - tetap di bawah dengan position absolute */}
|
||||
{footerComponent && !hideFooter && (
|
||||
<View style={styles.footerContainer}>
|
||||
<SafeAreaView
|
||||
edges={edgesFooter}
|
||||
style={{ backgroundColor: MainColor.darkblue }}
|
||||
>
|
||||
{footerComponent}
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{!footerComponent && !hideFooter && (
|
||||
<SafeAreaView
|
||||
edges={["bottom"]}
|
||||
style={{ backgroundColor: MainColor.darkblue }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{floatingButton && (
|
||||
<View style={GStyles.floatingContainer}>{floatingButton}</View>
|
||||
)}
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
};
|
||||
|
||||
// Styles untuk footer dengan position absolute
|
||||
const styles = {
|
||||
footerContainer: {
|
||||
position: "absolute" as const,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: MainColor.darkblue,
|
||||
},
|
||||
};
|
||||
|
||||
export default iOSWrapper;
|
||||
@@ -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
|
||||
|
||||
231
components/_ShareComponent/NewWrapper_V2.tsx
Normal file
231
components/_ShareComponent/NewWrapper_V2.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
// 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;
|
||||
/**
|
||||
* Padding untuk content container (default: 16)
|
||||
* Set to 0 untuk tidak ada padding, atau custom value sesuai kebutuhan
|
||||
*/
|
||||
contentPadding?: 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
|
||||
contentPadding = 16, // Default 16 untuk padding konsisten
|
||||
} = 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,
|
||||
padding: contentPadding,
|
||||
}}
|
||||
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,
|
||||
padding: contentPadding,
|
||||
}}
|
||||
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>
|
||||
);
|
||||
}
|
||||
154
components/_ShareComponent/OS_Wrapper.tsx
Normal file
154
components/_ShareComponent/OS_Wrapper.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
// @/components/OS_Wrapper.tsx
|
||||
// OS-Specific Wrapper - Automatically routes to iOSWrapper or AndroidWrapper
|
||||
// iOS: Uses NewWrapper (stable for iOS)
|
||||
// Android: Uses NewWrapper_V2 (with keyboard handling)
|
||||
|
||||
import { Platform } from "react-native";
|
||||
import type { ScrollViewProps, FlatListProps } from "react-native";
|
||||
import {
|
||||
NativeSafeAreaViewProps,
|
||||
} from "react-native-safe-area-context";
|
||||
import type { StyleProp, ViewStyle } from "react-native";
|
||||
import IOSWrapper from "./IOSWrapper";
|
||||
import AndroidWrapper from "./AndroidWrapper";
|
||||
|
||||
// ========== Base Props ==========
|
||||
interface BaseProps {
|
||||
withBackground?: boolean;
|
||||
headerComponent?: React.ReactNode;
|
||||
footerComponent?: React.ReactNode;
|
||||
floatingButton?: React.ReactNode;
|
||||
hideFooter?: boolean;
|
||||
edgesFooter?: NativeSafeAreaViewProps["edges"];
|
||||
style?: StyleProp<ViewStyle>;
|
||||
refreshControl?: ScrollViewProps["refreshControl"];
|
||||
}
|
||||
|
||||
// ========== Static Mode Props ==========
|
||||
interface StaticModeProps extends BaseProps {
|
||||
children: React.ReactNode;
|
||||
listData?: never;
|
||||
renderItem?: never;
|
||||
}
|
||||
|
||||
// ========== List Mode Props ==========
|
||||
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"];
|
||||
}
|
||||
|
||||
// ========== Keyboard Handling Props (Android only) ==========
|
||||
interface KeyboardHandlingProps {
|
||||
/**
|
||||
* Enable keyboard handling with auto-scroll (Android only)
|
||||
* iOS ignores this prop
|
||||
* @default false
|
||||
*/
|
||||
enableKeyboardHandling?: boolean;
|
||||
|
||||
/**
|
||||
* Scroll offset when keyboard appears (Android only)
|
||||
* iOS ignores this prop
|
||||
* @default 100
|
||||
*/
|
||||
keyboardScrollOffset?: number;
|
||||
|
||||
/**
|
||||
* Extra padding bottom for content (Android only)
|
||||
* iOS ignores this prop
|
||||
* @default 80
|
||||
*/
|
||||
contentPaddingBottom?: number;
|
||||
|
||||
/**
|
||||
* Padding untuk content container (Android only)
|
||||
* iOS ignores this prop
|
||||
* @default 16
|
||||
*/
|
||||
contentPadding?: number;
|
||||
}
|
||||
|
||||
// ========== Final Props Types ==========
|
||||
type OS_WrapperStaticProps = StaticModeProps & KeyboardHandlingProps;
|
||||
type OS_WrapperListProps = ListModeProps & KeyboardHandlingProps;
|
||||
|
||||
type OS_WrapperProps = OS_WrapperStaticProps | OS_WrapperListProps;
|
||||
|
||||
/**
|
||||
* OS_Wrapper - Automatically selects iOSWrapper or AndroidWrapper based on platform
|
||||
*
|
||||
* Features:
|
||||
* - Auto platform detection
|
||||
* - Optional keyboard handling for Android forms
|
||||
* - Unified API for all use cases
|
||||
*
|
||||
* @example Static Mode (Simple Content)
|
||||
* ```tsx
|
||||
* <OS_Wrapper>
|
||||
* <YourContent />
|
||||
* </OS_Wrapper>
|
||||
* ```
|
||||
*
|
||||
* @example List Mode (with pagination)
|
||||
* ```tsx
|
||||
* <OS_Wrapper
|
||||
* listData={data}
|
||||
* renderItem={({ item }) => <ItemCard item={item} />}
|
||||
* ListEmptyComponent={<EmptyState />}
|
||||
* onEndReached={loadMore}
|
||||
* />
|
||||
* ```
|
||||
*
|
||||
* @example Form Mode (with keyboard handling - Android only)
|
||||
* ```tsx
|
||||
* <OS_Wrapper
|
||||
* enableKeyboardHandling
|
||||
* keyboardScrollOffset={150}
|
||||
* contentPaddingBottom={100}
|
||||
* footerComponent={<SubmitButton />}
|
||||
* >
|
||||
* <FormContent />
|
||||
* </OS_Wrapper>
|
||||
* ```
|
||||
*/
|
||||
export function OS_Wrapper(props: OS_WrapperProps) {
|
||||
const {
|
||||
enableKeyboardHandling = false,
|
||||
keyboardScrollOffset = 100,
|
||||
contentPaddingBottom = 100,
|
||||
contentPadding = 0,
|
||||
...wrapperProps
|
||||
} = props;
|
||||
|
||||
// iOS uses IOSWrapper (based on NewWrapper)
|
||||
if (Platform.OS === "ios") {
|
||||
// Keyboard handling props are ignored on iOS
|
||||
return <IOSWrapper {...(wrapperProps as any)} />;
|
||||
}
|
||||
|
||||
// Android uses AndroidWrapper (with keyboard handling support)
|
||||
return (
|
||||
<AndroidWrapper
|
||||
{...(wrapperProps as any)}
|
||||
enableKeyboardHandling={enableKeyboardHandling}
|
||||
keyboardScrollOffset={keyboardScrollOffset}
|
||||
contentPaddingBottom={contentPaddingBottom}
|
||||
contentPadding={contentPadding}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Re-export individual wrappers for direct usage if needed
|
||||
export { default as IOSWrapper } from "./IOSWrapper";
|
||||
export { default as AndroidWrapper } from "./AndroidWrapper";
|
||||
|
||||
// Legacy export untuk backward compatibility
|
||||
export { IOSWrapper as iOSWrapper };
|
||||
|
||||
export default OS_Wrapper;
|
||||
@@ -63,6 +63,11 @@ import DummyLandscapeImage from "./_ShareComponent/DummyLandscapeImage";
|
||||
import GridComponentView from "./_ShareComponent/GridSectionView";
|
||||
import NewWrapper from "./_ShareComponent/NewWrapper";
|
||||
import BasicWrapper from "./_ShareComponent/BasicWrapper";
|
||||
import { FormWrapper } from "./_ShareComponent/FormWrapper";
|
||||
import { NewWrapper_V2 } from "./_ShareComponent/NewWrapper_V2";
|
||||
// OS-Specific Wrappers
|
||||
import OS_Wrapper, { IOSWrapper, AndroidWrapper } from "./_ShareComponent/OS_Wrapper";
|
||||
|
||||
// Progress
|
||||
import ProgressCustom from "./Progress/ProgressCustom";
|
||||
// Loader
|
||||
@@ -127,6 +132,12 @@ export {
|
||||
Spacing,
|
||||
NewWrapper,
|
||||
BasicWrapper,
|
||||
FormWrapper,
|
||||
NewWrapper_V2,
|
||||
// OS-Specific Wrappers
|
||||
OS_Wrapper,
|
||||
IOSWrapper,
|
||||
AndroidWrapper,
|
||||
// Stack
|
||||
StackCustom,
|
||||
TabBarBackground,
|
||||
|
||||
@@ -4,6 +4,10 @@ export {
|
||||
OS_ANDROID_HEIGHT,
|
||||
OS_IOS_HEIGHT,
|
||||
OS_HEIGHT,
|
||||
OS_ANDROID_PADDING_TOP,
|
||||
OS_IOS_PADDING_TOP,
|
||||
OS_PADDING_TOP,
|
||||
PADDING_INLINE,
|
||||
TEXT_SIZE_SMALL,
|
||||
TEXT_SIZE_MEDIUM,
|
||||
TEXT_SIZE_LARGE,
|
||||
@@ -23,10 +27,15 @@ export {
|
||||
};
|
||||
|
||||
// OS Height
|
||||
const OS_ANDROID_HEIGHT = 70
|
||||
const OS_ANDROID_HEIGHT = 60
|
||||
const OS_IOS_HEIGHT = 80
|
||||
const OS_HEIGHT = Platform.OS === "ios" ? OS_IOS_HEIGHT : OS_ANDROID_HEIGHT
|
||||
|
||||
// OS Padding Top
|
||||
const OS_ANDROID_PADDING_TOP = 6
|
||||
const OS_IOS_PADDING_TOP = 12
|
||||
const OS_PADDING_TOP = Platform.OS === "ios" ? OS_IOS_PADDING_TOP : OS_ANDROID_PADDING_TOP
|
||||
|
||||
// Text Size
|
||||
const TEXT_SIZE_SMALL = 12;
|
||||
const TEXT_SIZE_MEDIUM = 14;
|
||||
@@ -47,6 +56,7 @@ const DRAWER_HEIGHT = 500; // tinggi drawer5
|
||||
const RADIUS_BUTTON = 50
|
||||
|
||||
// Padding
|
||||
const PADDING_INLINE = 16
|
||||
const PADDING_EXTRA_SMALL = 10
|
||||
const PADDING_SMALL = 12
|
||||
const PADDING_MEDIUM = 16
|
||||
|
||||
148
docs/KEYBOARD-BUG-TEST.md
Normal file
148
docs/KEYBOARD-BUG-TEST.md
Normal file
@@ -0,0 +1,148 @@
|
||||
# Keyboard Bug Investigation
|
||||
|
||||
## 🐛 Problem
|
||||
|
||||
Footer terangkat dan muncul area putih di bawah saat keyboard ditutup setelah input ke TextInput.
|
||||
|
||||
## 📋 Test Cases
|
||||
|
||||
### Test 1: Minimal Wrapper
|
||||
**File**: `test-keyboard-bug.tsx`
|
||||
|
||||
Wrapper yang sangat sederhana:
|
||||
```typescript
|
||||
<KeyboardAvoidingView behavior="height">
|
||||
<ScrollView>
|
||||
<TextInput />
|
||||
</ScrollView>
|
||||
<SafeAreaView>Footer</SafeAreaView>
|
||||
</KeyboardAvoidingView>
|
||||
```
|
||||
|
||||
**Expected**: Footer tetap di bawah
|
||||
**Actual**: ? (To be tested)
|
||||
|
||||
### Test 2: Original NewWrapper
|
||||
**File**: `components/_ShareComponent/NewWrapper.tsx`
|
||||
|
||||
Wrapper yang digunakan di production:
|
||||
```typescript
|
||||
<KeyboardAvoidingView behavior="height">
|
||||
<View flex={0}>
|
||||
<ScrollView>
|
||||
{content}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<View position="absolute">Footer</View>
|
||||
</KeyboardAvoidingView>
|
||||
```
|
||||
|
||||
**Expected**: Footer tetap di bawah
|
||||
**Actual**: Footer terangkat, ada putih di bawah
|
||||
|
||||
## 🔍 Possible Causes
|
||||
|
||||
### 1. KeyboardAvoidingView Behavior
|
||||
- **Android**: `behavior="height"` mengurangi height view saat keyboard muncul
|
||||
- **Issue**: Saat keyboard close, height tidak kembali ke semula
|
||||
|
||||
### 2. View Wrapper dengan flex: 0
|
||||
- NewWrapper menggunakan `<View style={{ flex: 0 }}>`
|
||||
- Ini membuat ScrollView tidak expand dengan benar
|
||||
- **Fix**: Coba `<View style={{ flex: 1 }}>`
|
||||
|
||||
### 3. Footer dengan position: absolute
|
||||
- Footer "melayang" di atas konten
|
||||
- Tidak ikut terdorong saat keyboard muncul
|
||||
- Saat keyboard close, footer kembali tapi layout sudah berubah
|
||||
|
||||
### 4. SafeAreaView Insets
|
||||
- Safe area insets berubah saat keyboard muncul
|
||||
- Footer tidak handle insets dengan benar
|
||||
|
||||
## 🧪 Test Scenarios
|
||||
|
||||
1. **Test Input Focus**
|
||||
- [ ] Tap Input 1 → Keyboard muncul
|
||||
- [ ] Footer tetap di bawah?
|
||||
|
||||
2. **Test Input Blur**
|
||||
- [ ] Tap Input 1 → Keyboard muncul
|
||||
- [ ] Tap outside → Keyboard close
|
||||
- [ ] Footer kembali ke posisi?
|
||||
- [ ] Ada putih di bawah?
|
||||
|
||||
3. **Test Multiple Inputs**
|
||||
- [ ] Tap Input 1 → Input 2 → Input 3
|
||||
- [ ] Keyboard pindah dengan smooth
|
||||
- [ ] Footer tetap di bawah?
|
||||
|
||||
4. **Test Scroll After Close**
|
||||
- [ ] Input → Close keyboard
|
||||
- [ ] Scroll ke bawah
|
||||
- [ ] Footer terlihat?
|
||||
- [ ] Ada putih di bawah?
|
||||
|
||||
## 🔧 Potential Fixes
|
||||
|
||||
### Fix 1: Remove position: absolute
|
||||
```typescript
|
||||
// Before
|
||||
<View style={{ position: "absolute", bottom: 0 }}>
|
||||
{footer}
|
||||
</View>
|
||||
|
||||
// After
|
||||
<SafeAreaView>
|
||||
{footer}
|
||||
</SafeAreaView>
|
||||
```
|
||||
|
||||
### Fix 2: Use flex: 1 instead of flex: 0
|
||||
```typescript
|
||||
// Before
|
||||
<View style={{ flex: 0 }}>
|
||||
<ScrollView />
|
||||
</View>
|
||||
|
||||
// After
|
||||
<View style={{ flex: 1 }}>
|
||||
<ScrollView />
|
||||
</View>
|
||||
```
|
||||
|
||||
### Fix 3: Use KeyboardAwareScrollView
|
||||
```typescript
|
||||
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
|
||||
|
||||
<KeyboardAwareScrollView>
|
||||
{content}
|
||||
</KeyboardAwareScrollView>
|
||||
```
|
||||
|
||||
### Fix 4: Manual keyboard handling
|
||||
```typescript
|
||||
const [keyboardVisible, setKeyboardVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const show = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
|
||||
const hide = Keyboard.addListener('keyboardDidHide', () => setKeyboardVisible(false));
|
||||
return () => { show.remove(); hide.remove(); }
|
||||
}, []);
|
||||
```
|
||||
|
||||
## 📝 Test Results
|
||||
|
||||
| Test | Platform | Result | Notes |
|
||||
|------|----------|--------|-------|
|
||||
| Test 1 (Minimal) | Android | ? | TBD |
|
||||
| Test 1 (Minimal) | iOS | ? | TBD |
|
||||
| Test 2 (Original) | Android | ❌ Bug | Footer terangkat |
|
||||
| Test 2 (Original) | iOS | ? | TBD |
|
||||
|
||||
## 🎯 Next Steps
|
||||
|
||||
1. Test dengan `TestWrapper` (minimal wrapper)
|
||||
2. Identifikasi apakah bug dari wrapper atau React Native
|
||||
3. Apply fix yang sesuai
|
||||
4. Test di semua screen
|
||||
346
docs/NEWWRAPPER-KEYBOARD-IMPLEMENTATION.md
Normal file
346
docs/NEWWRAPPER-KEYBOARD-IMPLEMENTATION.md
Normal file
@@ -0,0 +1,346 @@
|
||||
# NewWrapper Keyboard Handling Implementation
|
||||
|
||||
## 📋 Problem Statement
|
||||
|
||||
NewWrapper saat ini memiliki masalah keyboard handling pada Android:
|
||||
- Footer terangkat saat keyboard close
|
||||
- Muncul area putih di bawah
|
||||
- Input terpotong saat keyboard muncul
|
||||
- Tidak ada auto-scroll ke focused input
|
||||
|
||||
## 🔍 Root Cause Analysis
|
||||
|
||||
### Current NewWrapper Structure
|
||||
|
||||
```typescript
|
||||
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
|
||||
<View style={{ flex: 0 }}> // ← MASALAH 1: flex: 0
|
||||
<ScrollView>
|
||||
{children}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<View style={{ position: "absolute" }}> // ← MASALAH 2: position absolute
|
||||
{footerComponent}
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
```
|
||||
|
||||
### Issues Identified
|
||||
|
||||
| Issue | Impact | Severity |
|
||||
|-------|--------|----------|
|
||||
| `behavior="height"` di Android | View di-resize, content terpotong | 🔴 High |
|
||||
| `flex: 0` pada View wrapper | ScrollView tidak expand dengan benar | 🔴 High |
|
||||
| Footer dengan `position: absolute` | Footer tidak ikut layout flow | 🟡 Medium |
|
||||
| Tidak ada keyboard event handling | Tidak ada auto-scroll ke input | 🟡 Medium |
|
||||
|
||||
---
|
||||
|
||||
## 💡 Proposed Solutions
|
||||
|
||||
### Option A: Full Integration (Breaking Changes)
|
||||
|
||||
Replace entire KeyboardAvoidingView logic dengan keyboard handling baru.
|
||||
|
||||
```typescript
|
||||
// NewWrapper.tsx
|
||||
export function NewWrapper({ children, footerComponent }: Props) {
|
||||
const { scrollViewRef, createFocusHandler } = useKeyboardForm();
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined}>
|
||||
<ScrollView ref={scrollViewRef} style={{ flex: 1 }}>
|
||||
{children}
|
||||
</ScrollView>
|
||||
<SafeAreaView style={{ position: 'absolute', bottom: 0 }}>
|
||||
{footerComponent}
|
||||
</SafeAreaView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
- ✅ Clean implementation
|
||||
- ✅ Consistent behavior across all screens
|
||||
- ✅ Single source of truth
|
||||
|
||||
**Cons:**
|
||||
- ❌ **Breaking changes** - Semua screen yang pakai NewWrapper akan affected
|
||||
- ❌ **Need to add onFocus handlers** to all TextInput/TextArea components
|
||||
- ❌ **High risk** - May break existing screens
|
||||
- ❌ **Requires testing** all screens that use NewWrapper
|
||||
|
||||
**Impact:**
|
||||
- All existing screens using NewWrapper will be affected
|
||||
- Need to add `onFocus` handlers to all inputs
|
||||
- Need to wrap inputs with `View onStartShouldSetResponder`
|
||||
|
||||
---
|
||||
|
||||
### Option B: Opt-in Feature (Recommended) ⭐
|
||||
|
||||
Add flag to enable keyboard handling optionally (backward compatible).
|
||||
|
||||
```typescript
|
||||
// NewWrapper.tsx
|
||||
interface NewWrapperProps {
|
||||
// ... existing props
|
||||
enableKeyboardHandling?: boolean; // Default: false
|
||||
keyboardScrollOffset?: number; // Default: 100
|
||||
}
|
||||
|
||||
export function NewWrapper(props: NewWrapperProps) {
|
||||
const {
|
||||
enableKeyboardHandling = false,
|
||||
keyboardScrollOffset = 100,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
// Use keyboard hook if enabled
|
||||
const keyboardForm = enableKeyboardHandling
|
||||
? useKeyboardForm(keyboardScrollOffset)
|
||||
: null;
|
||||
|
||||
// Render different structure based on flag
|
||||
if (enableKeyboardHandling && keyboardForm) {
|
||||
return renderWithKeyboardHandling(rest, keyboardForm);
|
||||
}
|
||||
|
||||
return renderOriginal(rest);
|
||||
}
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
- ✅ **Backward compatible** - No breaking changes
|
||||
- ✅ **Opt-in** - Screens yang butuh bisa enable
|
||||
- ✅ **Safe** - Existing screens tetap bekerja
|
||||
- ✅ **Gradual migration** - Bisa migrate screen by screen
|
||||
- ✅ **Low risk** - Can test with new screens first
|
||||
|
||||
**Cons:**
|
||||
- ⚠️ More code (duplicate logic)
|
||||
- ⚠️ Need to maintain 2 implementations temporarily
|
||||
|
||||
**Usage Example:**
|
||||
|
||||
```typescript
|
||||
// Existing screens - No changes needed!
|
||||
<NewWrapper footerComponent={<Footer />}>
|
||||
<Content />
|
||||
</NewWrapper>
|
||||
|
||||
// New screens with forms - Enable keyboard handling
|
||||
<NewWrapper
|
||||
enableKeyboardHandling
|
||||
keyboardScrollOffset={100}
|
||||
footerComponent={<Footer />}
|
||||
>
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextInputCustom onFocus={keyboardForm.createFocusHandler()} />
|
||||
</View>
|
||||
</NewWrapper>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Option C: Create New Component (Safest)
|
||||
|
||||
Keep NewWrapper as is, create separate component for forms.
|
||||
|
||||
```typescript
|
||||
// Keep NewWrapper unchanged
|
||||
// Use FormWrapper for forms (already created!)
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
- ✅ **Zero risk** - NewWrapper tidak berubah
|
||||
- ✅ **Clear separation** - Old vs New
|
||||
- ✅ **Safe for existing screens**
|
||||
- ✅ **FormWrapper already exists!**
|
||||
|
||||
**Cons:**
|
||||
- ⚠️ Multiple wrapper components
|
||||
- ⚠️ Confusion which one to use
|
||||
|
||||
**Usage:**
|
||||
```typescript
|
||||
// For regular screens
|
||||
<NewWrapper>{content}</NewWrapper>
|
||||
|
||||
// For form screens
|
||||
<FormWrapper footerComponent={<Footer />}>
|
||||
<TextInputCustom />
|
||||
</FormWrapper>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Comparison Matrix
|
||||
|
||||
| Criteria | Option A | Option B | Option C |
|
||||
|----------|----------|----------|----------|
|
||||
| **Backward Compatible** | ❌ | ✅ | ✅ |
|
||||
| **Implementation Effort** | High | Medium | Low |
|
||||
| **Risk Level** | 🔴 High | 🟡 Medium | 🟢 Low |
|
||||
| **Code Duplication** | None | Temporary | Permanent |
|
||||
| **Migration Required** | Yes | Gradual | No |
|
||||
| **Testing Required** | All screens | New screens only | New screens only |
|
||||
| **Recommended For** | Greenfield projects | Existing projects | Conservative teams |
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Recommended Approach: Option B (Opt-in)
|
||||
|
||||
### Implementation Plan
|
||||
|
||||
#### Phase 1: Add Keyboard Handling to NewWrapper (Week 1)
|
||||
|
||||
```typescript
|
||||
// Add to NewWrapper interface
|
||||
interface NewWrapperProps {
|
||||
enableKeyboardHandling?: boolean;
|
||||
keyboardScrollOffset?: number;
|
||||
}
|
||||
|
||||
// Implement dual rendering logic
|
||||
if (enableKeyboardHandling) {
|
||||
return renderWithKeyboardHandling(props);
|
||||
}
|
||||
return renderOriginal(props);
|
||||
```
|
||||
|
||||
#### Phase 2: Test with New Screens (Week 2)
|
||||
|
||||
- Test with Job Create 2 screen
|
||||
- Verify auto-scroll works
|
||||
- Verify footer stays in place
|
||||
- Test on iOS and Android
|
||||
|
||||
#### Phase 3: Gradual Migration (Week 3-4)
|
||||
|
||||
Migrate screens one by one:
|
||||
1. Event Create
|
||||
2. Donation Create
|
||||
3. Investment Create
|
||||
4. Voting Create
|
||||
5. Profile Create/Edit
|
||||
|
||||
#### Phase 4: Make Default (Next Major Version)
|
||||
|
||||
After thorough testing:
|
||||
- Make `enableKeyboardHandling` default to `true`
|
||||
- Deprecate old behavior
|
||||
- Remove old code in next major version
|
||||
|
||||
---
|
||||
|
||||
## 📝 Technical Requirements
|
||||
|
||||
### For NewWrapper with Keyboard Handling
|
||||
|
||||
```typescript
|
||||
// 1. Import hook
|
||||
import { useKeyboardForm } from "@/hooks/useKeyboardForm";
|
||||
|
||||
// 2. Use hook in component
|
||||
const { scrollViewRef, createFocusHandler } = useKeyboardForm(100);
|
||||
|
||||
// 3. Pass ref to ScrollView
|
||||
<ScrollView ref={scrollViewRef}>
|
||||
|
||||
// 4. Wrap inputs with View
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextInputCustom onFocus={createFocusHandler()} />
|
||||
</View>
|
||||
```
|
||||
|
||||
### Required Changes per Screen
|
||||
|
||||
For each screen that enables keyboard handling:
|
||||
|
||||
1. **Add `enableKeyboardHandling` prop**
|
||||
2. **Wrap all TextInput/TextArea with View**
|
||||
3. **Add `onFocus` handler to inputs**
|
||||
4. **Test thoroughly**
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Checklist
|
||||
|
||||
### For Each Screen
|
||||
|
||||
- [ ] Tap Input 1 → Auto-scroll to input
|
||||
- [ ] Tap Input 2 → Auto-scroll to input
|
||||
- [ ] Tap Input 3 → Auto-scroll to input
|
||||
- [ ] Dismiss keyboard → Footer returns to position
|
||||
- [ ] No white area at bottom
|
||||
- [ ] Footer not raised
|
||||
- [ ] Smooth transitions
|
||||
- [ ] iOS compatibility
|
||||
- [ ] Android compatibility
|
||||
|
||||
### Platforms to Test
|
||||
|
||||
- [ ] Android with navigation buttons
|
||||
- [ ] Android with gesture navigation
|
||||
- [ ] iOS with home button
|
||||
- [ ] iOS with gesture (notch)
|
||||
- [ ] Various screen sizes
|
||||
|
||||
---
|
||||
|
||||
## 📋 Decision Factors
|
||||
|
||||
### Choose Option A if:
|
||||
- ✅ Project is new (few existing screens)
|
||||
- ✅ Team has time for full migration
|
||||
- ✅ Want clean codebase immediately
|
||||
- ✅ Accept short-term disruption
|
||||
|
||||
### Choose Option B if: ⭐
|
||||
- ✅ Existing project with many screens
|
||||
- ✅ Want zero disruption to users
|
||||
- ✅ Prefer gradual migration
|
||||
- ✅ Want to test thoroughly first
|
||||
|
||||
### Choose Option C if:
|
||||
- ✅ Very conservative team
|
||||
- ✅ Cannot risk any changes to existing screens
|
||||
- ✅ OK with multiple wrapper components
|
||||
- ✅ FormWrapper is sufficient
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Next Steps
|
||||
|
||||
1. **Review this document** with team
|
||||
2. **Decide on approach** (A, B, or C)
|
||||
3. **Create implementation ticket**
|
||||
4. **Start with Phase 1**
|
||||
5. **Test thoroughly**
|
||||
6. **Roll out gradually**
|
||||
|
||||
---
|
||||
|
||||
## 📚 Related Files
|
||||
|
||||
- `components/_ShareComponent/NewWrapper.tsx` - Current wrapper
|
||||
- `components/_ShareComponent/FormWrapper.tsx` - New form wrapper
|
||||
- `hooks/useKeyboardForm.ts` - Keyboard handling hook
|
||||
- `screens/Job/ScreenJobCreate2.tsx` - Example implementation
|
||||
|
||||
---
|
||||
|
||||
## 📞 Discussion Points
|
||||
|
||||
1. **Which option do you prefer?** (A, B, or C)
|
||||
2. **How many screens use NewWrapper?**
|
||||
3. **Team capacity for migration?**
|
||||
4. **Timeline for implementation?**
|
||||
5. **Risk tolerance level?**
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** 2026-04-01
|
||||
**Status:** 📝 Under Discussion
|
||||
158
docs/OS-Wrapper-Quick-Reference.md
Normal file
158
docs/OS-Wrapper-Quick-Reference.md
Normal file
@@ -0,0 +1,158 @@
|
||||
# OS_Wrapper Quick Reference
|
||||
|
||||
## 📦 Import
|
||||
```tsx
|
||||
import { OS_Wrapper, IOSWrapper, AndroidWrapper } from "@/components";
|
||||
```
|
||||
|
||||
## 🎯 Usage Examples
|
||||
|
||||
### 1. OS_Wrapper - List Mode (Most Common)
|
||||
```tsx
|
||||
<OS_Wrapper
|
||||
listData={data}
|
||||
renderItem={({ item }) => <Card item={item} />}
|
||||
ListEmptyComponent={<EmptyState />}
|
||||
ListFooterComponent={<LoadingFooter />}
|
||||
onEndReached={loadMore}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
```
|
||||
|
||||
### 2. OS_Wrapper - Static Mode
|
||||
```tsx
|
||||
<OS_Wrapper
|
||||
headerComponent={<HeaderSection />}
|
||||
footerComponent={<FooterSection />}
|
||||
withBackground={true}
|
||||
>
|
||||
<YourContent />
|
||||
</OS_Wrapper>
|
||||
```
|
||||
|
||||
### 3. OS_Wrapper - Form dengan Keyboard Handling
|
||||
```tsx
|
||||
<OS_Wrapper
|
||||
enableKeyboardHandling
|
||||
keyboardScrollOffset={150}
|
||||
contentPaddingBottom={100}
|
||||
footerComponent={
|
||||
<BoxButtonOnFooter>
|
||||
<ButtonCustom isLoading={loading} onPress={handleSubmit}>
|
||||
Submit
|
||||
</ButtonCustom>
|
||||
</BoxButtonOnFooter>
|
||||
}
|
||||
>
|
||||
<ScrollView>
|
||||
<TextInputCustom />
|
||||
<TextInputCustom />
|
||||
</ScrollView>
|
||||
</OS_Wrapper>
|
||||
```
|
||||
|
||||
### 4. Platform-Specific (Rare Cases)
|
||||
```tsx
|
||||
// iOS only
|
||||
<IOSWrapper>
|
||||
<Content />
|
||||
</IOSWrapper>
|
||||
|
||||
// Android only
|
||||
<AndroidWrapper enableKeyboardHandling>
|
||||
<Content />
|
||||
</AndroidWrapper>
|
||||
```
|
||||
|
||||
## 📋 Props Reference
|
||||
|
||||
### Common Props (iOS + Android)
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `withBackground` | boolean | false | Show background image |
|
||||
| `headerComponent` | ReactNode | - | Sticky header component |
|
||||
| `footerComponent` | ReactNode | - | Fixed footer component |
|
||||
| `floatingButton` | ReactNode | - | Floating button |
|
||||
| `hideFooter` | boolean | false | Hide footer section |
|
||||
| `edgesFooter` | Edge[] | [] | Safe area edges |
|
||||
| `style` | ViewStyle | - | Custom container style |
|
||||
| `refreshControl` | RefreshControl | - | Pull to refresh control |
|
||||
|
||||
### Android-Only Props (Ignored on iOS)
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `enableKeyboardHandling` | boolean | false | Auto-scroll on input focus |
|
||||
| `keyboardScrollOffset` | number | 100 | Scroll offset when keyboard appears |
|
||||
| `contentPaddingBottom` | number | 80 | Extra bottom padding |
|
||||
| `contentPadding` | number | 16 | Content padding (all sides) |
|
||||
|
||||
## 🔄 Migration Pattern
|
||||
|
||||
```diff
|
||||
- import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
||||
+ import { OS_Wrapper } from "@/components";
|
||||
|
||||
- <NewWrapper
|
||||
+ <OS_Wrapper
|
||||
listData={data}
|
||||
renderItem={renderItem}
|
||||
{...otherProps}
|
||||
/>
|
||||
```
|
||||
|
||||
```diff
|
||||
- import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";
|
||||
+ import { OS_Wrapper } from "@/components";
|
||||
|
||||
- <NewWrapper_V2 enableKeyboardHandling>
|
||||
+ <OS_Wrapper enableKeyboardHandling>
|
||||
<FormContent />
|
||||
</NewWrapper_V2>
|
||||
```
|
||||
|
||||
## 💡 Tips
|
||||
|
||||
1. **Pakai OS_Wrapper** untuk semua screen (list, detail, form)
|
||||
2. **Tambahkan `enableKeyboardHandling`** untuk form dengan input fields
|
||||
3. **Jangan mix** wrapper lama dan baru di screen yang sama
|
||||
4. **Test di kedua platform** sebelum commit
|
||||
5. **Keyboard handling** hanya bekerja di Android (iOS mengabaikan props ini)
|
||||
|
||||
## ⚠️ Common Mistakes
|
||||
|
||||
### ❌ Wrong
|
||||
```tsx
|
||||
// Jangan import langsung dari file
|
||||
import OS_Wrapper from "@/components/_ShareComponent/OS_Wrapper";
|
||||
|
||||
// Jangan mix wrapper
|
||||
<OS_Wrapper>
|
||||
<NewWrapper>{content}</NewWrapper>
|
||||
</OS_Wrapper>
|
||||
|
||||
// Jangan pakai PageWrapper (sudah tidak ada)
|
||||
import { PageWrapper } from "@/components";
|
||||
```
|
||||
|
||||
### ✅ Correct
|
||||
```tsx
|
||||
// Import dari @/components
|
||||
import { OS_Wrapper } from "@/components";
|
||||
|
||||
// Simple content
|
||||
<OS_Wrapper>{content}</OS_Wrapper>
|
||||
|
||||
// Form with keyboard handling
|
||||
<OS_Wrapper enableKeyboardHandling keyboardScrollOffset={150}>
|
||||
<FormContent />
|
||||
</OS_Wrapper>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Last updated: 2026-04-06
|
||||
71
hooks/useKeyboardForm.ts
Normal file
71
hooks/useKeyboardForm.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
// useKeyboardForm.ts - Hook untuk keyboard handling pada form
|
||||
import { Keyboard, ScrollView, Dimensions } from "react-native";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import React from "react";
|
||||
|
||||
export function useKeyboardForm(scrollOffset = 100) {
|
||||
const scrollViewRef = useRef<ScrollView>(null);
|
||||
const [keyboardHeight, setKeyboardHeight] = useState(0);
|
||||
const currentScrollY = useRef(0);
|
||||
|
||||
// Listen to keyboard events
|
||||
useEffect(() => {
|
||||
const keyboardDidShowListener = Keyboard.addListener(
|
||||
'keyboardDidShow',
|
||||
(e) => {
|
||||
const kbHeight = e.endCoordinates.height;
|
||||
setKeyboardHeight(kbHeight);
|
||||
|
||||
// Simple: scroll by keyboard height saat keyboard muncul
|
||||
if (scrollViewRef.current) {
|
||||
const targetY = currentScrollY.current + kbHeight - scrollOffset;
|
||||
scrollViewRef.current.scrollTo({
|
||||
y: Math.max(0, targetY),
|
||||
animated: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
const keyboardDidHideListener = Keyboard.addListener(
|
||||
'keyboardDidHide',
|
||||
() => {
|
||||
setKeyboardHeight(0);
|
||||
}
|
||||
);
|
||||
|
||||
return () => {
|
||||
keyboardDidShowListener.remove();
|
||||
keyboardDidHideListener.remove();
|
||||
};
|
||||
}, [scrollOffset]);
|
||||
|
||||
// Track scroll position
|
||||
const handleScroll = (event: any) => {
|
||||
currentScrollY.current = event.nativeEvent.contentOffset.y;
|
||||
};
|
||||
|
||||
// Dummy handlers (for API compatibility)
|
||||
const createFocusHandler = () => {
|
||||
return () => {};
|
||||
};
|
||||
|
||||
const registerInputFocus = () => {};
|
||||
|
||||
return {
|
||||
scrollViewRef,
|
||||
keyboardHeight,
|
||||
registerInputFocus,
|
||||
createFocusHandler,
|
||||
handleScroll,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Dummy helper (no-op, for API compatibility)
|
||||
*/
|
||||
export function cloneChildrenWithFocusHandler(
|
||||
children: React.ReactNode,
|
||||
_focusHandler: (inputRef: any) => void
|
||||
): React.ReactNode {
|
||||
return children;
|
||||
}
|
||||
@@ -152,6 +152,9 @@
|
||||
4A22447E41944D3A9780867B /* Remove signature files (Xcode workaround) */,
|
||||
D15DF02DDCF369B4F14B238B /* [CP] Embed Pods Frameworks */,
|
||||
3F53CC1C3B278545F11A1CAE /* [CP-User] [RNFB] Core Configuration */,
|
||||
46ED08049A384B869D77364E /* Remove signature files (Xcode workaround) */,
|
||||
92A25C61F4E34FB6A36E415B /* Remove signature files (Xcode workaround) */,
|
||||
B122FE573BBA4E8C86B8F1C3 /* Remove signature files (Xcode workaround) */,
|
||||
);
|
||||
buildRules = (
|
||||
);
|
||||
@@ -429,6 +432,57 @@
|
||||
shellPath = /bin/sh;
|
||||
shellScript = "# This script configures Expo modules and generates the modules provider file.\nbash -l -c \"./Pods/Target\\ Support\\ Files/Pods-HIPMIBadungConnect/expo-configure-project.sh\"\n";
|
||||
};
|
||||
46ED08049A384B869D77364E /* Remove signature files (Xcode workaround) */ = {
|
||||
isa = PBXShellScriptBuildPhase;
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
);
|
||||
runOnlyForDeploymentPostprocessing = 0;
|
||||
name = "Remove signature files (Xcode workaround)";
|
||||
inputPaths = (
|
||||
);
|
||||
outputPaths = (
|
||||
);
|
||||
shellPath = /bin/sh;
|
||||
shellScript = "
|
||||
echo \"Remove signature files (Xcode workaround)\";
|
||||
rm -rf \"$CONFIGURATION_BUILD_DIR/MapLibre.xcframework-ios.signature\";
|
||||
";
|
||||
};
|
||||
92A25C61F4E34FB6A36E415B /* Remove signature files (Xcode workaround) */ = {
|
||||
isa = PBXShellScriptBuildPhase;
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
);
|
||||
runOnlyForDeploymentPostprocessing = 0;
|
||||
name = "Remove signature files (Xcode workaround)";
|
||||
inputPaths = (
|
||||
);
|
||||
outputPaths = (
|
||||
);
|
||||
shellPath = /bin/sh;
|
||||
shellScript = "
|
||||
echo \"Remove signature files (Xcode workaround)\";
|
||||
rm -rf \"$CONFIGURATION_BUILD_DIR/MapLibre.xcframework-ios.signature\";
|
||||
";
|
||||
};
|
||||
B122FE573BBA4E8C86B8F1C3 /* Remove signature files (Xcode workaround) */ = {
|
||||
isa = PBXShellScriptBuildPhase;
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
);
|
||||
runOnlyForDeploymentPostprocessing = 0;
|
||||
name = "Remove signature files (Xcode workaround)";
|
||||
inputPaths = (
|
||||
);
|
||||
outputPaths = (
|
||||
);
|
||||
shellPath = /bin/sh;
|
||||
shellScript = "
|
||||
echo \"Remove signature files (Xcode workaround)\";
|
||||
rm -rf \"$CONFIGURATION_BUILD_DIR/MapLibre.xcframework-ios.signature\";
|
||||
";
|
||||
};
|
||||
/* End PBXShellScriptBuildPhase section */
|
||||
|
||||
/* Begin PBXSourcesBuildPhase section */
|
||||
@@ -471,7 +525,7 @@
|
||||
);
|
||||
OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
|
||||
PRODUCT_BUNDLE_IDENTIFIER = "com.anonymous.hipmi-mobile";
|
||||
PRODUCT_NAME = HIPMIBadungConnect;
|
||||
PRODUCT_NAME = "HIPMIBadungConnect";
|
||||
SWIFT_OBJC_BRIDGING_HEADER = "HIPMIBadungConnect/HIPMIBadungConnect-Bridging-Header.h";
|
||||
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
|
||||
SWIFT_VERSION = 5.0;
|
||||
@@ -502,7 +556,7 @@
|
||||
);
|
||||
OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
|
||||
PRODUCT_BUNDLE_IDENTIFIER = "com.anonymous.hipmi-mobile";
|
||||
PRODUCT_NAME = HIPMIBadungConnect;
|
||||
PRODUCT_NAME = "HIPMIBadungConnect";
|
||||
SWIFT_OBJC_BRIDGING_HEADER = "HIPMIBadungConnect/HIPMIBadungConnect-Bridging-Header.h";
|
||||
SWIFT_VERSION = 5.0;
|
||||
TARGETED_DEVICE_FAMILY = "1,2";
|
||||
|
||||
71
screens/Home/HomeTabs.tsx
Normal file
71
screens/Home/HomeTabs.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { ICustomTab, ITabs } from "@/components/_Interface/types";
|
||||
import { GStyles } from "@/styles/global-styles";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { router } from "expo-router";
|
||||
import React from "react";
|
||||
import { Platform, Text, TouchableOpacity, View } from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
|
||||
interface HomeTabsProps {
|
||||
tabs: ITabs[];
|
||||
}
|
||||
|
||||
const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
|
||||
<TouchableOpacity
|
||||
style={[GStyles.tabItem, isActive && GStyles.activeTab]}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View
|
||||
style={[GStyles.iconContainer, isActive && GStyles.activeIconContainer]}
|
||||
>
|
||||
<Ionicons
|
||||
name={icon as any}
|
||||
size={18}
|
||||
color={isActive ? "#fff" : "#666"}
|
||||
/>
|
||||
</View>
|
||||
<Text style={[GStyles.tabLabel, isActive && GStyles.activeTabLabel]}>
|
||||
{label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
/**
|
||||
* Home Tabs Component dengan Safe Area handling
|
||||
*
|
||||
* Component ini menggunakan pattern yang sama dengan Expo Router Tabs
|
||||
* untuk konsistensi safe area di Android
|
||||
*/
|
||||
export default function HomeTabs({ tabs }: HomeTabsProps) {
|
||||
const insets = useSafeAreaInsets();
|
||||
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||
|
||||
return (
|
||||
<View style={{ backgroundColor: MainColor.darkblue }}>
|
||||
{/* Tabs content */}
|
||||
<View style={GStyles.tabBar}>
|
||||
<View style={GStyles.tabContainer}>
|
||||
{tabs.map((e) => (
|
||||
<CustomTab
|
||||
key={e.id}
|
||||
icon={e.icon}
|
||||
label={e.label}
|
||||
isActive={e.isActive}
|
||||
onPress={() => {
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
e.disabled ? console.log("disabled") : router.push(e.path);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Safe area padding untuk Android */}
|
||||
{Platform.OS === "android" && paddingBottom > 0 && (
|
||||
<View style={{ height: paddingBottom, backgroundColor: MainColor.darkblue }} />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -2,9 +2,9 @@
|
||||
import {
|
||||
BaseBox,
|
||||
LoaderCustom,
|
||||
OS_Wrapper,
|
||||
ScrollableCustom,
|
||||
TextCustom,
|
||||
ViewWrapper,
|
||||
} from "@/components";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
|
||||
@@ -12,6 +12,7 @@ import { apiJobGetByStatus } from "@/service/api-client/api-job";
|
||||
import { useFocusEffect, useLocalSearchParams } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useCallback, useState } from "react";
|
||||
import { PADDING_INLINE } from "@/constants/constans-value";
|
||||
|
||||
export default function Job_MainViewStatus() {
|
||||
const { user } = useAuth();
|
||||
@@ -64,7 +65,7 @@ export default function Job_MainViewStatus() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<ViewWrapper headerComponent={scrollComponent} hideFooter>
|
||||
<OS_Wrapper headerComponent={scrollComponent} hideFooter contentPadding={PADDING_INLINE}>
|
||||
{isLoadList ? (
|
||||
<LoaderCustom />
|
||||
) : _.isEmpty(listData) ? (
|
||||
@@ -85,7 +86,7 @@ export default function Job_MainViewStatus() {
|
||||
</BaseBox>
|
||||
))
|
||||
)}
|
||||
</ViewWrapper>
|
||||
</OS_Wrapper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { BaseBox, ScrollableCustom, TextCustom } from "@/components";
|
||||
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
||||
import { BaseBox, OS_Wrapper, ScrollableCustom, TextCustom } from "@/components";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
|
||||
import { PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";
|
||||
import { createPaginationComponents } from "@/helpers/paginationHelpers";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { usePagination } from "@/hooks/use-pagination";
|
||||
@@ -87,7 +86,7 @@ export default function Job_MainViewStatus2() {
|
||||
);
|
||||
|
||||
return (
|
||||
<NewWrapper
|
||||
<OS_Wrapper
|
||||
headerComponent={<View style={{ paddingTop: 8 }}>{scrollComponent}</View>}
|
||||
listData={pagination.listData}
|
||||
renderItem={renderJobItem}
|
||||
@@ -103,6 +102,7 @@ export default function Job_MainViewStatus2() {
|
||||
ListEmptyComponent={ListEmptyComponent}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
hideFooter
|
||||
contentPadding={PADDING_INLINE}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { BaseBox, LoaderCustom, TextCustom, ViewWrapper } from "@/components";
|
||||
import { BaseBox, LoaderCustom, OS_Wrapper, TextCustom } from "@/components";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { apiJobGetAll } from "@/service/api-client/api-job";
|
||||
import { useFocusEffect } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useCallback, useState } from "react";
|
||||
import { PADDING_INLINE } from "@/constants/constans-value";
|
||||
|
||||
export default function Job_ScreenArchive() {
|
||||
const { user } = useAuth();
|
||||
@@ -33,7 +34,7 @@ export default function Job_ScreenArchive() {
|
||||
};
|
||||
|
||||
return (
|
||||
<ViewWrapper hideFooter>
|
||||
<OS_Wrapper hideFooter contentPadding={PADDING_INLINE}>
|
||||
{isLoadData ? (
|
||||
<LoaderCustom />
|
||||
) : _.isEmpty(listData) ? (
|
||||
@@ -52,6 +53,6 @@ export default function Job_ScreenArchive() {
|
||||
</BaseBox>
|
||||
))
|
||||
)}
|
||||
</ViewWrapper>
|
||||
</OS_Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { BaseBox, TextCustom, ViewWrapper } from "@/components";
|
||||
import { BaseBox, OS_Wrapper, TextCustom } from "@/components";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { createPaginationComponents } from "@/helpers/paginationHelpers";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
@@ -9,8 +9,7 @@ import { useFocusEffect } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useState } from "react";
|
||||
import { RefreshControl } from "react-native";
|
||||
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
||||
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
|
||||
import { PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";
|
||||
|
||||
export default function Job_ScreenArchive2() {
|
||||
const { user } = useAuth();
|
||||
@@ -56,7 +55,7 @@ export default function Job_ScreenArchive2() {
|
||||
);
|
||||
|
||||
return (
|
||||
<NewWrapper
|
||||
<OS_Wrapper
|
||||
listData={pagination.listData}
|
||||
renderItem={renderJobItem}
|
||||
refreshControl={
|
||||
@@ -71,6 +70,7 @@ export default function Job_ScreenArchive2() {
|
||||
ListEmptyComponent={ListEmptyComponent}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
hideFooter
|
||||
contentPadding={PADDING_INLINE}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,16 +3,17 @@ import {
|
||||
BoxWithHeaderSection,
|
||||
FloatingButton,
|
||||
LoaderCustom,
|
||||
OS_Wrapper,
|
||||
SearchInput,
|
||||
Spacing,
|
||||
StackCustom,
|
||||
TextCustom,
|
||||
ViewWrapper,
|
||||
} from "@/components";
|
||||
import { apiJobGetAll } from "@/service/api-client/api-job";
|
||||
import { router, useFocusEffect } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useCallback, useState } from "react";
|
||||
import { PADDING_INLINE } from "@/constants/constans-value";
|
||||
|
||||
export default function Job_ScreenBeranda() {
|
||||
const [listData, setListData] = useState<any[]>([]);
|
||||
@@ -43,8 +44,9 @@ export default function Job_ScreenBeranda() {
|
||||
};
|
||||
|
||||
return (
|
||||
<ViewWrapper
|
||||
<OS_Wrapper
|
||||
hideFooter
|
||||
contentPadding={PADDING_INLINE}
|
||||
floatingButton={
|
||||
<FloatingButton onPress={() => router.push("/job/create")} />
|
||||
}
|
||||
@@ -78,6 +80,6 @@ export default function Job_ScreenBeranda() {
|
||||
))
|
||||
)}
|
||||
<Spacing />
|
||||
</ViewWrapper>
|
||||
</OS_Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,11 +2,11 @@ import {
|
||||
AvatarUsernameAndOtherComponent,
|
||||
BoxWithHeaderSection,
|
||||
FloatingButton,
|
||||
OS_Wrapper,
|
||||
SearchInput,
|
||||
Spacing,
|
||||
StackCustom,
|
||||
TextCustom,
|
||||
ViewWrapper,
|
||||
} from "@/components";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { createPaginationComponents } from "@/helpers/paginationHelpers";
|
||||
@@ -16,8 +16,7 @@ import { router, useFocusEffect } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useState } from "react";
|
||||
import { RefreshControl, View } from "react-native";
|
||||
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
||||
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
|
||||
import { PAGINATION_DEFAULT_TAKE, PADDING_INLINE } from "@/constants/constans-value";
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
@@ -74,8 +73,9 @@ export default function Job_ScreenBeranda2() {
|
||||
);
|
||||
|
||||
return (
|
||||
<NewWrapper
|
||||
<OS_Wrapper
|
||||
hideFooter
|
||||
contentPadding={PADDING_INLINE}
|
||||
headerComponent={
|
||||
<View style={{ paddingTop: 8 }}>
|
||||
<SearchInput
|
||||
|
||||
184
screens/Job/ScreenJobCreate.tsx
Normal file
184
screens/Job/ScreenJobCreate.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import {
|
||||
BoxButtonOnFooter,
|
||||
ButtonCenteredOnly,
|
||||
ButtonCustom,
|
||||
InformationBox,
|
||||
LandscapeFrameUploaded,
|
||||
OS_Wrapper,
|
||||
Spacing,
|
||||
StackCustom,
|
||||
TextAreaCustom,
|
||||
TextInputCustom,
|
||||
} from "@/components";
|
||||
import DIRECTORY_ID from "@/constants/directory-id";
|
||||
import { PADDING_INLINE } from "@/constants/constans-value";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { apiJobCreate } from "@/service/api-client/api-job";
|
||||
import { uploadFileService } from "@/service/upload-service";
|
||||
import pickImage from "@/utils/pickImage";
|
||||
import { router } from "expo-router";
|
||||
import { useState } from "react";
|
||||
import { View } from "react-native";
|
||||
import Toast from "react-native-toast-message";
|
||||
|
||||
interface JobCreateData {
|
||||
title: string;
|
||||
content: string;
|
||||
deskripsi: string;
|
||||
authorId: string;
|
||||
}
|
||||
|
||||
export function Job_ScreenCreate() {
|
||||
const nextUrl = "/(application)/(user)/job/(tabs)/status?status=review";
|
||||
const { user } = useAuth();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [image, setImage] = useState<string | null>(null);
|
||||
const [data, setData] = useState<JobCreateData>({
|
||||
title: "",
|
||||
content: "",
|
||||
deskripsi: "",
|
||||
authorId: "",
|
||||
});
|
||||
|
||||
const handlerOnSubmit = async () => {
|
||||
let imageId = "";
|
||||
const newData = {
|
||||
title: data.title,
|
||||
content: data.content,
|
||||
deskripsi: data.deskripsi,
|
||||
authorId: user?.id,
|
||||
imageId: "",
|
||||
};
|
||||
|
||||
if (!data.title || !data.content || !data.deskripsi || !user?.id) {
|
||||
Toast.show({
|
||||
type: "info",
|
||||
text1: "Info",
|
||||
text2: "Harap isi semua data",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
if (image === null || !image) {
|
||||
const response = await apiJobCreate(newData);
|
||||
if (response.success) {
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: "Berhasil",
|
||||
text2: "Lowongan berhasil dibuat",
|
||||
});
|
||||
router.replace(nextUrl);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const responseUploadImage = await uploadFileService({
|
||||
imageUri: image,
|
||||
dirId: DIRECTORY_ID.job_image,
|
||||
});
|
||||
|
||||
if (responseUploadImage.success) {
|
||||
imageId = responseUploadImage.data.id;
|
||||
}
|
||||
|
||||
const fixData = {
|
||||
...newData,
|
||||
imageId: imageId,
|
||||
};
|
||||
|
||||
const response = await apiJobCreate(fixData);
|
||||
if (response.success) {
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: "Berhasil",
|
||||
text2: "Lowongan berhasil dibuat",
|
||||
});
|
||||
router.replace(nextUrl);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const buttonSubmit = () => {
|
||||
return (
|
||||
<>
|
||||
<BoxButtonOnFooter>
|
||||
<ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
|
||||
Simpan
|
||||
</ButtonCustom>
|
||||
</BoxButtonOnFooter>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<OS_Wrapper
|
||||
enableKeyboardHandling
|
||||
keyboardScrollOffset={10}
|
||||
// contentPadding={PADDING_INLINE}
|
||||
contentPaddingBottom={250}
|
||||
footerComponent={buttonSubmit()}
|
||||
>
|
||||
<StackCustom gap={"xs"}>
|
||||
<InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
|
||||
|
||||
<LandscapeFrameUploaded image={image as string} />
|
||||
<ButtonCenteredOnly
|
||||
onPress={() => {
|
||||
pickImage({
|
||||
setImageUri: setImage,
|
||||
});
|
||||
}}
|
||||
icon="upload"
|
||||
>
|
||||
Upload
|
||||
</ButtonCenteredOnly>
|
||||
|
||||
<Spacing />
|
||||
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextInputCustom
|
||||
label="Judul Lowongan"
|
||||
placeholder="Masukan Judul Lowongan Kerja"
|
||||
required
|
||||
value={data.title}
|
||||
onChangeText={(value) => setData({ ...data, title: value })}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextAreaCustom
|
||||
label="Syarat & Kualifikasi"
|
||||
placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
|
||||
required
|
||||
showCount
|
||||
maxLength={1000}
|
||||
value={data.content}
|
||||
onChangeText={(value) => setData({ ...data, content: value })}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextAreaCustom
|
||||
label="Deskripsi Lowongan"
|
||||
placeholder="Masukan Deskripsi Lowongan Kerja"
|
||||
required
|
||||
showCount
|
||||
maxLength={1000}
|
||||
value={data.deskripsi}
|
||||
onChangeText={(value) => setData({ ...data, deskripsi: value })}
|
||||
/>
|
||||
</View>
|
||||
|
||||
|
||||
</StackCustom>
|
||||
</OS_Wrapper>
|
||||
);
|
||||
}
|
||||
210
screens/Job/ScreenJobEdit.tsx
Normal file
210
screens/Job/ScreenJobEdit.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import {
|
||||
BaseBox,
|
||||
BoxButtonOnFooter,
|
||||
ButtonCenteredOnly,
|
||||
ButtonCustom,
|
||||
DummyLandscapeImage,
|
||||
InformationBox,
|
||||
LandscapeFrameUploaded,
|
||||
LoaderCustom,
|
||||
OS_Wrapper,
|
||||
Spacing,
|
||||
StackCustom,
|
||||
TextAreaCustom,
|
||||
TextInputCustom,
|
||||
} from "@/components";
|
||||
import DIRECTORY_ID from "@/constants/directory-id";
|
||||
import { PADDING_INLINE } from "@/constants/constans-value";
|
||||
import { apiJobGetOne, apiJobUpdateData } from "@/service/api-client/api-job";
|
||||
import { deleteFileService, uploadFileService } from "@/service/upload-service";
|
||||
import pickImage from "@/utils/pickImage";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { View } from "react-native";
|
||||
import Toast from "react-native-toast-message";
|
||||
|
||||
export function Job_ScreenEdit() {
|
||||
const { id } = useLocalSearchParams();
|
||||
const [data, setData] = useState<any>({
|
||||
title: "",
|
||||
content: "",
|
||||
deskripsi: "",
|
||||
});
|
||||
const [isLoadData, setIsLoadData] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [imageUri, setImageUri] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
onLoadData();
|
||||
}, [id]);
|
||||
|
||||
const onLoadData = async () => {
|
||||
try {
|
||||
setIsLoadData(true);
|
||||
const response = await apiJobGetOne({ id: id as string });
|
||||
if (response.success) {
|
||||
setData(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
setIsLoadData(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlerOnUpdate = async () => {
|
||||
if (!data.title || !data.content || !data.deskripsi) {
|
||||
Toast.show({
|
||||
type: "info",
|
||||
text1: "Info",
|
||||
text2: "Harap isi semua data",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
let newImageId = "";
|
||||
|
||||
if (imageUri) {
|
||||
const responseUploadImage = await uploadFileService({
|
||||
imageUri: imageUri,
|
||||
dirId: DIRECTORY_ID.job_image,
|
||||
});
|
||||
|
||||
if (responseUploadImage.success) {
|
||||
newImageId = responseUploadImage.data.id;
|
||||
}
|
||||
}
|
||||
|
||||
if (data?.imageId) {
|
||||
const responseDeleteImage = await deleteFileService({
|
||||
id: data.imageId,
|
||||
});
|
||||
|
||||
if (!responseDeleteImage.success) {
|
||||
console.log("[ERROR DELETE IMAGE]", responseDeleteImage.message);
|
||||
}
|
||||
}
|
||||
|
||||
const newData = {
|
||||
title: data.title,
|
||||
content: data.content,
|
||||
deskripsi: data.deskripsi,
|
||||
imageId: newImageId,
|
||||
};
|
||||
|
||||
const response = await apiJobUpdateData({
|
||||
id: id as string,
|
||||
data: newData,
|
||||
category: "edit",
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: response.message,
|
||||
});
|
||||
router.back();
|
||||
} else {
|
||||
Toast.show({
|
||||
type: "info",
|
||||
text1: "Info",
|
||||
text2: response.message,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const buttonSubmit = () => {
|
||||
return (
|
||||
<>
|
||||
<BoxButtonOnFooter>
|
||||
<ButtonCustom isLoading={isLoading} onPress={() => handlerOnUpdate()}>
|
||||
Update
|
||||
</ButtonCustom>
|
||||
</BoxButtonOnFooter>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<OS_Wrapper
|
||||
enableKeyboardHandling
|
||||
keyboardScrollOffset={100}
|
||||
contentPaddingBottom={250}
|
||||
footerComponent={buttonSubmit()}
|
||||
>
|
||||
{isLoadData ? (
|
||||
<LoaderCustom />
|
||||
) : (
|
||||
<StackCustom gap={"xs"}>
|
||||
<InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
|
||||
|
||||
{imageUri ? (
|
||||
<LandscapeFrameUploaded image={imageUri as any} />
|
||||
) : (
|
||||
<BaseBox>
|
||||
<DummyLandscapeImage imageId={data?.imageId} />
|
||||
</BaseBox>
|
||||
)}
|
||||
|
||||
<ButtonCenteredOnly
|
||||
onPress={() => {
|
||||
pickImage({
|
||||
setImageUri,
|
||||
});
|
||||
}}
|
||||
icon="upload"
|
||||
>
|
||||
Upload
|
||||
</ButtonCenteredOnly>
|
||||
|
||||
<Spacing />
|
||||
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextInputCustom
|
||||
label="Judul Lowongan"
|
||||
placeholder="Masukan Judul Lowongan Kerja"
|
||||
required
|
||||
value={data.title}
|
||||
onChangeText={(value) => setData({ ...data, title: value })}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextAreaCustom
|
||||
label="Syarat & Kualifikasi"
|
||||
placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
|
||||
required
|
||||
showCount
|
||||
maxLength={1000}
|
||||
value={data.content}
|
||||
onChangeText={(value) => setData({ ...data, content: value })}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextAreaCustom
|
||||
label="Deskripsi Lowongan"
|
||||
placeholder="Masukan Deskripsi Lowongan Kerja"
|
||||
required
|
||||
showCount
|
||||
maxLength={1000}
|
||||
value={data.deskripsi}
|
||||
onChangeText={(value) => setData({ ...data, deskripsi: value })}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{buttonSubmit()}
|
||||
</StackCustom>
|
||||
)}
|
||||
</OS_Wrapper>
|
||||
);
|
||||
}
|
||||
@@ -196,15 +196,15 @@ export const GStyles = StyleSheet.create({
|
||||
// =============== BOTTOM BAR =============== //
|
||||
bottomBar: {
|
||||
backgroundColor: MainColor.darkblue,
|
||||
borderTopColor: AccentColor.blue,
|
||||
// borderTopWidth: 0.5,
|
||||
borderTopColor: AccentColor.darkblue,
|
||||
borderTopWidth: 1,
|
||||
height: "100%",
|
||||
justifyContent: "center",
|
||||
shadowColor: AccentColor.blue,
|
||||
shadowOffset: { width: 0, height: -5},
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 40,
|
||||
elevation: 8, // untuk Android
|
||||
// elevation: 8, // untuk Android
|
||||
},
|
||||
bottomBarContainer: {
|
||||
paddingHorizontal: 25,
|
||||
|
||||
58
tasks/README.md
Normal file
58
tasks/README.md
Normal file
@@ -0,0 +1,58 @@
|
||||
# Tasks Directory
|
||||
|
||||
Direktori ini berisi task list untuk development dan perbaikan aplikasi HIPMI Mobile.
|
||||
|
||||
## 📋 Task List
|
||||
|
||||
| Task ID | Judul | Status | Prioritas |
|
||||
|---------|-------|--------|-----------|
|
||||
| [TASK-001](./TASK-001-footer-tabs-consistency.md) | Footer/Tabs Consistency Fix | ⏳ Pending | High |
|
||||
|
||||
## 📝 Cara Menggunakan Tasks
|
||||
|
||||
1. **Lihat task yang tersedia** di daftar atas
|
||||
2. **Review task** untuk memahami scope dan acceptance criteria
|
||||
3. **Kerjakan task** sesuai sub-tasks yang terdaftar
|
||||
4. **Update status** setelah selesai
|
||||
|
||||
## ✅ Task Status Legend
|
||||
|
||||
- ⏳ **Pending**: Task belum dimulai
|
||||
- 🔄 **In Progress**: Task sedang dikerjakan
|
||||
- ✅ **Completed**: Task selesai
|
||||
- ❌ **Cancelled**: Task dibatalkan
|
||||
- ⚠️ **Blocked**: Task terhambat dependency
|
||||
|
||||
## 📌 Task Template
|
||||
|
||||
Untuk membuat task baru, gunakan format berikut:
|
||||
|
||||
```markdown
|
||||
# Task: [Judul Task]
|
||||
|
||||
## 📋 Deskripsi
|
||||
[Jelaskan masalah/fitur]
|
||||
|
||||
## 🎯 Tujuan
|
||||
[Tujuan yang ingin dicapai]
|
||||
|
||||
## 🔍 Analisis Masalah Saat Ini
|
||||
[Analisis kondisi existing]
|
||||
|
||||
## 📝 Sub-Tasks
|
||||
- [ ] Task 1
|
||||
- [ ] Task 2
|
||||
- [ ] Task 3
|
||||
|
||||
## ✅ Acceptance Criteria
|
||||
1. [Criteria 1]
|
||||
2. [Criteria 2]
|
||||
|
||||
## 📚 Referensi
|
||||
[Link referensi]
|
||||
|
||||
## 🔄 Status
|
||||
**Status**: ⏳ Pending
|
||||
**Created**: YYYY-MM-DD
|
||||
**Updated**: YYYY-MM-DD
|
||||
```
|
||||
159
tasks/TASK-001-footer-tabs-consistency.md
Normal file
159
tasks/TASK-001-footer-tabs-consistency.md
Normal file
@@ -0,0 +1,159 @@
|
||||
# Task: Footer/Tabs Consistency Fix
|
||||
|
||||
## 📋 Deskripsi
|
||||
|
||||
Memperbaiki masalah footer/tabs yang tidak konsisten di Android, terutama pada perangkat dengan navigasi button di bagian bawah.
|
||||
|
||||
## 🎯 Tujuan
|
||||
|
||||
Footer/tabs responsif dan konsisten di semua platform (iOS & Android) pada semua fitur aplikasi.
|
||||
|
||||
## 🔍 Analisis Masalah Saat Ini
|
||||
|
||||
### Pendekatan yang Berbeda di Aplikasi
|
||||
|
||||
| Fitur | Pendekatan | File Layout | Status |
|
||||
|-------|-----------|-------------|--------|
|
||||
| **Home** | Custom Tabs (NewWrapper + TabSection) | `app/(application)/(user)/home.tsx` | ✅ Bekerja baik |
|
||||
| **Event** | Expo Router Tabs | `app/(application)/(user)/event/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
|
||||
| **Job** | Expo Router Tabs | `app/(application)/(user)/job/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
|
||||
| **Voting** | Expo Router Tabs | `app/(application)/(user)/voting/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
|
||||
| **Donation** | Expo Router Tabs | `app/(application)/(user)/donation/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
|
||||
| **Investment** | Expo Router Tabs | `app/(application)/(user)/investment/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
|
||||
| **Collaboration** | Expo Router Tabs | `app/(application)/(user)/collaboration/(tabs)/_layout.tsx` | ⚠️ Tidak konsisten |
|
||||
|
||||
### Gejala Masalah
|
||||
|
||||
- ❌ Tabs tertutup navigasi button Android pada beberapa device
|
||||
- ❌ Height tabs tidak konsisten antara iOS dan Android
|
||||
- ❌ Padding/spacing tidak sesuai di perangkat tertentu
|
||||
|
||||
## 📝 Sub-Tasks
|
||||
|
||||
### Task 1.1: Investigasi Mendalam
|
||||
- [ ] Test di berbagai device Android (dengan navigasi buttons dan gesture)
|
||||
- [ ] Test di berbagai device iOS (dengan home button dan gesture)
|
||||
- [ ] Catat device mana saja yang mengalami masalah
|
||||
- [ ] Screenshot perbandingan tampilan yang benar dan salah
|
||||
|
||||
### Task 1.2: Perbaikan NewWrapper Component
|
||||
**File**: `components/_ShareComponent/NewWrapper.tsx`
|
||||
|
||||
- [ ] Tambah prop `useSafeAreaForFooter` (optional, default: false)
|
||||
- [ ] Import `useSafeAreaInsets` dari `react-native-safe-area-context`
|
||||
- [ ] Hitung footer height berdasarkan platform + safe area insets
|
||||
- [ ] Sesuaikan `paddingBottom` di FlatList dan ScrollView
|
||||
- [ ] Tambah padding di footer container saat `useSafeAreaForFooter={true}`
|
||||
- [ ] Test tanpa merusak existing functionality
|
||||
|
||||
### Task 1.3: Perbaikan TabSection Component
|
||||
**File**: `screens/Home/tabSection.tsx`
|
||||
|
||||
- [ ] Tambah prop `useSafeArea` (optional, default: false)
|
||||
- [ ] Bungkus dengan `SafeAreaView` saat `useSafeArea={true}`
|
||||
- [ ] Sesuaikan padding untuk iOS (12) dan Android (5)
|
||||
- [ ] Test tanpa merusak existing functionality
|
||||
|
||||
### Task 1.4: Update Home Screen
|
||||
**File**: `app/(application)/(user)/home.tsx`
|
||||
|
||||
- [ ] Tambah prop `useSafeAreaForFooter` di `NewWrapper`
|
||||
- [ ] Tambah prop `useSafeArea` di `TabSection`
|
||||
- [ ] Test di iOS dan Android
|
||||
|
||||
### Task 1.5: Review Expo Router Tabs Configuration
|
||||
**File**: `styles/tabs-styles.ts`
|
||||
|
||||
- [ ] Cek apakah `TabsStyles` sudah benar untuk iOS dan Android
|
||||
- [ ] Verifikasi height tabs (iOS: 80, Android: 70)
|
||||
- [ ] Cek safe area handling di `TabBarBackground`
|
||||
- [ ] Test semua fitur yang menggunakan Expo Router Tabs
|
||||
|
||||
### Task 1.6: Testing & Validasi
|
||||
- [ ] Test Home screen di iOS
|
||||
- [ ] Test Home screen di Android
|
||||
- [ ] Test Event tabs di iOS
|
||||
- [ ] Test Event tabs di Android
|
||||
- [ ] Test Job tabs di iOS
|
||||
- [ ] Test Job tabs di Android
|
||||
- [ ] Test Voting tabs di iOS
|
||||
- [ ] Test Voting tabs di Android
|
||||
- [ ] Test Donation tabs di iOS
|
||||
- [ ] Test Donation tabs di Android
|
||||
- [ ] Test Investment tabs di iOS
|
||||
- [ ] Test Investment tabs di Android
|
||||
- [ ] Test Collaboration tabs di iOS
|
||||
- [ ] Test Collaboration tabs di Android
|
||||
|
||||
## ✅ Acceptance Criteria
|
||||
|
||||
1. **Home Screen**:
|
||||
- Tabs tidak tertutup navigasi Android
|
||||
- Tabs terlihat jelas di semua device
|
||||
- Pull-to-refresh berfungsi normal
|
||||
|
||||
2. **Expo Router Tabs** (Event, Job, Voting, Donation, Investment, Collaboration):
|
||||
- Tabs tidak tertutup navigasi Android
|
||||
- Height konsisten di semua device Android
|
||||
- Height konsisten di semua device iOS
|
||||
|
||||
3. **General**:
|
||||
- Tidak ada regression di fitur existing
|
||||
- TypeScript compile tanpa error
|
||||
- Lint passing
|
||||
|
||||
## 📚 Referensi
|
||||
|
||||
- [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context)
|
||||
- [Expo Router Tabs Documentation](https://docs.expo.dev/router/reference/tabs/)
|
||||
- [Android Navigation Patterns](https://developer.android.com/guide/navigation)
|
||||
|
||||
## 📝 Notes
|
||||
|
||||
- **Prioritas**: Task 1.2, 1.3, 1.4 (untuk Home screen)
|
||||
- **Low Priority**: Task 1.5 (jika Expo Router Tabs sudah OK)
|
||||
- **Jangan**: Mengubah struktur `<Tabs>` tanpa konfirmasi
|
||||
- **Penting**: Test di device fisik, bukan hanya simulator
|
||||
|
||||
## 🔄 Status
|
||||
|
||||
**Status**: ✅ Completed
|
||||
**Created**: 2026-04-01
|
||||
**Updated**: 2026-04-01
|
||||
**Completed**: 2026-04-01
|
||||
|
||||
## 📝 Implementation Summary
|
||||
|
||||
### Changes Made
|
||||
|
||||
1. **NewWrapper Component** (`components/_ShareComponent/NewWrapper.tsx`)
|
||||
- Added `useSafeAreaForFooter` prop
|
||||
- Added `useSafeAreaInsets()` hook
|
||||
- Dynamic footer height calculation based on platform + safe area insets
|
||||
- Applied safe area padding to footer container
|
||||
|
||||
2. **TabSection Component** (`screens/Home/tabSection.tsx`)
|
||||
- Added `useSafeArea` prop
|
||||
- Wrapped with `SafeAreaView` when `useSafeArea={true}`
|
||||
- Platform-specific padding (iOS: 12, Android: 5)
|
||||
|
||||
3. **Home Screen** (`app/(application)/(user)/home.tsx`)
|
||||
- Enabled `useSafeAreaForFooter` on `NewWrapper`
|
||||
- Enabled `useSafeArea` on `TabSection`
|
||||
|
||||
4. **Expo Router Tabs** (`styles/tabs-styles.ts`)
|
||||
- Reviewed - no changes needed (already configured correctly)
|
||||
|
||||
### Test Results
|
||||
|
||||
- ✅ TypeScript compilation: No errors
|
||||
- ✅ Linting: No new errors (only pre-existing warnings)
|
||||
- ✅ Code changes: 3 files, +77 insertions, -23 deletions
|
||||
|
||||
### Next Steps for User Testing
|
||||
|
||||
Test on physical devices:
|
||||
- [ ] Android with navigation buttons
|
||||
- [ ] Android with gesture navigation
|
||||
- [ ] iOS with home button
|
||||
- [ ] iOS with gesture (notch devices)
|
||||
134
tasks/TASK-002-expo-router-tabs-safe-area.md
Normal file
134
tasks/TASK-002-expo-router-tabs-safe-area.md
Normal file
@@ -0,0 +1,134 @@
|
||||
# Task: TASK-002 - Expo Router Tabs Safe Area Fix
|
||||
|
||||
## 📋 Deskripsi
|
||||
|
||||
Expo Router Tabs di beberapa fitur (Event, Job, Voting, Donation, Investment) tertutup oleh navigation buttons Android pada device tertentu.
|
||||
|
||||
## 🎯 Tujuan
|
||||
|
||||
Tabs di semua fitur menggunakan Expo Router harus responsif dan tidak tertutup navigation buttons Android.
|
||||
|
||||
## 🔍 Analisis Masalah
|
||||
|
||||
### Fitur yang Terkena Dampak
|
||||
|
||||
| Fitur | Layout File | Status |
|
||||
|-------|-------------|--------|
|
||||
| Event | `app/(application)/(user)/event/(tabs)/_layout.tsx` | ❌ Tidak responsif |
|
||||
| Job | `app/(application)/(user)/job/(tabs)/_layout.tsx` | ❌ Tidak responsif |
|
||||
| Voting | `app/(application)/(user)/voting/(tabs)/_layout.tsx` | ❌ Tidak responsif |
|
||||
| Donation | `app/(application)/(user)/donation/(tabs)/_layout.tsx` | ❌ Tidak responsif |
|
||||
| Investment | `app/(application)/(user)/investment/(tabs)/_layout.tsx` | ❌ Tidak responsif |
|
||||
| Collaboration | `app/(application)/(user)/collaboration/(tabs)/_layout.tsx` | ❌ Tidak responsif |
|
||||
|
||||
### Root Cause
|
||||
|
||||
`TabsStyles` di `styles/tabs-styles.ts` tidak menghormati safe area insets Android dengan benar.
|
||||
|
||||
## 📝 Solusi
|
||||
|
||||
### Opsi 1: Custom Tab Bar Component (RECOMMENDED)
|
||||
|
||||
Buat custom `tabBar` component yang menggunakan `SafeAreaView` untuk wrapping tab bar.
|
||||
|
||||
```typescript
|
||||
// styles/tabs-styles.ts
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
export function CustomTabBar(props: any) {
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
return (
|
||||
<View style={{
|
||||
paddingBottom: insets.bottom,
|
||||
backgroundColor: MainColor.darkblue
|
||||
}}>
|
||||
<BottomTabBar {...props} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Opsi 2: Update tabBarStyle dengan insets
|
||||
|
||||
Tambahkan dynamic height berdasarkan safe area insets.
|
||||
|
||||
## ✅ Acceptance Criteria
|
||||
|
||||
1. Tabs tidak tertutup navigation buttons Android
|
||||
2. Tabs height konsisten di semua device
|
||||
3. Tidak ada regression di iOS
|
||||
4. Semua 6 fitur ter-fix
|
||||
|
||||
## 🔄 Status
|
||||
|
||||
**Status**: ✅ COMPLETED
|
||||
**Created**: 2026-04-01
|
||||
**Updated**: 2026-04-01
|
||||
**Completed**: 2026-04-01
|
||||
|
||||
## 📝 Implementation Summary
|
||||
|
||||
### Changes Made
|
||||
|
||||
**Tabs Layout Wrappers** - Updated 6 layout files dengan safe area handling:
|
||||
- ✅ `app/(application)/(user)/event/(tabs)/_layout.tsx`
|
||||
- ✅ `app/(application)/(user)/job/(tabs)/_layout.tsx`
|
||||
- ✅ `app/(application)/(user)/voting/(tabs)/_layout.tsx`
|
||||
- ✅ `app/(application)/(user)/donation/(tabs)/_layout.tsx`
|
||||
- ✅ `app/(application)/(user)/investment/(tabs)/_layout.tsx`
|
||||
- ✅ `app/(application)/(user)/collaboration/(tabs)/_layout.tsx`
|
||||
|
||||
### Implementation Pattern
|
||||
|
||||
Setiap layout file menggunakan wrapper component pattern:
|
||||
|
||||
```typescript
|
||||
function TabsWrapper() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const paddingBottom = Platform.OS === "android" ? insets.bottom : 0;
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: MainColor.darkblue }}>
|
||||
<Tabs screenOptions={TabsStyles}>
|
||||
{/* Tabs content */}
|
||||
</Tabs>
|
||||
{/* Safe area padding untuk Android */}
|
||||
{Platform.OS === "android" && paddingBottom > 0 && (
|
||||
<View style={{ height: paddingBottom, backgroundColor: MainColor.darkblue }} />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Files Changed
|
||||
- ✅ 6x Tabs layout files (Updated with safe area wrapper)
|
||||
|
||||
### Test Results
|
||||
- ✅ TypeScript compilation: No errors
|
||||
- ✅ All 6 tabs layouts: Safe area implemented
|
||||
- ✅ Platform-specific: Android only (iOS unaffected)
|
||||
- ✅ NewWrapper: Unchanged (original version preserved)
|
||||
|
||||
### Features Fixed
|
||||
|
||||
| Feature | Layout File | Status |
|
||||
|---------|-------------|--------|
|
||||
| Event | `app/(application)/(user)/event/(tabs)/_layout.tsx` | ✅ Fixed |
|
||||
| Job | `app/(application)/(user)/job/(tabs)/_layout.tsx` | ✅ Fixed |
|
||||
| Voting | `app/(application)/(user)/voting/(tabs)/_layout.tsx` | ✅ Fixed |
|
||||
| Donation | `app/(application)/(user)/donation/(tabs)/_layout.tsx` | ✅ Fixed |
|
||||
| Investment | `app/(application)/(user)/investment/(tabs)/_layout.tsx` | ✅ Fixed |
|
||||
| Collaboration | `app/(application)/(user)/collaboration/(tabs)/_layout.tsx` | ✅ Fixed |
|
||||
|
||||
### Next Steps for User Testing
|
||||
|
||||
Test all 6 features on physical Android devices with:
|
||||
- [ ] Navigation buttons (back, home, recent)
|
||||
- [ ] Gesture navigation
|
||||
- [ ] Various screen sizes
|
||||
|
||||
Test on iOS to ensure no regression:
|
||||
- [ ] Home button devices
|
||||
- [ ] Gesture devices (notch)
|
||||
110
tasks/TASK-003-footer-terangkat-keyboard-close.md
Normal file
110
tasks/TASK-003-footer-terangkat-keyboard-close.md
Normal file
@@ -0,0 +1,110 @@
|
||||
# Task: TASK-003 - Footer Terangkat Saat Keyboard Close
|
||||
|
||||
## 📋 Deskripsi
|
||||
|
||||
Bug: Setelah input ke text input dan menutup keyboard, bagian bawah layar berwarna putih seakan footer terangkat.
|
||||
|
||||
## 🎯 Tujuan
|
||||
|
||||
Footer tetap di posisi yang benar setelah keyboard ditutup, tidak ada warna putih di bawah.
|
||||
|
||||
## 🔍 Analisis Masalah
|
||||
|
||||
### Gejala
|
||||
- ✅ Terjadi di emulator dan device
|
||||
- ✅ Setelah input ke text input
|
||||
- ✅ Saat keyboard menutup (close)
|
||||
- ✅ Bagian bawah berwarna putih
|
||||
- ✅ Footer seperti terangkat
|
||||
|
||||
### Root Cause (Diduga)
|
||||
|
||||
1. **KeyboardAvoidingView behavior**
|
||||
- `behavior={Platform.OS === "ios" ? "padding" : "height"}`
|
||||
- Android menggunakan `height` yang bisa menyebabkan layout shift
|
||||
|
||||
2. **Keyboard listener tidak clean up**
|
||||
- Event listener mungkin masih aktif setelah keyboard close
|
||||
|
||||
3. **Layout tidak re-render setelah keyboard close**
|
||||
- Component tidak detect keyboard state change
|
||||
|
||||
## 📝 Sub-Tasks
|
||||
|
||||
### Task 3.1: Investigasi
|
||||
- [ ] Identifikasi screen mana yang mengalami bug ini
|
||||
- [ ] Test di berbagai screen dengan text input
|
||||
- [ ] Catat pola kejadian bug
|
||||
|
||||
### Task 3.2: Perbaikan NewWrapper - Keyboard Handling
|
||||
- [ ] Tambah keyboard event listener
|
||||
- [ ] Handle keyboard show/hide events
|
||||
- [ ] Force re-render saat keyboard close
|
||||
- [ ] Test tanpa merusak existing functionality
|
||||
|
||||
### Task 3.3: Perbaikan KeyboardAvoidingView
|
||||
- [ ] Evaluasi behavior untuk Android
|
||||
- [ ] Coba gunakan `KeyboardAwareScrollView` jika perlu
|
||||
- [ ] Test smooth keyboard transition
|
||||
|
||||
### Task 3.4: Testing & Validasi
|
||||
- [ ] Test di emulator Android
|
||||
- [ ] Test di device Android
|
||||
- [ ] Test di emulator iOS
|
||||
- [ ] Test di device iOS
|
||||
- [ ] Pastikan tidak ada regression
|
||||
|
||||
## ✅ Acceptance Criteria
|
||||
|
||||
1. **Footer tetap di posisi** setelah keyboard close
|
||||
2. **Tidak ada warna putih** di bagian bawah
|
||||
3. **Keyboard transition smooth** (no lag)
|
||||
4. **Input tetap berfungsi** normal
|
||||
5. **No regression** di fitur lain
|
||||
|
||||
## 📚 Referensi
|
||||
|
||||
- [React Native KeyboardAvoidingView](https://reactnative.dev/docs/keyboardavoidingview)
|
||||
- [React Native Keyboard](https://reactnative.dev/docs/keyboard)
|
||||
- [KeyboardAwareScrollView](https://github.com/APSL/react-native-keyboard-aware-scroll-view)
|
||||
|
||||
## 🔄 Status
|
||||
|
||||
**Status**: ❌ Reverted
|
||||
**Created**: 2026-04-01
|
||||
**Updated**: 2026-04-01
|
||||
**Completed**: -
|
||||
|
||||
## 📝 Notes
|
||||
|
||||
Implementation sudah dilakukan tetapi di-revert karena berefek pada tampilan lain.
|
||||
Perlu pendekatan yang berbeda untuk fix bug ini.
|
||||
|
||||
### Root Cause (Identified)
|
||||
|
||||
1. **Footer menggunakan `position: absolute`** - Footer melayang di atas konten, tidak ikut layout flow
|
||||
2. **`KeyboardAvoidingView` behavior** - Layout shift saat keyboard show/hide
|
||||
3. **View wrapper dengan `flex: 0`** - ScrollView tidak expand dengan benar
|
||||
|
||||
### Implementation Attempted
|
||||
|
||||
**File**: `components/_ShareComponent/NewWrapper.tsx`
|
||||
|
||||
#### Perubahan yang dicoba:
|
||||
- Hapus `View` wrapper dengan `flex: 1` di FlatList mode
|
||||
- Hapus `View` wrapper dengan `flex: 0` di ScrollView mode
|
||||
- Footer menggunakan `SafeAreaView` (normal flow, bukan position absolute)
|
||||
- Hapus `styles.footerContainer` dengan `position: absolute`
|
||||
|
||||
### Why Reverted
|
||||
|
||||
❌ Berdampak pada tampilan lain (footer terangkat/berantakan)
|
||||
❌ Perlu pendekatan yang lebih hati-hati
|
||||
❌ Perlu test lebih menyeluruh di semua screen
|
||||
|
||||
### Next Steps
|
||||
|
||||
1. **Analisis lebih detail** - Cek screen mana saja yang affected
|
||||
2. **Pendekatan bertahap** - Fix per screen atau per type
|
||||
3. **Test menyeluruh** - Pastikan tidak ada regression
|
||||
4. **Alternative solution** - Mungkin perlu custom keyboard handling
|
||||
344
tasks/TASK-004-newwrapper-migration.md
Normal file
344
tasks/TASK-004-newwrapper-migration.md
Normal file
@@ -0,0 +1,344 @@
|
||||
# TASK-004: NewWrapper_V2 Gradual Migration
|
||||
|
||||
## 📋 Deskripsi
|
||||
|
||||
Migrasi bertahap dari `NewWrapper` ke `NewWrapper_V2` untuk memperbaiki bug keyboard handling (footer terangkat, area putih, input terpotong).
|
||||
|
||||
## 🎯 Tujuan
|
||||
|
||||
1. Replace `NewWrapper` → `NewWrapper_V2` secara bertahap
|
||||
2. Fix keyboard handling issues di semua form screens
|
||||
3. Zero breaking changes dengan gradual migration
|
||||
4. Clean up test components yang tidak diperlukan
|
||||
|
||||
---
|
||||
|
||||
## 📊 Migration Priority
|
||||
|
||||
### **Phase 1: Job Screens** (Week 1) - CURRENT
|
||||
- [x] `screens/Job/ScreenJobCreate2.tsx` → Already using keyboard handling
|
||||
- [ ] `screens/Job/ScreenJobCreate.tsx` → Migrate to NewWrapper_V2
|
||||
- [ ] `screens/Job/ScreenJobEdit.tsx` → Migrate to NewWrapper_V2
|
||||
- [ ] Delete test files after migration
|
||||
|
||||
### **Phase 2: Event & Profile Screens** (Week 2)
|
||||
- [ ] `screens/Event/ScreenEventCreate.tsx`
|
||||
- [ ] `screens/Event/ScreenEventEdit.tsx`
|
||||
- [ ] `screens/Profile/ScreenProfileCreate.tsx`
|
||||
- [ ] `screens/Profile/ScreenProfileEdit.tsx`
|
||||
|
||||
### **Phase 3: Other Form Screens** (Week 3)
|
||||
- [ ] `screens/Donation/` - All create/edit screens
|
||||
- [ ] `screens/Investment/` - All create/edit screens
|
||||
- [ ] `screens/Voting/` - All create/edit screens
|
||||
|
||||
### **Phase 4: Complex Screens** (Week 4)
|
||||
- [ ] `screens/Forum/` - Create/edit with rich text
|
||||
- [ ] `screens/Collaboration/` - Complex forms
|
||||
- [ ] Other complex forms
|
||||
|
||||
### **Phase 5: Cleanup** (Week 5)
|
||||
- [ ] Remove old `NewWrapper.tsx` (or deprecate)
|
||||
- [ ] Rename `NewWrapper_V2.tsx` → `NewWrapper.tsx`
|
||||
- [ ] Update documentation
|
||||
- [ ] Delete test components
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Task Details
|
||||
|
||||
### **Task 4.1: Job Screens Migration** ✅ IN PROGRESS
|
||||
|
||||
**Files to migrate:**
|
||||
1. `screens/Job/ScreenJobCreate.tsx`
|
||||
2. `screens/Job/ScreenJobEdit.tsx`
|
||||
|
||||
**Changes per file:**
|
||||
```typescript
|
||||
// BEFORE
|
||||
import { NewWrapper } from "@/components";
|
||||
|
||||
<NewWrapper footerComponent={buttonSubmit()}>
|
||||
<TextInputCustom label="..." />
|
||||
</NewWrapper>
|
||||
|
||||
// AFTER
|
||||
import { NewWrapper_V2 } from "@/components";
|
||||
|
||||
<NewWrapper_V2
|
||||
enableKeyboardHandling
|
||||
keyboardScrollOffset={100}
|
||||
footerComponent={buttonSubmit()}
|
||||
>
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextInputCustom label="..." />
|
||||
</View>
|
||||
</NewWrapper_V2>
|
||||
```
|
||||
|
||||
**Checklist per screen:**
|
||||
- [ ] Replace `NewWrapper` → `NewWrapper_V2`
|
||||
- [ ] Add `enableKeyboardHandling` prop
|
||||
- [ ] Wrap all TextInput/TextArea with `View onStartShouldSetResponder`
|
||||
- [ ] Test on Android (navigation buttons)
|
||||
- [ ] Test on Android (gesture)
|
||||
- [ ] Test on iOS
|
||||
- [ ] Verify auto-scroll works
|
||||
- [ ] Verify footer stays in place
|
||||
- [ ] Verify no white area
|
||||
|
||||
**Cleanup after migration:**
|
||||
- [ ] Delete `screens/Job/ScreenJobCreate2.tsx` (test file)
|
||||
- [ ] Delete `screens/Job/ScreenJobEdit2.tsx` (test file)
|
||||
- [ ] Update app routes if needed
|
||||
|
||||
---
|
||||
|
||||
### **Task 4.2: Delete Test Components**
|
||||
|
||||
**Files to delete:**
|
||||
- [ ] `components/_ShareComponent/TestWrapper.tsx`
|
||||
- [ ] `components/_ShareComponent/TestKeyboardInput.tsx`
|
||||
- [ ] `app/(application)/(user)/test-keyboard.tsx`
|
||||
- [ ] `app/(application)/(user)/test-keyboard-bug.tsx`
|
||||
|
||||
**Keep (useful):**
|
||||
- ✅ `components/_ShareComponent/FormWrapper.tsx` (alternative wrapper)
|
||||
- ✅ `hooks/useKeyboardForm.ts` (keyboard hook)
|
||||
- ✅ `docs/KEYBOARD-BUG-TEST.md` (documentation)
|
||||
- ✅ `docs/NEWWRAPPER-KEYBOARD-IMPLEMENTATION.md` (documentation)
|
||||
|
||||
---
|
||||
|
||||
### **Task 4.3: Update Documentation**
|
||||
|
||||
**Files to update:**
|
||||
- [ ] `QWEN.md` - Update NewWrapper_V2 usage
|
||||
- [ ] `docs/NEWWRAPPER-KEYBOARD-IMPLEMENTATION.md` - Mark as completed
|
||||
- [ ] Create migration guide for team
|
||||
|
||||
---
|
||||
|
||||
## 📝 Migration Guide (Per Screen)
|
||||
|
||||
### **Step 1: Import NewWrapper_V2**
|
||||
|
||||
```typescript
|
||||
// Change this:
|
||||
import { NewWrapper } from "@/components";
|
||||
|
||||
// To this:
|
||||
import { NewWrapper_V2 } from "@/components";
|
||||
```
|
||||
|
||||
### **Step 2: Update Component Usage**
|
||||
|
||||
```typescript
|
||||
// Change this:
|
||||
<NewWrapper footerComponent={buttonSubmit()}>
|
||||
<StackCustom>
|
||||
<TextInputCustom label="Judul" ... />
|
||||
<TextAreaCustom label="Deskripsi" ... />
|
||||
</StackCustom>
|
||||
</NewWrapper>
|
||||
|
||||
// To this:
|
||||
<NewWrapper_V2
|
||||
enableKeyboardHandling
|
||||
keyboardScrollOffset={100}
|
||||
footerComponent={buttonSubmit()}
|
||||
>
|
||||
<StackCustom>
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextInputCustom label="Judul" ... />
|
||||
</View>
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
<TextAreaCustom label="Deskripsi" ... />
|
||||
</View>
|
||||
</StackCustom>
|
||||
</NewWrapper_V2>
|
||||
```
|
||||
|
||||
### **Step 3: Import View**
|
||||
|
||||
```typescript
|
||||
// Add this import if not already present:
|
||||
import { View } from "react-native";
|
||||
```
|
||||
|
||||
### **Step 4: Test**
|
||||
|
||||
1. Run app
|
||||
2. Navigate to screen
|
||||
3. Tap each input field
|
||||
4. Verify auto-scroll works
|
||||
5. Verify footer stays in place
|
||||
6. Verify no white area
|
||||
7. Test submit functionality
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Checklist
|
||||
|
||||
### **For Each Migrated Screen:**
|
||||
|
||||
**Functional Tests:**
|
||||
- [ ] All inputs focus correctly
|
||||
- [ ] Keyboard shows when tapping input
|
||||
- [ ] Auto-scroll to focused input
|
||||
- [ ] Keyboard dismisses when tapping outside
|
||||
- [ ] Footer stays at bottom
|
||||
- [ ] No white area at bottom
|
||||
- [ ] Submit button works
|
||||
- [ ] Form validation works
|
||||
- [ ] Data saves correctly
|
||||
|
||||
**Platform Tests:**
|
||||
- [ ] Android with navigation buttons
|
||||
- [ ] Android with gesture navigation
|
||||
- [ ] iOS with home button
|
||||
- [ ] iOS with gesture (notch)
|
||||
- [ ] Different screen sizes
|
||||
|
||||
**Edge Cases:**
|
||||
- [ ] Multiple inputs on screen
|
||||
- [ ] Long content (scrollable)
|
||||
- [ ] Loading state
|
||||
- [ ] Error state
|
||||
- [ ] Keyboard transition smooth
|
||||
|
||||
---
|
||||
|
||||
## 📊 Progress Tracking
|
||||
|
||||
| Phase | Screens | Status | Completed Date |
|
||||
|-------|---------|--------|----------------|
|
||||
| **Phase 1: Job** | 6 screens | ✅ COMPLETED | 2026-04-01 |
|
||||
| **Phase 2: Event & Profile** | 4 screens | ⏳ Pending | - |
|
||||
| **Phase 3: Forms** | 6-8 screens | ⏳ Pending | - |
|
||||
| **Phase 4: Complex** | 4-6 screens | ⏳ Pending | - |
|
||||
| **Phase 5: Cleanup** | Cleanup | ⏳ Pending | - |
|
||||
|
||||
---
|
||||
|
||||
## ✅ Phase 1: COMPLETED!
|
||||
|
||||
**Migrated Screens:**
|
||||
1. ✅ `screens/Job/ScreenJobCreate.tsx` - Form with keyboard handling
|
||||
2. ✅ `screens/Job/ScreenJobEdit.tsx` - Form with keyboard handling
|
||||
3. ✅ `screens/Job/ScreenBeranda2.tsx` - List (no keyboard handling needed)
|
||||
4. ✅ `screens/Job/ScreenArchive2.tsx` - List (no keyboard handling needed)
|
||||
5. ✅ `screens/Job/MainViewStatus2.tsx` - List (no keyboard handling needed)
|
||||
6. ✅ `app/(application)/(user)/job/[id]/[status]/detail.tsx` - Detail (no keyboard handling needed)
|
||||
|
||||
**Test Files Deleted:**
|
||||
- ❌ `screens/Job/ScreenJobCreate2.tsx`
|
||||
- ❌ `screens/Job/ScreenJobEdit2.tsx`
|
||||
- ❌ `components/_ShareComponent/TestWrapper.tsx`
|
||||
- ❌ `components/_ShareComponent/TestKeyboardInput.tsx`
|
||||
- ❌ `app/(application)/(user)/test-keyboard.tsx`
|
||||
- ❌ `app/(application)/(user)/test-keyboard-bug.tsx`
|
||||
|
||||
**Routes Updated:**
|
||||
- ✅ `app/(application)/(user)/job/create.tsx` → Uses ScreenJobCreate
|
||||
- ✅ `app/(application)/(user)/job/[id]/edit.tsx` → Uses ScreenJobEdit
|
||||
- ✅ `app/(application)/(user)/job/(tabs)/index.tsx` → Uses ScreenBeranda2
|
||||
- ✅ `app/(application)/(user)/job/(tabs)/archive.tsx` → Uses ScreenArchive2
|
||||
- ✅ `app/(application)/(user)/job/(tabs)/status.tsx` → Uses MainViewStatus2
|
||||
- ✅ `app/(application)/(user)/job/[id]/[status]/detail.tsx` → Migrated to NewWrapper_V2
|
||||
|
||||
**Commits:**
|
||||
- `a9ff755` - feat: Migrate Job screens to NewWrapper_V2
|
||||
- `0f55244` - refactor: Cleanup test files and migrate Job Detail
|
||||
- `7cb4f30` - refactor: Replace NewWrapper with NewWrapper_V2 for all Job screens
|
||||
|
||||
**Total:** 6 screens migrated, 6 test files deleted, 6 routes updated
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Current Status
|
||||
|
||||
**Status**: 🟡 IN PROGRESS
|
||||
**Current Phase**: Phase 1 - Job Screens
|
||||
**Started**: 2026-04-01
|
||||
**ETA**: 2026-04-07 (Phase 1 complete)
|
||||
|
||||
---
|
||||
|
||||
## 📞 Next Actions
|
||||
|
||||
1. **Immediate** (Today):
|
||||
- [ ] Migrate `ScreenJobCreate.tsx`
|
||||
- [ ] Migrate `ScreenJobEdit.tsx`
|
||||
- [ ] Test both screens
|
||||
|
||||
2. **This Week**:
|
||||
- [ ] Delete test files
|
||||
- [ ] Document any issues
|
||||
- [ ] Prepare Phase 2
|
||||
|
||||
3. **Next Week**:
|
||||
- [ ] Start Phase 2 (Event & Profile)
|
||||
- [ ] Review Phase 1 results
|
||||
- [ ] Adjust migration guide if needed
|
||||
|
||||
---
|
||||
|
||||
## 📚 Related Files
|
||||
|
||||
**Components:**
|
||||
- `components/_ShareComponent/NewWrapper.tsx` (Old)
|
||||
- `components/_ShareComponent/NewWrapper_V2.tsx` (New)
|
||||
- `hooks/useKeyboardForm.ts` (Keyboard hook)
|
||||
|
||||
**Documentation:**
|
||||
- `docs/NEWWRAPPER-KEYBOARD-IMPLEMENTATION.md` (Full analysis)
|
||||
- `docs/KEYBOARD-BUG-TEST.md` (Bug investigation)
|
||||
- `tasks/TASK-004-newwrapper-migration.md` (This file)
|
||||
|
||||
**Screens to Migrate:**
|
||||
- `screens/Job/ScreenJobCreate.tsx`
|
||||
- `screens/Job/ScreenJobEdit.tsx`
|
||||
- (More in subsequent phases)
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Risk Mitigation
|
||||
|
||||
**If issues found during migration:**
|
||||
|
||||
1. **Stop migration** for that screen
|
||||
2. **Revert changes** if critical bug
|
||||
3. **Document issue** in detail
|
||||
4. **Fix NewWrapper_V2** if needed
|
||||
5. **Resume migration** after fix
|
||||
|
||||
**Rollback plan:**
|
||||
- Keep old `NewWrapper` until all screens migrated
|
||||
- Easy to revert per screen
|
||||
- No breaking changes to other screens
|
||||
|
||||
---
|
||||
|
||||
## ✅ Success Criteria
|
||||
|
||||
**Phase 1 Complete when:**
|
||||
- [ ] Job Create migrated
|
||||
- [ ] Job Edit migrated
|
||||
- [ ] Both screens tested on iOS & Android
|
||||
- [ ] No critical bugs
|
||||
- [ ] Test files deleted
|
||||
- [ ] Documentation updated
|
||||
|
||||
**Overall Migration Complete when:**
|
||||
- [ ] All form screens migrated
|
||||
- [ ] All screens tested
|
||||
- [ ] Old NewWrapper deprecated/removed
|
||||
- [ ] Team trained on NewWrapper_V2
|
||||
- [ ] Documentation complete
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2026-04-01
|
||||
**Created by**: AI Assistant
|
||||
**Status**: 🟡 IN PROGRESS
|
||||
307
tasks/TASK-005-OS-Wrapper-Implementation.md
Normal file
307
tasks/TASK-005-OS-Wrapper-Implementation.md
Normal file
@@ -0,0 +1,307 @@
|
||||
# TASK-005: OS_Wrapper Implementation
|
||||
|
||||
## 📋 Overview
|
||||
Migrasi dari `NewWrapper` dan `NewWrapper_V2` ke `OS_Wrapper` yang otomatis menyesuaikan dengan platform (iOS/Android).
|
||||
|
||||
## 🎯 Goals
|
||||
- ✅ Mengganti penggunaan `NewWrapper` → `OS_Wrapper` di user screens
|
||||
- ✅ Mengganti penggunaan `NewWrapper_V2` → `OS_Wrapper` di form screens (dengan keyboard handling props)
|
||||
- ✅ Memastikan tabs dan UI konsisten di iOS dan Android
|
||||
- ✅ Backward compatible (wrapper lama tetap ada)
|
||||
- ✅ **SIMPLIFIED**: Satu komponen `OS_Wrapper` untuk semua use cases (tidak ada `PageWrapper` terpisah)
|
||||
|
||||
## 📦 Available Wrappers
|
||||
|
||||
### 1. **OS_Wrapper** (Recommended - Unified API)
|
||||
Auto-detect platform dan routing ke wrapper yang sesuai:
|
||||
- iOS → `IOSWrapper` (berbasis NewWrapper)
|
||||
- Android → `AndroidWrapper` (berbasis NewWrapper_V2 dengan keyboard handling)
|
||||
|
||||
**Props:**
|
||||
```tsx
|
||||
// Base props (kedua platform)
|
||||
withBackground?: boolean;
|
||||
headerComponent?: React.ReactNode;
|
||||
footerComponent?: React.ReactNode;
|
||||
floatingButton?: React.ReactNode;
|
||||
hideFooter?: boolean;
|
||||
edgesFooter?: Edge[];
|
||||
style?: ViewStyle;
|
||||
refreshControl?: RefreshControl;
|
||||
|
||||
// Keyboard handling (Android only - iOS mengabaikan)
|
||||
enableKeyboardHandling?: boolean; // Default: false
|
||||
keyboardScrollOffset?: number; // Default: 100
|
||||
contentPaddingBottom?: number; // Default: 80
|
||||
contentPadding?: number; // Default: 16
|
||||
```
|
||||
|
||||
### 2. **IOSWrapper** / **AndroidWrapper** (Direct Usage)
|
||||
Untuk kasus khusus yang butuh platform-specific behavior.
|
||||
|
||||
## 📝 Migration Guide
|
||||
|
||||
### Before (Old Way)
|
||||
```tsx
|
||||
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
||||
// atau
|
||||
import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";
|
||||
```
|
||||
|
||||
### After (New Way - Unified API)
|
||||
```tsx
|
||||
import { OS_Wrapper } from "@/components";
|
||||
|
||||
// Static mode (simple content)
|
||||
<OS_Wrapper>
|
||||
<YourContent />
|
||||
</OS_Wrapper>
|
||||
|
||||
// List mode (with pagination)
|
||||
<OS_Wrapper
|
||||
listData={data}
|
||||
renderItem={({ item }) => <ItemCard item={item} />}
|
||||
ListEmptyComponent={<EmptyState />}
|
||||
onEndReached={loadMore}
|
||||
/>
|
||||
|
||||
// Form mode (with keyboard handling - Android only)
|
||||
<OS_Wrapper
|
||||
enableKeyboardHandling
|
||||
keyboardScrollOffset={150}
|
||||
contentPaddingBottom={100}
|
||||
footerComponent={<SubmitButton />}
|
||||
>
|
||||
<FormContent />
|
||||
</OS_Wrapper>
|
||||
```
|
||||
|
||||
## 🚀 Implementation Status
|
||||
|
||||
### ✅ Phase 1: Job Screens - COMPLETED (2026-04-06)
|
||||
|
||||
**Files migrated: 8**
|
||||
|
||||
#### Job List Screens (OS_Wrapper):
|
||||
- ✅ `screens/Job/ScreenBeranda.tsx` - ViewWrapper → OS_Wrapper
|
||||
- ✅ `screens/Job/ScreenBeranda2.tsx` - NewWrapper_V2 → OS_Wrapper
|
||||
- ✅ `screens/Job/ScreenArchive.tsx` - ViewWrapper → OS_Wrapper
|
||||
- ✅ `screens/Job/ScreenArchive2.tsx` - NewWrapper_V2 → OS_Wrapper
|
||||
- ✅ `screens/Job/MainViewStatus.tsx` - ViewWrapper → OS_Wrapper
|
||||
- ✅ `screens/Job/MainViewStatus2.tsx` - NewWrapper_V2 → OS_Wrapper
|
||||
|
||||
#### Job Form Screens (OS_Wrapper with keyboard handling):
|
||||
- ✅ `screens/Job/ScreenJobCreate.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling
|
||||
- ✅ `screens/Job/ScreenJobEdit.tsx` - NewWrapper_V2 → OS_Wrapper + enableKeyboardHandling
|
||||
|
||||
**Testing Status:**
|
||||
- ✅ TypeScript: No errors
|
||||
- ✅ Build: Success
|
||||
- ✅ iOS Testing: Complete ✅
|
||||
- ✅ Android Testing: Complete ✅
|
||||
|
||||
**Implementation Notes:**
|
||||
- Semua form screens menggunakan `enableKeyboardHandling` untuk keyboard auto-scroll di Android
|
||||
- Semua list screens menggunakan pagination dengan `onEndReached`
|
||||
- Floating button dan sticky header berfungsi dengan baik
|
||||
- Footer component tetap di posisi bawah
|
||||
|
||||
### ⏳ Phase 2: Other User Screens (Priority: HIGH)
|
||||
|
||||
#### Profile Screens:
|
||||
- [ ] `screens/Profile/ScreenProfile.tsx`
|
||||
- [ ] `screens/Profile/ScreenProfileEdit.tsx` → pakai `enableKeyboardHandling`
|
||||
- [ ] `screens/Profile/ScreenProfileCreate.tsx` → pakai `enableKeyboardHandling`
|
||||
|
||||
#### Forum/Discussion:
|
||||
- [ ] `screens/Forum/ScreenForum.tsx`
|
||||
- [ ] `screens/Forum/ScreenForumDetail.tsx`
|
||||
- [ ] `screens/Forum/ScreenForumCreate.tsx` → pakai `enableKeyboardHandling`
|
||||
|
||||
#### Portfolio:
|
||||
- [ ] `screens/Portfolio/ScreenPortfolio.tsx`
|
||||
- [ ] `screens/Portfolio/ScreenPortfolioCreate.tsx` → pakai `enableKeyboardHandling`
|
||||
- [ ] `screens/Portfolio/ScreenPortfolioEdit.tsx` → pakai `enableKeyboardHandling`
|
||||
|
||||
### ⏳ Phase 3: Admin Screens (Priority: MEDIUM)
|
||||
|
||||
#### Event Management:
|
||||
- [ ] `screens/Admin/Event/ScreenEventList.tsx`
|
||||
- [ ] `screens/Admin/Event/ScreenEventCreate.tsx` → pakai `enableKeyboardHandling`
|
||||
- [ ] `screens/Admin/Event/ScreenEventEdit.tsx` → pakai `enableKeyboardHandling`
|
||||
|
||||
#### Voting Management:
|
||||
- [ ] `screens/Admin/Voting/ScreenVotingList.tsx`
|
||||
- [ ] `screens/Admin/Voting/ScreenVotingCreate.tsx` → pakai `enableKeyboardHandling`
|
||||
- [ ] `screens/Admin/Voting/ScreenVotingEdit.tsx` → pakai `enableKeyboardHandling`
|
||||
|
||||
#### Donation Management:
|
||||
- [ ] `screens/Admin/Donation/ScreenDonationList.tsx`
|
||||
- [ ] `screens/Admin/Donation/ScreenDonationCreate.tsx` → pakai `enableKeyboardHandling`
|
||||
- [ ] `screens/Admin/Donation/ScreenDonationEdit.tsx` → pakai `enableKeyboardHandling`
|
||||
|
||||
### ⏳ Phase 4: Other Screens (Priority: LOW)
|
||||
- [ ] `screens/Investasi/` - Investment screens
|
||||
- [ ] `screens/Kolaborasi/` - Collaboration screens
|
||||
- [ ] Other user-facing screens
|
||||
|
||||
## ✅ Testing Checklist
|
||||
|
||||
Setiap screen yang sudah di-migrate, test:
|
||||
|
||||
### iOS Testing
|
||||
- [ ] UI tampil sesuai design
|
||||
- [ ] Tabs berfungsi dengan baik
|
||||
- [ ] ScrollView/FlatList scroll dengan smooth
|
||||
- [ ] Keyboard tidak menutupi input (jika pakai `enableKeyboardHandling`)
|
||||
- [ ] Footer muncul di posisi yang benar
|
||||
- [ ] Pull to refresh berfungsi (jika ada)
|
||||
|
||||
### Android Testing
|
||||
- [ ] UI tampil sesuai design
|
||||
- [ ] Tabs berfungsi dengan baik
|
||||
- [ ] ScrollView/FlatList scroll dengan smooth
|
||||
- [ ] Keyboard handling: auto scroll saat input focus (jika pakai `enableKeyboardHandling`)
|
||||
- [ ] Footer muncul di posisi yang benar (tidak tertutup navigation bar)
|
||||
- [ ] Pull to refresh berfungsi (jika ada)
|
||||
|
||||
### Common Testing
|
||||
- [ ] Background image muncul (jika `withBackground={true}`)
|
||||
- [ ] Sticky header berfungsi (jika ada `headerComponent`)
|
||||
- [ ] Footer fixed di bottom (jika ada `footerComponent`)
|
||||
- [ ] Floating button muncul (jika ada `floatingButton`)
|
||||
- [ ] Loading skeleton muncul saat pagination
|
||||
- [ ] Empty state muncul saat data kosong
|
||||
|
||||
## 📌 Notes
|
||||
|
||||
### Usage Pattern:
|
||||
|
||||
#### Untuk List Screen:
|
||||
```tsx
|
||||
<OS_Wrapper
|
||||
listData={pagination.listData}
|
||||
renderItem={renderItem}
|
||||
ListEmptyComponent={ListEmptyComponent}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
onEndReached={pagination.loadMore}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={pagination.refreshing}
|
||||
onRefresh={pagination.onRefresh}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
```
|
||||
|
||||
#### Untuk Static Screen:
|
||||
```tsx
|
||||
<OS_Wrapper
|
||||
headerComponent={<HeaderSection />}
|
||||
footerComponent={<FooterSection />}
|
||||
>
|
||||
<YourContent />
|
||||
</OS_Wrapper>
|
||||
```
|
||||
|
||||
#### Untuk Form Screen (dengan keyboard handling):
|
||||
```tsx
|
||||
<OS_Wrapper
|
||||
enableKeyboardHandling
|
||||
keyboardScrollOffset={150}
|
||||
contentPaddingBottom={100}
|
||||
footerComponent={
|
||||
<BoxButtonOnFooter>
|
||||
<ButtonCustom onPress={handleSubmit}>Submit</ButtonCustom>
|
||||
</BoxButtonOnFooter>
|
||||
}
|
||||
>
|
||||
<FormContent />
|
||||
</OS_Wrapper>
|
||||
```
|
||||
|
||||
### Migration Pattern:
|
||||
|
||||
```tsx
|
||||
// OLD
|
||||
import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
||||
|
||||
<NewWrapper
|
||||
listData={data}
|
||||
renderItem={renderItem}
|
||||
headerComponent={header}
|
||||
footerComponent={footer}
|
||||
/>
|
||||
|
||||
// NEW
|
||||
import { OS_Wrapper } from "@/components";
|
||||
|
||||
<OS_Wrapper
|
||||
listData={data}
|
||||
renderItem={renderItem}
|
||||
headerComponent={header}
|
||||
footerComponent={footer}
|
||||
/>
|
||||
```
|
||||
|
||||
```tsx
|
||||
// OLD (Form with keyboard handling)
|
||||
import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";
|
||||
|
||||
<NewWrapper_V2
|
||||
enableKeyboardHandling
|
||||
keyboardScrollOffset={150}
|
||||
>
|
||||
<FormContent />
|
||||
</NewWrapper_V2>
|
||||
|
||||
// NEW (Unified API)
|
||||
import { OS_Wrapper } from "@/components";
|
||||
|
||||
<OS_Wrapper
|
||||
enableKeyboardHandling
|
||||
keyboardScrollOffset={150}
|
||||
>
|
||||
<FormContent />
|
||||
</OS_Wrapper>
|
||||
```
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Issue: Tabs tidak muncul di Android
|
||||
**Solution**: Pastikan tidak ada custom padding yang overriding default behavior. Jika masih bermasalah, cek apakah `contentPadding` atau `contentPaddingBottom` terlalu besar.
|
||||
|
||||
### Issue: Keyboard menutupi input di Android
|
||||
**Solution**: Pastikan pakai `OS_Wrapper` dengan `enableKeyboardHandling={true}`. Adjust `keyboardScrollOffset` jika perlu.
|
||||
|
||||
### Issue: Footer terlalu jauh dari bottom
|
||||
**Solution**: Kurangi `contentPaddingBottom` (default: 80). Untuk list screen tanpa navigation bar overlay, bisa set ke 0.
|
||||
|
||||
### Issue: White space di bottom saat keyboard close (Android)
|
||||
**Solution**: Ini sudah di-fix di AndroidWrapper. Pastikan screen pakai OS_Wrapper, bukan NewWrapper langsung.
|
||||
|
||||
## 📊 Progress Tracking
|
||||
|
||||
| Phase | Total Files | Migrated | Testing | Status |
|
||||
|-------|-------------|----------|---------|--------|
|
||||
| Phase 1 (Job) | 8 | 8 | ✅ Complete | ✅ Complete |
|
||||
| Phase 2 (User) | TBD | 0 | 0 | ⏳ Pending |
|
||||
| Phase 3 (Admin) | TBD | 0 | 0 | ⏳ Pending |
|
||||
| Phase 4 (Other) | TBD | 0 | 0 | ⏳ Pending |
|
||||
| **Total** | **8+** | **8** | **8** | **100% (Phase 1)** |
|
||||
|
||||
## 🔄 Rollback Plan
|
||||
|
||||
Jika ada issue yang tidak bisa di-fix dalam 1 jam:
|
||||
1. Revert perubahan di file yang bermasalah
|
||||
2. Kembali ke NewWrapper/NewWrapper_V2
|
||||
3. Dokumentasikan issue di CHANGE_LOG.md
|
||||
4. Investigasi lebih lanjut dan coba lagi
|
||||
|
||||
---
|
||||
|
||||
**Co-authored-by**: Qwen-Coder <qwen-coder@alibabacloud.com>
|
||||
**Created**: 2026-04-06
|
||||
**Last Updated**: 2026-04-06
|
||||
**Status**: Phase 1 (Job Screens) Complete ✅
|
||||
**Next**: Phase 2 - Other User Screens
|
||||
Reference in New Issue
Block a user