status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implement unread badge for bottom tabs (#14856)

This commit is contained in:
Parvesh Monu 2023-01-23 20:23:41 +05:30 committed by GitHub
parent d79d2e9d36
commit b3a03119d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo2/components/tags/context_tags.cljs
View File

@ -64,7 +64,7 @@
[rn/image [rn/image
{:style {:width 20 {:style {:width 20
:border-radius 10 :border-radius 10
:background-color :red :background-color :white
:height 20} :height 20}
:source photo}] :source photo}]
[rn/view [rn/view

37
src/status_im2/contexts/shell/bottom_tabs.cljs
View File

@ -1,35 +1,38 @@
(ns status-im2.contexts.shell.bottom-tabs (ns status-im2.contexts.shell.bottom-tabs
(:require [quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab] (:require [quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab]
[react-native.core :as rn] [react-native.core :as rn]
[utils.re-frame :as rf]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[status-im2.contexts.shell.animation :as animation] [status-im2.contexts.shell.animation :as animation]
[status-im2.contexts.shell.constants :as shell.constants] [status-im2.contexts.shell.constants :as shell.constants]
[status-im2.contexts.shell.style :as styles])) [status-im2.contexts.shell.style :as styles]))
(defn bottom-tab (defn bottom-tab
[icon stack-id shared-values] [icon stack-id shared-values notifications-data]
[bottom-nav-tab/bottom-nav-tab [bottom-nav-tab/bottom-nav-tab
{:test-ID stack-id (assoc (get notifications-data stack-id)
:icon icon :test-ID stack-id
:icon-color-anim (get :icon icon
shared-values :icon-color-anim (get
(get shell.constants/tabs-icon-color-keywords stack-id)) shared-values
:on-press #(animation/bottom-tab-on-press stack-id) (get shell.constants/tabs-icon-color-keywords stack-id))
:accessibility-label (str (name stack-id) "-tab")}]) :on-press #(animation/bottom-tab-on-press stack-id)
:accessibility-label (str (name stack-id) "-tab"))])
(defn bottom-tabs (defn bottom-tabs
[] []
[:f> [:f>
(fn [] (fn []
(let [shared-values @animation/shared-values-atom (let [notifications-data (rf/sub [:shell/bottom-tabs-notifications-data])
original-style (styles/bottom-tabs-container @animation/pass-through?) shared-values @animation/shared-values-atom
animated-style (reanimated/apply-animations-to-style original-style (styles/bottom-tabs-container @animation/pass-through?)
{:height (:bottom-tabs-height shared-values)} animated-style (reanimated/apply-animations-to-style
original-style)] {:height (:bottom-tabs-height shared-values)}
original-style)]
(animation/load-stack @animation/selected-stack-id) (animation/load-stack @animation/selected-stack-id)
[reanimated/view {:style animated-style} [reanimated/view {:style animated-style}
[rn/view {:style (styles/bottom-tabs)} [rn/view {:style (styles/bottom-tabs)}
[bottom-tab :i/communities :communities-stack shared-values] [bottom-tab :i/communities :communities-stack shared-values notifications-data]
[bottom-tab :i/messages :chats-stack shared-values] [bottom-tab :i/messages :chats-stack shared-values notifications-data]
[bottom-tab :i/wallet :wallet-stack shared-values] [bottom-tab :i/wallet :wallet-stack shared-values notifications-data]
[bottom-tab :i/browser :browser-stack shared-values]]]))]) [bottom-tab :i/browser :browser-stack shared-values notifications-data]]]))])

33
src/status_im2/subs/shell.cljs
View File

@ -147,3 +147,36 @@
(let [community-id (:community-id channel) (let [community-id (:community-id channel)
community (get communities (:community-id channel))] community (get communities (:community-id channel))]
(community-channel-card community community-id channel channel-id)))) (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)}})))