Add expand/collapse button to long chat messages

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

src/status_im/chat/styles/message/message.cljs

@@ -61,6 +61,12 @@
   (assoc (message-timestamp false)
          :color styles/color-white))
 
+(def message-expand-button
+  {:color         colors/gray
+   :font-size     12
+   :opacity       0.7
+   :margin-bottom 1})
+
 (def selected-message
   {:margin-top  18
    :margin-left 40
@@ -125,9 +131,10 @@
   {:padding-top 4})
 
 (defn text-message
-  [{:keys [outgoing group-chat incoming-group]}]
+  [{:keys [incoming-group]} collapsed?]
   (merge style-message-text
-         {:margin-top (if incoming-group 4 0)}))
+         {:margin-top    (if incoming-group 4 0)
+          :margin-bottom (if collapsed? 2 0)}))
 
 (defnstyle emoji-message
   [{:keys [incoming-group]}]

src/status_im/chat/views/message/message.cljs

@@ -178,13 +178,42 @@
 
 (def cached-parse-text (memoize parse-text))
 
+(def ^:private ^:const number-of-lines 20)
+(def ^:private ^:const number-of-chars 600)
+
+(defn- should-collapse? [text group-chat?]
+  (and group-chat?
+       (or (<= number-of-chars (count text))
+           (<= number-of-lines (count (re-seq #"\n" text))))))
+
+(defn- expand-button [collapsed? on-press]
+  [react/text {:style    style/message-expand-button
+               :on-press on-press}
+   (i18n/label (if @collapsed? :show-more :show-less))])
+
 (defn text-message
-  [{:keys [content timestamp-str] :as message}]
+  [{:keys [content timestamp-str group-chat] :as message}]
   [message-view message
-   (let [parsed-text (cached-parse-text content :browse-link-from-message)]
-     [react/text {:style (style/text-message message)}
-      parsed-text
-      [react/text {:style style/message-timestamp-placeholder} (timestamp-with-padding timestamp-str)]])
+   (let [parsed-text (cached-parse-text content :browse-link-from-message)
+         ref (reagent/atom nil)
+         collapsible? (should-collapse? content group-chat)
+         collapsed? (reagent/atom collapsible?)
+         on-press (when collapsible?
+                    #(do
+                       (.setNativeProps @ref
+                                        (clj->js {:numberOfLines
+                                                  (when-not @collapsed?
+                                                    number-of-lines)}))
+                       (reset! collapsed? (not @collapsed?))))]
+     [react/view
+      [react/text {:style           (style/text-message message collapsible?)
+                   :number-of-lines (when collapsible? number-of-lines)
+                   :ref             (partial reset! ref)
+                   :on-press        on-press}
+       parsed-text
+       [react/text {:style style/message-timestamp-placeholder} (timestamp-with-padding timestamp-str)]]
+      (when collapsible?
+        [expand-button collapsed? on-press])])
    {:justify-timestamp? true}])
 
 (defn emoji-message

src/status_im/translations/en.cljs

@@ -243,6 +243,8 @@
    :empty-chat-description               "There are no messages \nin this chat yet"
    :empty-chat-description-console       "Look under the hood! Console is a javascript runtime environment that exposes the whole web3 API. Type \"web3.\" to get started."
    :counter-99-plus                      "99+"
+   :show-more                            "Show more"
+   :show-less                            "Show less"
 
    ;;discover
    :discover                             "Discover"