status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: composer - edit message (#15772) 

* feat: new composer - edit message
This commit is contained in:
Omar Basem 2023-05-01 20:39:07 +04:00 committed by GitHub
parent 9a8354f783
commit 08e6b8164e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 229 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ios/Podfile.lock
View File

@ -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

BIN
resources/images/icons2/16x16/connector-dotted@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 528 B

BIN
resources/images/icons2/16x16/connector-dotted@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 769 B

16
src/status_im/chat/models/input.cljs
View File

@ -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,7 +226,6 @@
(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"
@ -232,7 +240,7 @@
:on-success (fn [result]
(re-frame/dispatch [:sanitize-messages-and-process-response
result]))}]}
(cancel-message-edit))))
(cancel-message-edit)))
(rf/defn send-current-message
"Sends message from current chat input"

12
src/status_im2/contexts/chat/bottom_sheet_composer/actions/view.cljs
View File

@ -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]])

2
src/status_im2/contexts/chat/bottom_sheet_composer/constants.cljs
View File

@ -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)

23
src/status_im2/contexts/chat/bottom_sheet_composer/edit/style.cljs Normal file
View File

@ -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})

49
src/status_im2/contexts/chat/bottom_sheet_composer/edit/view.cljs Normal file
View File

@ -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])

17
src/status_im2/contexts/chat/bottom_sheet_composer/effects.cljs
View File

@ -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))

2
src/status_im2/contexts/chat/bottom_sheet_composer/handlers.cljs
View File

@ -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)

11
src/status_im2/contexts/chat/bottom_sheet_composer/reply/view.cljs
View File

@ -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
{:width 24
:size 24
:on-press #(rf/dispatch [:chat.ui/cancel-message-reply])}
:i/close])
: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)

14
src/status_im2/contexts/chat/bottom_sheet_composer/style.cljs
View File

@ -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]

22
src/status_im2/contexts/chat/bottom_sheet_composer/utils.cljs
View File

@ -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]))

35
src/status_im2/contexts/chat/bottom_sheet_composer/view.cljs
View File

@ -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,17 +134,15 @@
: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 bottom-sheet-composer
(defn f-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))
@ -150,4 +151,8 @@
[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]]))])
[sheet insets window-height blur-height opacity background-y]]))
(defn bottom-sheet-composer
[insets]
[:f> f-bottom-sheet-composer insets])

55
src/status_im2/contexts/chat/messages/list/new_temp_view.cljs
View File

@ -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
[]