From 5ba979b8c7378c3dcaebf311db484f75ef31f403 Mon Sep 17 00:00:00 2001 From: emil Date: Thu, 5 Sep 2024 13:05:12 -0700 Subject: [PATCH] remove bad behavior --- src/index.tsx | 112 +++++++++++++++++++++++++------------------------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index cdff9f9..d2ed1eb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -351,62 +351,62 @@ function Root({ }; }, []); - React.useEffect(() => { - function onVisualViewportChange() { - if (!drawerRef.current) return; - - const focusedElement = document.activeElement as HTMLElement; - if (isInput(focusedElement) || keyboardIsOpen.current) { - const visualViewportHeight = window.visualViewport?.height || 0; - // This is the height of the keyboard - let diffFromInitial = window.innerHeight - visualViewportHeight; - const drawerHeight = drawerRef.current.getBoundingClientRect().height || 0; - if (!initialDrawerHeight.current) { - initialDrawerHeight.current = drawerHeight; - } - const offsetFromTop = drawerRef.current.getBoundingClientRect().top; - - // visualViewport height may change due to some subtle changes to the keyboard. Checking if the height changed by 60 or more will make sure that they keyboard really changed its open state. - if (Math.abs(previousDiffFromInitial.current - diffFromInitial) > 60) { - keyboardIsOpen.current = !keyboardIsOpen.current; - } - - if (snapPoints && snapPoints.length > 0 && snapPointsOffset && activeSnapPointIndex) { - const activeSnapPointHeight = snapPointsOffset[activeSnapPointIndex] || 0; - diffFromInitial += activeSnapPointHeight; - } - - previousDiffFromInitial.current = diffFromInitial; - // We don't have to change the height if the input is in view, when we are here we are in the opened keyboard state so we can correctly check if the input is in view - if (drawerHeight > visualViewportHeight || keyboardIsOpen.current) { - const height = drawerRef.current.getBoundingClientRect().height; - let newDrawerHeight = height; - - if (height > visualViewportHeight) { - newDrawerHeight = visualViewportHeight - WINDOW_TOP_OFFSET; - } - // When fixed, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open - if (fixed) { - drawerRef.current.style.height = `${height - Math.max(diffFromInitial, 0)}px`; - } else { - drawerRef.current.style.height = `${Math.max(newDrawerHeight, visualViewportHeight - offsetFromTop)}px`; - } - } else { - drawerRef.current.style.height = `${initialDrawerHeight.current}px`; - } - - if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) { - drawerRef.current.style.bottom = `0px`; - } else { - // Negative bottom value would never make sense - drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`; - } - } - } - - window.visualViewport?.addEventListener('resize', onVisualViewportChange); - return () => window.visualViewport?.removeEventListener('resize', onVisualViewportChange); - }, [activeSnapPointIndex, snapPoints, snapPointsOffset]); + // React.useEffect(() => { + // function onVisualViewportChange() { + // if (!drawerRef.current) return; + + // const focusedElement = document.activeElement as HTMLElement; + // if (isInput(focusedElement) || keyboardIsOpen.current) { + // const visualViewportHeight = window.visualViewport?.height || 0; + // // This is the height of the keyboard + // let diffFromInitial = window.innerHeight - visualViewportHeight; + // const drawerHeight = drawerRef.current.getBoundingClientRect().height || 0; + // if (!initialDrawerHeight.current) { + // initialDrawerHeight.current = drawerHeight; + // } + // const offsetFromTop = drawerRef.current.getBoundingClientRect().top; + + // // visualViewport height may change due to some subtle changes to the keyboard. Checking if the height changed by 60 or more will make sure that they keyboard really changed its open state. + // if (Math.abs(previousDiffFromInitial.current - diffFromInitial) > 60) { + // keyboardIsOpen.current = !keyboardIsOpen.current; + // } + + // if (snapPoints && snapPoints.length > 0 && snapPointsOffset && activeSnapPointIndex) { + // const activeSnapPointHeight = snapPointsOffset[activeSnapPointIndex] || 0; + // diffFromInitial += activeSnapPointHeight; + // } + + // previousDiffFromInitial.current = diffFromInitial; + // // We don't have to change the height if the input is in view, when we are here we are in the opened keyboard state so we can correctly check if the input is in view + // if (drawerHeight > visualViewportHeight || keyboardIsOpen.current) { + // const height = drawerRef.current.getBoundingClientRect().height; + // let newDrawerHeight = height; + + // if (height > visualViewportHeight) { + // newDrawerHeight = visualViewportHeight - WINDOW_TOP_OFFSET; + // } + // // When fixed, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open + // if (fixed) { + // drawerRef.current.style.height = `${height - Math.max(diffFromInitial, 0)}px`; + // } else { + // drawerRef.current.style.height = `${Math.max(newDrawerHeight, visualViewportHeight - offsetFromTop)}px`; + // } + // } else { + // drawerRef.current.style.height = `${initialDrawerHeight.current}px`; + // } + + // if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) { + // drawerRef.current.style.bottom = `0px`; + // } else { + // // Negative bottom value would never make sense + // drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`; + // } + // } + // } + + // window.visualViewport?.addEventListener('resize', onVisualViewportChange); + // return () => window.visualViewport?.removeEventListener('resize', onVisualViewportChange); + // }, [activeSnapPointIndex, snapPoints, snapPointsOffset]); function closeDrawer() { if (!drawerRef.current) return;