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 2023-04-28 09:37:13 +08:00 committed by GitHub
parent 3e9d5dde54
commit ee71117111
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 28 additions and 1105 deletions

View File

@ -10,8 +10,7 @@
[utils.re-frame :as rf]
[utils.i18n :as i18n]
[status-im.utils.utils :as utils]
[taoensso.timbre :as log]
[status-im.ui.screens.chat.components.input :as input]))
[taoensso.timbre :as log]))
(defn text->emoji
"Replaces emojis in a specified `text`"
@ -92,15 +91,14 @@
[{:keys [db] :as cofx} message]
(let [current-chat-id (:current-chat-id db)
text (get-in message [:content :text])]
(rf/merge cofx
{:db (-> db
(assoc-in [:chat/inputs current-chat-id :metadata :editing-message]
message)
(assoc-in [:chat/inputs current-chat-id :metadata :responding-to-message] nil)
(update-in [:chat/inputs current-chat-id :metadata]
dissoc
:sending-image))}
(input/set-input-text text current-chat-id))))
{:db (-> db
(assoc-in [:chat/inputs current-chat-id :metadata :editing-message]
message)
(assoc-in [:chat/inputs current-chat-id :metadata :responding-to-message] nil)
(update-in [:chat/inputs current-chat-id :metadata]
dissoc
:sending-image))
:dispatch [:mention/to-input-field text current-chat-id]}))
(rf/defn show-contact-request-input
"Sets reference to previous chat message and focuses on input"
@ -270,13 +268,12 @@
{:events [:contacts/send-contact-request]}
[{:keys [db] :as cofx} public-key message]
(rf/merge cofx
{:chat.ui/clear-inputs nil
:chat.ui/clear-inputs-old nil
:json-rpc/call [{:method "wakuext_sendContactRequest"
:js-response true
:params [{:id public-key :message message}]
:on-error #(log/warn "failed to send a contact request" %)
:on-success #(re-frame/dispatch [:transport/message-sent %])}]}
{:chat.ui/clear-inputs nil
:json-rpc/call [{:method "wakuext_sendContactRequest"
:js-response true
:params [{:id public-key :message message}]
:on-error #(log/warn "failed to send a contact request" %)
:on-success #(re-frame/dispatch [:transport/message-sent %])}]}
(mentions/clear-mentions)
(clean-input (:current-chat-id db))))

View File

@ -80,6 +80,19 @@
(log/error "[mentions] on-error"
{:context context
: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
{:events [:mention/on-to-input-field-success]}
[{:keys [db]} result]

View File

@ -16,7 +16,6 @@
(rf/merge cofx
{:set-root :progress
:chat.ui/clear-inputs nil
:chat.ui/clear-inputs-old nil
:shell/reset-bottom-tabs nil
:hide-popover nil
::logout nil

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -8,7 +8,6 @@
[status-im.group-chats.db :as group-chats.db]
[status-im.multiaccounts.core :as multiaccounts]
[utils.image-server :as image-server]
[status-im2.config :as config]
[status-im2.constants :as constants]
[status-im2.contexts.chat.events :as chat.events]
[utils.i18n :as i18n]
@ -327,52 +326,12 @@
(fn [{:keys [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
:chats/timeline-sending-image
:<- [:chats/timeline-chat-input]
(fn [{:keys [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
:public-chat.new/topic-error-message
:<- [:public-group-topic]