[#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,44 +52,48 @@
            (show translate-y bg-opacity)
            (hide translate-y bg-opacity window-height on-close))))))
 
-(defn view
-  [{: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)
-        translate-y             (reanimated/use-shared-value window-height)
-        sheet-gesture           (get-sheet-gesture translate-y bg-opacity window-height on-close)]
-    (rn/use-effect
-     #(if hide? (hide translate-y bg-opacity window-height on-close) (show translate-y bg-opacity))
-     [hide?])
-    (hooks/use-back-handler #(do (when (fn? on-close)
-                                   (on-close))
-                                 (rf/dispatch [:hide-bottom-sheet])
-                                 true))
-    [rn/view {:flex 1}
-     ;; backdrop
-     [rn/touchable-without-feedback {:on-press #(rf/dispatch [:hide-bottom-sheet])}
-      [reanimated/view
-       {:style (reanimated/apply-animations-to-style
-                {:opacity bg-opacity}
-                {:flex 1 :background-color colors/neutral-100-opa-70})}]]
-     ;; sheet
-     [gesture/gesture-detector {:gesture sheet-gesture}
-      [reanimated/view
-       {:style (reanimated/apply-animations-to-style
-                {:transform [{:translateY translate-y}]}
-                (styles/sheet insets window-height override-theme padding-bottom-override shell?))}
+(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)
+            translate-y             (reanimated/use-shared-value window-height)
+            sheet-gesture           (get-sheet-gesture translate-y bg-opacity window-height on-close)]
+        (rn/use-effect
+         #(if hide? (hide translate-y bg-opacity window-height on-close) (show translate-y bg-opacity))
+         [hide?])
+        (hooks/use-back-handler #(do (when (fn? on-close)
+                                       (on-close))
+                                     (rf/dispatch [:hide-bottom-sheet])
+                                     true))
+        [rn/view {:style {:flex 1}}
+         ;; backdrop
+         [rn/touchable-without-feedback {:on-press #(rf/dispatch [:hide-bottom-sheet])}
+          [reanimated/view
+           {:style (reanimated/apply-animations-to-style
+                    {:opacity bg-opacity}
+                    {:flex 1 :background-color colors/neutral-100-opa-70})}]]
+         ;; sheet
+         [gesture/gesture-detector {:gesture sheet-gesture}
+          [reanimated/view
+           {:style     (reanimated/apply-animations-to-style
+                        {:transform [{:translateY translate-y}]}
+                        (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 shell?
-         [blur/ios-view
-          {:style styles/shell-bg}])
+           (when selected-item
+             [rn/view
+              [rn/view {:style (styles/selected-item override-theme window-height @sheet-height insets)}
+               [selected-item]]])
 
-       (when selected-item
-         [rn/view
-          [rn/view {:style (styles/selected-item override-theme)}
-           [selected-item]]])
-
-       ;; handle
-       [rn/view {:style (styles/handle override-theme)}]
-       ;; content
-       [content]]]]))
+           ;; handle
+           [rn/view {:style (styles/handle override-theme)}]
+           ;; 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])]]))))