Composer polishing (#15857)

* refactor: composer

src/status_im2/contexts/chat/composer/gesture.cljs

@@ -69,7 +69,8 @@
                               (do ; focus and end
                                 (when (< (oops/oget event "velocityY") constants/velocity-threshold)
                                   (reanimated/set-shared-value container-opacity 1)
-                                  (reanimated/set-shared-value last-height max-height))
+                                  (reanimated/set-shared-value last-height max-height)
+                                  (maximize state animations dimensions))
                                 (when @input-ref
                                   (.focus ^js @input-ref))
                                 (reset! gesture-enabled? false))

src/status_im2/contexts/chat/composer/handlers.cljs

@@ -37,10 +37,11 @@
   [{:keys [text-value focused? lock-selection? cursor-position saved-cursor-position gradient-z-index
            maximized?]}
    {:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]}
-   {:keys [lines content-height max-height window-height]}
+   {:keys [content-height max-height window-height]}
    images
    reply]
-  (let [min-height    (utils/get-min-height lines)
+  (let [lines         (utils/calc-lines (- @content-height constants/extra-content-offset))
+        min-height    (utils/get-min-height lines)
         reopen-height (utils/calc-reopen-height text-value min-height content-height saved-height)]
     (reset! focused? false)
     (rf/dispatch [:chat.ui/set-input-focused false])
@@ -61,13 +62,17 @@
 
 (defn content-size-change
   [event
-   {:keys [maximized?]}
+   {:keys [maximized? lock-layout?]}
    {:keys [height saved-height opacity background-y]}
    {:keys [content-height window-height max-height]}
    keyboard-shown]
   (when keyboard-shown
-    (let [content-size (+ (oops/oget event "nativeEvent.contentSize.height")
+    (let [event-size   (oops/oget event "nativeEvent.contentSize.height")
-                          constants/extra-content-offset)
+          content-size (+ event-size constants/extra-content-offset)
+          lines        (utils/calc-lines event-size)
+          content-size (if (= lines 1)
+                         constants/input-height
+                         (if (= lines 2) constants/multiline-minimized-height content-size))
           new-height   (utils/bounded-val content-size constants/input-height max-height)]
       (reset! content-height content-size)
       (when (utils/update-height? content-size height max-height maximized?)
@@ -83,7 +88,8 @@
         (when (= (reanimated/get-shared-value opacity) 1)
           (reanimated/animate opacity 0)
           (js/setTimeout #(reanimated/set-shared-value background-y (- window-height)) 300)))
-      (rf/dispatch [:chat.ui/set-input-content-height new-height]))))
+      (rf/dispatch [:chat.ui/set-input-content-height new-height])
+      (reset! lock-layout? (> lines 2)))))
 
 (defn scroll
   [event

src/status_im2/contexts/chat/composer/sub_view.cljs

@@ -1,9 +1,14 @@
 (ns status-im2.contexts.chat.composer.sub-view
   (:require
+    [quo2.core :as quo]
     [react-native.blur :as blur]
     [react-native.core :as rn]
     [react-native.reanimated :as reanimated]
-    [status-im2.contexts.chat.composer.style :as style]))
+    [status-im2.contexts.chat.composer.style :as style]
+    [status-im2.contexts.chat.composer.utils :as utils]
+    [status-im2.contexts.chat.messages.list.view :as messages.list]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
 
 (defn bar
   []
@@ -14,6 +19,34 @@
   [layout-height focused?]
   [reanimated/view {:style (style/blur-container layout-height focused?)}
    [blur/view (style/blur-view)]])
+
 (defn blur-view
   [layout-height focused?]
   [:f> f-blur-view layout-height focused?])
+
+(defn- f-shell-button
+  [insets height maximized?]
+  (let [translate-y (reanimated/use-shared-value (utils/calc-shell-neg-y insets maximized?))]
+    (rn/use-effect #(reanimated/animate translate-y (utils/calc-shell-neg-y insets maximized?))
+                   [@maximized?])
+    [reanimated/view
+     {:style (reanimated/apply-animations-to-style
+              {:bottom    height ; we use height of the input directly as bottom position
+               :transform [{:translate-y translate-y}]} ; translate down when maximized
+              {:position :absolute
+               :left     0
+               :right    0})}
+     [quo/floating-shell-button
+      (merge {:jump-to
+              {:on-press (fn []
+                           (rf/dispatch [:chat/close true])
+                           (rf/dispatch [:shell/navigate-to-jump-to]))
+               :label    (i18n/label :t/jump-to)
+               :style    {:align-self :center}}}
+             (when @messages.list/show-floating-scroll-down-button
+               {:scroll-to-bottom {:on-press messages.list/scroll-to-bottom}}))
+      {}]]))
+
+(defn shell-button
+  [insets {:keys [height]} {:keys [maximized?]}]
+  [:f> f-shell-button insets height maximized?])

src/status_im2/contexts/chat/composer/utils.cljs

@@ -107,6 +107,11 @@
         sub-text-lines-in-view (- sub-text-lines scrolled-lines)]
     (* sub-text-lines-in-view constants/line-height)))
 
+(defn calc-shell-neg-y
+  [insets maximized?]
+  (let [neg-y (if @maximized? -50 0)]
+    (- (+ constants/bar-container-height constants/actions-container-height (:bottom insets) 6 neg-y))))
+
 (defn calc-suggestions-position
   [cursor-pos max-height size
    {:keys [maximized?]}

src/status_im2/contexts/chat/composer/view.cljs

@@ -44,7 +44,8 @@
                                                                         (boolean (seq images))
                                                                         reply
                                                                         edit)
-        lines                                    (utils/calc-lines @content-height)
+        lines                                    (utils/calc-lines (- @content-height
+                                                                      constants/extra-content-offset))
         max-lines                                (utils/calc-lines max-height)
         animations                               (utils/init-animations
                                                   lines
@@ -79,6 +80,7 @@
     (effects/update-input-mention props state input-text)
     (effects/edit-mentions props state input-with-mentions)
     [:<>
+     [sub-view/shell-button insets animations state]
      [mentions/view props state animations max-height cursor-pos]
      [gesture/gesture-detector
       {:gesture (drag-gesture/drag-gesture props state animations dimensions keyboard-shown)}

src/status_im2/contexts/chat/messages/list/view.cljs

@@ -4,17 +4,14 @@
             [react-native.background-timer :as background-timer]
             [react-native.core :as rn]
             [react-native.platform :as platform]
-            [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]
             [status-im.ui.screens.chat.group :as chat.group]
             [status-im.ui.screens.chat.message.gap :as message.gap]
             [status-im2.common.not-implemented :as not-implemented]
             [status-im2.constants :as constants]
-            [status-im2.contexts.chat.composer.utils :as utils]
             [status-im2.contexts.chat.messages.content.deleted.view :as content.deleted]
             [status-im2.contexts.chat.messages.content.view :as message]
             [status-im2.contexts.chat.messages.list.state :as state]
-            [utils.i18n :as i18n]
             [utils.re-frame :as rf]
             [status-im2.contexts.chat.composer.constants :as composer.constants]))
 
@@ -105,51 +102,6 @@
           [content.deleted/deleted-message message-data context]
           [message/message-with-reactions message-data context keyboard-shown])]))])
 
-(defn calc-shell-position
-  [curr-pos input-content-height focused? reply edit images]
-  (let [lines (utils/calc-lines input-content-height)
-        base  (if reply (- composer.constants/reply-container-height) 0)
-        base  (if edit (- composer.constants/edit-container-height) base)
-        base  (if (seq images) (- composer.constants/images-container-height) base)]
-    (if (not focused?)
-      (if (> lines 1) (+ (- composer.constants/multiline-minimized-height) base) base)
-      (if (> lines 12)
-        curr-pos
-        (if (> lines 1) (- (- input-content-height composer.constants/input-height base)) base)))))
-
-(def memoized-calc-shell-position (memoize calc-shell-position))
-
-(defn shell-button
-  [insets]
-  (let [y (reanimated/use-shared-value 0)
-        {:keys [input-content-height focused?]} (rf/sub [:chats/current-chat-input])
-        reply (rf/sub [:chats/reply-message])
-        edit (rf/sub [:chats/edit-message])
-        images (rf/sub [:chats/sending-image])
-        curr-pos (reanimated/get-shared-value y)
-        shell-position
-        (memoized-calc-shell-position curr-pos input-content-height focused? reply edit images)]
-    (rn/use-effect (fn []
-                     (reanimated/animate y shell-position))
-                   [shell-position])
-    [reanimated/view
-     {:style (reanimated/apply-animations-to-style
-              {:transform [{:translate-y y}]}
-              {:bottom   (+ composer.constants/composer-default-height (:bottom insets) 6)
-               :position :absolute
-               :left     0
-               :right    0})}
-     [quo/floating-shell-button
-      (merge {:jump-to
-              {:on-press (fn []
-                           (rf/dispatch [:chat/close true])
-                           (rf/dispatch [:shell/navigate-to-jump-to]))
-               :label    (i18n/label :t/jump-to)
-               :style    {:align-self :center}}}
-             (when @show-floating-scroll-down-button
-               {:scroll-to-bottom {:on-press scroll-to-bottom}}))
-      {}]]))
-
 (defn messages-list-content
   [{:keys [chat-id] :as chat} insets keyboard-shown]
   (fn []
@@ -185,12 +137,10 @@
          ;; TODO https://github.com/facebook/react-native/issues/30034
          :inverted                     (when platform/ios? true)
          :style                        (when platform/android? {:scaleY -1})
-         :on-layout                    on-messages-view-layout}]
+         :on-layout                    on-messages-view-layout}]])))
-       [:f> shell-button insets]])))
 
 ;; This should be replaced with keyboard hook. It has to do with flat-list probably. The keyboard-shown
-;; value
+;; value updates in the parent component, but does not get passed to the children.
-;; updates in the parent component, but does not get passed to the children.
 ;; When using listeners and resetting the value on an atom it works.
 (defn use-keyboard-visibility
   []