From ee71117111b240f28340591b5377c9959beec543 Mon Sep 17 00:00:00 2001 From: frank Date: Fri, 28 Apr 2023 09:37:13 +0800 Subject: [PATCH] remove unused code relate to old text-input component (#15765) * remove unused code relate to old text-input component * removed tow lines --- src/status_im/chat/models/input.cljs | 33 +- src/status_im/chat/models/mentions.cljs | 13 + src/status_im/multiaccounts/logout/core.cljs | 1 - .../ui/screens/chat/components/accessory.cljs | 157 ------- .../chat/components/contact_request.cljs | 98 ----- .../ui/screens/chat/components/edit.cljs | 59 --- .../ui/screens/chat/components/hooks.cljs | 50 --- .../ui/screens/chat/components/input.cljs | 408 ------------------ .../ui/screens/chat/components/reply.cljs | 121 ------ .../ui/screens/chat/components/style.cljs | 152 ------- src/status_im2/subs/chat/chats.cljs | 41 -- 11 files changed, 28 insertions(+), 1105 deletions(-) delete mode 100644 src/status_im/ui/screens/chat/components/accessory.cljs delete mode 100644 src/status_im/ui/screens/chat/components/contact_request.cljs delete mode 100644 src/status_im/ui/screens/chat/components/edit.cljs delete mode 100644 src/status_im/ui/screens/chat/components/hooks.cljs delete mode 100644 src/status_im/ui/screens/chat/components/input.cljs delete mode 100644 src/status_im/ui/screens/chat/components/reply.cljs delete mode 100644 src/status_im/ui/screens/chat/components/style.cljs diff --git a/src/status_im/chat/models/input.cljs b/src/status_im/chat/models/input.cljs index 4bbf74024c..2ac0d68c4f 100644 --- a/src/status_im/chat/models/input.cljs +++ b/src/status_im/chat/models/input.cljs @@ -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)))) diff --git a/src/status_im/chat/models/mentions.cljs b/src/status_im/chat/models/mentions.cljs index 4ba780e8fd..214ff90219 100644 --- a/src/status_im/chat/models/mentions.cljs +++ b/src/status_im/chat/models/mentions.cljs @@ -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] diff --git a/src/status_im/multiaccounts/logout/core.cljs b/src/status_im/multiaccounts/logout/core.cljs index ae7de66c0a..37fac16fe1 100644 --- a/src/status_im/multiaccounts/logout/core.cljs +++ b/src/status_im/multiaccounts/logout/core.cljs @@ -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 diff --git a/src/status_im/ui/screens/chat/components/accessory.cljs b/src/status_im/ui/screens/chat/components/accessory.cljs deleted file mode 100644 index d5739dc96f..0000000000 --- a/src/status_im/ui/screens/chat/components/accessory.cljs +++ /dev/null @@ -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)) diff --git a/src/status_im/ui/screens/chat/components/contact_request.cljs b/src/status_im/ui/screens/chat/components/contact_request.cljs deleted file mode 100644 index 145ec4d8ea..0000000000 --- a/src/status_im/ui/screens/chat/components/contact_request.cljs +++ /dev/null @@ -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]))) diff --git a/src/status_im/ui/screens/chat/components/edit.cljs b/src/status_im/ui/screens/chat/components/edit.cljs deleted file mode 100644 index 02214e68ba..0000000000 --- a/src/status_im/ui/screens/chat/components/edit.cljs +++ /dev/null @@ -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]))))) diff --git a/src/status_im/ui/screens/chat/components/hooks.cljs b/src/status_im/ui/screens/chat/components/hooks.cljs deleted file mode 100644 index 1a674a1f87..0000000000 --- a/src/status_im/ui/screens/chat/components/hooks.cljs +++ /dev/null @@ -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)) diff --git a/src/status_im/ui/screens/chat/components/input.cljs b/src/status_im/ui/screens/chat/components/input.cljs deleted file mode 100644 index be7a33ba9b..0000000000 --- a/src/status_im/ui/screens/chat/components/input.cljs +++ /dev/null @@ -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}])])]]])))) diff --git a/src/status_im/ui/screens/chat/components/reply.cljs b/src/status_im/ui/screens/chat/components/reply.cljs deleted file mode 100644 index e3470ead4f..0000000000 --- a/src/status_im/ui/screens/chat/components/reply.cljs +++ /dev/null @@ -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]))))) diff --git a/src/status_im/ui/screens/chat/components/style.cljs b/src/status_im/ui/screens/chat/components/style.cljs deleted file mode 100644 index f09f25f230..0000000000 --- a/src/status_im/ui/screens/chat/components/style.cljs +++ /dev/null @@ -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}) diff --git a/src/status_im2/subs/chat/chats.cljs b/src/status_im2/subs/chat/chats.cljs index a3df81c2ce..92b0ea3743 100644 --- a/src/status_im2/subs/chat/chats.cljs +++ b/src/status_im2/subs/chat/chats.cljs @@ -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]