From ca35de2f72c08aaefac1f5b9644c4e10001aa5f4 Mon Sep 17 00:00:00 2001 From: flexsurfer Date: Wed, 7 Jun 2023 13:52:54 +0200 Subject: [PATCH] =?UTF-8?q?[#16086]=20Messaging=20-=20Composer=20-=20Show?= =?UTF-8?q?=20current=20message=20for=20user=20context=E2=80=A6=20(#16128)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/bottom_sheet/styles.cljs | 4 +- src/status_im2/common/bottom_sheet/view.cljs | 85 ++++++++++--------- .../contexts/chat/messages/content/view.cljs | 24 ++++-- src/status_im2/navigation/view.cljs | 2 +- 4 files changed, 65 insertions(+), 50 deletions(-) diff --git a/src/status_im2/common/bottom_sheet/styles.cljs b/src/status_im2/common/bottom_sheet/styles.cljs index 3b929da5b8..04a1520913 100644 --- a/src/status_im2/common/bottom_sheet/styles.cljs +++ b/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 diff --git a/src/status_im2/common/bottom_sheet/view.cljs b/src/status_im2/common/bottom_sheet/view.cljs index 08dce17aec..3947a44791 100644 --- a/src/status_im2/common/bottom_sheet/view.cljs +++ b/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]]]])))) diff --git a/src/status_im2/contexts/chat/messages/content/view.cljs b/src/status_im2/contexts/chat/messages/content/view.cljs index 6f7110cc3d..28ee10bb8c 100644 --- a/src/status_im2/contexts/chat/messages/content/view.cljs +++ b/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]]]]) diff --git a/src/status_im2/navigation/view.cljs b/src/status_im2/navigation/view.cljs index 0bf2d268f3..dc73cf5104 100644 --- a/src/status_im2/navigation/view.cljs +++ b/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])]]))))