refactor(mobile): improve emoji picker ux flow

Author: HMarzban

packages/webapp/components/BottomSheet.tsx

@@ -1,11 +1,9 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import { Sheet, SheetProps } from 'react-modal-sheet'
-
 import { useSheetStore, useChatStore, useStore } from '@stores'
 import FilterModal from '@components/pages/document/components/FilterModal'
 import NotificationModal from './notificationPanel/mobile/NotificationModal'
 import ChatContainerMobile from './pages/document/components/chat/ChatContainerMobile'
-import useKeyboardHeight from '@hooks/useKeyboardHeight'
 import { EmojiPanel } from './chat/components/EmojiPanel'
 import { CHAT_OPEN } from '@services/eventsHub'
 
@@ -15,8 +13,11 @@ const BottomSheet = () => {
   const closeChatRoom = useChatStore((state) => state.closeChatRoom)
   const destroyChatRoom = useChatStore((state) => state.destroyChatRoom)
   const setSheetContainerRef = useSheetStore((state) => state.setSheetContainerRef)
-  const { height: keyboardHeight } = useKeyboardHeight()
+  const setSheetState = useSheetStore((state) => state.setSheetState)
+  const { keyboardHeight, virtualKeyboardState } = useStore((state) => state)
   const { deviceDetect } = useStore((state) => state.settings)
+  const sheetContentRef = useRef<HTMLDivElement>(null)
+
   const isDeviceIOS = useMemo(() => {
     return deviceDetect?.os() === 'iOS'
   }, [deviceDetect])
@@ -75,58 +76,60 @@ const BottomSheet = () => {
     }
   }
 
-  const getSheetContentProps = () => {
-    switch (activeSheet) {
-      case 'filters':
-        return {
-          // Fix the bottom sheet height when keyboard is open
-          style: { paddingBottom: isDeviceIOS ? keyboardHeight : 0 }
-        }
-      case 'chatroom':
-        return {
-          style: {
-            paddingBottom: isDeviceIOS ? keyboardHeight : 0
-          }
-        }
-      case 'emojiPicker':
-        return {
-          style: {
-            paddingBottom: isDeviceIOS ? keyboardHeight : 0
-          }
-        }
-      default:
-        return {}
-    }
-  }
-
   const handleClose = () => {
     if (activeSheet === 'chatroom') {
       closeChatRoom()
       destroyChatRoom()
     } else if (activeSheet === 'emojiPicker' && sheetData.chatRoomState) {
       const { headingId } = sheetData.chatRoomState
-      closeSheet()
-      setTimeout(() => {
-        PubSub.publish(CHAT_OPEN, {
-          headingId: headingId,
-          focusEditor: true,
-          clearSheetState: true
-        })
-      }, 100)
+      PubSub.publish(CHAT_OPEN, {
+        headingId: headingId,
+        focusEditor: true,
+        clearSheetState: true,
+        switchSheet: 'chatroom'
+      })
     } else {
       closeSheet()
     }
   }
 
+  useEffect(() => {
+    if (!sheetContentRef.current) return
+
+    const paddingBottom = isDeviceIOS ? Math.round(keyboardHeight).toString() + 'px' : '0px'
+
+    switch (activeSheet) {
+      case 'filters':
+        sheetContentRef.current.style.paddingBottom = paddingBottom
+      case 'chatroom':
+        sheetContentRef.current.style.paddingBottom = paddingBottom
+      case 'emojiPicker':
+        sheetContentRef.current.style.paddingBottom =
+          virtualKeyboardState === 'open' ? paddingBottom : '0px'
+      default:
+        return
+    }
+  }, [sheetContentRef, activeSheet, keyboardHeight, isDeviceIOS, virtualKeyboardState])
+
+  // NOTE: these events are more reliable than the other events for sheet state
+  const onOpenEndHandler = () => setSheetState('closed')
+  const onViewportEnterHandler = () => setSheetState('open')
+  const onOpenStartHandler = () => setSheetState('opening')
+  const onCloseStartHandler = () => setSheetState('closing')
+
   return (
     <Sheet
       className="bottom-sheet"
       isOpen={!!activeSheet}
       onClose={handleClose}
+      onCloseStart={onCloseStartHandler}
+      onOpenStart={onOpenStartHandler}
+      onOpenEnd={onOpenEndHandler}
+      onViewportEnter={onViewportEnterHandler}
       {...getSheetProps()}>
-      <Sheet.Container ref={setSheetContainerRef}>
+      <Sheet.Container ref={setSheetContainerRef} onViewportEnter={onViewportEnterHandler}>
         <Sheet.Header />
-        <Sheet.Content {...getSheetContentProps()}>{renderContent()}</Sheet.Content>
+        <Sheet.Content ref={sheetContentRef}>{renderContent()}</Sheet.Content>
       </Sheet.Container>
       <Sheet.Backdrop onTap={handleClose} />
     </Sheet>

packages/webapp/components/chat/components/ChannelActionBar.tsx

@@ -8,11 +8,10 @@ import { useChannel } from '../context/ChannelProvider'
 import SignInToJoinChannel from './SignInToJoinChannel'
 import { TChannelSettings } from '@types'
 import MessageComposer from './MessageComposer/MessageComposer'
-import useKeyboardHeight from '@hooks/useKeyboardHeight'
 import { useMessageComposer } from './MessageComposer/hooks/useMessageComposer'
 
 const MobileToolbar = () => {
-  const { isOpen: isKeyboardOpen } = useKeyboardHeight()
+  const { isKeyboardOpen } = useStore((state) => state)
   const { isToolbarOpen, toggleToolbar } = useMessageComposer()
 
   if (!isKeyboardOpen) return null

packages/webapp/components/chat/components/EmojiPanel/Selector.tsx

@@ -19,7 +19,6 @@ export const EmojiSelector = () => {
 
       PubSub.publish(CHAT_OPEN, {
         headingId: headingId,
-        focusEditor: true,
         insertContent: emoji.native,
         clearSheetState: true
       })

packages/webapp/components/chat/components/MessageComposer/Mobile/MobileWrapper.tsx

@@ -1,6 +1,5 @@
 import { useSheetStore, useStore } from '@stores'
 import { useEffect } from 'react'
-import useKeyboardHeight from '@hooks/useKeyboardHeight'
 import { applyStyles } from '../helpers/domUtils'
 
 type Props = {
@@ -21,7 +20,7 @@ const SHEET_STYLES = {
 
 export const MobileWrapper = ({ children }: Props) => {
   const { sheetContainerRef } = useSheetStore()
-  const { isOpen: isKeyboardOpen } = useKeyboardHeight()
+  const { isKeyboardOpen } = useStore((state) => state)
   const {
     settings: {
       editor: { isMobile }

packages/webapp/components/chat/components/MessageComposer/components/Actions/ActionButtons/EmojiButton.tsx

@@ -29,7 +29,7 @@ const getCaretPosition = (editor: Editor) => {
 export const EmojiButton = ({ className, size = 20, ...props }: Props) => {
   const { editor } = useMessageComposer()
   const { toggleEmojiPicker } = useChatStore()
-  const { openSheet, closeSheet } = useSheetStore()
+  const { switchSheet } = useSheetStore()
   const { chatRoom } = useChatStore()
   const {
     settings: {
@@ -73,8 +73,7 @@ export const EmojiButton = ({ className, size = 20, ...props }: Props) => {
     if (!editor) return
 
     if (isMobile) {
-      closeSheet()
-      openSheet('emojiPicker', {
+      switchSheet('emojiPicker', {
         chatRoomState: { ...chatRoom }
       })
     } else {

packages/webapp/components/pages/document/components/BigPencilBtn.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { useStore } from '@stores'
-import useDetectKeyboardOpen from 'use-detect-keyboard-open'
 import { Pencil } from '@icons'
 
 const BigPencilBtn = () => {
@@ -9,7 +8,7 @@ const BigPencilBtn = () => {
       editor: { isMobile, instance: editor, selectionPos }
     }
   } = useStore((state) => state)
-  const isKeyboardOpen = useDetectKeyboardOpen() || false
+  const { isKeyboardOpen } = useStore((state) => state)
 
   const toggleToolbar = () => {
     if (!isMobile) return

packages/webapp/components/pages/document/components/MobileEditor.tsx

@@ -1,21 +1,19 @@
 import { useEffect, useRef, useState } from 'react'
 import EditorContent from './EditorContent'
 import ToolbarMobile from './toolbarMobile/ToolbarMobile'
-import { useChatStore } from '@stores'
+import { useChatStore, useStore } from '@stores'
 import { useAdjustEditorSizeForChatRoom } from '../hooks'
 import useEditableDocControl from '@components/pages/document/hooks/useEditableDocControl'
 import usePageHeightAdjust from '@components/pages/document/hooks/usePageHeightAdjust'
 import useUpdateDocPageUnreadMsg from '@components/pages/document/hooks/useUpdateDocPageUnreadMsg'
 import { MobileBubbleMenu } from './MobileBubbleMenu'
-import { animate, useMotionValue } from 'motion/react'
-import useKeyboardHeight from '@hooks/useKeyboardHeight'
 
 const Editor = () => {
   const editorWrapperRef = useRef<HTMLDivElement>(null)
 
   const chatRoom = useChatStore((state) => state.chatRoom)
 
-  const { isOpen: isKeyboardOpen, height: keyboardHeight, viewportHeight } = useKeyboardHeight()
+  const { isKeyboardOpen } = useStore((state) => state)
 
   // @ts-ignore
   useAdjustEditorSizeForChatRoom(editorWrapperRef)

packages/webapp/components/pages/document/hooks/useEditableDocControl.tsx

@@ -1,5 +1,4 @@
 import { useEffect } from 'react'
-import useDetectKeyboardOpen from 'use-detect-keyboard-open'
 import { useStore } from '@stores'
 
 const useEditableDocControl = () => {
@@ -8,7 +7,7 @@ const useEditableDocControl = () => {
     editor: { instance: editor, loading }
   } = useStore((state) => state.settings)
 
-  const isKeyboardOpen = useDetectKeyboardOpen() || false
+  const { isKeyboardOpen } = useStore((state) => state)
 
   useEffect(() => {
     if (!editor) return

packages/webapp/components/pages/document/layouts/MobileLayout.tsx

@@ -8,6 +8,7 @@ import { ModalDrawer } from '@components/ui/ModalDrawer'
 import { useHashRouter } from '@hooks/useHashRouter'
 import MobileHistory from '@components/pages/history/mobile/MobileHistory'
 import BottomSheet from '@components/BottomSheet'
+import useVirtualKeyboard from '@hooks/useVirtualKeyboard'
 
 const MobileLeftSidePanel = ({ filterModalRef }: any) => {
   return (
@@ -28,6 +29,7 @@ const MobileLayout = () => {
   const deviceClass = isMobile ? 'm_mobile' : 'm_desktop'
 
   const isHistoryView = useHashRouter()
+  useVirtualKeyboard()
 
   if (isHistoryView) return <MobileHistory />
 

…ckages/webapp/hooks/useKeyboardHeight.ts …kages/webapp/hooks/useVirtualKeyboard.tspackages/webapp/hooks/useKeyboardHeight.ts renamed to packages/webapp/hooks/useVirtualKeyboard.ts packages/webapp/hooks/useKeyboardHeight.ts renamed to packages/webapp/hooks/useVirtualKeyboard.ts

@@ -1,17 +1,8 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import { useStore } from '@stores'
 
-interface KeyboardState {
-  isOpen: boolean
-  height: number
-  viewportHeight: number
-}
-
-const useKeyboardHeight = (): KeyboardState => {
-  const [keyboardState, setKeyboardState] = useState<KeyboardState>({
-    isOpen: false,
-    height: 0,
-    viewportHeight: window.innerHeight
-  })
+const useVirtualKeyboard = () => {
+  const { setKeyboardOpen, setKeyboardHeight, setVirtualKeyboardState } = useStore((state) => state)
 
   useEffect(() => {
     const visualViewport = window.visualViewport
@@ -27,11 +18,9 @@ const useKeyboardHeight = (): KeyboardState => {
       const keyboardHeight = windowHeight - viewportHeight
       const isKeyboardOpen = keyboardHeight > 0
 
-      setKeyboardState({
-        isOpen: isKeyboardOpen,
-        height: keyboardHeight,
-        viewportHeight: viewportHeight
-      })
+      setKeyboardOpen(isKeyboardOpen)
+      setKeyboardHeight(keyboardHeight)
+      setVirtualKeyboardState(isKeyboardOpen ? 'open' : 'closed')
     }
 
     // Initial check
@@ -46,8 +35,6 @@ const useKeyboardHeight = (): KeyboardState => {
       visualViewport.removeEventListener('scroll', handleViewportChange)
     }
   }, [])
-
-  return keyboardState
 }
 
-export default useKeyboardHeight
+export default useVirtualKeyboard