diff --git a/src/status_im2/contexts/chat/composer/actions/view.cljs b/src/status_im2/contexts/chat/composer/actions/view.cljs index e5c3c3d67f..9a83d34f55 100644 --- a/src/status_im2/contexts/chat/composer/actions/view.cljs +++ b/src/status_im2/contexts/chat/composer/actions/view.cljs @@ -58,9 +58,9 @@ :i/arrow-up]]) (defn send-button - [state animations window-height images?] + [{:keys [text-value] :as state} animations window-height images?] (let [btn-opacity (reanimated/use-shared-value 0) - z-index (reagent/atom 0)] + z-index (reagent/atom (if (and (empty? @text-value) (not images?)) 0 1))] [:f> f-send-button state animations window-height images? btn-opacity z-index])) (defn audio-button @@ -176,7 +176,7 @@ :i/format]) (defn view - [props state animations window-height insets edit? images?] + [props state animations window-height insets {:keys [edit images]}] [rn/view {:style style/actions-container} [rn/view {:style {:flex-direction :row @@ -185,6 +185,6 @@ [image-button props animations insets] [reaction-button] [format-button]] - [:f> send-button state animations window-height images?] - (when (and (not edit?) (not images?)) + [:f> send-button state animations window-height images] + (when (and (not edit) (not images)) [audio-button props state animations])]) diff --git a/src/status_im2/contexts/chat/composer/effects.cljs b/src/status_im2/contexts/chat/composer/effects.cljs index b8e55d6614..7536108620 100644 --- a/src/status_im2/contexts/chat/composer/effects.cljs +++ b/src/status_im2/contexts/chat/composer/effects.cljs @@ -91,8 +91,7 @@ (.remove ^js @keyboard-frame-listener)) (defn initialize - [props state animations {:keys [max-height] :as dimensions} chat-input images? reply? - audio] + [props state animations {:keys [max-height] :as dimensions} {:keys [chat-input images reply audio]}] (rn/use-effect (fn [] (maximized-effect state animations dimensions chat-input) @@ -100,9 +99,9 @@ (layout-effect state) (kb-default-height-effect state) (background-effect state animations dimensions chat-input) - (images-effect props animations images?) + (images-effect props animations images) (audio-effect state animations audio) - (empty-effect state animations images? reply? audio) + (empty-effect state animations images reply audio) (kb/add-kb-listeners props state animations dimensions) #(component-will-unmount props)) [max-height])) @@ -110,7 +109,7 @@ (defn edit [{:keys [input-ref]} {:keys [text-value saved-cursor-position]} - edit] + {:keys [edit]}] (rn/use-effect (fn [] (let [edit-text (get-in edit [:content :text])] @@ -124,7 +123,7 @@ (defn reply [{:keys [input-ref]} {:keys [container-opacity]} - reply] + {:keys [reply]}] (rn/use-effect (fn [] (when reply @@ -134,7 +133,7 @@ [(:message-id reply)])) (defn edit-mentions - [{:keys [input-ref]} {:keys [text-value cursor-position]} input-with-mentions] + [{:keys [input-ref]} {:keys [text-value cursor-position]} {:keys [input-with-mentions]}] (rn/use-effect (fn [] (let [input-text (reduce (fn [acc item] (str acc (second item))) @@ -153,7 +152,7 @@ (defn update-input-mention [{:keys [input-ref]} {:keys [text-value]} - input-text] + {:keys [input-text]}] (rn/use-effect (fn [] (when (and input-text (not= @text-value input-text)) diff --git a/src/status_im2/contexts/chat/composer/handlers.cljs b/src/status_im2/contexts/chat/composer/handlers.cljs index 29ae90c740..69748a2f21 100644 --- a/src/status_im2/contexts/chat/composer/handlers.cljs +++ b/src/status_im2/contexts/chat/composer/handlers.cljs @@ -38,8 +38,7 @@ maximized?]} {:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]} {:keys [content-height max-height window-height]} - images - reply] + {:keys [images reply]}] (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)] diff --git a/src/status_im2/contexts/chat/composer/mentions/view.cljs b/src/status_im2/contexts/chat/composer/mentions/view.cljs index dcb2d17ab5..47b5e90ea8 100644 --- a/src/status_im2/contexts/chat/composer/mentions/view.cljs +++ b/src/status_im2/contexts/chat/composer/mentions/view.cljs @@ -30,16 +30,17 @@ user]) (defn- f-view - [suggestions-atom props state animations max-height cursor-pos] + [suggestions-atom props state animations {:keys [reply edit images]} max-height cursor-pos] (let [suggestions (rf/sub [:chat/mention-suggestions]) opacity (reanimated/use-shared-value (if (seq suggestions) 1 0)) size (count suggestions) data {:keyboard-height @(:kb-height state) :insets (safe-area/get-insets) :curr-height (reanimated/get-shared-value (:height animations)) - :window-height (rf/sub [:dimensions/window-height]) - :reply (rf/sub [:chats/reply-message]) - :edit (rf/sub [:chats/edit-message])} + :window-height (:height (rn/get-window)) + :reply reply + :edit edit + :images images} mentions-pos (utils/calc-suggestions-position cursor-pos max-height size state data)] (rn/use-effect (fn [] @@ -60,6 +61,6 @@ :accessibility-label :mentions-list}]])) (defn view - [props state animations max-height cursor-pos] + [props state animations subs max-height cursor-pos] (let [suggestions-atom (reagent/atom {})] - [:f> f-view suggestions-atom props state animations max-height cursor-pos])) + [:f> f-view suggestions-atom props state animations subs max-height cursor-pos])) diff --git a/src/status_im2/contexts/chat/composer/sub_view.cljs b/src/status_im2/contexts/chat/composer/sub_view.cljs index 4ee6ff0c5b..731178c5db 100644 --- a/src/status_im2/contexts/chat/composer/sub_view.cljs +++ b/src/status_im2/contexts/chat/composer/sub_view.cljs @@ -4,6 +4,7 @@ [react-native.blur :as blur] [react-native.core :as rn] [react-native.reanimated :as reanimated] + [react-native.safe-area :as safe-area] [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] @@ -25,10 +26,16 @@ [: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?]) + [{:keys [maximized?]} {:keys [height]} {:keys [images reply edit]}] + (let [insets (safe-area/get-insets) + extra-height (utils/calc-extra-content-height images reply edit) + translate-y (reanimated/use-shared-value + (utils/calc-shell-neg-y insets maximized? extra-height))] + (rn/use-effect (fn [] + (let [extra-height (utils/calc-extra-content-height images reply edit)] + (reanimated/animate translate-y + (utils/calc-shell-neg-y insets maximized? extra-height)))) + [@maximized? images reply edit]) [reanimated/view {:style (reanimated/apply-animations-to-style {:bottom height ; we use height of the input directly as bottom position @@ -48,5 +55,5 @@ {}]])) (defn shell-button - [insets {:keys [height]} {:keys [maximized?]}] - [:f> f-shell-button insets height maximized?]) + [state animations subs] + [:f> f-shell-button state animations subs]) diff --git a/src/status_im2/contexts/chat/composer/utils.cljs b/src/status_im2/contexts/chat/composer/utils.cljs index ec7193ec1e..4183fdae13 100644 --- a/src/status_im2/contexts/chat/composer/utils.cljs +++ b/src/status_im2/contexts/chat/composer/utils.cljs @@ -65,17 +65,22 @@ (let [lines (Math/round (/ height constants/line-height))] (if platform/ios? lines (dec lines)))) +(defn calc-extra-content-height + [images? reply? edit?] + (let [height (if images? constants/images-container-height 0) + height (if reply? (+ height constants/reply-container-height) height) + height (if edit? (+ height constants/edit-container-height) height)] + height)) + (defn calc-max-height - [window-height kb-height insets images? reply? edit?] + [{:keys [images reply edit]} window-height kb-height insets] (let [margin-top (if platform/ios? (:top insets) (+ 10 (:top insets))) max-height (- window-height margin-top kb-height constants/bar-container-height constants/actions-container-height) - max-height (if images? (- max-height constants/images-container-height) max-height) - max-height (if reply? (- max-height constants/reply-container-height) max-height) - max-height (if edit? (- max-height constants/edit-container-height) max-height)] + max-height (- max-height (calc-extra-content-height images reply edit))] max-height)) (defn empty-input? @@ -108,22 +113,23 @@ (* 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)))) + [insets maximized? extra-height] + (let [padding 6 + neg-y (if @maximized? -50 0)] + (- (+ constants/bar-container-height + constants/actions-container-height + (:bottom insets) + padding + extra-height + neg-y)))) (defn calc-suggestions-position [cursor-pos max-height size {:keys [maximized?]} - {:keys [insets curr-height window-height keyboard-height edit reply]}] + {:keys [insets curr-height window-height keyboard-height images reply edit]}] (let [base (+ constants/composer-default-height (:bottom insets) 8) base (+ base (- curr-height constants/input-height)) - base (if edit - (+ base constants/edit-container-height) - base) - base (if reply - (+ base constants/reply-container-height) - base) + base (+ base (calc-extra-content-height images reply edit)) view-height (- window-height keyboard-height (:top insets)) container-height (bounded-val (* (/ constants/mentions-max-height 4) size) @@ -170,8 +176,21 @@ :recording? (reagent/atom false) :first-level? (reagent/atom true) :menu-items (reagent/atom selection/first-level-menu-items)}) + +(defn init-subs + [] + (let [chat-input (rf/sub [:chats/current-chat-input])] + {:images (seq (rf/sub [:chats/sending-image])) + :audio (rf/sub [:chats/sending-audio]) + :reply (rf/sub [:chats/reply-message]) + :edit (rf/sub [:chats/edit-message]) + :input-with-mentions (rf/sub [:chat/input-with-mentions]) + :input-text (:input-text chat-input) + :input-content-height (:input-content-height chat-input)})) + (defn init-animations - [lines input-text images reply audio content-height max-height opacity background-y] + [{:keys [input-text images reply audio]} + lines content-height max-height opacity background-y] (let [initial-height (if (> lines 1) constants/multiline-minimized-height constants/input-height)] diff --git a/src/status_im2/contexts/chat/composer/view.cljs b/src/status_im2/contexts/chat/composer/view.cljs index a96fdcf8f9..98c36e048c 100644 --- a/src/status_im2/contexts/chat/composer/view.cljs +++ b/src/status_im2/contexts/chat/composer/view.cljs @@ -7,7 +7,6 @@ [react-native.reanimated :as reanimated] [reagent.core :as reagent] [utils.i18n :as i18n] - [utils.re-frame :as rf] [status-im2.contexts.chat.composer.style :as style] [status-im2.contexts.chat.composer.images.view :as images] [status-im2.contexts.chat.composer.reply.view :as reply] @@ -25,31 +24,20 @@ (defn sheet-component [{:keys [insets window-height blur-height opacity background-y]} props state] - (let [images (rf/sub [:chats/sending-image]) - audio (rf/sub [:chats/sending-audio]) - reply (rf/sub [:chats/reply-message]) - edit (rf/sub [:chats/edit-message]) - input-with-mentions (rf/sub [:chat/input-with-mentions]) - {:keys [input-text input-content-height] - :as chat-input} (rf/sub [:chats/current-chat-input]) - content-height (reagent/atom (or input-content-height + (let [subs (utils/init-subs) + content-height (reagent/atom (or (:input-content-height subs) constants/input-height)) {:keys [keyboard-shown]} (hooks/use-keyboard) - max-height (utils/calc-max-height window-height + max-height (utils/calc-max-height subs + window-height @(:kb-height state) - insets - (boolean (seq images)) - reply - edit) + insets) lines (utils/calc-lines (- @content-height constants/extra-content-offset)) max-lines (utils/calc-lines max-height) animations (utils/init-animations + subs lines - input-text - images - reply - audio content-height max-height opacity @@ -67,17 +55,14 @@ state animations dimensions - chat-input - (boolean (seq images)) - reply - audio) - (effects/edit props state edit) - (effects/reply props animations reply) - (effects/update-input-mention props state input-text) - (effects/edit-mentions props state input-with-mentions) + subs) + (effects/edit props state subs) + (effects/reply props animations subs) + (effects/update-input-mention props state subs) + (effects/edit-mentions props state subs) [:<> - [sub-view/shell-button insets animations state] - [mentions/view props state animations max-height cursor-pos] + [sub-view/shell-button state animations subs] + [mentions/view props state animations subs max-height cursor-pos] [gesture/gesture-detector {:gesture (drag-gesture/drag-gesture props state animations dimensions keyboard-shown)} [reanimated/view @@ -99,12 +84,12 @@ {: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 images reply) + :on-blur #(handler/blur state animations dimensions subs) :on-content-size-change #(handler/content-size-change % state animations dimensions - (or keyboard-shown edit)) + (or keyboard-shown (:edit subs))) :on-scroll #(handler/scroll % props state animations dimensions) :on-change-text #(handler/change-text % props state) :on-selection-change #(handler/selection-change % props state) @@ -119,8 +104,7 @@ :accessibility-label :chat-message-input}]] [gradients/view props state animations show-bottom-gradient?]] [images/images-list] - [actions/view props state animations window-height insets edit - (boolean (seq images))]]]])) + [actions/view props state animations window-height insets subs]]]])) (defn composer [insets] diff --git a/src/status_im2/contexts/chat/messages/content/album/view.cljs b/src/status_im2/contexts/chat/messages/content/album/view.cljs index f377883021..717a56000c 100644 --- a/src/status_im2/contexts/chat/messages/content/album/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/album/view.cljs @@ -72,5 +72,6 @@ [:<> (map-indexed (fn [index item] - [image/image-message index item context #(on-long-press message context)]) + [:<> {:key (:message-id item)} + [image/image-message index item context #(on-long-press message context)]]) (:album message))]))) diff --git a/src/status_im2/contexts/chat/messages/content/image/view.cljs b/src/status_im2/contexts/chat/messages/content/image/view.cljs index 82ba24ba6a..826f0f351d 100644 --- a/src/status_im2/contexts/chat/messages/content/image/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/image/view.cljs @@ -15,23 +15,21 @@ (defn image-message [index {:keys [content image-width image-height message-id] :as message} context on-long-press] - (let [insets (safe-area/get-insets) - dimensions (calculate-dimensions (or image-width 1000) (or image-height 1000))] - (fn [] - (let [shared-element-id (rf/sub [:shared-element-id])] - [rn/touchable-opacity - {:active-opacity 1 - :key message-id - :style {:margin-top (when (pos? index) 10)} - :on-long-press on-long-press - :on-press #(rf/dispatch [:chat.ui/navigate-to-lightbox - message-id - {:messages [message] - :index 0 - :insets insets}])} - (when (= index 0) - [rn/view {:style {:margin-bottom 10}} [text/text-content message context]]) - [fast-image/fast-image - {:source {:uri (:image content)} - :style (merge dimensions {:border-radius 12}) - :native-ID (when (= shared-element-id message-id) :shared-element)}]])))) + (let [insets (safe-area/get-insets) + dimensions (calculate-dimensions (or image-width 1000) (or image-height 1000)) + shared-element-id (rf/sub [:shared-element-id])] + [rn/touchable-opacity + {:active-opacity 1 + :style {:margin-top (when (pos? index) 10)} + :on-long-press on-long-press + :on-press #(rf/dispatch [:chat.ui/navigate-to-lightbox + message-id + {:messages [message] + :index 0 + :insets insets}])} + (when (= index 0) + [rn/view {:style {:margin-bottom 10}} [text/text-content message context]]) + [fast-image/fast-image + {:source {:uri (:image content)} + :style (merge dimensions {:border-radius 12}) + :native-ID (when (= shared-element-id message-id) :shared-element)}]]))