From 3fbb7cb0a7dfba5f4b5de361d2be6307981b5082 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Mon, 20 Feb 2023 19:14:03 +0400 Subject: [PATCH] feat: new text message (1) (#15005) * feat: new text message --- .../chat/messages/content/text/style.cljs | 20 ++++- .../chat/messages/content/text/view.cljs | 80 ++++++++++++++++++- .../contexts/chat/messages/content/view.cljs | 3 +- 3 files changed, 97 insertions(+), 6 deletions(-) diff --git a/src/status_im2/contexts/chat/messages/content/text/style.cljs b/src/status_im2/contexts/chat/messages/content/text/style.cljs index d0e5a66a21..6a31c0713e 100644 --- a/src/status_im2/contexts/chat/messages/content/text/style.cljs +++ b/src/status_im2/contexts/chat/messages/content/text/style.cljs @@ -1 +1,19 @@ -(ns status-im2.contexts.chat.messages.content.text.style) +(ns status-im2.contexts.chat.messages.content.text.style + (:require + [quo2.foundations.colors :as colors])) + +(def block + {:border-radius 6 + :padding-horizontal 3 + :transform [{:translateY 4}]}) + +(def quote + {:border-left-width 1 + :padding-left 10 + :border-left-color colors/neutral-40}) + +(defn code + [] + {:background-color (colors/theme-colors colors/neutral-5 colors/white-opa-5) + :border-width 1 + :border-color (colors/theme-colors colors/neutral-20 colors/white-opa-20)}) diff --git a/src/status_im2/contexts/chat/messages/content/text/view.cljs b/src/status_im2/contexts/chat/messages/content/text/view.cljs index 0b27e04299..bee42beda0 100644 --- a/src/status_im2/contexts/chat/messages/content/text/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/text/view.cljs @@ -1,11 +1,85 @@ (ns status-im2.contexts.chat.messages.content.text.view (:require + [quo2.core :as quo] + [quo2.foundations.colors :as colors] [react-native.core :as rn] - [status-im.ui2.screens.chat.messages.message :as old-message] - [status-im2.contexts.chat.messages.link-preview.view :as link-preview])) + [status-im2.contexts.chat.messages.content.text.style :as style] + [status-im2.contexts.chat.messages.link-preview.view :as link-preview] + [utils.re-frame :as rf])) + + +(defn render-inline + [units {:keys [type literal destination]}] + (case (keyword type) + :code + (conj units [rn/view {:style (merge style/block (style/code))} [quo/text {:weight :code} literal]]) + + :emph + (conj units [quo/text {:style {:font-style :italic}} literal]) + + :strong + (conj units [quo/text {:weight :bold} literal]) + + :strong-emph + (conj units + [quo/text + {:weight :bold + :style {:font-style :italic}} literal]) + + :del + (conj units [quo/text {:style {:text-decoration-line :line-through}} literal]) + + :link + (conj units + [quo/text + {:style {:color (colors/theme-colors colors/primary-50 colors/primary-60)} + :on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])} + destination]) + + :mention + (conj + units + [rn/touchable-opacity + {:active-opacity 1 + :on-press #(rf/dispatch [:chat.ui/show-profile literal]) + :style (merge style/block {:background-color colors/primary-50-opa-10})} + [quo/text + {:weight :medium + :style {:color (colors/theme-colors colors/primary-50 colors/primary-60)}} + (rf/sub [:contacts/contact-name-by-identity literal])]]) + + (conj units literal))) + + +(defn render-block + [blocks {:keys [type ^js literal children]}] + (case (keyword type) + :paragraph + (conj blocks + (reduce + render-inline + [quo/text] + children)) + + :blockquote + (conj blocks + [rn/view {:style style/quote} + [quo/text literal]]) + + :codeblock + (conj blocks + [rn/view {:style (merge style/block (style/code))} + [quo/text (subs literal 0 (dec (count literal)))]]) + blocks)) + +(defn render-parsed-text + [{:keys [content]}] + (reduce render-block + [:<>] + (:parsed-text content))) (defn text-content [message-data context] [rn/view - [old-message/render-parsed-text message-data] + [render-parsed-text message-data] [link-preview/link-preview message-data context]]) diff --git a/src/status_im2/contexts/chat/messages/content/view.cljs b/src/status_im2/contexts/chat/messages/content/view.cljs index 34c240a2a5..29b5e70fa3 100644 --- a/src/status_im2/contexts/chat/messages/content/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/view.cljs @@ -133,8 +133,7 @@ [author message-data] (case content-type - constants/content-type-text - [not-implemented/not-implemented [content.text/text-content message-data context]] + constants/content-type-text [content.text/text-content message-data context] constants/content-type-emoji [not-implemented/not-implemented [old-message/emoji message-data]]