feat: reply to message new ui (#14098)
* feat: reply to messsage new ui
This commit is contained in:
parent
0a282b3a47
commit
adfb0ddb5d
|
@ -2,12 +2,13 @@
|
||||||
(:require [status-im.ui.components.icons.icons :as icons]
|
(:require [status-im.ui.components.icons.icons :as icons]
|
||||||
[quo.react-native :as rn]
|
[quo.react-native :as rn]
|
||||||
[oops.core :refer [oget]]
|
[oops.core :refer [oget]]
|
||||||
[quo.react :as react]
|
[quo.react :as quo.react]
|
||||||
[quo.platform :as platform]
|
[quo.platform :as platform]
|
||||||
[quo.components.text :as text]
|
[quo.components.text :as text]
|
||||||
[quo.design-system.colors :as colors]
|
[quo.design-system.colors :as colors]
|
||||||
[status-im.ui.screens.chat.components.style :as styles]
|
[status-im.ui.screens.chat.components.style :as styles]
|
||||||
[status-im.utils.fx :as fx]
|
[status-im.utils.fx :as fx]
|
||||||
|
[status-im.utils.handlers :refer [<sub]]
|
||||||
[status-im.ui.screens.chat.components.reply :as reply]
|
[status-im.ui.screens.chat.components.reply :as reply]
|
||||||
[status-im.multiaccounts.core :as multiaccounts]
|
[status-im.multiaccounts.core :as multiaccounts]
|
||||||
[status-im.chat.constants :as chat.constants]
|
[status-im.chat.constants :as chat.constants]
|
||||||
|
@ -27,7 +28,7 @@
|
||||||
[quo.components.safe-area :as safe-area]))
|
[quo.components.safe-area :as safe-area]))
|
||||||
|
|
||||||
(defn input-focus [text-input-ref]
|
(defn input-focus [text-input-ref]
|
||||||
(some-> ^js (react/current-ref text-input-ref) .focus))
|
(some-> ^js (quo.react/current-ref text-input-ref) .focus))
|
||||||
|
|
||||||
(def panel->icons {:extensions :main-icons/commands
|
(def panel->icons {:extensions :main-icons/commands
|
||||||
:images :main-icons/photo})
|
:images :main-icons/photo})
|
||||||
|
@ -157,7 +158,7 @@
|
||||||
(quo.react/set-native-props sticker-ref #js {:width nil :right nil})))
|
(quo.react/set-native-props sticker-ref #js {:width nil :right nil})))
|
||||||
|
|
||||||
(defn reset-input [refs chat-id]
|
(defn reset-input [refs chat-id]
|
||||||
(some-> ^js (react/current-ref (:text-input-ref refs)) .clear)
|
(some-> ^js (quo.react/current-ref (:text-input-ref refs)) .clear)
|
||||||
(swap! mentions-enabled update :render not)
|
(swap! mentions-enabled update :render not)
|
||||||
(swap! input-texts dissoc chat-id))
|
(swap! input-texts dissoc chat-id))
|
||||||
|
|
||||||
|
@ -204,11 +205,11 @@
|
||||||
(re-frame/reg-fx
|
(re-frame/reg-fx
|
||||||
:set-input-text
|
:set-input-text
|
||||||
(fn [[chat-id text]]
|
(fn [[chat-id text]]
|
||||||
;; We enable mentions
|
;; We enable mentions
|
||||||
(swap! mentions-enabled assoc chat-id true)
|
(swap! mentions-enabled assoc chat-id true)
|
||||||
(on-text-change text chat-id)
|
(on-text-change text chat-id)
|
||||||
;; We update the key so that we force a refresh of the text input, as those
|
;; We update the key so that we force a refresh of the text input, as those
|
||||||
;; are not ratoms
|
;; are not ratoms
|
||||||
(force-text-input-update!)))
|
(force-text-input-update!)))
|
||||||
|
|
||||||
(fx/defn set-input-text
|
(fx/defn set-input-text
|
||||||
|
@ -461,12 +462,12 @@
|
||||||
:input-focus #(input-focus text-input-ref)
|
:input-focus #(input-focus text-input-ref)
|
||||||
:set-active set-active-panel}])])]]]))))
|
:set-active set-active-panel}])])]]]))))
|
||||||
|
|
||||||
(defn calculate-y [context keyboard-shown min-y max-y]
|
(defn calculate-y [context keyboard-shown min-y max-y added-value]
|
||||||
(if keyboard-shown
|
(if keyboard-shown
|
||||||
(if (= (:state @context) :max)
|
(if (= (:state @context) :max)
|
||||||
max-y
|
max-y
|
||||||
(if (< (:y @context) max-y)
|
(if (< (:y @context) max-y)
|
||||||
(:y @context)
|
(+ (:y @context) added-value)
|
||||||
(do
|
(do
|
||||||
(swap! context assoc :state :max)
|
(swap! context assoc :state :max)
|
||||||
max-y)))
|
max-y)))
|
||||||
|
@ -554,30 +555,31 @@
|
||||||
:pdy 0 ;used for gesture
|
:pdy 0 ;used for gesture
|
||||||
:state :min ;:min, :custom-chat-available, :custom-chat-unavailable, :max
|
:state :min ;:min, :custom-chat-available, :custom-chat-unavailable, :max
|
||||||
:clear false})
|
:clear false})
|
||||||
keyboard-was-shown (atom false)]
|
keyboard-was-shown (atom false)
|
||||||
|
text-input-ref (quo.react/create-ref)
|
||||||
|
send-ref (quo.react/create-ref)
|
||||||
|
refs {:send-ref send-ref
|
||||||
|
:text-input-ref text-input-ref}]
|
||||||
(fn []
|
(fn []
|
||||||
[:f>
|
[:f>
|
||||||
(fn []
|
(fn []
|
||||||
(let [text-input-ref (quo.react/create-ref)
|
(let [reply (<sub [:chats/reply-message])
|
||||||
send-ref (quo.react/create-ref)
|
|
||||||
refs {:send-ref send-ref
|
|
||||||
:text-input-ref text-input-ref}
|
|
||||||
|
|
||||||
{window-height :height} (rn/use-window-dimensions)
|
{window-height :height} (rn/use-window-dimensions)
|
||||||
{:keys [keyboard-shown keyboard-height]} (rn/use-keyboard)
|
{:keys [keyboard-shown keyboard-height]} (rn/use-keyboard)
|
||||||
|
|
||||||
max-y (- window-height (if (> keyboard-height 0) keyboard-height 360) (:top insets)) ; 360 - defaul height
|
max-y (- window-height (if (> keyboard-height 0) keyboard-height 360) (:top insets)) ; 360 - default height
|
||||||
max-height (- max-y 56 (:bottom insets)) ; 56 - topbar height
|
max-height (- max-y 56 (:bottom insets)) ; 56 - top-bar height
|
||||||
y (calculate-y context keyboard-shown min-y max-y)
|
added-value (if reply 38 0) ; increased height of input box needed when reply
|
||||||
|
min-y (+ min-y added-value)
|
||||||
|
y (calculate-y context keyboard-shown min-y max-y added-value)
|
||||||
translate-y (reanimated/use-shared-value 0)
|
translate-y (reanimated/use-shared-value 0)
|
||||||
shared-height (reanimated/use-shared-value min-y)
|
shared-height (reanimated/use-shared-value min-y)
|
||||||
bg-opacity (reanimated/use-shared-value 0)
|
bg-opacity (reanimated/use-shared-value 0)
|
||||||
|
|
||||||
bottom-sheet-gesture (get-bottom-sheet-gesture context translate-y text-input-ref keyboard-shown
|
|
||||||
min-y max-y shared-height max-height bg-opacity)
|
|
||||||
input-content-change (get-input-content-change context translate-y shared-height max-height
|
input-content-change (get-input-content-change context translate-y shared-height max-height
|
||||||
bg-opacity keyboard-shown min-y max-y)]
|
bg-opacity keyboard-shown min-y max-y)
|
||||||
|
bottom-sheet-gesture (get-bottom-sheet-gesture context translate-y (:text-input-ref refs) keyboard-shown
|
||||||
|
min-y max-y shared-height max-height bg-opacity)]
|
||||||
(quo.react/effect! #(do
|
(quo.react/effect! #(do
|
||||||
(when (and @keyboard-was-shown (not keyboard-shown))
|
(when (and @keyboard-was-shown (not keyboard-shown))
|
||||||
(swap! context assoc :state :min))
|
(swap! context assoc :state :min))
|
||||||
|
@ -597,7 +599,8 @@
|
||||||
(styles/new-input-bottom-sheet window-height))}
|
(styles/new-input-bottom-sheet window-height))}
|
||||||
;handle
|
;handle
|
||||||
[rn/view {:style (styles/new-bottom-sheet-handle)}]
|
[rn/view {:style (styles/new-bottom-sheet-handle)}]
|
||||||
[rn/view {:style {:height (- max-y 80)}}
|
[reply/reply-message-auto-focus-wrapper (:text-input-ref refs) reply]
|
||||||
|
[rn/view {:style {:height (- max-y 80 added-value)}}
|
||||||
[text-input {:chat-id chat-id
|
[text-input {:chat-id chat-id
|
||||||
:on-content-size-change input-content-change
|
:on-content-size-change input-content-change
|
||||||
:sending-image false
|
:sending-image false
|
||||||
|
|
|
@ -89,7 +89,7 @@
|
||||||
[rn/view {:style (styles/reply-content)}
|
[rn/view {:style (styles/reply-content)}
|
||||||
[icons/icon :main-icons/connector {:color (theme-colors quo2.colors/neutral-40 quo2.colors/neutral-60)
|
[icons/icon :main-icons/connector {:color (theme-colors quo2.colors/neutral-40 quo2.colors/neutral-60)
|
||||||
:container-style {:position :absolute :left 10 :bottom -4 :width 16 :height 16}}]
|
:container-style {:position :absolute :left 10 :bottom -4 :width 16 :height 16}}]
|
||||||
[rn/view {:style {:position :absolute :left 34 :right 54 :top 3 :flex-direction :row :align-items :center}}
|
[rn/view {:style {:position :absolute :left 34 :top 3 :flex-direction :row :align-items :center :width "45%"}}
|
||||||
[photos/member-photo from identicon 16]
|
[photos/member-photo from identicon 16]
|
||||||
[quo2.text/text {:weight :semi-bold
|
[quo2.text/text {:weight :semi-bold
|
||||||
:size :paragraph-2
|
:size :paragraph-2
|
||||||
|
@ -144,7 +144,8 @@
|
||||||
(when-not (= reply @had-reply)
|
(when-not (= reply @had-reply)
|
||||||
(reset! had-reply reply)
|
(reset! had-reply reply)
|
||||||
(when reply
|
(when reply
|
||||||
(js/setTimeout #(input-focus text-input-ref) 250))))
|
;; A setTimeout of 0 is necessary to ensure the statement is enqueued and will get executed ASAP.
|
||||||
|
(js/setTimeout #(input-focus text-input-ref) 0))))
|
||||||
|
|
||||||
(defn reply-message-wrapper-old [reply]
|
(defn reply-message-wrapper-old [reply]
|
||||||
[rn/view {:style {:padding-horizontal 15
|
[rn/view {:style {:padding-horizontal 15
|
||||||
|
@ -155,8 +156,6 @@
|
||||||
|
|
||||||
(defn reply-message-wrapper [reply]
|
(defn reply-message-wrapper [reply]
|
||||||
[rn/view {:style {:padding-horizontal 15
|
[rn/view {:style {:padding-horizontal 15
|
||||||
:border-top-width 1
|
|
||||||
:border-top-color (:ui-01 @quo.colors/theme)
|
|
||||||
:padding-vertical 8}}
|
:padding-vertical 8}}
|
||||||
[reply-message reply true]])
|
[reply-message reply true]])
|
||||||
|
|
||||||
|
@ -168,10 +167,9 @@
|
||||||
(when reply
|
(when reply
|
||||||
[reply-message-wrapper-old reply])))))
|
[reply-message-wrapper-old reply])))))
|
||||||
|
|
||||||
(defn reply-message-auto-focus-wrapper [text-input-ref]
|
(defn reply-message-auto-focus-wrapper [text-input-ref _]
|
||||||
(let [had-reply (atom nil)]
|
(let [had-reply (atom nil)]
|
||||||
(fn []
|
(fn [_ reply]
|
||||||
(let [reply @(re-frame/subscribe [:chats/reply-message])]
|
(focus-input-on-reply reply had-reply text-input-ref)
|
||||||
(focus-input-on-reply reply had-reply text-input-ref)
|
(when reply
|
||||||
(when reply
|
[reply-message-wrapper reply]))))
|
||||||
[reply-message-wrapper reply])))))
|
|
||||||
|
|
Loading…
Reference in New Issue