From 08e6b8164ecbae013eec2c0375e4010298b7f912 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Mon, 1 May 2023 20:39:07 +0400 Subject: [PATCH] feat: composer - edit message (#15772) * feat: new composer - edit message --- ios/Podfile.lock | 6 +- .../icons2/16x16/connector-dotted@2x.png | Bin 0 -> 528 bytes .../icons2/16x16/connector-dotted@3x.png | Bin 0 -> 769 bytes src/status_im/chat/models/input.cljs | 44 ++++++++------ .../bottom_sheet_composer/actions/view.cljs | 12 ++-- .../chat/bottom_sheet_composer/constants.cljs | 2 + .../bottom_sheet_composer/edit/style.cljs | 23 ++++++++ .../chat/bottom_sheet_composer/edit/view.cljs | 49 ++++++++++++++++ .../chat/bottom_sheet_composer/effects.cljs | 17 +++++- .../chat/bottom_sheet_composer/handlers.cljs | 2 + .../bottom_sheet_composer/reply/view.cljs | 13 +++-- .../chat/bottom_sheet_composer/style.cljs | 14 ++--- .../chat/bottom_sheet_composer/utils.cljs | 22 +++++-- .../chat/bottom_sheet_composer/view.cljs | 49 +++++++++------- .../chat/messages/list/new_temp_view.cljs | 55 ++++++++++++++---- 15 files changed, 229 insertions(+), 79 deletions(-) create mode 100644 resources/images/icons2/16x16/connector-dotted@2x.png create mode 100644 resources/images/icons2/16x16/connector-dotted@3x.png create mode 100644 src/status_im2/contexts/chat/bottom_sheet_composer/edit/style.cljs create mode 100644 src/status_im2/contexts/chat/bottom_sheet_composer/edit/view.cljs diff --git a/ios/Podfile.lock b/ios/Podfile.lock index d438f999fd..4a07022f71 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -682,11 +682,11 @@ SPEC CHECKSUMS: boost: a7c83b31436843459a1961bfd74b96033dc77234 BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872 CryptoSwift: c4f2debceb38bf44c80659afe009f71e23e4a082 - DoubleConversion: cde416483dac037923206447da6e1454df403714 + DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662 FBLazyVector: d2db9d00883282819d03bbd401b2ad4360d47580 FBReactNativeSpec: 94da4d84ba3b1acf459103320882daa481a2b62d fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 - glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc + glog: 3ac2326f7fee4840a3066c90eb135ecd20496ded HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352 Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8 libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef @@ -763,4 +763,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: c29de3b14e3275299c51aa95520622f09d084bcb -COCOAPODS: 1.12.1 +COCOAPODS: 1.12.0 diff --git a/resources/images/icons2/16x16/connector-dotted@2x.png b/resources/images/icons2/16x16/connector-dotted@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..f669467fbf0762782abd1a53eaf41f557f54603e GIT binary patch literal 528 zcmV+r0`L8aP)CWI5>fL0y)CIZ|iG2gCGfi z=NLwQ$<{Sn)2DCyKJ9=5fgwfO&Z|oxO+9CkAhzRb1W_c0x~zJ&tHR0rdm_qDLy?G( zR@c1&#JwPq`|2^eyv6Tom6@J@YNZmK)jByv&N8sClgvLSRKz zGKNQ_z?=|hstkz_kpeSA6VW}DX*qIaW7@$9@ zJsF07i8LfL#7^cX8QE_T;=|AHJsSgW3P=u|Rz>-H)P z!n+P?m3y?n>4W;!Tgns?iMD(6akBni!BFFme1;K%9$ZJBNuk_FeNo8tQH`^T7PcYC z?d*5G!9Q@x955DY8=2s8{%|x^0-PrvhZONW_e*nzjJ)a$dA|Y&lAL850~-s7Th$%A zor5v9#DE#P>4NwnG2x>c_1yNS8A=uuIzwJRs8^W$p%#3D34A~Pyx&E^a1?|;48C$k zcUnwrsIWuqfZT(E$|X)ElAe^*STcu#=qGkSt}drtjB~nP4#RQOikQ1i=zR&f&d|CT zmFg~zI|t|3A-M_CWeWt=l3_@o_H**cOUc*eRHEcnI#t=dw<{Mbc^ByQ60aEp**dYt zp;^#WwL7o>w+_SDN{~*PNodx47AM)O7{yj$JFWnbjRA z*Tm4ADG$Z27SVKJp^K9pR{&YbG(#!?1nEGznyF$mSzRs-(Q4f^VKA8l5u~fDX5zxg zbyHGOQZPyJ>A*rBjdHs1)QR-+_vjleV?)r@@TN6C7m!?@z%n)jNw6gm>=u@>B1o?t zDUogoR8>&;NoU@y2&xLvNC#3*Y^(}a1Sxk*k82rYJ}hKS5E}EokbDdaSq};iRkhk8 zxJS(iEM#R1PWOB-J}3nLgOZYxk~f9EJEI#cC(c8OM^0E-Y5W->#yQlD4#Des-thr&iZzKN!4#Nz+Xg|)o00000NkvXXu0mjfw@ph8 literal 0 HcmV?d00001 diff --git a/src/status_im/chat/models/input.cljs b/src/status_im/chat/models/input.cljs index 2ac0d68c4f..8c5c4dc438 100644 --- a/src/status_im/chat/models/input.cljs +++ b/src/status_im/chat/models/input.cljs @@ -6,6 +6,7 @@ [status-im.chat.models.mentions :as mentions] [status-im.chat.models.message :as chat.message] [status-im.chat.models.message-content :as message-content] + [status-im2.config :as config] [status-im2.constants :as constants] [utils.re-frame :as rf] [utils.i18n :as i18n] @@ -50,6 +51,12 @@ (let [current-chat-id (or chat-id (:current-chat-id db))] {:db (assoc-in db [:chat/inputs current-chat-id :input-maximized?] maximized?)})) +(rf/defn set-input-focused + {:events [:chat.ui/set-input-focused]} + [{db :db} focused? chat-id] + (let [current-chat-id (or chat-id (:current-chat-id db))] + {:db (assoc-in db [:chat/inputs current-chat-id :focused?] focused?)})) + (rf/defn select-mention {:events [:chat.ui/select-mention]} [{:keys [db] :as cofx} text-input-ref {:keys [primary-name searched-text match public-key] :as user}] @@ -98,7 +105,8 @@ (update-in [:chat/inputs current-chat-id :metadata] dissoc :sending-image)) - :dispatch [:mention/to-input-field text current-chat-id]})) + :dispatch (when-not config/new-composer-enabled? + [:mention/to-input-field text current-chat-id])})) (rf/defn show-contact-request-input "Sets reference to previous chat message and focuses on input" @@ -173,7 +181,8 @@ [{:keys [db] :as cofx}] (let [current-chat-id (:current-chat-id db)] (rf/merge cofx - {:set-text-input-value [current-chat-id ""]} + (when-not config/new-composer-enabled? + {:set-text-input-value [current-chat-id ""]}) (clean-input current-chat-id) (mentions/clear-mentions)))) @@ -217,22 +226,21 @@ (rf/defn send-edited-message [{:keys [db] :as cofx} text {:keys [message-id quoted-message chat-id]}] - (let [pinned-message (get-in db [:pin-messages chat-id message-id])] - (rf/merge - cofx - {:json-rpc/call [{:method "wakuext_editMessage" - :params [{:id message-id - :text text - :content-type (if (message-content/emoji-only-content? - {:text text :response-to quoted-message}) - constants/content-type-emoji - constants/content-type-text)}] - :js-response true - :on-error #(log/error "failed to edit message " %) - :on-success (fn [result] - (re-frame/dispatch [:sanitize-messages-and-process-response - result]))}]} - (cancel-message-edit)))) + (rf/merge + cofx + {:json-rpc/call [{:method "wakuext_editMessage" + :params [{:id message-id + :text text + :content-type (if (message-content/emoji-only-content? + {:text text :response-to quoted-message}) + constants/content-type-emoji + constants/content-type-text)}] + :js-response true + :on-error #(log/error "failed to edit message " %) + :on-success (fn [result] + (re-frame/dispatch [:sanitize-messages-and-process-response + result]))}]} + (cancel-message-edit))) (rf/defn send-current-message "Sends message from current chat input" diff --git a/src/status_im2/contexts/chat/bottom_sheet_composer/actions/view.cljs b/src/status_im2/contexts/chat/bottom_sheet_composer/actions/view.cljs index 1b1d18358c..af5445052c 100644 --- a/src/status_im2/contexts/chat/bottom_sheet_composer/actions/view.cljs +++ b/src/status_im2/contexts/chat/bottom_sheet_composer/actions/view.cljs @@ -14,8 +14,7 @@ [status-im2.contexts.chat.bottom-sheet-composer.actions.style :as style])) (defn send-message - [{:keys [input-ref]} - {:keys [text-value focused? maximized?]} + [{:keys [text-value focused? maximized?]} {:keys [height saved-height last-height opacity background-y container-opacity]} window-height] (reanimated/animate height constants/input-height) @@ -33,13 +32,10 @@ (rf/dispatch [:chat.ui/set-chat-input-text nil]) (reset! maximized? false) (reset! text-value "") - (when @input-ref - (.clear ^js @input-ref)) (messages.list/scroll-to-bottom)) (defn send-button - [props - {:keys [text-value] :as state} + [{:keys [text-value] :as state} animations window-height images?] @@ -64,7 +60,7 @@ {:icon true :size 32 :accessibility-label :send-message-button - :on-press #(send-message props state animations window-height)} + :on-press #(send-message state animations window-height)} :i/arrow-up]])]))]) (defn audio-button @@ -140,5 +136,5 @@ [image-button props animations insets] [reaction-button] [format-button]] - [send-button props state animations window-height images?] + [send-button state animations window-height images?] [audio-button]]) diff --git a/src/status_im2/contexts/chat/bottom_sheet_composer/constants.cljs b/src/status_im2/contexts/chat/bottom_sheet_composer/constants.cljs index c38f34fc7e..ca4007c05a 100644 --- a/src/status_im2/contexts/chat/bottom_sheet_composer/constants.cljs +++ b/src/status_im2/contexts/chat/bottom_sheet_composer/constants.cljs @@ -19,6 +19,8 @@ (def ^:const reply-container-height 32) +(def ^:const edit-container-height 32) + (def ^:const extra-content-offset (if platform/ios? 6 0)) (def ^:const content-change-threshold 10) diff --git a/src/status_im2/contexts/chat/bottom_sheet_composer/edit/style.cljs b/src/status_im2/contexts/chat/bottom_sheet_composer/edit/style.cljs new file mode 100644 index 0000000000..8e89a12a69 --- /dev/null +++ b/src/status_im2/contexts/chat/bottom_sheet_composer/edit/style.cljs @@ -0,0 +1,23 @@ +(ns status-im2.contexts.chat.bottom-sheet-composer.edit.style) + +(def container + {:flex-direction :row + :height 24}) + +(def content-container + {:flex 1 + :flex-direction :row}) + +(def icon-container + {:position :absolute + :left 0 + :bottom -4 + :width 16 + :height 16}) + +(def text-container + {:position :absolute + :left 24 + :top 3 + :flex-direction :row + :align-items :center}) diff --git a/src/status_im2/contexts/chat/bottom_sheet_composer/edit/view.cljs b/src/status_im2/contexts/chat/bottom_sheet_composer/edit/view.cljs new file mode 100644 index 0000000000..5c0818ce3b --- /dev/null +++ b/src/status_im2/contexts/chat/bottom_sheet_composer/edit/view.cljs @@ -0,0 +1,49 @@ +(ns status-im2.contexts.chat.bottom-sheet-composer.edit.view + (:require + [react-native.reanimated :as reanimated] + [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants] + [utils.i18n :as i18n] + [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [re-frame.core :as rf] + [react-native.core :as rn] + [status-im2.contexts.chat.bottom-sheet-composer.edit.style :as style])) + +(defn edit-message + [cancel] + [rn/view + {:style style/container + :accessibility-label :edit-message} + [rn/view {:style style/content-container} + [quo/icon + :i/connector-dotted + {:size 16 + :color (colors/theme-colors colors/neutral-40 colors/neutral-60) + :container-style style/icon-container}] + [rn/view {:style style/text-container} + [quo/text + {:weight :medium + :size :paragraph-2} + (i18n/label :t/editing-message)]]] + [quo/button + {:width 24 + :size 24 + :accessibility-label :edit-cancel-button + :on-press (fn [] + (cancel) + (rf/dispatch [:chat.ui/cancel-message-edit])) + :type :outline} + [quo/icon :i/close + {:size 16 + :color (colors/theme-colors colors/neutral-100 colors/neutral-40)}]]]) + +(defn- f-view + [edit cancel] + (let [height (reanimated/use-shared-value (if edit constants/edit-container-height 0))] + (rn/use-effect #(reanimated/animate height (if edit constants/edit-container-height 0)) [edit]) + [reanimated/view {:style (reanimated/apply-animations-to-style {:height height} {})} + (when edit [edit-message cancel])])) + +(defn view + [edit cancel] + [:f> f-view edit cancel]) diff --git a/src/status_im2/contexts/chat/bottom_sheet_composer/effects.cljs b/src/status_im2/contexts/chat/bottom_sheet_composer/effects.cljs index 67de294398..3bcd36ca84 100644 --- a/src/status_im2/contexts/chat/bottom_sheet_composer/effects.cljs +++ b/src/status_im2/contexts/chat/bottom_sheet_composer/effects.cljs @@ -65,6 +65,19 @@ (when-not reply? (reset! replying? false))) +(defn edit-effect + [{:keys [text-value saved-cursor-position]} + {:keys [editing? input-ref]} + edit] + (let [edit-text (get-in edit [:content :text])] + (when (and (not @editing?) edit @input-ref) + (.focus ^js @input-ref) + (reset! editing? true) + (reset! text-value edit-text) + (reset! saved-cursor-position (count edit-text))) + (when-not edit-text + (reset! editing? false)))) + (defn empty-effect [{:keys [text-value maximized? focused?]} {:keys [container-opacity]} @@ -80,7 +93,8 @@ (.remove ^js @keyboard-frame-listener)) (defn initialize - [props state animations {:keys [max-height] :as dimensions} chat-input keyboard-height images? reply?] + [props state animations {:keys [max-height] :as dimensions} chat-input keyboard-height images? reply? + edit] (rn/use-effect (fn [] (maximized-effect state animations dimensions chat-input) @@ -89,6 +103,7 @@ (kb-default-height-effect state) (background-effect state animations dimensions chat-input) (images-or-reply-effect animations props images? reply?) + (edit-effect state props edit) (empty-effect state animations images? reply?) (kb/add-kb-listeners props state animations dimensions keyboard-height) #(component-will-unmount props)) diff --git a/src/status_im2/contexts/chat/bottom_sheet_composer/handlers.cljs b/src/status_im2/contexts/chat/bottom_sheet_composer/handlers.cljs index f46e1961de..310638c7bb 100644 --- a/src/status_im2/contexts/chat/bottom_sheet_composer/handlers.cljs +++ b/src/status_im2/contexts/chat/bottom_sheet_composer/handlers.cljs @@ -14,6 +14,7 @@ :as animations} {:keys [max-height] :as dimensions}] (reset! focused? true) + (rf/dispatch [:chat.ui/set-input-focused true]) (reanimated/animate height (reanimated/get-shared-value last-height)) (reanimated/set-shared-value saved-height (reanimated/get-shared-value last-height)) (reanimated/animate container-opacity 1) @@ -39,6 +40,7 @@ (let [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]) (reanimated/set-shared-value last-height reopen-height) (reanimated/animate height min-height) (reanimated/set-shared-value saved-height min-height) diff --git a/src/status_im2/contexts/chat/bottom_sheet_composer/reply/view.cljs b/src/status_im2/contexts/chat/bottom_sheet_composer/reply/view.cljs index d00e116adf..2beee6e1df 100644 --- a/src/status_im2/contexts/chat/bottom_sheet_composer/reply/view.cljs +++ b/src/status_im2/contexts/chat/bottom_sheet_composer/reply/view.cljs @@ -126,11 +126,14 @@ (get-quoted-text-with-mentions (or parsed-text (:parsed-text content))))]])] (when (and in-chat-input? (not recording-audio?)) [quo/button - {:icon true - :type :outline - :size 24 - :on-press #(rf/dispatch [:chat.ui/cancel-message-reply])} - :i/close]) + {:width 24 + :size 24 + :accessibility-label :reply-cancel-button + :on-press #(rf/dispatch [:chat.ui/cancel-message-reply]) + :type :outline} + [quo/icon :i/close + {:size 16 + :color (colors/theme-colors colors/neutral-100 colors/neutral-40)}]]) (when (and in-chat-input? recording-audio?) [linear-gradient/linear-gradient {:colors [(colors/theme-colors colors/white-opa-0 colors/neutral-90-opa-0) diff --git a/src/status_im2/contexts/chat/bottom_sheet_composer/style.cljs b/src/status_im2/contexts/chat/bottom_sheet_composer/style.cljs index 83d9b069fc..73cd8a26be 100644 --- a/src/status_im2/contexts/chat/bottom_sheet_composer/style.cljs +++ b/src/status_im2/contexts/chat/bottom_sheet_composer/style.cljs @@ -6,18 +6,18 @@ [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants])) (defn shadow - [elevation?] + [focused?] (if platform/ios? {:shadow-radius 20 :shadow-opacity (colors/theme-colors 0.1 0.7) :shadow-color colors/neutral-100 :shadow-offset {:width 0 :height (colors/theme-colors -4 -8)}} - {:elevation (if elevation? 10 0)})) + {:elevation (if @focused? 10 0)})) (defn sheet-container - [insets opacity elevation?] + [insets {:keys [focused?]} {:keys [container-opacity]}] (reanimated/apply-animations-to-style - {:opacity opacity} + {:opacity container-opacity} (merge {:border-top-left-radius 20 :border-top-right-radius 20 @@ -29,7 +29,7 @@ :background-color (colors/theme-colors colors/white colors/neutral-95) :z-index 3 :padding-bottom (:bottom insets)} - (shadow elevation?)))) + (shadow focused?)))) (def bar-container {:height constants/bar-container-height @@ -55,7 +55,7 @@ :overflow :hidden})) (defn input - [maximized? saved-keyboard-height] + [focused? saved-keyboard-height] (merge typography/paragraph-1 {:min-height constants/input-height :color (colors/theme-colors :black :white) @@ -65,7 +65,7 @@ :position (if saved-keyboard-height :relative :absolute) :top 0 :left 0 - :right (when (or maximized? platform/ios?) 0)})) + :right (when (or focused? platform/ios?) 0)})) (defn background [opacity background-y window-height] diff --git a/src/status_im2/contexts/chat/bottom_sheet_composer/utils.cljs b/src/status_im2/contexts/chat/bottom_sheet_composer/utils.cljs index 855823f095..9dc35e2f7c 100644 --- a/src/status_im2/contexts/chat/bottom_sheet_composer/utils.cljs +++ b/src/status_im2/contexts/chat/bottom_sheet_composer/utils.cljs @@ -3,7 +3,8 @@ [oops.core :as oops] [react-native.platform :as platform] [react-native.reanimated :as reanimated] - [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants])) + [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants] + [utils.re-frame :as rf])) (defn bounded-val [val min-val max-val] @@ -60,7 +61,7 @@ (if platform/ios? lines (dec lines)))) (defn calc-max-height - [window-height kb-height insets images? reply?] + [window-height kb-height insets images? reply? edit?] (let [margin-top (if platform/ios? (:top insets) (+ 10 (:top insets))) max-height (- window-height margin-top @@ -68,7 +69,8 @@ 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 reply? (- max-height constants/reply-container-height) max-height) + max-height (if edit? (- max-height constants/edit-container-height) max-height)] max-height)) (defn empty-input? @@ -76,5 +78,15 @@ (and (empty? text) (empty? images) (not reply?))) (defn android-elevation? - [lines images reply?] - (or (> lines 1) (seq images) reply?)) + [lines images reply? edit?] + (or (> lines 1) (seq images) reply? edit?)) + +(defn cancel-edit-message + [{:keys [text-value maximized?]} + {:keys [height saved-height last-height]}] + (when-not @maximized? + (reanimated/animate height constants/input-height) + (reanimated/set-shared-value saved-height constants/input-height) + (reanimated/set-shared-value last-height constants/input-height)) + (reset! text-value "") + (rf/dispatch [:chat.ui/set-input-content-height constants/input-height])) diff --git a/src/status_im2/contexts/chat/bottom_sheet_composer/view.cljs b/src/status_im2/contexts/chat/bottom_sheet_composer/view.cljs index 2e1963cf92..2819ca8475 100644 --- a/src/status_im2/contexts/chat/bottom_sheet_composer/view.cljs +++ b/src/status_im2/contexts/chat/bottom_sheet_composer/view.cljs @@ -11,6 +11,7 @@ [status-im2.contexts.chat.bottom-sheet-composer.images.view :as images] [status-im2.contexts.chat.bottom-sheet-composer.reply.view :as reply] [utils.re-frame :as rf] + [status-im2.contexts.chat.bottom-sheet-composer.edit.view :as edit] [status-im2.contexts.chat.bottom-sheet-composer.utils :as utils] [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants] [status-im2.contexts.chat.bottom-sheet-composer.actions.view :as actions] @@ -32,7 +33,8 @@ :emoji-kb-extra-height (atom nil) :saved-emoji-kb-extra-height (atom nil) :replying? (atom nil) - :sending-images? (atom nil)} + :sending-images? (atom nil) + :editing? (atom nil)} state {:text-value (reagent/atom "") :cursor-position (reagent/atom 0) :saved-cursor-position (reagent/atom 0) @@ -47,6 +49,7 @@ (fn [] (let [images (rf/sub [:chats/sending-image]) reply (rf/sub [:chats/reply-message]) + edit (rf/sub [:chats/edit-message]) {:keys [input-text input-content-height] :as chat-input} (rf/sub [:chats/current-chat-input]) content-height (reagent/atom (or input-content-height @@ -58,7 +61,8 @@ kb-height insets (seq images) - reply) + reply + edit) lines (utils/calc-lines @content-height) max-lines (utils/calc-lines max-height) initial-height (if (> lines 1) @@ -89,8 +93,7 @@ :window-height window-height :lines lines :max-lines max-lines} - show-bottom-gradient? (utils/show-bottom-gradient? state dimensions) - android-elevation? (utils/android-elevation? lines images reply)] + show-bottom-gradient? (utils/show-bottom-gradient? state dimensions)] (effects/initialize props state animations @@ -98,16 +101,16 @@ chat-input keyboard-height (seq images) - reply) + reply + edit) [gesture/gesture-detector {:gesture (drag-gesture/drag-gesture props state animations dimensions keyboard-shown)} [reanimated/view - {:style (style/sheet-container insets - (:container-opacity animations) - android-elevation?) + {:style (style/sheet-container insets state animations) :on-layout #(handler/layout % state blur-height)} [sub-view/bar] - [reply/view] + [reply/view reply] + [edit/view edit #(utils/cancel-edit-message state animations)] [reanimated/touchable-opacity {:active-opacity 1 :on-press (when @(:input-ref props) #(.focus ^js @(:input-ref props))) @@ -122,7 +125,7 @@ state animations dimensions - keyboard-shown) + (or keyboard-shown edit)) :on-scroll #(handler/scroll % state animations dimensions) :on-change-text #(handler/change-text % props state) :on-selection-change #(handler/selection-change % state) @@ -131,23 +134,25 @@ :multiline true :placeholder (i18n/label :t/type-something) :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50) - :style (style/input @(:maximized? state) + :style (style/input @(:focused? state) @(:saved-emoji-kb-extra-height props)) :accessibility-label :chat-message-input}] [gradients/view props state animations show-bottom-gradient?]] [images/images-list] [actions/view props state animations window-height insets (seq images)]]]))]))]) +(defn f-bottom-sheet-composer + [insets] + (let [window-height (rf/sub [:dimensions/window-height]) + opacity (reanimated/use-shared-value 0) + background-y (reanimated/use-shared-value (- window-height)) + blur-height (reanimated/use-shared-value (+ constants/composer-default-height + (:bottom insets)))] + [rn/view + [reanimated/view {:style (style/background opacity background-y window-height)}] + [sub-view/blur-view blur-height] + [sheet insets window-height blur-height opacity background-y]])) + (defn bottom-sheet-composer [insets] - [:f> - (fn [] - (let [window-height (rf/sub [:dimensions/window-height]) - opacity (reanimated/use-shared-value 0) - background-y (reanimated/use-shared-value (- window-height)) - blur-height (reanimated/use-shared-value (+ constants/composer-default-height - (:bottom insets)))] - [rn/view - [reanimated/view {:style (style/background opacity background-y window-height)}] - [sub-view/blur-view blur-height] - [sheet insets window-height blur-height opacity background-y]]))]) + [:f> f-bottom-sheet-composer insets]) diff --git a/src/status_im2/contexts/chat/messages/list/new_temp_view.cljs b/src/status_im2/contexts/chat/messages/list/new_temp_view.cljs index 053cfa2e5e..f71e4a142d 100644 --- a/src/status_im2/contexts/chat/messages/list/new_temp_view.cljs +++ b/src/status_im2/contexts/chat/messages/list/new_temp_view.cljs @@ -4,11 +4,13 @@ [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.bottom-sheet-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] @@ -103,6 +105,47 @@ [content.deleted/deleted-message message-data context] [message/message-with-reactions message-data context keyboard-shown])]))]) +(defn calc-shell-position + [y] + (let [{:keys [input-content-height focused?]} (rf/sub [:chats/current-chat-input]) + reply (rf/sub [:chats/reply-message]) + edit (rf/sub [:chats/edit-message]) + lines (utils/calc-lines input-content-height) + base (if (or reply edit) + (- composer.constants/edit-container-height) + 0)] + (if (not focused?) + (if (> lines 1) (+ -18 base) base) + (if (> lines 12) + (reanimated/get-shared-value y) + (if (> lines 1) (- (- input-content-height composer.constants/input-height base)) base))))) + +(defn shell-button + [insets] + (let [y (reanimated/use-shared-value 0) + shell-position (calc-shell-position y)] + (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 #(do + (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 [] @@ -139,16 +182,8 @@ :inverted (when platform/ios? true) :style (when platform/android? {:scaleY -1}) :on-layout on-messages-view-layout}] - [quo/floating-shell-button - (merge {:jump-to - {:on-press #(do - (rf/dispatch [:chat/close true]) - (rf/dispatch [:shell/navigate-to-jump-to])) - :label (i18n/label :t/jump-to)}} - (when @show-floating-scroll-down-button - {:scroll-to-bottom {:on-press scroll-to-bottom}})) - {:position :absolute - :bottom (+ (:bottom insets) composer.constants/composer-default-height 6)}]]))) + [:f> shell-button insets]]))) + (defn use-keyboard-visibility []