From 13a1ee7479de8d1d5befb02a6cbab73b04a2c75b Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Thu, 11 May 2023 11:41:53 +0400 Subject: [PATCH] Fix composer max height on some Android devices (#15871) * fix: android keyboard height --- .../contexts/chat/composer/effects.cljs | 12 +-- .../contexts/chat/composer/handlers.cljs | 2 +- .../contexts/chat/composer/keyboard.cljs | 12 +-- .../contexts/chat/composer/mentions/view.cljs | 20 +++-- .../contexts/chat/composer/utils.cljs | 7 +- .../contexts/chat/composer/view.cljs | 78 +++++++++---------- 6 files changed, 65 insertions(+), 66 deletions(-) diff --git a/src/status_im2/contexts/chat/composer/effects.cljs b/src/status_im2/contexts/chat/composer/effects.cljs index 4628fedf32..b8e55d6614 100644 --- a/src/status_im2/contexts/chat/composer/effects.cljs +++ b/src/status_im2/contexts/chat/composer/effects.cljs @@ -37,10 +37,12 @@ (js/setTimeout #(reset! lock-layout? true) 500))) (defn kb-default-height-effect - [{:keys [kb-default-height]}] - (when-not @kb-default-height + [{:keys [kb-default-height kb-height]}] + (when (zero? @kb-default-height) (async-storage/get-item :kb-default-height - #(reset! kb-default-height (utils.number/parse-int % nil))))) + (fn [height] + (reset! kb-default-height (utils.number/parse-int height 0)) + (reset! kb-height (utils.number/parse-int height 0)))))) (defn background-effect [{:keys [maximized?]} @@ -89,7 +91,7 @@ (.remove ^js @keyboard-frame-listener)) (defn initialize - [props state animations {:keys [max-height] :as dimensions} chat-input keyboard-height images? reply? + [props state animations {:keys [max-height] :as dimensions} chat-input images? reply? audio] (rn/use-effect (fn [] @@ -101,7 +103,7 @@ (images-effect props animations images?) (audio-effect state animations audio) (empty-effect state animations images? reply? audio) - (kb/add-kb-listeners props state animations dimensions keyboard-height) + (kb/add-kb-listeners props state animations dimensions) #(component-will-unmount props)) [max-height])) diff --git a/src/status_im2/contexts/chat/composer/handlers.cljs b/src/status_im2/contexts/chat/composer/handlers.cljs index 24c746b20a..29ae90c740 100644 --- a/src/status_im2/contexts/chat/composer/handlers.cljs +++ b/src/status_im2/contexts/chat/composer/handlers.cljs @@ -81,7 +81,7 @@ (when (= new-height max-height) (reset! maximized? true) (rf/dispatch [:chat.ui/set-input-maximized true])) - (if (utils/show-background? saved-height max-height new-height) + (if (utils/show-background? max-height new-height maximized?) (do (reanimated/set-shared-value background-y 0) (reanimated/animate opacity 1)) diff --git a/src/status_im2/contexts/chat/composer/keyboard.cljs b/src/status_im2/contexts/chat/composer/keyboard.cljs index 8cbc978cde..fcac5aba34 100644 --- a/src/status_im2/contexts/chat/composer/keyboard.cljs +++ b/src/status_im2/contexts/chat/composer/keyboard.cljs @@ -12,9 +12,11 @@ curr-height)) (defn store-kb-height - [{:keys [kb-default-height]} keyboard-height] - (when (and (not @kb-default-height) (pos? keyboard-height)) - (async-storage/set-item! :kb-default-height (str keyboard-height)))) + [event {:keys [kb-default-height kb-height]} {:keys [window-height]}] + (let [height (- window-height (oops/oget event "endCoordinates.screenY"))] + (reset! kb-height height) + (when (zero? @kb-default-height) + (async-storage/set-item! :kb-default-height (str height))))) (defn handle-emoji-kb-ios [event @@ -44,10 +46,10 @@ (defn add-kb-listeners [{:keys [keyboard-show-listener keyboard-frame-listener keyboard-hide-listener input-ref] :as props} - state animations dimensions keyboard-height] + state animations dimensions] (reset! keyboard-show-listener (.addListener rn/keyboard "keyboardDidShow" - #(store-kb-height state keyboard-height))) + #(store-kb-height % state dimensions))) (reset! keyboard-frame-listener (.addListener rn/keyboard "keyboardWillChangeFrame" diff --git a/src/status_im2/contexts/chat/composer/mentions/view.cljs b/src/status_im2/contexts/chat/composer/mentions/view.cljs index ade578c8d1..dcb2d17ab5 100644 --- a/src/status_im2/contexts/chat/composer/mentions/view.cljs +++ b/src/status_im2/contexts/chat/composer/mentions/view.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.chat.composer.mentions.view (:require - [react-native.hooks :as hooks] [react-native.platform :as platform] [react-native.safe-area :as safe-area] [reagent.core :as reagent] @@ -32,16 +31,15 @@ (defn- f-view [suggestions-atom props state animations max-height cursor-pos] - (let [{:keys [keyboard-height]} (hooks/use-keyboard) - suggestions (rf/sub [:chat/mention-suggestions]) - opacity (reanimated/use-shared-value (if (seq suggestions) 1 0)) - size (count suggestions) - data {:keyboard-height keyboard-height - :insets (safe-area/get-insets) - :curr-height (reanimated/get-shared-value (:height animations)) - :window-height (rf/sub [:dimensions/window-height]) - :reply (rf/sub [:chats/reply-message]) - :edit (rf/sub [:chats/edit-message])} + (let [suggestions (rf/sub [:chat/mention-suggestions]) + opacity (reanimated/use-shared-value (if (seq suggestions) 1 0)) + size (count suggestions) + data {:keyboard-height @(:kb-height state) + :insets (safe-area/get-insets) + :curr-height (reanimated/get-shared-value (:height animations)) + :window-height (rf/sub [:dimensions/window-height]) + :reply (rf/sub [:chats/reply-message]) + :edit (rf/sub [:chats/edit-message])} mentions-pos (utils/calc-suggestions-position cursor-pos max-height size state data)] (rn/use-effect (fn [] diff --git a/src/status_im2/contexts/chat/composer/utils.cljs b/src/status_im2/contexts/chat/composer/utils.cljs index 3c275793c1..ec7193ec1e 100644 --- a/src/status_im2/contexts/chat/composer/utils.cljs +++ b/src/status_im2/contexts/chat/composer/utils.cljs @@ -50,8 +50,8 @@ (and (not-empty @text-value) (not @focused?) (> lines 2))) (defn show-background? - [saved-height max-height new-height] - (or (= (reanimated/get-shared-value saved-height) max-height) + [max-height new-height maximized?] + (or @maximized? (> new-height (* constants/background-threshold max-height)))) (defn update-blur-height? @@ -159,7 +159,8 @@ :cursor-position (reagent/atom 0) :saved-cursor-position (reagent/atom 0) :gradient-z-index (reagent/atom 0) - :kb-default-height (reagent/atom nil) + :kb-default-height (reagent/atom 0) + :kb-height (reagent/atom 0) :gesture-enabled? (reagent/atom true) :lock-selection? (reagent/atom true) :focused? (reagent/atom false) diff --git a/src/status_im2/contexts/chat/composer/view.cljs b/src/status_im2/contexts/chat/composer/view.cljs index 86af002269..a96fdcf8f9 100644 --- a/src/status_im2/contexts/chat/composer/view.cljs +++ b/src/status_im2/contexts/chat/composer/view.cljs @@ -16,7 +16,6 @@ [status-im2.contexts.chat.composer.utils :as utils] [status-im2.contexts.chat.composer.constants :as constants] [status-im2.contexts.chat.composer.actions.view :as actions] - [status-im2.contexts.chat.composer.keyboard :as kb] [status-im2.contexts.chat.composer.sub-view :as sub-view] [status-im2.contexts.chat.composer.effects :as effects] [status-im2.contexts.chat.composer.gesture :as drag-gesture] @@ -26,52 +25,49 @@ (defn sheet-component [{:keys [insets window-height blur-height opacity background-y]} props state] - (let [images (rf/sub [:chats/sending-image]) - audio (rf/sub [:chats/sending-audio]) - reply (rf/sub [:chats/reply-message]) - edit (rf/sub [:chats/edit-message]) - input-with-mentions (rf/sub [:chat/input-with-mentions]) + (let [images (rf/sub [:chats/sending-image]) + audio (rf/sub [:chats/sending-audio]) + reply (rf/sub [:chats/reply-message]) + edit (rf/sub [:chats/edit-message]) + input-with-mentions (rf/sub [:chat/input-with-mentions]) {:keys [input-text input-content-height] - :as chat-input} (rf/sub [:chats/current-chat-input]) - content-height (reagent/atom (or input-content-height - constants/input-height)) - {:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard) - kb-height (kb/get-kb-height keyboard-height - @(:kb-default-height state)) - max-height (utils/calc-max-height window-height - kb-height - insets - (boolean (seq images)) - reply - edit) - lines (utils/calc-lines (- @content-height - constants/extra-content-offset)) - max-lines (utils/calc-lines max-height) - animations (utils/init-animations - lines - input-text - images - reply - audio - content-height - max-height - opacity - background-y) - dimensions {:content-height content-height - :max-height max-height - :window-height window-height - :lines lines - :max-lines max-lines} - show-bottom-gradient? (utils/show-bottom-gradient? state dimensions) - cursor-pos (utils/cursor-y-position-relative-to-container props - state)] + :as chat-input} (rf/sub [:chats/current-chat-input]) + content-height (reagent/atom (or input-content-height + constants/input-height)) + {:keys [keyboard-shown]} (hooks/use-keyboard) + max-height (utils/calc-max-height window-height + @(:kb-height state) + insets + (boolean (seq images)) + reply + edit) + lines (utils/calc-lines (- @content-height + constants/extra-content-offset)) + max-lines (utils/calc-lines max-height) + animations (utils/init-animations + lines + input-text + images + reply + audio + content-height + max-height + opacity + background-y) + dimensions {:content-height content-height + :max-height max-height + :window-height window-height + :lines lines + :max-lines max-lines} + show-bottom-gradient? (utils/show-bottom-gradient? state dimensions) + cursor-pos (utils/cursor-y-position-relative-to-container props + state)] (effects/did-mount props) (effects/initialize props state animations dimensions chat-input - keyboard-height (boolean (seq images)) reply audio) @@ -128,7 +124,7 @@ (defn composer [insets] - (let [window-height (rf/sub [:dimensions/window-height]) + (let [window-height (:height (rn/get-window)) opacity (reanimated/use-shared-value 0) background-y (reanimated/use-shared-value (- window-height)) blur-height (reanimated/use-shared-value (+ constants/composer-default-height