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:
parent
cb19a31a5f
commit
b1aec54e4c
|
@ -105,9 +105,26 @@
|
|||
(.remove ^js @keyboard-hide-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
|
||||
[props state animations {:keys [max-height] :as dimensions}
|
||||
{:keys [chat-input images link-previews? reply audio]}]
|
||||
(max-height-effect state dimensions animations)
|
||||
(rn/use-effect
|
||||
(fn []
|
||||
(maximized-effect state animations dimensions chat-input)
|
||||
|
|
|
@ -14,13 +14,10 @@
|
|||
(defn focus
|
||||
[{:keys [input-ref] :as props}
|
||||
{: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]
|
||||
:as animations}
|
||||
{:keys [last-height opacity background-y gradient-opacity container-opacity] :as animations}
|
||||
{:keys [max-height] :as dimensions}]
|
||||
(reset! 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)
|
||||
(when (> (reanimated/get-shared-value last-height) (* constants/background-threshold max-height))
|
||||
(reanimated/animate opacity 1)
|
||||
|
|
Loading…
Reference in New Issue