feat: Implement OS_Wrapper system and migrate all Job screens
Create OS-specific wrapper system: - Add IOSWrapper (based on NewWrapper for iOS) - Add AndroidWrapper (based on NewWrapper_V2 with keyboard handling) - Add OS_Wrapper (auto platform detection) - Add PageWrapper (with keyboard handling for Android forms) Migrate all Job screens (8 files): - ScreenJobCreate: NewWrapper_V2 → PageWrapper - ScreenJobEdit: NewWrapper_V2 → PageWrapper - ScreenBeranda2: NewWrapper_V2 → OS_Wrapper - ScreenArchive2: NewWrapper_V2 → OS_Wrapper - MainViewStatus2: NewWrapper_V2 → OS_Wrapper - ScreenBeranda: ViewWrapper → OS_Wrapper - ScreenArchive: ViewWrapper → OS_Wrapper - MainViewStatus: ViewWrapper → OS_Wrapper Benefits: - Automatic platform detection (no manual Platform.OS checks) - Consistent tabs behavior across iOS and Android - Keyboard handling for forms (Android only) - Cleaner code with unified API Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
237
components/_ShareComponent/AndroidWrapper.tsx
Normal file
237
components/_ShareComponent/AndroidWrapper.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
// @/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,
|
||||
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 { 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 = 100,
|
||||
contentPaddingBottom = 80,
|
||||
contentPadding = 16,
|
||||
} = 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>
|
||||
);
|
||||
}
|
||||
|
||||
export default AndroidWrapper;
|
||||
217
components/_ShareComponent/IOSWrapper.tsx
Normal file
217
components/_ShareComponent/IOSWrapper.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
// @/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,
|
||||
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";
|
||||
|
||||
// --- 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={Platform.OS === "ios" ? "padding" : "height"}
|
||||
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={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
|
||||
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={Platform.OS === "ios" ? "padding" : "height"}
|
||||
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={Platform.OS === "ios" ? edgesFooter : ["bottom"]}
|
||||
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;
|
||||
161
components/_ShareComponent/OS_Wrapper.tsx
Normal file
161
components/_ShareComponent/OS_Wrapper.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
// @/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"];
|
||||
}
|
||||
|
||||
// ========== PageWrapper Props (Android-specific keyboard handling) ==========
|
||||
interface PageWrapperBaseProps extends BaseProps {
|
||||
/**
|
||||
* Enable keyboard handling (Android only - NewWrapper_V2)
|
||||
* 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;
|
||||
}
|
||||
|
||||
interface PageWrapperStaticProps extends PageWrapperBaseProps {
|
||||
children: React.ReactNode;
|
||||
listData?: never;
|
||||
renderItem?: never;
|
||||
}
|
||||
|
||||
interface PageWrapperListProps extends PageWrapperBaseProps {
|
||||
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 OS_WrapperProps = StaticModeProps | ListModeProps;
|
||||
type PageWrapperProps = PageWrapperStaticProps | PageWrapperListProps;
|
||||
|
||||
/**
|
||||
* OS_Wrapper - Automatically selects iOSWrapper or AndroidWrapper based on platform
|
||||
*
|
||||
* @example Static Mode
|
||||
* ```tsx
|
||||
* <OS_Wrapper>
|
||||
* <YourContent />
|
||||
* </OS_Wrapper>
|
||||
* ```
|
||||
*
|
||||
* @example List Mode
|
||||
* ```tsx
|
||||
* <OS_Wrapper
|
||||
* listData={data}
|
||||
* renderItem={({ item }) => <ItemCard item={item} />}
|
||||
* ListEmptyComponent={<EmptyState />}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export function OS_Wrapper(props: OS_WrapperProps) {
|
||||
// iOS uses IOSWrapper (based on NewWrapper)
|
||||
if (Platform.OS === "ios") {
|
||||
return <IOSWrapper {...props} />;
|
||||
}
|
||||
|
||||
// Android uses AndroidWrapper (based on NewWrapper_V2 with keyboard handling)
|
||||
return <AndroidWrapper {...props} />;
|
||||
}
|
||||
|
||||
/**
|
||||
* PageWrapper - OS_Wrapper with keyboard handling support (Android only)
|
||||
* Use this for forms with input fields
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <PageWrapper enableKeyboardHandling keyboardScrollOffset={150}>
|
||||
* <FormContent />
|
||||
* </PageWrapper>
|
||||
* ```
|
||||
*/
|
||||
export function PageWrapper(props: PageWrapperProps) {
|
||||
// iOS: Keyboard handling props are ignored
|
||||
if (Platform.OS === "ios") {
|
||||
const {
|
||||
enableKeyboardHandling: _,
|
||||
keyboardScrollOffset: __1,
|
||||
contentPaddingBottom: __2,
|
||||
contentPadding: __3,
|
||||
...iosProps
|
||||
} = props;
|
||||
return <IOSWrapper {...iosProps} />;
|
||||
}
|
||||
|
||||
// Android: Keyboard handling props are used
|
||||
return <AndroidWrapper {...props} />;
|
||||
}
|
||||
|
||||
// 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;
|
||||
Reference in New Issue
Block a user