status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix composer height overflow with extra content (#15989) 

Fixes the maximum height overflow of the composer when there are images and/or
link previews (any *extra content* as we call it in the code).

Fixes https://github.com/status-im/status-mobile/issues/15949

Cause: The bug happened because the on-focus event of the composer happens
before subscriptions arrive, and thus it uses the incorrect max-height.

Fix: The fix makes the animation values of height, last-height, and saved-height
be truncated based on the newest calculated max-height, and they happen in a
separate use-effect, outside of the on-focus event.
This commit is contained in:
Icaro Motta 2023-05-23 08:40:38 -03:00 committed by GitHub
parent cb19a31a5f
commit b1aec54e4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/status_im2/contexts/chat/composer/effects.cljs
View File

@ -105,9 +105,26 @@
(.remove ^js @keyboard-hide-listener) (.remove ^js @keyboard-hide-listener)
(.remove ^js @keyboard-frame-listener)) (.remove ^js @keyboard-frame-listener))
(defn max-height-effect
[{:keys [focused?]}
{:keys [max-height]}
{:keys [height saved-height last-height]}]
(rn/use-effect
(fn []
;; Some subscriptions can arrive after the composer if focused (esp. link
;; previews), so we need to react to changes in `max-height` outside of the
;; `on-focus` handler.
(when @focused?
(let [new-height (min max-height (reanimated/get-shared-value last-height))]
(reanimated/set-shared-value last-height new-height)
(reanimated/animate height new-height)
(reanimated/set-shared-value saved-height new-height))))
[max-height @focused?]))
(defn initialize (defn initialize
[props state animations {:keys [max-height] :as dimensions} [props state animations {:keys [max-height] :as dimensions}
{:keys [chat-input images link-previews? reply audio]}] {:keys [chat-input images link-previews? reply audio]}]
(max-height-effect state dimensions animations)
(rn/use-effect (rn/use-effect
(fn [] (fn []
(maximized-effect state animations dimensions chat-input) (maximized-effect state animations dimensions chat-input)

5
src/status_im2/contexts/chat/composer/handlers.cljs
View File

@ -14,13 +14,10 @@
(defn focus (defn focus
[{:keys [input-ref] :as props} [{:keys [input-ref] :as props}
{:keys [text-value focused? lock-selection? saved-cursor-position gradient-z-index]} {:keys [text-value focused? lock-selection? saved-cursor-position gradient-z-index]}
{:keys [height saved-height last-height opacity background-y gradient-opacity container-opacity] {:keys [last-height opacity background-y gradient-opacity container-opacity] :as animations}
:as animations}
{:keys [max-height] :as dimensions}] {:keys [max-height] :as dimensions}]
(reset! focused? true) (reset! focused? true)
(rf/dispatch [:chat.ui/set-input-focused true]) (rf/dispatch [:chat.ui/set-input-focused true])
(reanimated/animate height (reanimated/get-shared-value last-height))
(reanimated/set-shared-value saved-height (reanimated/get-shared-value last-height))
(reanimated/animate container-opacity 1) (reanimated/animate container-opacity 1)
(when (> (reanimated/get-shared-value last-height) (* constants/background-threshold max-height)) (when (> (reanimated/get-shared-value last-height) (* constants/background-threshold max-height))
(reanimated/animate opacity 1) (reanimated/animate opacity 1)