From 621e41e6abb7ea3b28fab0ded515811291c06b17 Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Thu, 15 Dec 2022 21:48:54 +0530 Subject: [PATCH] feat: Added Dividers Date Component to quo2 (#14546) * feat: Added Dividers Date Component to quo2 --- src/quo2/components/dividers/date.cljs | 18 ++++++++++++ src/quo2/core.cljs | 2 ++ .../contexts/chat/messages/list/view.cljs | 4 +-- .../contexts/quo_preview/dividers/date.cljs | 28 +++++++++++++++++++ src/status_im2/contexts/quo_preview/main.cljs | 6 +++- 5 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 src/quo2/components/dividers/date.cljs create mode 100644 src/status_im2/contexts/quo_preview/dividers/date.cljs diff --git a/src/quo2/components/dividers/date.cljs b/src/quo2/components/dividers/date.cljs new file mode 100644 index 0000000000..598eb43f96 --- /dev/null +++ b/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]]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 44bc7099b9..5fe78160b2 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index 2154d6d60f..9ca25ddc92 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/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] diff --git a/src/status_im2/contexts/quo_preview/dividers/date.cljs b/src/status_im2/contexts/quo_preview/dividers/date.cljs new file mode 100644 index 0000000000..25714453ff --- /dev/null +++ b/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}]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index fc9a2f2193..b2db5f0371 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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}]