From 7e1af5b80d36b9d79635cab0e873c874ef9bec2a Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Wed, 10 May 2023 12:17:24 +0400 Subject: [PATCH] Composer polishing (#15857) * refactor: composer --- .../contexts/chat/composer/gesture.cljs | 3 +- .../contexts/chat/composer/handlers.cljs | 18 ++++--- .../contexts/chat/composer/sub_view.cljs | 35 +++++++++++- .../contexts/chat/composer/utils.cljs | 5 ++ .../contexts/chat/composer/view.cljs | 4 +- .../contexts/chat/messages/list/view.cljs | 54 +------------------ 6 files changed, 58 insertions(+), 61 deletions(-) diff --git a/src/status_im2/contexts/chat/composer/gesture.cljs b/src/status_im2/contexts/chat/composer/gesture.cljs index 747d1527cd..b62bce6ec0 100644 --- a/src/status_im2/contexts/chat/composer/gesture.cljs +++ b/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)) diff --git a/src/status_im2/contexts/chat/composer/handlers.cljs b/src/status_im2/contexts/chat/composer/handlers.cljs index f696d0c51f..24c746b20a 100644 --- a/src/status_im2/contexts/chat/composer/handlers.cljs +++ b/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") - constants/extra-content-offset) + (let [event-size (oops/oget event "nativeEvent.contentSize.height") + 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 diff --git a/src/status_im2/contexts/chat/composer/sub_view.cljs b/src/status_im2/contexts/chat/composer/sub_view.cljs index bf656f5bde..4ee6ff0c5b 100644 --- a/src/status_im2/contexts/chat/composer/sub_view.cljs +++ b/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?]) diff --git a/src/status_im2/contexts/chat/composer/utils.cljs b/src/status_im2/contexts/chat/composer/utils.cljs index 8f4cef1db3..3c275793c1 100644 --- a/src/status_im2/contexts/chat/composer/utils.cljs +++ b/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?]} diff --git a/src/status_im2/contexts/chat/composer/view.cljs b/src/status_im2/contexts/chat/composer/view.cljs index ecc13f7c9a..d5176fdf9e 100644 --- a/src/status_im2/contexts/chat/composer/view.cljs +++ b/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)} diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index 333348e092..9795c28e92 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/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}] - [:f> shell-button insets]]))) + :on-layout on-messages-view-layout}]]))) ;; This should be replaced with keyboard hook. It has to do with flat-list probably. The keyboard-shown -;; value -;; updates in the parent component, but does not get passed to the children. +;; value 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 []