remove unused code relate to old text-input component (#15765)
* remove unused code relate to old text-input component * removed tow lines
This commit is contained in:
frank
GitHub
parent
3e9d5dde54
commit
ee71117111
|
|
@ -10,8 +10,7 @@
|
||||||
[utils.re-frame :as rf]
|
[utils.re-frame :as rf]
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]
|
||||||
[status-im.utils.utils :as utils]
|
[status-im.utils.utils :as utils]
|
||||||
[taoensso.timbre :as log]
|
[taoensso.timbre :as log]))
|
||||||
[status-im.ui.screens.chat.components.input :as input]))
|
|
||||||
|
|
||||||
(defn text->emoji
|
(defn text->emoji
|
||||||
"Replaces emojis in a specified `text`"
|
"Replaces emojis in a specified `text`"
|
||||||
|
|
@ -92,15 +91,14 @@
|
||||||
[{:keys [db] :as cofx} message]
|
[{:keys [db] :as cofx} message]
|
||||||
(let [current-chat-id (:current-chat-id db)
|
(let [current-chat-id (:current-chat-id db)
|
||||||
text (get-in message [:content :text])]
|
text (get-in message [:content :text])]
|
||||||
(rf/merge cofx
|
{:db (-> db
|
||||||
{:db (-> db
|
(assoc-in [:chat/inputs current-chat-id :metadata :editing-message]
|
||||||
(assoc-in [:chat/inputs current-chat-id :metadata :editing-message]
|
message)
|
||||||
message)
|
(assoc-in [:chat/inputs current-chat-id :metadata :responding-to-message] nil)
|
||||||
(assoc-in [:chat/inputs current-chat-id :metadata :responding-to-message] nil)
|
(update-in [:chat/inputs current-chat-id :metadata]
|
||||||
(update-in [:chat/inputs current-chat-id :metadata]
|
dissoc
|
||||||
dissoc
|
:sending-image))
|
||||||
:sending-image))}
|
:dispatch [:mention/to-input-field text current-chat-id]}))
|
||||||
(input/set-input-text text current-chat-id))))
|
|
||||||
|
|
||||||
(rf/defn show-contact-request-input
|
(rf/defn show-contact-request-input
|
||||||
"Sets reference to previous chat message and focuses on input"
|
"Sets reference to previous chat message and focuses on input"
|
||||||
|
|
@ -270,13 +268,12 @@
|
||||||
{:events [:contacts/send-contact-request]}
|
{:events [:contacts/send-contact-request]}
|
||||||
[{:keys [db] :as cofx} public-key message]
|
[{:keys [db] :as cofx} public-key message]
|
||||||
(rf/merge cofx
|
(rf/merge cofx
|
||||||
{:chat.ui/clear-inputs nil
|
{:chat.ui/clear-inputs nil
|
||||||
:chat.ui/clear-inputs-old nil
|
:json-rpc/call [{:method "wakuext_sendContactRequest"
|
||||||
:json-rpc/call [{:method "wakuext_sendContactRequest"
|
:js-response true
|
||||||
:js-response true
|
:params [{:id public-key :message message}]
|
||||||
:params [{:id public-key :message message}]
|
:on-error #(log/warn "failed to send a contact request" %)
|
||||||
:on-error #(log/warn "failed to send a contact request" %)
|
:on-success #(re-frame/dispatch [:transport/message-sent %])}]}
|
||||||
:on-success #(re-frame/dispatch [:transport/message-sent %])}]}
|
|
||||||
(mentions/clear-mentions)
|
(mentions/clear-mentions)
|
||||||
(clean-input (:current-chat-id db))))
|
(clean-input (:current-chat-id db))))
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -80,6 +80,19 @@
|
||||||
(log/error "[mentions] on-error"
|
(log/error "[mentions] on-error"
|
||||||
{:context context
|
{:context context
|
||||||
:error error}))
|
:error error}))
|
||||||
|
|
||||||
|
(rf/defn to-input-field
|
||||||
|
{:events [:mention/to-input-field]}
|
||||||
|
[_ text chat-id]
|
||||||
|
(let [params [chat-id text]
|
||||||
|
method "wakuext_chatMentionToInputField"]
|
||||||
|
(log/debug "[mentions] to-input-field" {:params params})
|
||||||
|
{:json-rpc/call [{:method method
|
||||||
|
:params params
|
||||||
|
:on-success #(rf/dispatch [:mention/on-to-input-field-success %])
|
||||||
|
:on-error #(rf/dispatch [:mention/on-error
|
||||||
|
{:method method
|
||||||
|
:params params} %])}]}))
|
||||||
(rf/defn on-to-input-field-success
|
(rf/defn on-to-input-field-success
|
||||||
{:events [:mention/on-to-input-field-success]}
|
{:events [:mention/on-to-input-field-success]}
|
||||||
[{:keys [db]} result]
|
[{:keys [db]} result]
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@
|
||||||
(rf/merge cofx
|
(rf/merge cofx
|
||||||
{:set-root :progress
|
{:set-root :progress
|
||||||
:chat.ui/clear-inputs nil
|
:chat.ui/clear-inputs nil
|
||||||
:chat.ui/clear-inputs-old nil
|
|
||||||
:shell/reset-bottom-tabs nil
|
:shell/reset-bottom-tabs nil
|
||||||
:hide-popover nil
|
:hide-popover nil
|
||||||
::logout nil
|
::logout nil
|
||||||
|
|
|
||||||
|
|
@ -1,157 +0,0 @@
|
||||||
(ns status-im.ui.screens.chat.components.accessory
|
|
||||||
(:require [cljs-bean.core :as bean]
|
|
||||||
[quo.animated :as animated]
|
|
||||||
[quo.design-system.colors :as colors]
|
|
||||||
[quo.platform :as platform]
|
|
||||||
[quo.react :as react]
|
|
||||||
[quo.react-native :as rn]
|
|
||||||
[reagent.core :as reagent]
|
|
||||||
[status-im.ui.components.tabbar.core :as tabbar]
|
|
||||||
[status-im.ui.screens.chat.components.hooks :refer [use-keyboard-dimension]]
|
|
||||||
[react-native.safe-area :as safe-area]))
|
|
||||||
|
|
||||||
(def duration 250)
|
|
||||||
|
|
||||||
(defn create-pan-responder
|
|
||||||
[y pan-active]
|
|
||||||
(when-not platform/android?
|
|
||||||
(js->clj
|
|
||||||
(.-panHandlers
|
|
||||||
^js
|
|
||||||
(.create
|
|
||||||
^js rn/pan-responder
|
|
||||||
#js
|
|
||||||
{:onPanResponderGrant (fn []
|
|
||||||
(animated/set-value pan-active 1))
|
|
||||||
:onPanResponderMove (fn [_ ^js state]
|
|
||||||
(animated/set-value y (.-moveY state)))
|
|
||||||
:onPanResponderRelease (fn []
|
|
||||||
(animated/set-value pan-active 0)
|
|
||||||
(js/setTimeout
|
|
||||||
#(animated/set-value y 0)
|
|
||||||
100))
|
|
||||||
:onPanResponderTerminate (fn []
|
|
||||||
(animated/set-value pan-active 0)
|
|
||||||
(js/setTimeout
|
|
||||||
#(animated/set-value y 0)
|
|
||||||
100))})))))
|
|
||||||
|
|
||||||
(def ios-view
|
|
||||||
(reagent/adapt-react-class
|
|
||||||
(react/memo
|
|
||||||
(fn [props]
|
|
||||||
(let [{on-update-inset :onUpdateInset
|
|
||||||
y :y
|
|
||||||
pan-state :panState
|
|
||||||
on-close :onClose
|
|
||||||
has-panel :hasPanel
|
|
||||||
children :children}
|
|
||||||
(bean/bean props)
|
|
||||||
{keyboard-height :height
|
|
||||||
keyboard-max-height :max-height
|
|
||||||
keyboard-end-position :end-position}
|
|
||||||
(use-keyboard-dimension)
|
|
||||||
bottom (safe-area/get-bottom)
|
|
||||||
{on-layout :on-layout
|
|
||||||
bar-height :height}
|
|
||||||
(rn/use-layout)
|
|
||||||
|
|
||||||
visible (or has-panel (pos? keyboard-height))
|
|
||||||
anim-visible (animated/use-value visible)
|
|
||||||
kb-on-screen (if platform/android? 0 (* -1 (- keyboard-height bottom (tabbar/get-height))))
|
|
||||||
panel-on-screen (* -1 (- keyboard-max-height bottom (tabbar/get-height)))
|
|
||||||
max-delta (min 0 (if has-panel panel-on-screen kb-on-screen))
|
|
||||||
panel-height (* -1 max-delta)
|
|
||||||
end-position (- keyboard-end-position (when has-panel keyboard-max-height))
|
|
||||||
delay (+ (/ (- keyboard-max-height panel-height)
|
|
||||||
(/ keyboard-max-height duration))
|
|
||||||
16)
|
|
||||||
drag-diff (animated/clamp (animated/sub y end-position) 0 keyboard-max-height)
|
|
||||||
animated-y (react/use-memo
|
|
||||||
(fn []
|
|
||||||
(animated/mix
|
|
||||||
(animated/with-timing-transition anim-visible
|
|
||||||
{:duration (- duration delay)
|
|
||||||
:easing (:keyboard animated/easings)})
|
|
||||||
0
|
|
||||||
panel-on-screen))
|
|
||||||
[panel-on-screen])
|
|
||||||
delta-y (animated/clamp (animated/add drag-diff animated-y) max-delta 0)
|
|
||||||
on-update (fn []
|
|
||||||
(when on-update-inset
|
|
||||||
(on-update-inset (+ bar-height panel-height))))
|
|
||||||
children (react/get-children children)]
|
|
||||||
(react/effect! on-update [panel-height bar-height])
|
|
||||||
(animated/code!
|
|
||||||
(fn []
|
|
||||||
(when has-panel
|
|
||||||
;; TODO: Check also velocity
|
|
||||||
(animated/cond* (animated/and* (animated/greater-or-eq drag-diff (* 0.6 panel-height))
|
|
||||||
(animated/not* pan-state))
|
|
||||||
[(animated/call* [] on-close)])))
|
|
||||||
[delta-y pan-state has-panel on-close])
|
|
||||||
(animated/code!
|
|
||||||
(fn []
|
|
||||||
(animated/delay
|
|
||||||
(animated/set anim-visible (if visible 1 0))
|
|
||||||
(if visible delay 0)))
|
|
||||||
[visible keyboard-max-height delay])
|
|
||||||
(reagent/as-element
|
|
||||||
[animated/view
|
|
||||||
{:style {:position :absolute
|
|
||||||
:left 0
|
|
||||||
:right 0
|
|
||||||
:background-color (:ui-background @colors/theme)
|
|
||||||
:bottom max-delta
|
|
||||||
:transform [{:translateY delta-y}]}}
|
|
||||||
[rn/view {:on-layout on-layout}
|
|
||||||
(first children)]
|
|
||||||
[rn/view
|
|
||||||
{:style {:flex 1
|
|
||||||
:height (when (pos? panel-height) panel-height)}}
|
|
||||||
(second children)]]))))))
|
|
||||||
|
|
||||||
(def android-view
|
|
||||||
(reagent/adapt-react-class
|
|
||||||
(react/memo
|
|
||||||
(fn [props]
|
|
||||||
(let [{on-update-inset :onUpdateInset
|
|
||||||
on-close :onClose
|
|
||||||
has-panel :hasPanel
|
|
||||||
children :children}
|
|
||||||
(bean/bean props)
|
|
||||||
{keyboard-max-height :max-height} (use-keyboard-dimension)
|
|
||||||
bottom (safe-area/get-bottom)
|
|
||||||
{on-layout :on-layout
|
|
||||||
bar-height :height}
|
|
||||||
(rn/use-layout)
|
|
||||||
|
|
||||||
visible has-panel
|
|
||||||
panel-on-screen (* -1 (- keyboard-max-height bottom (tabbar/get-height)))
|
|
||||||
max-delta (min 0 (if has-panel panel-on-screen 0))
|
|
||||||
panel-height (* -1 max-delta)
|
|
||||||
on-update (fn []
|
|
||||||
(when on-update-inset
|
|
||||||
(on-update-inset (+ bar-height panel-height))))
|
|
||||||
children (react/get-children children)]
|
|
||||||
(react/effect! on-update [panel-height bar-height])
|
|
||||||
(rn/use-back-handler
|
|
||||||
(fn []
|
|
||||||
(when visible
|
|
||||||
(on-close))
|
|
||||||
visible))
|
|
||||||
(reagent/as-element
|
|
||||||
[animated/view
|
|
||||||
{:style {:position :absolute
|
|
||||||
:left 0
|
|
||||||
:right 0
|
|
||||||
:bottom 0
|
|
||||||
:background-color (:ui-background @colors/theme)}}
|
|
||||||
[rn/view {:on-layout on-layout}
|
|
||||||
(first children)]
|
|
||||||
[rn/view
|
|
||||||
{:style {:flex 1
|
|
||||||
:height (when (pos? panel-height) panel-height)}}
|
|
||||||
(second children)]]))))))
|
|
||||||
|
|
||||||
(def view (if platform/android? android-view ios-view))
|
|
||||||
|
|
@ -1,98 +0,0 @@
|
||||||
(ns status-im.ui.screens.chat.components.contact-request
|
|
||||||
(:require [clojure.string :as string]
|
|
||||||
[quo.core :as quo]
|
|
||||||
[quo.design-system.colors :as quo.colors]
|
|
||||||
[quo.react :as quo.react]
|
|
||||||
[quo.react-native :as rn]
|
|
||||||
[re-frame.core :as re-frame]
|
|
||||||
[status-im.ethereum.stateofus :as stateofus]
|
|
||||||
[utils.i18n :as i18n]
|
|
||||||
[status-im.ui.screens.chat.components.style :as styles])
|
|
||||||
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
|
|
||||||
|
|
||||||
(def ^:private contact-request-symbol "↪ ")
|
|
||||||
|
|
||||||
(defn input-focus
|
|
||||||
[text-input-ref]
|
|
||||||
(some-> ^js (quo.react/current-ref text-input-ref)
|
|
||||||
.focus))
|
|
||||||
|
|
||||||
(defn format-author
|
|
||||||
[contact-name]
|
|
||||||
(let [author (if (or (= (aget contact-name 0) "@")
|
|
||||||
;; in case of replies
|
|
||||||
(= (aget contact-name 1) "@"))
|
|
||||||
(or (stateofus/username contact-name)
|
|
||||||
(subs contact-name 0 81))
|
|
||||||
contact-name)]
|
|
||||||
(i18n/label :contact-requesting-to {:author author})))
|
|
||||||
|
|
||||||
(defn format-contact-request-author
|
|
||||||
[from username current-public-key]
|
|
||||||
(or (and (= from current-public-key)
|
|
||||||
(str contact-request-symbol (i18n/label :t/You)))
|
|
||||||
(str contact-request-symbol (format-author username))))
|
|
||||||
|
|
||||||
(defn get-quoted-text-with-mentions
|
|
||||||
[parsed-text]
|
|
||||||
(string/join
|
|
||||||
(mapv (fn [{:keys [type literal children]}]
|
|
||||||
(cond
|
|
||||||
(= type "paragraph")
|
|
||||||
(get-quoted-text-with-mentions children)
|
|
||||||
|
|
||||||
(= type "mention")
|
|
||||||
@(re-frame/subscribe [:messages/resolve-mention literal])
|
|
||||||
|
|
||||||
(seq children)
|
|
||||||
(get-quoted-text-with-mentions children)
|
|
||||||
|
|
||||||
:else
|
|
||||||
literal))
|
|
||||||
parsed-text)))
|
|
||||||
|
|
||||||
(defn contact-request-message
|
|
||||||
[their-public-key]
|
|
||||||
(let [{:keys [input-text]} @(re-frame/subscribe [:chats/current-chat-input])]
|
|
||||||
[rn/view {:style {:flex-direction :row}}
|
|
||||||
[rn/view {:style (styles/contact-request-content)}
|
|
||||||
[quo/button
|
|
||||||
{:type :secondary
|
|
||||||
:weight :medium
|
|
||||||
:number-of-lines 1
|
|
||||||
:style {:line-height 18}
|
|
||||||
:on-press #(re-frame/dispatch [:chat.ui/cancel-contact-request])}
|
|
||||||
(i18n/label :t/cancel)]
|
|
||||||
[quo/button
|
|
||||||
{:type :secondary
|
|
||||||
:disabled (string/blank? input-text)
|
|
||||||
:weight :medium
|
|
||||||
:after :main-icons/send
|
|
||||||
:on-press #(re-frame/dispatch [:contacts/send-contact-request their-public-key input-text])
|
|
||||||
:style {:line-height 18}}
|
|
||||||
(i18n/label :t/send-request)]]]))
|
|
||||||
|
|
||||||
(defn focus-input-on-contact-request
|
|
||||||
[contact-request had-contact-request text-input-ref]
|
|
||||||
;;when we show contact-request we focus input
|
|
||||||
(when-not (= contact-request @had-contact-request)
|
|
||||||
(reset! had-contact-request contact-request)
|
|
||||||
(when contact-request
|
|
||||||
(js/setTimeout #(input-focus text-input-ref) 250))))
|
|
||||||
|
|
||||||
(defn contact-request-message-wrapper
|
|
||||||
[contact-request]
|
|
||||||
[rn/view
|
|
||||||
{:style {:padding-horizontal 15
|
|
||||||
:border-top-width 1
|
|
||||||
:border-top-color (:ui-01 @quo.colors/theme)
|
|
||||||
:padding-vertical 8}}
|
|
||||||
[contact-request-message contact-request]])
|
|
||||||
|
|
||||||
(defview contact-request-message-auto-focus-wrapper
|
|
||||||
[text-input-ref]
|
|
||||||
(letsubs [had-reply (atom nil)
|
|
||||||
contact-request @(re-frame/subscribe [:chats/sending-contact-request])]
|
|
||||||
{:component-did-mount #(focus-input-on-contact-request contact-request had-reply text-input-ref)}
|
|
||||||
(when contact-request
|
|
||||||
[contact-request-message-wrapper contact-request])))
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
(ns status-im.ui.screens.chat.components.edit
|
|
||||||
(:require [quo.components.animated.pressable :as pressable]
|
|
||||||
[quo.core :as quo]
|
|
||||||
[quo.design-system.colors :as quo.colors]
|
|
||||||
[quo.react :as quo.react]
|
|
||||||
[quo.react-native :as rn]
|
|
||||||
[re-frame.core :as re-frame]
|
|
||||||
[utils.i18n :as i18n]
|
|
||||||
[status-im.ui.components.icons.icons :as icons]
|
|
||||||
[status-im.ui.screens.chat.components.style :as styles]))
|
|
||||||
|
|
||||||
(defn input-focus
|
|
||||||
[text-input-ref]
|
|
||||||
(some-> ^js (quo.react/current-ref text-input-ref)
|
|
||||||
.focus))
|
|
||||||
|
|
||||||
(defn edit-message
|
|
||||||
[]
|
|
||||||
[rn/view {:style {:flex-direction :row}}
|
|
||||||
[rn/view {}
|
|
||||||
[icons/icon :tiny-icons/tiny-edit {:container-style {:margin-top 5}}]]
|
|
||||||
[rn/view {:style (styles/reply-content)}
|
|
||||||
[quo/text
|
|
||||||
{:weight :medium
|
|
||||||
:number-of-lines 1}
|
|
||||||
(i18n/label :t/editing-message)]]
|
|
||||||
[rn/view
|
|
||||||
[pressable/pressable
|
|
||||||
{:on-press #(re-frame/dispatch [:chat.ui/cancel-message-edit])
|
|
||||||
:accessibility-label :cancel-message-reply}
|
|
||||||
[icons/icon :main-icons/close-circle
|
|
||||||
{:container-style (styles/close-button)
|
|
||||||
:color (:icon-02 @quo.colors/theme)}]]]])
|
|
||||||
|
|
||||||
(defn focus-input-on-edit
|
|
||||||
[edit had-edit text-input-ref]
|
|
||||||
;;when we show edit we focus input
|
|
||||||
(when-not (= edit @had-edit)
|
|
||||||
(reset! had-edit edit)
|
|
||||||
(when edit
|
|
||||||
(js/setTimeout #(input-focus text-input-ref) 250))))
|
|
||||||
|
|
||||||
(defn edit-message-wrapper
|
|
||||||
[edit]
|
|
||||||
[rn/view
|
|
||||||
{:style {:padding-horizontal 15
|
|
||||||
:border-top-width 1
|
|
||||||
:border-top-color (:ui-01 @quo.colors/theme)
|
|
||||||
:padding-vertical 8}}
|
|
||||||
[edit-message edit]])
|
|
||||||
|
|
||||||
(defn edit-message-auto-focus-wrapper
|
|
||||||
[text-input-ref]
|
|
||||||
(let [had-edit (atom nil)]
|
|
||||||
(fn []
|
|
||||||
(let [edit @(re-frame/subscribe [:chats/edit-message])]
|
|
||||||
(focus-input-on-edit edit had-edit text-input-ref)
|
|
||||||
(when edit
|
|
||||||
[edit-message-wrapper])))))
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
(ns status-im.ui.screens.chat.components.hooks
|
|
||||||
(:require [quo.platform :as platform]
|
|
||||||
[quo.react :as react]
|
|
||||||
[quo.react-native :refer [use-window-dimensions] :as rn]
|
|
||||||
[react-native.safe-area :as safe-area]))
|
|
||||||
|
|
||||||
(def ^:private keyboard-change-event (if platform/android? "keyboardDidShow" "keyboardWillChangeFrame"))
|
|
||||||
|
|
||||||
(def default-kb-height (if platform/ios? 258 272))
|
|
||||||
(def min-duration 100)
|
|
||||||
|
|
||||||
(defn use-keyboard-dimension
|
|
||||||
[]
|
|
||||||
(let [{:keys [height]} (use-window-dimensions)
|
|
||||||
bottom (safe-area/get-bottom)
|
|
||||||
keyboard-listener (atom nil)
|
|
||||||
keyboard (react/state
|
|
||||||
{:height 0
|
|
||||||
:duration min-duration
|
|
||||||
:end-position height
|
|
||||||
:max-height (+ (if platform/ios? bottom 0) default-kb-height)})]
|
|
||||||
(react/effect!
|
|
||||||
(fn []
|
|
||||||
(letfn
|
|
||||||
[(dimensions-change [evt]
|
|
||||||
(swap! keyboard assoc :end-position (-> ^js evt .-window .-height)))
|
|
||||||
(keyboard-dimensions [evt]
|
|
||||||
(let [duration (.-duration ^js evt)
|
|
||||||
easing (.-easing ^js evt)
|
|
||||||
screen-y (-> ^js evt .-endCoordinates .-screenY)
|
|
||||||
new-height (- height screen-y)]
|
|
||||||
(when-not (= new-height (:height @keyboard))
|
|
||||||
(when (and duration easing platform/ios?)
|
|
||||||
(rn/configure-next
|
|
||||||
#js
|
|
||||||
{:duration (max min-duration duration)
|
|
||||||
:update #js
|
|
||||||
{:duration (max min-duration duration)
|
|
||||||
:type (-> ^js rn/layout-animation .-Types (aget easing))}})))
|
|
||||||
(reset! keyboard {:height new-height
|
|
||||||
:end-position screen-y
|
|
||||||
:duration (max min-duration duration)
|
|
||||||
:max-height (max new-height (:max-height @keyboard))})))]
|
|
||||||
(.addEventListener rn/dimensions "change" dimensions-change)
|
|
||||||
(reset! keyboard-listener (.addListener rn/keyboard keyboard-change-event keyboard-dimensions))
|
|
||||||
(fn []
|
|
||||||
(.removeEventListener rn/dimensions "change" dimensions-change)
|
|
||||||
(some-> ^js @keyboard-listener
|
|
||||||
.remove)))))
|
|
||||||
@keyboard))
|
|
||||||
|
|
@ -1,408 +0,0 @@
|
||||||
(ns status-im.ui.screens.chat.components.input
|
|
||||||
(:require [clojure.string :as string]
|
|
||||||
[quo.components.animated.pressable :as pressable]
|
|
||||||
[quo.components.list.item :as list-item]
|
|
||||||
[quo.components.text :as text]
|
|
||||||
[quo.design-system.colors :as colors]
|
|
||||||
[quo.platform :as platform]
|
|
||||||
[quo.react :as quo.react]
|
|
||||||
[quo.react-native :as rn]
|
|
||||||
[re-frame.core :as re-frame]
|
|
||||||
[reagent.core :as reagent]
|
|
||||||
[status-im2.constants :as chat.constants]
|
|
||||||
[utils.i18n :as i18n]
|
|
||||||
[status-im.ui.components.icons.icons :as icons]
|
|
||||||
[status-im.ui.components.list.views :as list]
|
|
||||||
[status-im.ui.screens.chat.components.reply :as reply]
|
|
||||||
[status-im.ui.screens.chat.components.style :as styles]
|
|
||||||
[status-im.ui.screens.chat.photos :as photos]
|
|
||||||
[utils.re-frame :as rf]
|
|
||||||
[status-im.utils.utils :as utils.utils]))
|
|
||||||
|
|
||||||
(defn input-focus
|
|
||||||
[text-input-ref]
|
|
||||||
(some-> ^js (quo.react/current-ref text-input-ref)
|
|
||||||
.focus))
|
|
||||||
|
|
||||||
(def panel->icons
|
|
||||||
{:extensions :main-icons/commands
|
|
||||||
:images :main-icons/photo})
|
|
||||||
|
|
||||||
(defn touchable-icon
|
|
||||||
[{:keys [panel active set-active accessibility-label]}]
|
|
||||||
[pressable/pressable
|
|
||||||
{:type :scale
|
|
||||||
:accessibility-label accessibility-label
|
|
||||||
:on-press #(set-active (when-not (= active panel) panel))}
|
|
||||||
[rn/view {:style (styles/touchable-icon)}
|
|
||||||
[icons/icon
|
|
||||||
(panel->icons panel)
|
|
||||||
(styles/icon (= active panel))]]])
|
|
||||||
|
|
||||||
(defn touchable-stickers-icon
|
|
||||||
[{:keys [panel active set-active accessibility-label input-focus]}]
|
|
||||||
[pressable/pressable
|
|
||||||
{:type :scale
|
|
||||||
:accessibility-label accessibility-label
|
|
||||||
:on-press #(if (= active panel)
|
|
||||||
(input-focus)
|
|
||||||
(set-active panel))}
|
|
||||||
[rn/view {:style (styles/in-input-touchable-icon)}
|
|
||||||
(if (= active panel)
|
|
||||||
[icons/icon :main-icons/keyboard (styles/icon false)]
|
|
||||||
[icons/icon :main-icons/stickers (styles/icon false)])]])
|
|
||||||
|
|
||||||
;; TODO(Ferossgp): Move this into audio panel.
|
|
||||||
;; Instead of not changing panel we can show a placeholder with no permission
|
|
||||||
(defn- request-record-audio-permission
|
|
||||||
[set-active panel]
|
|
||||||
(re-frame/dispatch
|
|
||||||
[:request-permissions
|
|
||||||
{:permissions [:record-audio]
|
|
||||||
:on-allowed
|
|
||||||
#(set-active panel)
|
|
||||||
:on-denied
|
|
||||||
#(utils.utils/set-timeout
|
|
||||||
(fn []
|
|
||||||
(utils.utils/show-popup
|
|
||||||
(i18n/label :t/audio-recorder-error)
|
|
||||||
(i18n/label :t/audio-recorder-permissions-error)))
|
|
||||||
50)}]))
|
|
||||||
|
|
||||||
(defn touchable-audio-icon
|
|
||||||
[{:keys [panel active set-active accessibility-label input-focus]}]
|
|
||||||
[pressable/pressable
|
|
||||||
{:type :scale
|
|
||||||
:accessibility-label accessibility-label
|
|
||||||
:on-press #(if (= active panel)
|
|
||||||
(input-focus)
|
|
||||||
(request-record-audio-permission set-active panel))}
|
|
||||||
[rn/view {:style (styles/in-input-touchable-icon)}
|
|
||||||
(if (= active panel)
|
|
||||||
[icons/icon :main-icons/keyboard (styles/icon false)]
|
|
||||||
[icons/icon :main-icons/speech (styles/icon false)])]])
|
|
||||||
|
|
||||||
(defn send-button
|
|
||||||
[on-send contact-request]
|
|
||||||
[rn/touchable-opacity {:on-press-in on-send}
|
|
||||||
[rn/view {:style (styles/send-message-button)}
|
|
||||||
(when-not contact-request
|
|
||||||
[icons/icon :main-icons/arrow-up
|
|
||||||
{:container-style (styles/send-message-container contact-request)
|
|
||||||
:accessibility-label :send-message-button
|
|
||||||
:color (styles/send-icon-color)}])]])
|
|
||||||
|
|
||||||
(defn on-selection-change
|
|
||||||
[timeout-id last-text-change args]
|
|
||||||
(let [selection (.-selection ^js (.-nativeEvent ^js args))
|
|
||||||
start (.-start selection)
|
|
||||||
end (.-end selection)]
|
|
||||||
;; NOTE(rasom): on iOS we do not dispatch this event immediately
|
|
||||||
;; because it is needed only in case if selection is changed without
|
|
||||||
;; typing. Timeout might be canceled on `on-change`.
|
|
||||||
(when platform/ios?
|
|
||||||
(reset!
|
|
||||||
timeout-id
|
|
||||||
(utils.utils/set-timeout
|
|
||||||
#(re-frame/dispatch [:mention/on-selection-change
|
|
||||||
{:start start
|
|
||||||
:end end}])
|
|
||||||
50)))
|
|
||||||
;; NOTE(rasom): on Android we dispatch event only in case if there
|
|
||||||
;; was no text changes during last 50ms. `on-selection-change` is
|
|
||||||
;; dispatched after `on-change`, that's why there is no another way
|
|
||||||
;; to know whether selection was changed without typing.
|
|
||||||
(when (and platform/android?
|
|
||||||
(or (not @last-text-change)
|
|
||||||
(< 50 (- (js/Date.now) @last-text-change))))
|
|
||||||
(re-frame/dispatch [:mention/on-selection-change
|
|
||||||
{:start start
|
|
||||||
:end end}]))))
|
|
||||||
|
|
||||||
(defonce input-texts (atom {}))
|
|
||||||
(defonce mentions-enabled (reagent/atom {}))
|
|
||||||
(defonce chat-input-key (reagent/atom 1))
|
|
||||||
|
|
||||||
(re-frame/reg-fx
|
|
||||||
:chat.ui/clear-inputs-old
|
|
||||||
(fn []
|
|
||||||
(reset! input-texts {})
|
|
||||||
(reset! mentions-enabled {})
|
|
||||||
(reset! chat-input-key 1)))
|
|
||||||
|
|
||||||
(defn force-text-input-update!
|
|
||||||
"force-text-input-update! forces the
|
|
||||||
input to re-render, necessary when we are setting value"
|
|
||||||
[]
|
|
||||||
(swap! chat-input-key inc))
|
|
||||||
|
|
||||||
(defn show-send
|
|
||||||
[{:keys [actions-ref send-ref sticker-ref]}]
|
|
||||||
(when actions-ref
|
|
||||||
(quo.react/set-native-props actions-ref #js {:width 0 :left -88}))
|
|
||||||
(quo.react/set-native-props send-ref #js {:width nil :right nil})
|
|
||||||
(when sticker-ref
|
|
||||||
(quo.react/set-native-props sticker-ref #js {:width 0 :right -100})))
|
|
||||||
|
|
||||||
(defn hide-send
|
|
||||||
[{:keys [actions-ref send-ref sticker-ref]}]
|
|
||||||
(when actions-ref
|
|
||||||
(quo.react/set-native-props actions-ref #js {:width nil :left nil}))
|
|
||||||
(quo.react/set-native-props send-ref #js {:width 0 :right -100})
|
|
||||||
(when sticker-ref
|
|
||||||
(quo.react/set-native-props sticker-ref #js {:width nil :right nil})))
|
|
||||||
|
|
||||||
(defn reset-input
|
|
||||||
[refs chat-id]
|
|
||||||
(some-> ^js (quo.react/current-ref (:text-input-ref refs))
|
|
||||||
.clear)
|
|
||||||
(swap! mentions-enabled update :render not)
|
|
||||||
(swap! input-texts dissoc chat-id))
|
|
||||||
|
|
||||||
(defn clear-input
|
|
||||||
[chat-id refs]
|
|
||||||
(hide-send refs)
|
|
||||||
(if (get @mentions-enabled chat-id)
|
|
||||||
(do
|
|
||||||
(swap! mentions-enabled dissoc chat-id)
|
|
||||||
;;we need this timeout, because if we clear text input and first index was a mention object with
|
|
||||||
;;blue color,
|
|
||||||
;;after clearing text will be typed with this blue color, so we render white text first and then
|
|
||||||
;;clear it
|
|
||||||
(js/setTimeout #(reset-input refs chat-id) 50))
|
|
||||||
(reset-input refs chat-id)))
|
|
||||||
|
|
||||||
(defn on-text-change
|
|
||||||
[val chat-id]
|
|
||||||
(swap! input-texts assoc chat-id val)
|
|
||||||
;;we still store it in app-db for mentions, we don't have reactions in views
|
|
||||||
(re-frame/dispatch [:chat.ui/set-chat-input-text val]))
|
|
||||||
|
|
||||||
(defn on-change
|
|
||||||
[last-text-change timeout-id refs chat-id sending-image args]
|
|
||||||
(let [text (.-text ^js (.-nativeEvent ^js args))
|
|
||||||
prev-text (get @input-texts chat-id)]
|
|
||||||
(when (and (seq prev-text) (empty? text) (not sending-image))
|
|
||||||
(hide-send refs))
|
|
||||||
(when (and (empty? prev-text) (seq text))
|
|
||||||
(show-send refs))
|
|
||||||
|
|
||||||
(when (and (not (get @mentions-enabled chat-id)) (string/index-of text "@"))
|
|
||||||
(swap! mentions-enabled assoc chat-id true))
|
|
||||||
|
|
||||||
;; NOTE(rasom): on iOS `on-selection-change` is canceled in case if it
|
|
||||||
;; happens during typing because it is not needed for mention
|
|
||||||
;; suggestions calculation
|
|
||||||
(when (and platform/ios? @timeout-id)
|
|
||||||
(utils.utils/clear-timeout @timeout-id))
|
|
||||||
(when platform/android?
|
|
||||||
(reset! last-text-change (js/Date.now)))
|
|
||||||
|
|
||||||
(on-text-change text chat-id)))
|
|
||||||
|
|
||||||
(rf/defn set-input-text
|
|
||||||
"Set input text for current-chat. Takes db and input text and cofx
|
|
||||||
as arguments and returns new fx. Always clear all validation messages."
|
|
||||||
{:events [:chat.ui.input/set-chat-input-text]}
|
|
||||||
[{:keys [db]} text chat-id]
|
|
||||||
(let [params [chat-id text]
|
|
||||||
method "wakuext_chatMentionToInputField"]
|
|
||||||
{:json-rpc/call [{:method method
|
|
||||||
:params params
|
|
||||||
:on-success #(rf/dispatch [:mention/on-to-input-field-success %])
|
|
||||||
:on-error #(rf/dispatch [:mention/on-error
|
|
||||||
{:method method
|
|
||||||
:params params} %])}]}))
|
|
||||||
|
|
||||||
(defn on-text-input
|
|
||||||
[chat-id args]
|
|
||||||
(let [native-event (.-nativeEvent ^js args)
|
|
||||||
text (.-text ^js native-event)]
|
|
||||||
(when (and (not (get @mentions-enabled chat-id)) (string/index-of text "@"))
|
|
||||||
(swap! mentions-enabled assoc chat-id true))))
|
|
||||||
|
|
||||||
(defn text-input
|
|
||||||
[{:keys [set-active-panel refs chat-id sending-image]}]
|
|
||||||
(let [cooldown-enabled? @(re-frame/subscribe [:chats/current-chat-cooldown-enabled?])
|
|
||||||
timeout-id (atom nil)
|
|
||||||
last-text-change (atom nil)
|
|
||||||
mentions-enabled (get @mentions-enabled chat-id)
|
|
||||||
contact-request @(re-frame/subscribe [:chats/sending-contact-request])]
|
|
||||||
|
|
||||||
[rn/text-input
|
|
||||||
{:style (styles/text-input contact-request)
|
|
||||||
:ref (:text-input-ref refs)
|
|
||||||
:max-font-size-multiplier 1
|
|
||||||
:accessibility-label :chat-message-input
|
|
||||||
:text-align-vertical :center
|
|
||||||
:multiline true
|
|
||||||
:editable (not cooldown-enabled?)
|
|
||||||
:blur-on-submit false
|
|
||||||
:auto-focus false
|
|
||||||
:on-focus #(set-active-panel nil)
|
|
||||||
:max-length chat.constants/max-text-size
|
|
||||||
:placeholder-text-color (:text-02 @colors/theme)
|
|
||||||
:placeholder (if cooldown-enabled?
|
|
||||||
(i18n/label :cooldown/text-input-disabled)
|
|
||||||
(i18n/label :t/type-a-message))
|
|
||||||
:underline-color-android :transparent
|
|
||||||
:auto-capitalize :sentences
|
|
||||||
:on-selection-change (partial on-selection-change
|
|
||||||
timeout-id
|
|
||||||
last-text-change)
|
|
||||||
:on-change
|
|
||||||
(partial on-change last-text-change timeout-id refs chat-id sending-image)
|
|
||||||
:on-text-input (partial on-text-input chat-id)}
|
|
||||||
(if mentions-enabled
|
|
||||||
(for [[idx [type text]] (map-indexed
|
|
||||||
(fn [idx item]
|
|
||||||
[idx item])
|
|
||||||
@(re-frame/subscribe [:chat/input-with-mentions]))]
|
|
||||||
^{:key (str idx "_" type "_" text)}
|
|
||||||
[rn/text (when (= type :mention) {:style {:color "#0DA4C9"}})
|
|
||||||
text])
|
|
||||||
(get @input-texts chat-id))]))
|
|
||||||
|
|
||||||
(defn mention-item
|
|
||||||
[[public-key {:keys [alias name nickname] :as user}] _ _ text-input-ref]
|
|
||||||
(let [ens-name? (not= alias name)]
|
|
||||||
[list-item/list-item
|
|
||||||
(cond->
|
|
||||||
{:icon [photos/member-photo public-key]
|
|
||||||
:size :small
|
|
||||||
:text-size :small
|
|
||||||
:title
|
|
||||||
[text/text
|
|
||||||
{:weight :medium
|
|
||||||
:ellipsize-mode :tail
|
|
||||||
:number-of-lines 1
|
|
||||||
:size :small}
|
|
||||||
(if nickname
|
|
||||||
nickname
|
|
||||||
name)
|
|
||||||
(when nickname
|
|
||||||
[text/text
|
|
||||||
{:weight :regular
|
|
||||||
:color :secondary
|
|
||||||
:ellipsize-mode :tail
|
|
||||||
:size :small}
|
|
||||||
" "
|
|
||||||
(when ens-name?
|
|
||||||
"@")
|
|
||||||
name])]
|
|
||||||
:title-text-weight :medium
|
|
||||||
:on-press
|
|
||||||
(fn []
|
|
||||||
(re-frame/dispatch [:chat.ui/select-mention text-input-ref user]))}
|
|
||||||
|
|
||||||
ens-name?
|
|
||||||
(assoc :subtitle alias))]))
|
|
||||||
|
|
||||||
(def chat-toolbar-height (reagent/atom nil))
|
|
||||||
|
|
||||||
(defn autocomplete-mentions
|
|
||||||
[text-input-ref bottom]
|
|
||||||
(let [suggestions @(re-frame/subscribe [:chat/mention-suggestions])]
|
|
||||||
(when (seq suggestions)
|
|
||||||
(let [height (+ 16 (* 52 (min 4.5 (count suggestions))))]
|
|
||||||
[rn/view
|
|
||||||
{:style (styles/autocomplete-container bottom)
|
|
||||||
:accessibility-label :suggestions-list}
|
|
||||||
[rn/view
|
|
||||||
{:style {:height height}}
|
|
||||||
[list/flat-list
|
|
||||||
{:keyboard-should-persist-taps :always
|
|
||||||
:footer [rn/view {:style {:height 8}}]
|
|
||||||
:header [rn/view {:style {:height 8}}]
|
|
||||||
:data suggestions
|
|
||||||
:key-fn first
|
|
||||||
:render-data text-input-ref
|
|
||||||
:render-fn mention-item}]]]))))
|
|
||||||
|
|
||||||
(defn on-chat-toolbar-layout
|
|
||||||
[^js ev]
|
|
||||||
(reset! chat-toolbar-height (-> ev .-nativeEvent .-layout .-height)))
|
|
||||||
|
|
||||||
(defn send-image
|
|
||||||
[]
|
|
||||||
(let [sending-image @(re-frame/subscribe [:chats/sending-image])]
|
|
||||||
(when (seq sending-image)
|
|
||||||
[reply/send-image sending-image])))
|
|
||||||
|
|
||||||
(defn actions
|
|
||||||
[extensions image show-send actions-ref active-panel set-active-panel contact-request]
|
|
||||||
[rn/view
|
|
||||||
{:style (styles/actions-wrapper (and (not contact-request) show-send))
|
|
||||||
:ref actions-ref}
|
|
||||||
(when extensions
|
|
||||||
[touchable-icon
|
|
||||||
{:panel :extensions
|
|
||||||
:accessibility-label :show-extensions-icon
|
|
||||||
:active active-panel
|
|
||||||
:set-active set-active-panel}])
|
|
||||||
(when image
|
|
||||||
[touchable-icon
|
|
||||||
{:panel :images
|
|
||||||
:accessibility-label :show-photo-icon
|
|
||||||
:active active-panel
|
|
||||||
:set-active set-active-panel}])])
|
|
||||||
|
|
||||||
(defn chat-toolbar
|
|
||||||
[{:keys [chat-id]}]
|
|
||||||
(let [actions-ref (quo.react/create-ref)
|
|
||||||
send-ref (quo.react/create-ref)
|
|
||||||
sticker-ref (quo.react/create-ref)
|
|
||||||
toolbar-options (re-frame/subscribe [:chats/chat-toolbar])
|
|
||||||
show-send (seq (get @input-texts chat-id))]
|
|
||||||
(fn [{:keys [active-panel set-active-panel text-input-ref chat-id]}]
|
|
||||||
(let [;we want to control components on native level, so instead of RN state we set native props
|
|
||||||
;via reference
|
|
||||||
;we don't react on input text in this view, @input-texts below is a regular atom
|
|
||||||
refs {:actions-ref actions-ref
|
|
||||||
:send-ref send-ref
|
|
||||||
:sticker-ref sticker-ref
|
|
||||||
:text-input-ref text-input-ref}
|
|
||||||
{:keys [send stickers image extensions audio
|
|
||||||
sending-image]} @toolbar-options
|
|
||||||
show-send (or show-send sending-image)
|
|
||||||
contact-request @(re-frame/subscribe [:chats/sending-contact-request])]
|
|
||||||
[rn/view
|
|
||||||
{:style (styles/toolbar)
|
|
||||||
:on-layout on-chat-toolbar-layout}
|
|
||||||
;; EXTENSIONS and IMAGE buttons
|
|
||||||
[actions extensions image show-send actions-ref active-panel set-active-panel contact-request]
|
|
||||||
[rn/view {:style (styles/input-container contact-request)}
|
|
||||||
[send-image]
|
|
||||||
[rn/view {:style styles/input-row}
|
|
||||||
[text-input
|
|
||||||
{:chat-id chat-id
|
|
||||||
:sending-image sending-image
|
|
||||||
:refs refs
|
|
||||||
:set-active-panel set-active-panel}]
|
|
||||||
;; SEND button
|
|
||||||
[rn/view {:ref send-ref :style (when-not show-send {:width 0 :right -100})}
|
|
||||||
(when send
|
|
||||||
[send-button
|
|
||||||
#(do (clear-input chat-id refs)
|
|
||||||
(re-frame/dispatch [:chat.ui/send-current-message]))
|
|
||||||
contact-request])]
|
|
||||||
|
|
||||||
;; STICKERS and AUDIO buttons
|
|
||||||
(when-not @(re-frame/subscribe [:chats/edit-message])
|
|
||||||
[rn/view
|
|
||||||
{:style (merge {:flex-direction :row} (when show-send {:width 0 :right -100}))
|
|
||||||
:ref sticker-ref}
|
|
||||||
(when stickers
|
|
||||||
[touchable-stickers-icon
|
|
||||||
{:panel :stickers
|
|
||||||
:accessibility-label :show-stickers-icon
|
|
||||||
:active active-panel
|
|
||||||
:input-focus #(input-focus text-input-ref)
|
|
||||||
:set-active set-active-panel}])
|
|
||||||
(when audio
|
|
||||||
[touchable-audio-icon
|
|
||||||
{:panel :audio
|
|
||||||
:accessibility-label :show-audio-message-icon
|
|
||||||
:active active-panel
|
|
||||||
:input-focus #(input-focus text-input-ref)
|
|
||||||
:set-active set-active-panel}])])]]]))))
|
|
||||||
|
|
@ -1,121 +0,0 @@
|
||||||
(ns status-im.ui.screens.chat.components.reply
|
|
||||||
(:require [clojure.string :as string]
|
|
||||||
[quo.components.animated.pressable :as pressable]
|
|
||||||
[quo.core :as quo]
|
|
||||||
[quo.design-system.colors :as quo.colors]
|
|
||||||
[quo.react :as quo.react]
|
|
||||||
[quo.react-native :as rn]
|
|
||||||
[re-frame.core :as re-frame]
|
|
||||||
[status-im.ethereum.stateofus :as stateofus]
|
|
||||||
[utils.i18n :as i18n]
|
|
||||||
[status-im.ui.components.icons.icons :as icons]
|
|
||||||
[status-im.ui.screens.chat.components.style :as styles]))
|
|
||||||
|
|
||||||
(def ^:private reply-symbol "↪ ")
|
|
||||||
|
|
||||||
(defn input-focus
|
|
||||||
[text-input-ref]
|
|
||||||
(some-> ^js (quo.react/current-ref text-input-ref)
|
|
||||||
.focus))
|
|
||||||
|
|
||||||
(defn format-author
|
|
||||||
[contact-name]
|
|
||||||
(let [author (if (or (= (aget contact-name 0) "@")
|
|
||||||
;; in case of replies
|
|
||||||
(= (aget contact-name 1) "@"))
|
|
||||||
(or (stateofus/username contact-name)
|
|
||||||
(subs contact-name 0 81))
|
|
||||||
contact-name)]
|
|
||||||
(i18n/label :replying-to {:author author})))
|
|
||||||
|
|
||||||
(defn format-reply-author
|
|
||||||
[from username current-public-key]
|
|
||||||
(or (and (= from current-public-key)
|
|
||||||
(str reply-symbol (i18n/label :t/You)))
|
|
||||||
(str reply-symbol (format-author username))))
|
|
||||||
|
|
||||||
(defn get-quoted-text-with-mentions
|
|
||||||
[parsed-text]
|
|
||||||
(string/join
|
|
||||||
(mapv (fn [{:keys [type literal children]}]
|
|
||||||
(cond
|
|
||||||
(= type "paragraph")
|
|
||||||
(get-quoted-text-with-mentions children)
|
|
||||||
|
|
||||||
(= type "mention")
|
|
||||||
@(re-frame/subscribe [:messages/resolve-mention literal])
|
|
||||||
|
|
||||||
(seq children)
|
|
||||||
(get-quoted-text-with-mentions children)
|
|
||||||
|
|
||||||
:else
|
|
||||||
literal))
|
|
||||||
parsed-text)))
|
|
||||||
|
|
||||||
(defn reply-message
|
|
||||||
[{:keys [from]}]
|
|
||||||
(let [contact-name @(re-frame/subscribe [:contacts/contact-name-by-identity from])
|
|
||||||
current-public-key @(re-frame/subscribe [:multiaccount/public-key])]
|
|
||||||
[rn/view {:style {:flex-direction :row}}
|
|
||||||
[rn/view {:style (styles/reply-content)}
|
|
||||||
[quo/text
|
|
||||||
{:weight :medium
|
|
||||||
:number-of-lines 1
|
|
||||||
:style {:line-height 18}}
|
|
||||||
(format-reply-author from contact-name current-public-key)]]
|
|
||||||
[rn/view
|
|
||||||
[pressable/pressable
|
|
||||||
{:on-press #(re-frame/dispatch [:chat.ui/cancel-message-reply])
|
|
||||||
:accessibility-label :cancel-message-reply}
|
|
||||||
[icons/icon :main-icons/close-circle
|
|
||||||
{:container-style (styles/close-button)
|
|
||||||
:color (:icon-02 @quo.colors/theme)}]]]]))
|
|
||||||
|
|
||||||
(defn send-image
|
|
||||||
[images]
|
|
||||||
[rn/view {:style (styles/reply-container-image)}
|
|
||||||
[rn/scroll-view
|
|
||||||
{:horizontal true
|
|
||||||
:style (styles/reply-content)}
|
|
||||||
(for [{:keys [uri]} (vals images)]
|
|
||||||
^{:key uri}
|
|
||||||
[rn/image
|
|
||||||
{:source {:uri uri}
|
|
||||||
:style {:width 56
|
|
||||||
:height 56
|
|
||||||
:border-radius 4
|
|
||||||
:margin-right 4}}])]
|
|
||||||
[rn/view
|
|
||||||
[pressable/pressable
|
|
||||||
{:on-press #(re-frame/dispatch [:chat.ui/cancel-sending-image])
|
|
||||||
:accessibility-label :cancel-send-image}
|
|
||||||
[icons/icon :main-icons/close-circle
|
|
||||||
{:container-style (styles/close-button)
|
|
||||||
:color quo.colors/white}]]]])
|
|
||||||
|
|
||||||
(defn focus-input-on-reply
|
|
||||||
[reply had-reply text-input-ref]
|
|
||||||
;;when we show reply we focus input
|
|
||||||
(when-not (= reply @had-reply)
|
|
||||||
(reset! had-reply reply)
|
|
||||||
(when reply
|
|
||||||
;; 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
|
|
||||||
[reply]
|
|
||||||
[rn/view
|
|
||||||
{:style {:padding-horizontal 15
|
|
||||||
:border-top-width 1
|
|
||||||
:border-top-color (:ui-01 @quo.colors/theme)
|
|
||||||
:padding-vertical 8}}
|
|
||||||
[reply-message reply]])
|
|
||||||
|
|
||||||
(defn reply-message-auto-focus-wrapper
|
|
||||||
[text-input-ref]
|
|
||||||
(let [had-reply (atom nil)]
|
|
||||||
(fn []
|
|
||||||
(let [reply @(re-frame/subscribe [:chats/reply-message])]
|
|
||||||
(focus-input-on-reply reply had-reply text-input-ref)
|
|
||||||
(when reply
|
|
||||||
[reply-message-wrapper reply])))))
|
|
||||||
|
|
@ -1,152 +0,0 @@
|
||||||
(ns status-im.ui.screens.chat.components.style
|
|
||||||
(:require [quo.design-system.colors :as colors]
|
|
||||||
[quo.design-system.typography :as typography]
|
|
||||||
[quo.platform :as platform]))
|
|
||||||
|
|
||||||
(defn toolbar
|
|
||||||
[]
|
|
||||||
{:min-height 52
|
|
||||||
:padding-vertical 8
|
|
||||||
:border-top-width 1
|
|
||||||
:border-top-color (:ui-01 @colors/theme)
|
|
||||||
:align-items :flex-end
|
|
||||||
:flex-direction :row})
|
|
||||||
|
|
||||||
(defn input-container
|
|
||||||
[contact-request]
|
|
||||||
{:background-color (:ui-01 @colors/theme)
|
|
||||||
:flex 1
|
|
||||||
:height (when contact-request 44)
|
|
||||||
:border-top-left-radius (if contact-request 8 16)
|
|
||||||
:border-top-right-radius (if contact-request 8 16)
|
|
||||||
:border-bottom-right-radius (if contact-request 8 4)
|
|
||||||
:border-bottom-left-radius (if contact-request 8 16)
|
|
||||||
:margin-horizontal 8})
|
|
||||||
|
|
||||||
(def input-row
|
|
||||||
{:flex-direction :row
|
|
||||||
:overflow :hidden
|
|
||||||
:align-items :flex-end})
|
|
||||||
|
|
||||||
(defn text-input-wrapper
|
|
||||||
[]
|
|
||||||
(merge {:flex-direction :row
|
|
||||||
:align-items :flex-start
|
|
||||||
:flex 1
|
|
||||||
:min-height 34
|
|
||||||
:max-height 144}
|
|
||||||
(when platform/ios?
|
|
||||||
{:padding-top 2})))
|
|
||||||
|
|
||||||
(defn text-input
|
|
||||||
[contact-request]
|
|
||||||
(merge typography/font-regular
|
|
||||||
typography/base
|
|
||||||
{:flex 1
|
|
||||||
:min-height 34
|
|
||||||
:max-height 144
|
|
||||||
:margin 0
|
|
||||||
:flex-shrink 1
|
|
||||||
:color (:text-01 @colors/theme)
|
|
||||||
:padding-horizontal 12}
|
|
||||||
(if platform/android?
|
|
||||||
{:padding-vertical 2}
|
|
||||||
{:padding-top (if contact-request 10 2)
|
|
||||||
:padding-bottom (if contact-request 5 6)})))
|
|
||||||
|
|
||||||
(defn actions-wrapper
|
|
||||||
[show-send]
|
|
||||||
(merge (when show-send
|
|
||||||
{:width 0 :left -88})
|
|
||||||
{:flex-direction :row
|
|
||||||
:padding-left 4
|
|
||||||
:min-height 34}))
|
|
||||||
|
|
||||||
(defn touchable-icon
|
|
||||||
[]
|
|
||||||
{:padding-horizontal 10
|
|
||||||
:padding-vertical 5
|
|
||||||
:justify-content :center
|
|
||||||
:align-items :center})
|
|
||||||
|
|
||||||
(defn in-input-touchable-icon
|
|
||||||
[]
|
|
||||||
{:padding-horizontal 6
|
|
||||||
:padding-vertical 5
|
|
||||||
:justify-content :center
|
|
||||||
:align-items :center})
|
|
||||||
|
|
||||||
(defn icon
|
|
||||||
[active]
|
|
||||||
{:color (if active
|
|
||||||
(:icon-04 @colors/theme)
|
|
||||||
(:icon-02 @colors/theme))})
|
|
||||||
|
|
||||||
(defn reply-container-image
|
|
||||||
[]
|
|
||||||
{:border-top-left-radius 14
|
|
||||||
:border-top-right-radius 14
|
|
||||||
:border-bottom-right-radius 4
|
|
||||||
:border-bottom-left-radius 14
|
|
||||||
:margin 2
|
|
||||||
:flex-direction :row
|
|
||||||
:background-color (:ui-03 @colors/theme)})
|
|
||||||
|
|
||||||
(defn reply-container
|
|
||||||
[]
|
|
||||||
{:flex-direction :row})
|
|
||||||
|
|
||||||
(defn reply-content
|
|
||||||
[]
|
|
||||||
{:padding-vertical 6
|
|
||||||
:padding-horizontal 10
|
|
||||||
:flex 1})
|
|
||||||
|
|
||||||
(defn quoted-message
|
|
||||||
[pin?]
|
|
||||||
(merge {:flex-direction :row
|
|
||||||
:align-items :center
|
|
||||||
:width "45%"}
|
|
||||||
(when-not pin?
|
|
||||||
{:position :absolute
|
|
||||||
:left 34
|
|
||||||
:top 3})))
|
|
||||||
|
|
||||||
(defn contact-request-content
|
|
||||||
[]
|
|
||||||
{:flex 1
|
|
||||||
:flex-direction :row
|
|
||||||
:justify-content :space-between})
|
|
||||||
|
|
||||||
(defn close-button
|
|
||||||
[]
|
|
||||||
{:margin-top 3})
|
|
||||||
|
|
||||||
(defn send-message-button
|
|
||||||
[]
|
|
||||||
{:margin-vertical 4
|
|
||||||
:margin-horizontal 5})
|
|
||||||
|
|
||||||
(defn send-message-container
|
|
||||||
[contact-request]
|
|
||||||
{:background-color (:interactive-01 @colors/theme)
|
|
||||||
:width 26
|
|
||||||
:height (if contact-request 44 26)
|
|
||||||
:border-radius (if contact-request 22 13)
|
|
||||||
:justify-content :center
|
|
||||||
:align-items :center})
|
|
||||||
|
|
||||||
(defn send-icon-color
|
|
||||||
[]
|
|
||||||
colors/white)
|
|
||||||
|
|
||||||
(defn autocomplete-container
|
|
||||||
[bottom]
|
|
||||||
{:position :absolute
|
|
||||||
:left 0
|
|
||||||
:right 0
|
|
||||||
:bottom bottom
|
|
||||||
:background-color (colors/get-color :ui-background)
|
|
||||||
:border-top-width 1
|
|
||||||
:border-top-color (colors/get-color :ui-01)
|
|
||||||
:z-index 3})
|
|
||||||
|
|
@ -8,7 +8,6 @@
|
||||||
[status-im.group-chats.db :as group-chats.db]
|
[status-im.group-chats.db :as group-chats.db]
|
||||||
[status-im.multiaccounts.core :as multiaccounts]
|
[status-im.multiaccounts.core :as multiaccounts]
|
||||||
[utils.image-server :as image-server]
|
[utils.image-server :as image-server]
|
||||||
[status-im2.config :as config]
|
|
||||||
[status-im2.constants :as constants]
|
[status-im2.constants :as constants]
|
||||||
[status-im2.contexts.chat.events :as chat.events]
|
[status-im2.contexts.chat.events :as chat.events]
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]
|
||||||
|
|
@ -327,52 +326,12 @@
|
||||||
(fn [{:keys [metadata]}]
|
(fn [{:keys [metadata]}]
|
||||||
(:editing-message metadata)))
|
(:editing-message metadata)))
|
||||||
|
|
||||||
(re-frame/reg-sub
|
|
||||||
:chats/sending-contact-request
|
|
||||||
:<- [:chats/current-chat-input]
|
|
||||||
(fn [{:keys [metadata]}]
|
|
||||||
(:sending-contact-request metadata)))
|
|
||||||
|
|
||||||
(re-frame/reg-sub
|
(re-frame/reg-sub
|
||||||
:chats/timeline-sending-image
|
:chats/timeline-sending-image
|
||||||
:<- [:chats/timeline-chat-input]
|
:<- [:chats/timeline-chat-input]
|
||||||
(fn [{:keys [metadata]}]
|
(fn [{:keys [metadata]}]
|
||||||
(:sending-image metadata)))
|
(:sending-image metadata)))
|
||||||
|
|
||||||
(re-frame/reg-sub
|
|
||||||
:chats/chat-toolbar
|
|
||||||
:<- [:multiaccounts/login]
|
|
||||||
:<- [:chats/sending-image]
|
|
||||||
:<- [:mainnet?]
|
|
||||||
:<- [:current-chat/one-to-one-chat?]
|
|
||||||
:<- [:current-chat/metadata]
|
|
||||||
:<- [:chats/reply-message]
|
|
||||||
:<- [:chats/edit-message]
|
|
||||||
:<- [:chats/sending-contact-request]
|
|
||||||
(fn [[{:keys [processing]} sending-image mainnet? one-to-one-chat? {:keys [public?]} reply edit
|
|
||||||
sending-contact-request]]
|
|
||||||
(let [sending-image (seq sending-image)]
|
|
||||||
{:send (not processing)
|
|
||||||
:stickers (and (or config/stickers-test-enabled? mainnet?)
|
|
||||||
(not sending-image)
|
|
||||||
(not sending-contact-request)
|
|
||||||
(not reply))
|
|
||||||
:image (and (not reply)
|
|
||||||
(not edit)
|
|
||||||
(not sending-contact-request)
|
|
||||||
(not public?))
|
|
||||||
:extensions (and one-to-one-chat?
|
|
||||||
(or config/commands-enabled? mainnet?)
|
|
||||||
(not edit)
|
|
||||||
(not sending-contact-request)
|
|
||||||
(not reply))
|
|
||||||
:audio (and (not sending-image)
|
|
||||||
(not reply)
|
|
||||||
(not edit)
|
|
||||||
(not sending-contact-request)
|
|
||||||
(not public?))
|
|
||||||
:sending-image sending-image})))
|
|
||||||
|
|
||||||
(re-frame/reg-sub
|
(re-frame/reg-sub
|
||||||
:public-chat.new/topic-error-message
|
:public-chat.new/topic-error-message
|
||||||
:<- [:public-group-topic]
|
:<- [:public-group-topic]
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue