feat: composer - edit message (#15772)
* feat: new composer - edit message
This commit is contained in:
parent
9a8354f783
commit
08e6b8164e
|
@ -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
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 528 B |
Binary file not shown.
After Width: | Height: | Size: 769 B |
|
@ -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"
|
||||
|
|
|
@ -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]])
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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})
|
|
@ -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])
|
|
@ -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))
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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]))
|
||||
|
|
|
@ -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])
|
||||
|
|
|
@ -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
|
||||
[]
|
||||
|
|
Loading…
Reference in New Issue