[#16086] Messaging - Composer - Show current message for user context… (#16128)

src/status_im2/common/bottom_sheet/styles.cljs

@@ -39,9 +39,11 @@
    :bottom           0})
 
 (defn selected-item
-  [override-theme]
+  [override-theme window-height sheet-height {:keys [top]}]
   {:position          :absolute
    :bottom            10
+   :max-height        (- window-height sheet-height top)
+   :overflow          :hidden
    :left              0
    :right             0
    :border-radius     12

src/status_im2/common/bottom_sheet/view.cljs

@@ -7,7 +7,8 @@
             [react-native.gesture :as gesture]
             [oops.core :as oops]
             [react-native.hooks :as hooks]
-            [react-native.blur :as blur]))
+            [react-native.blur :as blur]
+            [reagent.core :as reagent]))
 
 (def duration 450)
 (def timing-options #js {:duration duration})
@@ -51,8 +52,10 @@
            (show translate-y bg-opacity)
            (hide translate-y bg-opacity window-height on-close))))))
 
-(defn view
-  [{:keys [hide? insets]}
+(defn f-view
+  [_ _]
+  (let [sheet-height (reagent/atom 0)]
+    (fn [{:keys [hide? insets]}
          {:keys [content override-theme selected-item padding-bottom-override on-close shell?]}]
       (let [{window-height :height} (rn/get-window)
             bg-opacity              (reanimated/use-shared-value 0)
@@ -65,7 +68,7 @@
                                        (on-close))
                                      (rf/dispatch [:hide-bottom-sheet])
                                      true))
-    [rn/view {:flex 1}
+        [rn/view {:style {:flex 1}}
          ;; backdrop
          [rn/touchable-without-feedback {:on-press #(rf/dispatch [:hide-bottom-sheet])}
           [reanimated/view
@@ -77,18 +80,20 @@
           [reanimated/view
            {:style     (reanimated/apply-animations-to-style
                         {:transform [{:translateY translate-y}]}
-                (styles/sheet insets window-height override-theme padding-bottom-override shell?))}
-
-       (when shell?
-         [blur/ios-view
-          {:style styles/shell-bg}])
+                        (styles/sheet insets
+                                      window-height
+                                      override-theme
+                                      padding-bottom-override
+                                      shell?))
+            :on-layout #(reset! sheet-height (oops/oget % "nativeEvent" "layout" "height"))}
+           (when shell? [blur/ios-view {:style styles/shell-bg}])
 
            (when selected-item
              [rn/view
-          [rn/view {:style (styles/selected-item override-theme)}
+              [rn/view {:style (styles/selected-item override-theme window-height @sheet-height insets)}
                [selected-item]]])
 
            ;; handle
            [rn/view {:style (styles/handle override-theme)}]
            ;; content
-       [content]]]]))
+           [content]]]]))))

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

@@ -74,11 +74,7 @@
       constants/content-type-contact-request       [not-implemented/not-implemented
                                                     [old-message/system-contact-request message-data]])))
 
-(defn on-long-press
-  [message-data context]
-  (rf/dispatch [:dismiss-keyboard])
-  (rf/dispatch [:show-bottom-sheet
-                {:content (drawers/reactions-and-actions message-data context)}]))
+(declare on-long-press)
 
 (defn user-message-content
   []
@@ -94,7 +90,9 @@
             outgoing        (if (= content-type constants/content-type-album)
                               (:outgoing first-image)
                               outgoing)
-            context         (assoc context :on-long-press #(on-long-press message-data context))
+            context         (assoc context
+                                   :on-long-press
+                                   #(on-long-press message-data context keyboard-shown?))
             response-to     (:response-to content)
             height          (rf/sub [:dimensions/window-height])]
         [rn/touchable-highlight
@@ -113,7 +111,7 @@
                                      (reset! show-delivery-state? true)
                                      (js/setTimeout #(reset! show-delivery-state? false)
                                                     delivery-state-showing-time-ms))))
-          :on-long-press       #(on-long-press message-data context)}
+          :on-long-press       #(on-long-press message-data context keyboard-shown?)}
          [rn/view {:style {:padding-vertical 8}}
           (when (and (seq response-to) quoted-message)
             [reply/quoted-message quoted-message])
@@ -152,6 +150,15 @@
              (when @show-delivery-state?
                [status/status outgoing-status])])]]]))))
 
+(defn on-long-press
+  [message-data context keyboard-shown]
+  (rf/dispatch [:dismiss-keyboard])
+  (rf/dispatch [:show-bottom-sheet
+                {:content       (drawers/reactions-and-actions message-data context)
+                 :selected-item (fn []
+                                  [rn/view {:pointer-events :none}
+                                   [user-message-content message-data context keyboard-shown true]])}]))
+
 (defn message-with-reactions
   [{:keys [pinned-by mentioned in-pinned-view? content-type last-in-group?] :as message-data}
    context
@@ -168,4 +175,5 @@
      [system-message-content message-data]
      [user-message-content message-data context keyboard-shown false])
    [reactions/message-reactions-row message-data
-    [user-message-content message-data context keyboard-shown true]]])
+    [rn/view {:pointer-events :none}
+     [user-message-content message-data context keyboard-shown true]]]])

src/status_im2/navigation/view.cljs

@@ -88,7 +88,7 @@
           :keyboard-vertical-offset (- (max 20 (:bottom insets)))}
          (when sheet
            [:f>
-            bottom-sheet/view
+            bottom-sheet/f-view
             {:insets insets :hide? hide?}
             sheet])]]))))