feat: initial quo/messages/message component

src/quo/components/messages/message/style.cljs

@@ -0,0 +1,31 @@
+(ns quo.components.messages.message.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn container
+  [theme header? reacted? state pinned-by customization-color]
+  {:padding-horizontal 12
+   :padding-vertical   (if header? 8 4)
+   :padding-bottom     (when reacted? (if header? 12 8))
+   :border-radius      16
+   :background-color   (cond
+                         pinned-by          (colors/resolve-color customization-color theme 5)
+                         (= state :default) (colors/theme-colors colors/white colors/neutral-5 theme)
+                         :else              (colors/theme-colors colors/neutral-5
+                                                                 colors/neutral-90
+                                                                 theme))
+  }
+)
+
+(def avatar-container
+  {:padding-vertical 4
+   :margin-right     8
+  })
+
+(def pin-indicator-container
+  {:flex-direction :row
+   :align-items    :center
+   :padding-left   40
+   :margin-bottom  2
+  })
+
+(def message-content {})

src/quo/components/messages/message/view.cljs

@@ -0,0 +1,103 @@
+(ns quo.components.messages.message.view
+  (:require [quo.components.avatars.user-avatar.view :as user-avatar]
+            [quo.components.icon :as icon]
+            [quo.components.info.info-message :as info-message]
+            [quo.components.markdown.text :as text]
+            [quo.components.messages.author.view :as author]
+            [quo.components.messages.message.style :as style]
+            [quo.components.selectors.react.view :as react]
+            [quo.foundations.colors :as colors]
+            [quo.theme :as theme]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [utils.i18n :as i18n]))
+
+(defn- pin-indicator
+  [{:keys [theme pinned-by customization-color]}]
+  [rn/view {:style style/pin-indicator-container}
+   [icon/icon :i/pin
+    {:color (colors/resolve-color customization-color theme)
+     :size  16}]
+   [text/text
+    {:size   :label
+     :weight :medium
+     :style  {:margin-left 2 :color (colors/resolve-color customization-color theme)}}
+    pinned-by]]
+)
+
+(defn- internal-view
+  []
+  (let [state (reagent/atom :default)]
+    (fn [{:keys [theme header? reacted? delivered? avatar-props author-props on-press context
+                 customization-color]}]
+      (println context)
+      (let [{:keys [content-type pinned-by reactions]} context]
+        [rn/pressable
+         {:style (style/container theme header? reacted? @state (seq pinned-by) customization-color)
+          :on-press-in #(reset! state :pressed)
+          :on-press-out #(reset! state :default)
+          :on-press on-press
+         }
+         (when (seq pinned-by)
+           [pin-indicator
+            {:theme               theme
+             :header?             header?
+             :pinned-by           pinned-by
+             :customization-color customization-color}])
+         [rn/view {:style {:flex-direction :row :margin-left (when-not header? 40)}}
+          (when header?
+            [rn/view {:style style/avatar-container}
+             [user-avatar/user-avatar
+              (merge avatar-props {:size :small})]
+            ])
+          [rn/view
+           (when header? [author/view (merge author-props {:size 13})])
+           [rn/view {:style style/message-content}
+            (condp = content-type
+              :text
+              [text/text "This is a simple message"]
+              :image
+              [text/text "image"]
+              :text-and-image
+              [text/text "image with text"]
+              :audio
+              [text/text "audio"]
+              :gif
+              [text/text "gif"]
+              :sticker
+              [text/text "sticker"]
+              :text-and-code
+              [text/text "code with text"]
+              :code
+              [text/text "code"]
+              :text-and-link-preview
+              [text/text "link preview with text"]
+              :text-and-internal-link
+              [text/text "internal link with text"]
+              :internal-link
+              [text/text "internal link"]
+              :text-and-forward-message
+              [text/text "forward message with text"]
+              :forward-message
+              [text/text "forward message"]
+
+              [text/text "not implemented"])]
+           (when (seq reactions)
+             [react/view
+              {:reactions       reactions
+               :use-case        :pinned
+               :add-reaction?   true
+               :container-style {:margin-top 8}}])
+           (when delivered?
+             [info-message/info-message
+              {:type  :default
+               :size  :tiny
+               :icon  :i/sent
+               :style {:margin-top 2}
+              } (i18n/label :t/sent)])
+          ]]
+        ])
+    ))
+)
+
+(def view (theme/with-theme internal-view))

src/quo/core.cljs

@@ -85,6 +85,7 @@
     quo.components.markdown.text
     quo.components.messages.author.view
     quo.components.messages.gap
+    quo.components.messages.message.view
     quo.components.messages.system-message.view
     quo.components.navigation.bottom-nav-tab.view
     quo.components.navigation.floating-shell-button.view
@@ -299,6 +300,7 @@
 ;;;; Messages
 (def author quo.components.messages.author.view/view)
 (def gap quo.components.messages.gap/gap)
+(def message quo.components.messages.message.view/view)
 (def system-message quo.components.messages.system-message.view/system-message)
 
 ;;;; Notifications

src/status_im2/contexts/chat/messages/list/view.cljs

@@ -320,10 +320,10 @@
        :render-fn                         render-fn
        :on-viewable-items-changed         on-viewable-items-changed
        :on-content-size-change            (fn [_ y]
-                                            ;; NOTE(alwx): here we set the initial value of `scroll-y`
-                                            ;; which is needed because by default the chat is
-                                            ;; scrolled to the bottom and no initial `on-scroll`
-                                            ;; event is getting triggered
+                                            ;; NOTE(alwx): here we set the initial value of
+                                            ;; `scroll-y` which is needed because by default the
+                                            ;; chat is scrolled to the bottom and no initial
+                                            ;; `on-scroll` event is getting triggered
                                             (let [scroll-y-shared       (reanimated/get-shared-value
                                                                          scroll-y)
                                                   content-height-shared (reanimated/get-shared-value

src/status_im2/contexts/quo_preview/main.cljs

@@ -100,6 +100,7 @@
     [status-im2.contexts.quo-preview.markdown.text :as text]
     [status-im2.contexts.quo-preview.messages.author :as messages-author]
     [status-im2.contexts.quo-preview.messages.gap :as messages-gap]
+    [status-im2.contexts.quo-preview.messages.message :as message]
     [status-im2.contexts.quo-preview.messages.system-message :as system-message]
     [status-im2.contexts.quo-preview.navigation.bottom-nav-tab :as
      bottom-nav-tab]
@@ -348,6 +349,8 @@
                         :component messages-author/view}
                        {:name      :gap
                         :component messages-gap/view}
+                       {:name      :message
+                        :component message/view}
                        {:name      :system-messages
                         :component system-message/view}]
    :navigation        [{:name      :bottom-nav-tab

src/status_im2/contexts/quo_preview/messages/message.cljs

@@ -0,0 +1,59 @@
+(ns status-im2.contexts.quo-preview.messages.message
+  (:require [quo.core :as quo]
+            [reagent.core :as reagent]
+            [status-im2.common.resources :as resources]
+            [status-im2.constants :as constants]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:key :header? :type :boolean}
+   {:key :reacted? :type :boolean}
+   {:key :delivered? :type :boolean}
+   {:key :pinned-by :type :text}
+   (preview/customization-color-option)])
+
+(defn- gen-quantity
+  [max-count _]
+  (rand-int max-count))
+
+(def ^:private memo-gen-quantity (memoize gen-quantity))
+
+(defn- normalize-state
+  [state]
+  (merge @state
+         {:context {:pinned-by (:pinned-by @state)
+                    :reactions (when (:reacted? @state)
+                                 (mapv (fn [reaction-id]
+                                         {:emoji-reaction-id reaction-id
+                                          :emoji-id          reaction-id
+                                          :emoji             (get constants/reactions reaction-id)
+                                          :quantity          (memo-gen-quantity 10 reaction-id)
+                                          ;; :own               (contains? @pressed-reactions
+                                          ;; reaction-id)
+                                         })
+                                       [1 2]))}
+         })
+)
+(defn view
+  []
+  (let [state (reagent/atom {:avatar-props        {:full-name           "Alisher Yakupov"
+                                                   :ring?               true
+                                                   :status-indicator?   true
+                                                   :online?             true
+                                                   :profile-picture     (resources/get-mock-image
+                                                                         :user-picture-male5)
+                                                   :customization-color :blue}
+                             :author-props        {:primary-name   "Alisher Yakupov"
+                                                   :secondary-name "zQ3...9d4Gs0"
+                                                   :time-str       "09:30"}
+                             :customization-color :blue
+                             :pinned-by           "Steve"
+                            }
+              )]
+    (fn []
+      [preview/preview-container
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical   50
+                                    :padding-horizontal 20}}
+       [quo/message (normalize-state state)]])))