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

Quo community-stat component (#17851)

This commit is contained in:
Ajay Sivan 2023-11-09 18:09:42 +05:30 committed by GitHub
parent 595b1cfc40
commit e48a5c4e83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 99 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/quo/components/community/community_stat/component_spec.cljs Normal file
View File

@ -0,0 +1,18 @@
(ns quo.components.community.community-stat.component-spec
(:require
[quo.core :as quo]
[test-helpers.component :as h]
utils.money))
(h/describe "Community Stat Component"
(h/test "default render"
(h/render [quo/community-stat
{:value "5000"
:icon :i/active-members
:accessibility-label :community-active-members}])
(h/is-truthy (h/query-by-label-text :community-active-members)))
(h/test "renders community stat with a value"
(h/render [quo/community-stat
{:value "5000"
:icon :i/members}])
(h/is-truthy (h/query-by-text (utils.money/format-amount "5000")))))

12
src/quo/components/community/community_stat/style.cljs Normal file
View File

@ -0,0 +1,12 @@
(ns quo.components.community.community-stat.style
(:require [quo.foundations.colors :as colors]))
(def container
{:flex-direction :row
:align-items :center
:height 22})
(defn text
[theme]
{:color (colors/theme-colors colors/black colors/white theme)
:margin-left 2})

26
src/quo/components/community/community_stat/view.cljs Normal file
View File

@ -0,0 +1,26 @@
(ns quo.components.community.community-stat.view
(:require [quo.components.community.community-stat.style :as style]
[quo.components.icon :as quo.icons]
[quo.components.markdown.text :as quo.text]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
utils.money))
(defn view-internal
[{:keys [value icon theme style accessibility-label]}]
[rn/view
{:style (merge style/container style)
:accessibility-label accessibility-label}
[quo.icons/icon icon
{:size 16
:container-style {:align-items :center
:justify-content :center}
:resize-mode :center
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
[quo.text/text
{:size :paragraph-1
:weight :regular
:style (style/text theme)} (utils.money/format-amount value)]])
(def view (quo.theme/with-theme view-internal))

54
src/quo/components/community/community_view.cljs
View File

@ -1,52 +1,30 @@
(ns quo.components.community.community-view
(:require
[quo.components.community.community-stat.view :as community-stat]
[quo.components.community.style :as style]
[quo.components.icon :as icons]
[quo.components.markdown.text :as text]
[quo.components.tags.permission-tag :as permission]
[quo.components.tags.tag :as tag]
[quo.foundations.colors :as colors]
[quo.theme :as theme]
[react-native.core :as rn]
[react-native.gesture :as gesture]
utils.money))
(defn community-stats
[{:keys [icon members-count icon-color accessibility-label]}]
[rn/view
{:accessibility-label accessibility-label
:style (style/stats-count-container)}
[rn/view {:margin-right 2}
[icons/icon icon
{:container-style {:align-items :center
:justify-content :center}
:resize-mode :center
:size 16
:color icon-color}]]
[text/text
{:weight :regular
:size :paragraph-2}
members-count]])
[react-native.gesture :as gesture]))
(defn community-stats-column
[{:keys [type theme blur? members-count active-count]}]
(let [icon-color (if (and (= :dark theme) blur?)
colors/white-opa-40
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))]
[rn/view
(if (= type :card-view)
(style/card-stats-container)
(style/list-stats-container))
[community-stats
{:accessibility-label :stats-members-count
:icon :i/group
:members-count (utils.money/format-amount members-count)
:icon-color icon-color}]
[community-stats
{:accessibility-label :stats-active-count
:icon :i/active-members
:members-count (utils.money/format-amount active-count)
:icon-color icon-color}]]))
[{:keys [type members-count active-count]}]
[rn/view
(if (= type :card-view)
(style/card-stats-container)
(style/list-stats-container))
[community-stat/view
{:accessibility-label :stats-members-count
:icon :i/group
:value members-count
:style {:margin-right 12}}]
[community-stat/view
{:accessibility-label :stats-active-count
:icon :i/active-members
:value active-count}]])
(defn community-tags
[{:keys [tags container-style last-item-style]}]

6
src/quo/components/community/style.cljs
View File

@ -17,12 +17,6 @@
(def detail-container
{:flex 1})
(defn stats-count-container
[]
{:flex-direction :row
:align-items :center
:margin-right 16})
(defn card-stats-container
[]
{:flex-direction :row})

2
src/quo/components/list_items/community/view.cljs
View File

@ -148,8 +148,6 @@
(when (and members (= type :discover))
[community-view/community-stats-column
{:type :list-view
:theme theme
:blur? blur?
:members-count (:members-count members)
:active-count (:active-count members)}])]
[info-component

3
src/quo/core.cljs
View File

@ -31,6 +31,7 @@
quo.components.community.channel-actions
quo.components.community.community-card-view
quo.components.community.community-list-view
quo.components.community.community-stat.view
quo.components.community.community-view
quo.components.community.icon
quo.components.community.token-gating
@ -199,7 +200,7 @@
(def communities-membership-list-item
quo.components.community.community-list-view/communities-membership-list-item)
(def community-stats-column quo.components.community.community-view/community-stats-column)
(def community-stats quo.components.community.community-view/community-stats)
(def community-stat quo.components.community.community-stat.view/view)
(def community-tags quo.components.community.community-view/community-tags)
(def community-title quo.components.community.community-view/community-title)
(def permission-tag-container quo.components.community.community-view/permission-tag-container)

1
src/quo/core_spec.cljs
View File

@ -15,6 +15,7 @@
[quo.components.calendar.calendar.component-spec]
[quo.components.calendar.calendar.month-picker.component-spec]
[quo.components.colors.color-picker.component-spec]
[quo.components.community.community-stat.component-spec]
[quo.components.counter.counter.component-spec]
[quo.components.counter.step.component-spec]
[quo.components.dividers.divider-label.component-spec]

21
src/status_im2/contexts/quo_preview/community/community_stat.cljs Normal file
View File

@ -0,0 +1,21 @@
(ns status-im2.contexts.quo-preview.community.community-stat
(:require
[quo.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:key :value
:type :number}
{:key :icon
:type :select
:options [{:key :i/members}
{:key :i/active-members}]}])
(defn view
[]
(let [state (reagent/atom {:value 5000
:icon :i/members})]
(fn []
[preview/preview-container {:state state :descriptor descriptor}
[quo/community-stat @state]])))

3
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -39,6 +39,7 @@
community-card]
[status-im2.contexts.quo-preview.community.community-membership-list-view
:as community-membership-list-view]
[status-im2.contexts.quo-preview.community.community-stat :as community-stat]
[status-im2.contexts.quo-preview.community.discover-card :as discover-card]
[status-im2.contexts.quo-preview.community.token-gating :as token-gating]
[status-im2.contexts.quo-preview.counter.counter :as counter]
@ -231,6 +232,8 @@
:component community-card/view}
{:name :community-membership-list-view
:component community-membership-list-view/view}
{:name :community-stat
:component community-stat/view}
{:name :discover-card
:component discover-card/view}
{:name :token-gating