Implement unread badge for bottom tabs (#14856)
This commit is contained in:
parent
d79d2e9d36
commit
b3a03119d1
|
@ -64,7 +64,7 @@
|
|||
[rn/image
|
||||
{:style {:width 20
|
||||
:border-radius 10
|
||||
:background-color :red
|
||||
:background-color :white
|
||||
:height 20}
|
||||
:source photo}]
|
||||
[rn/view
|
||||
|
|
|
@ -1,27 +1,30 @@
|
|||
(ns status-im2.contexts.shell.bottom-tabs
|
||||
(:require [quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab]
|
||||
[react-native.core :as rn]
|
||||
[utils.re-frame :as rf]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[status-im2.contexts.shell.animation :as animation]
|
||||
[status-im2.contexts.shell.constants :as shell.constants]
|
||||
[status-im2.contexts.shell.style :as styles]))
|
||||
|
||||
(defn bottom-tab
|
||||
[icon stack-id shared-values]
|
||||
[icon stack-id shared-values notifications-data]
|
||||
[bottom-nav-tab/bottom-nav-tab
|
||||
{:test-ID stack-id
|
||||
(assoc (get notifications-data stack-id)
|
||||
:test-ID stack-id
|
||||
:icon icon
|
||||
:icon-color-anim (get
|
||||
shared-values
|
||||
(get shell.constants/tabs-icon-color-keywords stack-id))
|
||||
:on-press #(animation/bottom-tab-on-press stack-id)
|
||||
:accessibility-label (str (name stack-id) "-tab")}])
|
||||
:accessibility-label (str (name stack-id) "-tab"))])
|
||||
|
||||
(defn bottom-tabs
|
||||
[]
|
||||
[:f>
|
||||
(fn []
|
||||
(let [shared-values @animation/shared-values-atom
|
||||
(let [notifications-data (rf/sub [:shell/bottom-tabs-notifications-data])
|
||||
shared-values @animation/shared-values-atom
|
||||
original-style (styles/bottom-tabs-container @animation/pass-through?)
|
||||
animated-style (reanimated/apply-animations-to-style
|
||||
{:height (:bottom-tabs-height shared-values)}
|
||||
|
@ -29,7 +32,7 @@
|
|||
(animation/load-stack @animation/selected-stack-id)
|
||||
[reanimated/view {:style animated-style}
|
||||
[rn/view {:style (styles/bottom-tabs)}
|
||||
[bottom-tab :i/communities :communities-stack shared-values]
|
||||
[bottom-tab :i/messages :chats-stack shared-values]
|
||||
[bottom-tab :i/wallet :wallet-stack shared-values]
|
||||
[bottom-tab :i/browser :browser-stack shared-values]]]))])
|
||||
[bottom-tab :i/communities :communities-stack shared-values notifications-data]
|
||||
[bottom-tab :i/messages :chats-stack shared-values notifications-data]
|
||||
[bottom-tab :i/wallet :wallet-stack shared-values notifications-data]
|
||||
[bottom-tab :i/browser :browser-stack shared-values notifications-data]]]))])
|
||||
|
|
|
@ -147,3 +147,36 @@
|
|||
(let [community-id (:community-id channel)
|
||||
community (get communities (:community-id channel))]
|
||||
(community-channel-card community community-id channel channel-id))))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:shell/bottom-tabs-notifications-data
|
||||
:<- [:chats/chats]
|
||||
(fn [chats]
|
||||
(let [{:keys [chats-stack community-stack]}
|
||||
(reduce
|
||||
(fn [acc [_ {:keys [unviewed-messages-count unviewed-mentions-count chat-type]}]]
|
||||
(case chat-type
|
||||
constants/community-chat-type
|
||||
(-> acc
|
||||
(update-in [:community-stack :unviewed-messages-count] + unviewed-messages-count)
|
||||
(update-in [:community-stack :unviewed-mentions-count] + unviewed-mentions-count))
|
||||
|
||||
(constants/private-group-chat-type constants/one-to-one-chat-type)
|
||||
(-> acc
|
||||
(update-in [:chats-stack :unviewed-messages-count] + unviewed-messages-count)
|
||||
(update-in [:chats-stack :unviewed-mentions-count] + unviewed-mentions-count))
|
||||
|
||||
acc))
|
||||
{:chats-stack {:unviewed-messages-count 0 :unviewed-mentions-count 0}
|
||||
:community-stack {:unviewed-messages-count 0 :unviewed-mentions-count 0}}
|
||||
chats)]
|
||||
{:communities-stack
|
||||
{:new-notifications? (pos? (:unviewed-messages-count community-stack))
|
||||
:notification-indicator (if (pos? (:unviewed-mentions-count community-stack))
|
||||
:counter
|
||||
:unread-dot)
|
||||
:counter-label (:unviewed-mentions-count community-stack)}
|
||||
:chats-stack
|
||||
{:new-notifications? (pos? (:unviewed-messages-count chats-stack))
|
||||
:notification-indicator (if (pos? (:unviewed-mentions-count chats-stack)) :counter :unread-dot)
|
||||
:counter-label (:unviewed-mentions-count chats-stack)}})))
|
||||
|
|
Loading…
Reference in New Issue