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

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?]}]
+   {:keys [input-content-height input-text input-maximized?]}
-  (when (and (empty? @text-value) (not= input-text nil))
+   {:keys [height]}]
-    (reset! text-value input-text)
+  (let [lines            (utils/calc-lines input-content-height)
-    (reset! content-height input-content-height)
+        minimized-height (if (or (= lines 1) (empty? input-text))
-    (reset! saved-cursor-position (count input-text)))
+                           constants/input-height
-  (when input-maximized?
+                           constants/multiline-minimized-height)]
-    (reset! maximized? true)))
+    (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

src/status_im/contexts/chat/messenger/composer/gradients/style.cljs

@@ -31,8 +31,7 @@
    :position :absolute
    :bottom   0
    :left     0
-   :right    0
+   :right    0})
-   :z-index  2})
 
 (defn bottom-gradient
   []

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)]])]))
 

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)]
+  (let [last-height-value (reanimated/get-shared-value last-height)
-    (reanimated/animate height last-height-value)
+        new-height        (min max-height last-height-value)]
-    (reanimated/set-shared-value saved-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)))