feat: Added Dividers Date Component to quo2 (#14546)

* feat: Added Dividers Date Component  to quo2

src/quo2/components/dividers/date.cljs

@@ -0,0 +1,18 @@
+(ns quo2.components.dividers.date
+  (:require [react-native.core :as rn]
+            [quo2.components.separator :as separator]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]))
+
+(defn date [value]
+  [rn/view {:margin-vertical 16
+            :padding-right 8
+            :padding-left 62}
+   [text/text {:weight              :medium
+               :accessibility-label :divider-date-text
+               :size :label
+               :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
+                       :text-transform :capitalize
+                       :margin-bottom 4}}
+    value]
+   [separator/separator]])

src/quo2/core.cljs

@@ -18,6 +18,7 @@
             quo2.components.community.token-gating
             quo2.components.counter.counter
             quo2.components.dividers.divider-label
+            quo2.components.dividers.date
             quo2.components.dividers.new-messages
             quo2.components.drawers.action-drawers
             quo2.components.dropdowns.dropdown
@@ -94,6 +95,7 @@
 ;;;; DIVIDERS
 (def divider-label quo2.components.dividers.divider-label/divider-label)
 (def new-messages quo2.components.dividers.new-messages/new-messages)
+(def divider-date quo2.components.dividers.date/date)
 
 ;;;; LIST ITEMS
 (def channel-list-item quo2.components.list-items.channel/list-item)

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

@@ -12,7 +12,6 @@
             ;;TODO move to status-im2
             [status-im.ui2.screens.chat.messages.message :as message]
             [status-im.ui.screens.chat.group :as chat.group]
-            [status-im.ui.screens.chat.message.datemark :as message-datemark]
             [status-im.ui.screens.chat.message.gap :as gap]
             [status-im.ui.screens.chat.state :as state]
             [quo.react-native :as quo.react]))
@@ -121,8 +120,7 @@
                          chat-id show-input? message-pin-enabled edit-enabled in-pinned-view? can-delete-message-for-everyone?]}]
   [rn/view {:style (when (and platform/android? (not in-pinned-view?)) {:scaleY -1})}
    (if (= type :datemark)
-     ;; TODO (flexsurfer) implement and use date divider component https://github.com/status-im/status-mobile/issues/14523
-     [message-datemark/chat-datemark (:value message)]
+     [quo/divider-date (:value message)]
      (if (= type :gap)
        ;; TODO (flexsurfer) new gap functionality is not implemented yet
        [gap/gap message idx messages-list-ref false chat-id]

src/status_im2/contexts/quo_preview/dividers/date.cljs

@@ -0,0 +1,28 @@
+(ns status-im2.contexts.quo-preview.dividers.date
+  (:require [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.core :as quo]))
+
+(def descriptor [{:label   "Value"
+                  :key     :label
+                  :type    :text}])
+(defn cool-preview []
+  (let [state     (reagent/atom {:label "Today"})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view {:padding-vertical 60}
+         [quo/divider-date (@state :label)]]]])))
+
+(defn preview-divider-date []
+  [rn/view  {:background-color (colors/theme-colors
+                                colors/white
+                                colors/neutral-95)
+             :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -19,6 +19,7 @@
             [status-im2.contexts.quo-preview.community.community-membership-list-view :as community-membership-list-view]
             [status-im2.contexts.quo-preview.community.discover-card :as discover-card]
             [status-im2.contexts.quo-preview.dividers.divider-label :as divider-label]
+            [status-im2.contexts.quo-preview.dividers.date :as divider-date]
             [status-im2.contexts.quo-preview.dividers.new-messages :as new-messages]
             [status-im2.contexts.quo-preview.drawers.action-drawers :as drawers]
             [status-im2.contexts.quo-preview.dropdowns.dropdown :as dropdown]
@@ -107,7 +108,10 @@
                :component divider-label/preview-divider-label}
               {:name      :new-messages
                :insets    {:top false}
-               :component new-messages/preview-new-messages}]
+               :component new-messages/preview-new-messages}
+              {:name      :divider-date
+               :insets    {:top false}
+               :component divider-date/preview-divider-date}]
    :drawers [{:name      :action-drawers
               :insets    {:top false}
               :component drawers/preview-action-drawers}]