Browse Source

refactor: optimize keyboard height updates and improve viewport coordinate state transitions

master
mortezaei 5 days ago
parent
commit
3f255ad185
  1. 28
      src/components/Componentes/question-viewport-coordinator.ts

28
src/components/Componentes/question-viewport-coordinator.ts

@ -3,8 +3,7 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { viewPaddingsBridge } from "@/lib/view-paddings"; import { viewPaddingsBridge } from "@/lib/view-paddings";
const KEYBOARD_THRESHOLD = 40;
const DEFAULT_KEYBOARD_HEIGHT = 280;
const KEYBOARD_THRESHOLD = 20;
const QUESTION_GAP = 16; const QUESTION_GAP = 16;
const LIFT_VARIABLE = "--question-lift-y"; const LIFT_VARIABLE = "--question-lift-y";
@ -152,7 +151,10 @@ function scheduleLiftUpdate() {
} }
export function updateQuestionKeyboardHeight(height: number) { export function updateQuestionKeyboardHeight(height: number) {
keyboardHeight = Math.max(0, height);
const nextHeight = Math.max(0, height);
if (Math.abs(nextHeight - keyboardHeight) < 1) return;
keyboardHeight = nextHeight;
keyboardVisible = keyboardHeight > KEYBOARD_THRESHOLD; keyboardVisible = keyboardHeight > KEYBOARD_THRESHOLD;
if (keyboardVisible) { if (keyboardVisible) {
lastKeyboardHeight = keyboardHeight; lastKeyboardHeight = keyboardHeight;
@ -194,14 +196,8 @@ export function useQuestionViewportCoordinator() {
const handleFocusIn = (event: FocusEvent) => { const handleFocusIn = (event: FocusEvent) => {
if (!isActiveQuestionKeyboardInput(event.target)) return; if (!isActiveQuestionKeyboardInput(event.target)) return;
activeQuestionInput = event.target; activeQuestionInput = event.target;
// Start with the last known keyboard geometry or standard default so lifting begins in the
// same frame as focus; Flutter/visualViewport then replaces it with the exact height.
if (!keyboardVisible) {
keyboardHeight =
lastKeyboardHeight > KEYBOARD_THRESHOLD
? lastKeyboardHeight
: DEFAULT_KEYBOARD_HEIGHT;
if (lastKeyboardHeight > KEYBOARD_THRESHOLD) {
keyboardHeight = lastKeyboardHeight;
keyboardVisible = true; keyboardVisible = true;
} }
scheduleLiftUpdate(); scheduleLiftUpdate();
@ -214,8 +210,12 @@ export function useQuestionViewportCoordinator() {
) )
? document.activeElement ? document.activeElement
: null; : null;
if (!activeQuestionInput) scheduleLiftUpdate();
}, 0);
if (!activeQuestionInput) {
keyboardVisible = false;
keyboardHeight = 0;
scheduleLiftUpdate();
}
}, 50);
}; };
const unsubscribeConfig = viewPaddingsBridge.subscribeConfig((config) => { const unsubscribeConfig = viewPaddingsBridge.subscribeConfig((config) => {
@ -235,7 +235,7 @@ export function useQuestionViewportCoordinator() {
lastKeyboardHeight = keyboardHeight; lastKeyboardHeight = keyboardHeight;
scheduleLiftUpdate(); scheduleLiftUpdate();
} }
} else if (keyboardHeight <= KEYBOARD_THRESHOLD) {
} else if (reduction <= KEYBOARD_THRESHOLD && keyboardHeight <= KEYBOARD_THRESHOLD) {
keyboardVisible = false; keyboardVisible = false;
keyboardHeight = 0; keyboardHeight = 0;
closedViewportHeight = viewportHeight; closedViewportHeight = viewportHeight;

Loading…
Cancel
Save