From f047665f757e92b7185c1ce5c926037b8e3725e2 Mon Sep 17 00:00:00 2001 From: Alexander Date: Wed, 5 Jul 2023 16:30:27 +0200 Subject: [PATCH] Dynamically calculate composer height to adjust the spacing on the bottom of the list (#16235) * fix: Android auto scrolling to bottom of chat --------- Co-authored-by: Omar Basem --- .../contexts/chat/messages/list/view.cljs | 30 +++++++++---------- src/status_im2/subs/chat/chats.cljs | 19 ++++++++++++ 2 files changed, 33 insertions(+), 16 deletions(-) diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index 59699f65c0..4d4fb93481 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/src/status_im2/contexts/chat/messages/list/view.cljs @@ -251,16 +251,18 @@ (defn render-fn [{:keys [type value content-type] :as message-data} _ _ - {:keys [context keyboard-shown?]}] + {:keys [context keyboard-shown? insets]}] ;;TODO temporary hide mutual-state-updates https://github.com/status-im/status-mobile/issues/16254 (when (not= content-type constants/content-type-system-mutual-state-update) - [rn/view - (add-inverted-y-android {:background-color (colors/theme-colors colors/white colors/neutral-95)}) - (if (= type :datemark) - [quo/divider-date value] - (if (= content-type constants/content-type-gap) - [message.gap/gap message-data] - [message/message message-data context keyboard-shown?]))])) + (if (= type :header) + [list-header insets] + [rn/view + (add-inverted-y-android {:background-color (colors/theme-colors colors/white colors/neutral-95)}) + (if (= type :datemark) + [quo/divider-date value] + (if (= content-type constants/content-type-gap) + [message.gap/gap message-data] + [message/message message-data context keyboard-shown?]))]))) (defn scroll-handler [event scroll-y] @@ -291,22 +293,21 @@ :ref list-ref :header [:<> (when (= (:chat-type chat) constants/private-group-chat-type) - [list-group-chat-header chat]) - [list-header insets]] + [list-group-chat-header chat])] :footer [list-footer {:chat chat :scroll-y scroll-y :cover-bg-color cover-bg-color :on-layout footer-on-layout :shell-animation-complete? shell-animation-complete?}] - :data messages + :data (into [{:type :header}] messages) :render-data {:context context - :keyboard-shown? keyboard-shown?} + :keyboard-shown? keyboard-shown? + :insets insets} :render-fn render-fn :on-viewable-items-changed on-viewable-items-changed :on-end-reached #(list-on-end-reached scroll-y) :on-scroll-to-index-failed identity - :content-container-style {:padding-bottom style/messages-list-bottom-offset} :scroll-indicator-insets {:top (- composer.constants/composer-default-height 16)} :keyboard-dismiss-mode :interactive :keyboard-should-persist-taps :always @@ -329,9 +330,6 @@ ;;TODO(rasom) https://github.com/facebook/react-native/issues/30034 :inverted (when platform/ios? true) :on-layout (fn [e] - ;; FIXME: this is due to Android not triggering the initial - ;; scrollTo event - (scroll-to-offset 1) (let [layout-height (oops/oget e "nativeEvent.layout.height")] (reset! messages-view-height layout-height))) :scroll-enabled (not recording?)}]])) diff --git a/src/status_im2/subs/chat/chats.cljs b/src/status_im2/subs/chat/chats.cljs index c035dfb7b4..08f6f69e5b 100644 --- a/src/status_im2/subs/chat/chats.cljs +++ b/src/status_im2/subs/chat/chats.cljs @@ -6,6 +6,7 @@ [status-im.group-chats.db :as group-chats.db] [status-im.multiaccounts.core :as multiaccounts] [status-im2.constants :as constants] + [status-im2.contexts.chat.composer.constants :as composer.constants] [status-im2.contexts.chat.events :as chat.events])) (re-frame/reg-sub @@ -140,6 +141,24 @@ (fn [[chat-id inputs]] (get inputs chat-id))) +(re-frame/reg-sub + :chats/composer-height + :<- [:chats/current-chat-input] + :<- [:chats/link-previews-unfurled] + (fn [[{:keys [input-content-height metadata]} link-previews]] + (let [{:keys [responding-to-message editing-message sending-image]} metadata] + (+ (max composer.constants/input-height input-content-height) + (when responding-to-message + composer.constants/reply-container-height) + (when editing-message + composer.constants/edit-container-height) + (when (seq sending-image) + composer.constants/images-container-height) + (when (seq link-previews) + composer.constants/links-container-height) + composer.constants/bar-container-height + composer.constants/actions-container-height)))) + (re-frame/reg-sub :chats/sending-image :<- [:chats/current-chat-id]