bagasbanuna
1a5ca78041
OS_Wrapper System: - Simplify API: Remove PageWrapper, merge keyboard props into OS_Wrapper - Add auto-scroll when keyboard appears (Android only) - Add tap-to-dismiss keyboard for both Static and List modes - Fix contentPaddingBottom default to 250px (prevent keyboard overlap) - Change default contentPadding to 0 (per-screen control) - Remove Platform.OS checks from IOSWrapper and AndroidWrapper Constants: - Add PADDING_INLINE constant (16px) for consistent inline padding - Add OS_PADDING_TOP constants for tab layouts Job Screens Migration (9 files): - Apply PADDING_INLINE to all Job screens: - ScreenBeranda, ScreenBeranda2 - ScreenArchive, ScreenArchive2 - MainViewStatus, MainViewStatus2 - ScreenJobCreate, ScreenJobEdit - Job detail screen Keyboard Handling: - Simplified useKeyboardForm hook - Auto-scroll by keyboard height when keyboard appears - Track scroll position for accurate scroll targets - TouchableWithoutFeedback wraps all content for tap-to-dismiss Documentation: - Update TASK-005 with Phase 1 completion status - Update Quick Reference with unified API examples Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
// 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;
|
|
}
|