feat: dynamic adjust compose height on mobile

https://mask.atlassian.net/browse/FW-2318
DimensionDev · Sep 24, 2024 · b8733be · b8733be
1 parent 60639fb
commit b8733be
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 6 deletions.
diff --git a/src/components/Compose/ComposeUI.tsx b/src/components/Compose/ComposeUI.tsx
@@ -21,6 +21,7 @@ import { useCompositePost } from '@/hooks/useCompositePost.js';
 import { useIsMedium } from '@/hooks/useMediaQuery.js';
 import { useComposeScheduleStateStore } from '@/store/useComposeScheduleStore.js';
 import { useComposeStateStore } from '@/store/useComposeStore.js';
+import { useGlobalState } from '@/store/useGlobalStore.js';
 
 export function Title() {
     const { type } = useComposeStateStore();
@@ -40,6 +41,7 @@ export function Title() {
 
 export const ComposeUI = memo(function ComposeUI() {
     const isMedium = useIsMedium();
+    const { keyboardHeight } = useGlobalState();
     const { type, posts, updateVideo, updateImages } = useComposeStateStore();
     const { scheduleTime } = useComposeScheduleStateStore();
 
@@ -83,7 +85,7 @@ export const ComposeUI = memo(function ComposeUI() {
             <div
                 className={classNames(
                     'flex flex-col overflow-auto px-4 pb-4',
-                    isMedium ? 'h-full' : 'max-h-[300px] min-h-[300px]',
+                    isMedium ? 'h-full' : keyboardHeight ? 'flex-1' : 'max-h-[300px] min-h-[300px]',
                 )}
             >
                 <UploadDropArea
@@ -98,9 +100,14 @@ export const ComposeUI = memo(function ComposeUI() {
                 </UploadDropArea>
             </div>
 
-            <ComposeActions />
+            <div>
+                <p>keyboardHeight: {keyboardHeight}</p>
+                <ComposeActions />
+            </div>
 
             {isMedium ? <ComposeSend /> : null}
+
+            {!isMedium && keyboardHeight > 0 ? <div style={{ height: keyboardHeight }} /> : null}
         </>
     );
 });
diff --git a/src/components/Compose/Editor.tsx b/src/components/Compose/Editor.tsx
@@ -7,7 +7,7 @@ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin.js';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin.js';
 import { $dfs } from '@lexical/utils';
 import { Select, t, Trans } from '@lingui/macro';
-import { memo } from 'react';
+import { memo, useCallback, useEffect, useRef } from 'react';
 import { useDebounce } from 'react-use';
 
 import { $isMentionNode } from '@/components/Lexical/nodes/MentionsNode.js';
@@ -16,6 +16,7 @@ import { LexicalAutoLinkPlugin } from '@/components/Lexical/plugins/AutoLinkPlug
 import { CHAR_TAG, type Chars, writeChars } from '@/helpers/chars.js';
 import { classNames } from '@/helpers/classNames.js';
 import { type CompositePost, useComposeStateStore } from '@/store/useComposeStore.js';
+import { useGlobalState } from '@/store/useGlobalStore.js';
 
 function ErrorBoundaryComponent() {
     return (
@@ -31,6 +32,8 @@ interface EditorProps {
 }
 
 export const Editor = memo(function Editor({ post, replying }: EditorProps) {
+    const timer = useRef<number>(0);
+    const { keyboardHeight, innerHeight, updateKeyboardHeight } = useGlobalState();
     const { type, posts, updateChars, loadComponentsFromChars } = useComposeStateStore();
 
     const { chars } = post;
@@ -44,13 +47,33 @@ export const Editor = memo(function Editor({ post, replying }: EditorProps) {
         [chars, loadComponentsFromChars],
     );
 
+    useEffect(() => () => clearInterval(timer.current), []);
+
+    const handleFocus = useCallback(() => {
+        if (!keyboardHeight) {
+            timer.current = window.setInterval(() => {
+                if (window.innerHeight !== innerHeight) {
+                    updateKeyboardHeight(innerHeight - window.innerHeight);
+                    clearInterval(timer.current);
+                }
+            }, 50);
+        }
+    }, [keyboardHeight, innerHeight, updateKeyboardHeight]);
+
+    const handleBlur = useCallback(() => {
+        clearInterval(timer.current);
+        updateKeyboardHeight(0);
+    }, [updateKeyboardHeight]);
+
     return (
         <>
             <PlainTextPlugin
                 contentEditable={
                     <ContentEditable
                         key="editable"
                         className="flex-1 flex-shrink-0 cursor-text resize-none appearance-none border-none bg-transparent p-0 pb-2 text-left text-[16px] leading-6 text-main outline-none outline-0 focus:ring-0"
+                        onFocus={handleFocus}
+                        onBlur={handleBlur}
                     />
                 }
                 placeholder={

diff --git a/src/components/ComposeButton/ComposeButtonForMobile.tsx b/src/components/ComposeButton/ComposeButtonForMobile.tsx
@@ -13,7 +13,7 @@ import { ComposeModalRef } from '@/modals/controls.js';
 import { useGlobalState } from '@/store/useGlobalStore.js';
 
 export function ComposeButtonForMobile() {
-    const currentSource = useGlobalState.use.currentSource();
+    const { currentSource, updateInnerHeight } = useGlobalState();
     const currentSocialSource = narrowToSocialSource(currentSource);
 
     const pathname = usePathname();
@@ -25,14 +25,15 @@ export function ComposeButtonForMobile() {
     const currentPost = useCurrentVisitingPost();
     const currentChannel = useCurrentVisitingChannel();
 
-    if (!isLogin) return null;
-    if (isPostPage && !isCurrentLogin) return null;
+    // if (!isLogin) return null;
+    // if (isPostPage && !isCurrentLogin) return null;
     if (isArticlePage || currentSource === Source.NFTs || currentSource === Source.Article || isNFTPage) return null;
 
     return (
         <ClickableButton
             className="fixed bottom-4 right-4 z-40 flex h-16 w-16 items-center justify-center rounded-full bg-fireflyBrand text-white outline-none dark:bg-white dark:text-fireflyBrand"
             onClick={() => {
+                updateInnerHeight(window.innerHeight);
                 ComposeModalRef.open({
                     type: isPostPage ? 'reply' : 'compose',
                     post: currentPost,

diff --git a/src/store/useGlobalStore.ts b/src/store/useGlobalStore.ts
@@ -19,6 +19,10 @@ interface GlobalState {
     updateCurrentSource: (source: Source) => void;
     collapsedConnectWallet: boolean;
     updateCollapsedConnectWallet: (collapsed: boolean) => void;
+    innerHeight: number;
+    updateInnerHeight: (height: number) => void;
+    keyboardHeight: number;
+    updateKeyboardHeight: (height: number) => void;
 }
 
 const useGlobalStateBase = create<GlobalState, [['zustand/persist', unknown], ['zustand/immer', never]]>(
@@ -65,6 +69,18 @@ const useGlobalStateBase = create<GlobalState, [['zustand/persist', unknown], ['
                     state.collapsedConnectWallet = collapsed;
                 });
             },
+            innerHeight: 0,
+            updateInnerHeight(height) {
+                set((state) => {
+                    state.innerHeight = height;
+                });
+            },
+            keyboardHeight: 0,
+            updateKeyboardHeight(height) {
+                set((state) => {
+                    state.keyboardHeight = height;
+                });
+            },
         })),
         {
             name: 'global-state',