From 72bf8a87020f9be93161d538d0147cf4fef77869 Mon Sep 17 00:00:00 2001 From: Lungu Cristian Date: Wed, 17 Jan 2024 13:24:13 +0200 Subject: [PATCH] fix: composer size when re-entering with unfinished multiline message (#18089) fix: composer space when expanding after re-entering fix: composer bottom shadow and maximized state atom fix: removing composer bottom gradient style changes --- .../chat/messenger/composer/effects.cljs | 22 ++++++++++++------- .../messenger/composer/gradients/style.cljs | 3 +-- .../messenger/composer/gradients/view.cljs | 1 + .../chat/messenger/composer/handlers.cljs | 10 +++++---- 4 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/status_im/contexts/chat/messenger/composer/effects.cljs b/src/status_im/contexts/chat/messenger/composer/effects.cljs index f9b3d270d41..d3e689e0d98 100644 --- a/src/status_im/contexts/chat/messenger/composer/effects.cljs +++ b/src/status_im/contexts/chat/messenger/composer/effects.cljs @@ -16,13 +16,19 @@ (defn reenter-screen-effect [{:keys [text-value saved-cursor-position maximized?]} {:keys [content-height]} - {:keys [input-content-height input-text input-maximized?]}] - (when (and (empty? @text-value) (not= input-text nil)) - (reset! text-value input-text) - (reset! content-height input-content-height) - (reset! saved-cursor-position (count input-text))) - (when input-maximized? - (reset! maximized? true))) + {:keys [input-content-height input-text input-maximized?]} + {:keys [height]}] + (let [lines (utils/calc-lines input-content-height) + minimized-height (if (or (= lines 1) (empty? input-text)) + constants/input-height + constants/multiline-minimized-height)] + (when (and (empty? @text-value) (not= input-text nil)) + (reset! text-value input-text) + (reset! content-height input-content-height) + (reset! saved-cursor-position (count input-text)) + (reanimated/set-shared-value height minimized-height)) + (when input-maximized? + (reset! maximized? true)))) (defn maximized-effect [{:keys [maximized?]} @@ -101,7 +107,7 @@ [max-height]) (rn/use-effect (fn [] - (reenter-screen-effect state dimensions subscriptions)) + (reenter-screen-effect state dimensions subscriptions animations)) [max-height subscriptions])) (defn use-edit diff --git a/src/status_im/contexts/chat/messenger/composer/gradients/style.cljs b/src/status_im/contexts/chat/messenger/composer/gradients/style.cljs index fa038d2e137..65c8f5b4848 100644 --- a/src/status_im/contexts/chat/messenger/composer/gradients/style.cljs +++ b/src/status_im/contexts/chat/messenger/composer/gradients/style.cljs @@ -31,8 +31,7 @@ :position :absolute :bottom 0 :left 0 - :right 0 - :z-index 2}) + :right 0}) (defn bottom-gradient [] diff --git a/src/status_im/contexts/chat/messenger/composer/gradients/view.cljs b/src/status_im/contexts/chat/messenger/composer/gradients/view.cljs index 599b35aeb57..f4417412c9f 100644 --- a/src/status_im/contexts/chat/messenger/composer/gradients/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/gradients/view.cljs @@ -19,6 +19,7 @@ (when show-bottom-gradient? [rn/pressable {:on-press #(when @input-ref (.focus ^js @input-ref)) + :style {:z-index 1} :accessibility-label :bottom-gradient} [linear-gradient/linear-gradient (style/bottom-gradient)]])])) diff --git a/src/status_im/contexts/chat/messenger/composer/handlers.cljs b/src/status_im/contexts/chat/messenger/composer/handlers.cljs index 6ae447b3ee6..397fb2892b9 100644 --- a/src/status_im/contexts/chat/messenger/composer/handlers.cljs +++ b/src/status_im/contexts/chat/messenger/composer/handlers.cljs @@ -16,18 +16,20 @@ (defn focus "Animate to the `saved-height`, display background-overlay if needed, and set cursor position" [{:keys [input-ref] :as props} - {:keys [text-value focused? lock-selection? saved-cursor-position composer-focused?]} + {:keys [text-value focused? lock-selection? saved-cursor-position composer-focused? maximized?]} {:keys [height saved-height last-height opacity background-y container-opacity] :as animations} {:keys [max-height] :as dimensions}] (reanimated/set-shared-value composer-focused? true) (reset! focused? true) (rf/dispatch [:chat.ui/set-input-focused true]) - (let [last-height-value (reanimated/get-shared-value last-height)] - (reanimated/animate height last-height-value) - (reanimated/set-shared-value saved-height last-height-value) + (let [last-height-value (reanimated/get-shared-value last-height) + new-height (min max-height last-height-value)] + (reanimated/animate height new-height) + (reanimated/set-shared-value saved-height new-height) (reanimated/animate container-opacity 1) (when (> last-height-value (* constants/background-threshold max-height)) + (reset! maximized? true) (reanimated/animate opacity 1) (reanimated/set-shared-value background-y 0)))