fix bottom message hidden behind composer with minimised keyboard when replying to message (#20371)

This commit is contained in:
Parvesh Monu 2024-06-13 16:48:21 +05:30 committed by GitHub
parent df939bf85f
commit 5f7d7254e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 46 additions and 16 deletions

View File

@ -12,7 +12,7 @@
[utils.re-frame :as rf]))
(defn edit-message
[{:keys [text-value input-ref]}]
[{:keys [text-value input-ref input-height]}]
(let [theme (quo.theme/use-theme)]
[rn/view
{:style style/container
@ -32,7 +32,7 @@
{:size 24
:icon-only? true
:accessibility-label :edit-cancel-button
:on-press #(utils/cancel-edit-message text-value input-ref)
:on-press #(utils/cancel-edit-message text-value input-ref input-height)
:type :outline}
:i/close]]))

View File

@ -101,12 +101,16 @@
(rf/dispatch [:chat.ui/cancel-message-reply]))
(defn cancel-edit-message
[text-value input-ref]
[text-value input-ref input-height]
(reset! text-value "")
;; NOTE: adding a timeout to assure the input is blurred on the next tick
;; after the `text-value` was cleared. Otherwise the height will be calculated
;; with the old `text-value`, leading to wrong composer height after blur.
(js/setTimeout #(blur-input input-ref) 100)
(js/setTimeout
(fn []
(blur-input input-ref)
(reanimated/set-shared-value input-height constants/input-height))
100)
(.setNativeProps ^js @input-ref (clj->js {:text ""}))
(rf/dispatch [:chat.ui/set-input-content-height constants/input-height])
(rf/dispatch [:chat.ui/cancel-message-edit]))

View File

@ -105,8 +105,9 @@
[:<>
[reply/view state (:input-ref props)]
[edit/view
{:text-value (:text-value state)
:input-ref (:input-ref props)}]]
{:text-value (:text-value state)
:input-height (:height animations)
:input-ref (:input-ref props)}]]
[reanimated/touchable-opacity
{:active-opacity 1
:on-press (fn []

View File

@ -102,18 +102,43 @@
;; https://github.com/status-im/status-mobile/issues/17426
[quo/skeleton-list (skeleton-list-props :messages parent-height platform/ios?)]]))
(defn header-height
[{:keys [insets able-to-send-message? images reply edit link-previews? input-content-height]}]
(if able-to-send-message?
(cond-> composer.constants/composer-default-height
(ff/enabled? ::ff/shell.jump-to)
(+ jump-to.constants/floating-shell-button-height)
(seq images)
(+ composer.constants/images-container-height)
reply
(+ composer.constants/reply-container-height)
edit
(+ composer.constants/edit-container-height)
link-previews?
(+ composer.constants/links-container-height)
(and input-content-height (not= input-content-height composer.constants/input-height))
(+ composer.constants/input-height)
true
(+ (:bottom insets)))
(- 70 (:bottom insets))))
(defn list-header
[insets able-to-send-message?]
(let [images (rf/sub [:chats/sending-image])
height (if able-to-send-message?
(+ composer.constants/composer-default-height
(if (ff/enabled? ::ff/shell.jump-to)
jump-to.constants/floating-shell-button-height
0)
(if (seq images) composer.constants/images-container-height 0)
(:bottom insets))
(- 70 (:bottom insets)))]
[rn/view {:style {:height height}}]))
(let [header-data {:insets insets
:able-to-send-message? able-to-send-message?
:input-content-height (:input-content-height (rf/sub [:chats/current-chat-input]))
:images (rf/sub [:chats/sending-image])
:reply (rf/sub [:chats/reply-message])
:edit (rf/sub [:chats/edit-message])
:link-previews? (or (rf/sub [:chats/link-previews?])
(rf/sub [:chats/status-link-previews?]))}]
[rn/view {:style {:height (header-height header-data)}}]))
(defn list-footer-avatar
[{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color