46 lines
1.6 KiB
JavaScript
46 lines
1.6 KiB
JavaScript
const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
|
|
let react = require("react");
|
|
|
|
//#region src/hooks/use-keyboard-height.tsx
|
|
/**
|
|
* Hook to detect mobile keyboard appearance and calculate available viewport height.
|
|
* Uses the Visual Viewport API to track keyboard state on mobile devices.
|
|
*
|
|
* @returns KeyboardState object with keyboard information
|
|
*/
|
|
function useKeyboardHeight() {
|
|
const [keyboardState, setKeyboardState] = (0, react.useState)({
|
|
isKeyboardOpen: false,
|
|
keyboardHeight: 0,
|
|
availableHeight: typeof window !== "undefined" ? window.innerHeight : 0,
|
|
viewportHeight: typeof window !== "undefined" ? window.innerHeight : 0
|
|
});
|
|
(0, react.useEffect)(() => {
|
|
if (typeof window === "undefined") return;
|
|
const visualViewport = window.visualViewport;
|
|
if (!visualViewport) return;
|
|
const updateKeyboardState = () => {
|
|
const layoutHeight = window.innerHeight;
|
|
const visualHeight = visualViewport.height;
|
|
const keyboardHeight = Math.max(0, layoutHeight - visualHeight);
|
|
setKeyboardState({
|
|
isKeyboardOpen: keyboardHeight > 150,
|
|
keyboardHeight,
|
|
availableHeight: visualHeight,
|
|
viewportHeight: layoutHeight
|
|
});
|
|
};
|
|
updateKeyboardState();
|
|
visualViewport.addEventListener("resize", updateKeyboardState);
|
|
visualViewport.addEventListener("scroll", updateKeyboardState);
|
|
return () => {
|
|
visualViewport.removeEventListener("resize", updateKeyboardState);
|
|
visualViewport.removeEventListener("scroll", updateKeyboardState);
|
|
};
|
|
}, []);
|
|
return keyboardState;
|
|
}
|
|
|
|
//#endregion
|
|
exports.useKeyboardHeight = useKeyboardHeight;
|
|
//# sourceMappingURL=use-keyboard-height.cjs.map
|