From d4cc0189d239275dd699fe6e310c44b84f1682ac Mon Sep 17 00:00:00 2001 From: Ibrahem Khalil Date: Mon, 9 Oct 2023 20:33:20 +0300 Subject: [PATCH] Disable scroll to the bottom button when composer is active. --- .../contexts/chat/composer/handlers.cljs | 6 +- .../contexts/chat/composer/sub_view.cljs | 3 +- .../contexts/chat/composer/view.cljs | 55 ++++++++++--------- 3 files changed, 34 insertions(+), 30 deletions(-) diff --git a/src/status_im2/contexts/chat/composer/handlers.cljs b/src/status_im2/contexts/chat/composer/handlers.cljs index ac49ed179c..4dc9e6a15f 100644 --- a/src/status_im2/contexts/chat/composer/handlers.cljs +++ b/src/status_im2/contexts/chat/composer/handlers.cljs @@ -18,7 +18,8 @@ {:keys [text-value focused? lock-selection? saved-cursor-position]} {:keys [height saved-height last-height opacity background-y container-opacity] :as animations} - {:keys [max-height] :as dimensions}] + {:keys [max-height] :as dimensions} + show-floating-scroll-down-button?] (reset! focused? true) (rf/dispatch [:chat.ui/set-input-focused true]) (reanimated/animate height (reanimated/get-shared-value last-height)) @@ -31,7 +32,8 @@ (when (and (not-empty @text-value) @input-ref) (.setNativeProps ^js @input-ref (clj->js {:selection {:start @saved-cursor-position :end @saved-cursor-position}}))) - (kb/handle-refocus-emoji-kb-ios props animations dimensions)) + (kb/handle-refocus-emoji-kb-ios props animations dimensions) + (reset! show-floating-scroll-down-button? false)) (defn blur [{:keys [text-value focused? lock-selection? cursor-position saved-cursor-position gradient-z-index diff --git a/src/status_im2/contexts/chat/composer/sub_view.cljs b/src/status_im2/contexts/chat/composer/sub_view.cljs index 8230ca3d17..bdd32139b0 100644 --- a/src/status_im2/contexts/chat/composer/sub_view.cljs +++ b/src/status_im2/contexts/chat/composer/sub_view.cljs @@ -47,7 +47,8 @@ :label (i18n/label :t/jump-to) :style {:align-self :center}}} {}]] - (when @show-floating-scroll-down-button? + (when (and (not @focused?) + @show-floating-scroll-down-button?) [quo/floating-shell-button {:scroll-to-bottom {:on-press scroll-to-bottom-fn}} style/scroll-to-bottom-button])])) diff --git a/src/status_im2/contexts/chat/composer/view.cljs b/src/status_im2/contexts/chat/composer/view.cljs index c1bb60e7e9..8979845483 100644 --- a/src/status_im2/contexts/chat/composer/view.cljs +++ b/src/status_im2/contexts/chat/composer/view.cljs @@ -105,34 +105,35 @@ :menu-items @(:menu-items state) :style (style/input-view state)} [rn/text-input - {:ref #(reset! (:input-ref props) %) - :default-value @(:text-value state) - :on-focus #(handler/focus props state animations dimensions) - :on-blur #(handler/blur state animations dimensions subscriptions) - :on-content-size-change #(handler/content-size-change % - state - animations - subscriptions - dimensions - (or keyboard-shown - (:edit subscriptions))) - :on-scroll #(handler/scroll % props state animations dimensions) - :on-change-text #(handler/change-text % props state) - :on-selection-change #(handler/selection-change % props state) - :on-selection #(selection/on-selection % props state) - :keyboard-appearance (quo.theme/theme-value :light :dark) - :max-height max-height + {:ref #(reset! (:input-ref props) %) + :default-value @(:text-value state) + :on-focus + #(handler/focus props state animations dimensions show-floating-scroll-down-button?) + :on-blur #(handler/blur state animations dimensions subscriptions) + :on-content-size-change #(handler/content-size-change % + state + animations + subscriptions + dimensions + (or keyboard-shown + (:edit subscriptions))) + :on-scroll #(handler/scroll % props state animations dimensions) + :on-change-text #(handler/change-text % props state) + :on-selection-change #(handler/selection-change % props state) + :on-selection #(selection/on-selection % props state) + :keyboard-appearance (quo.theme/theme-value :light :dark) + :max-height max-height :max-font-size-multiplier 1 - :multiline true - :placeholder (i18n/label :t/type-something) - :placeholder-text-color (colors/theme-colors colors/neutral-30 colors/neutral-50) - :style (style/input-text props - state - subscriptions - {:max-height max-height - :theme theme}) - :max-length constants/max-text-size - :accessibility-label :chat-message-input}]] + :multiline true + :placeholder (i18n/label :t/type-something) + :placeholder-text-color (colors/theme-colors colors/neutral-30 colors/neutral-50) + :style (style/input-text props + state + subscriptions + {:max-height max-height + :theme theme}) + :max-length constants/max-text-size + :accessibility-label :chat-message-input}]] (when chat-screen-loaded? [:<> [gradients/view props state animations show-bottom-gradient?]