Avatars/Community Avatar Component (#20147)

This commit is contained in:
Ajay Sivan 2024-05-24 18:03:52 +05:30 committed by GitHub
parent c398c85b0f
commit 6f3aa19a04
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 77 additions and 3 deletions

View File

@ -0,0 +1,9 @@
(ns quo.components.avatars.community-avatar.component-spec
(:require [quo.components.avatars.community-avatar.view :as community-avatar]
[test-helpers.component :as h]))
(h/describe "Avatars: Community Avatar"
(h/test "should render correctly"
(h/render-with-theme-provider
[community-avatar/view {:image "mock-image"}])
(h/is-truthy (h/get-by-label-text :community-avatar))))

View File

@ -0,0 +1,12 @@
(ns quo.components.avatars.community-avatar.style)
(def ^:private sizes
{:size-32 32
:size-24 24})
(defn image
[size]
(let [size-val (sizes size)]
{:border-radius (/ size-val 2)
:width size-val
:height size-val}))

View File

@ -0,0 +1,23 @@
(ns quo.components.avatars.community-avatar.view
(:require [quo.components.avatars.community-avatar.style :as style]
[react-native.core :as rn]
[schema.core :as schema]))
(def ?schema
[:=>
[:catn
[:props
[:map {:closed true}
[:size {:optional true} [:maybe [:enum :size-32 :size-24]]]
[:image :schema.common/image-source]
[:container-style {:optional true} [:maybe :map]]]]]
:any])
(defn- view-internal
[{:keys [size image container-style]}]
[rn/image
{:source image
:accessibility-label :community-avatar
:style (merge (style/image size) container-style)}])
(def view (schema/instrument #'view-internal ?schema))

View File

@ -7,5 +7,5 @@
[:map {:closed true} [:map {:closed true}
[:disabled? {:optional true} [:maybe :boolean]] [:disabled? {:optional true} [:maybe :boolean]]
[:on-press fn?] [:on-press fn?]
[:container-style {:optional true} [:maybe :any]]]]] [:container-style {:optional true} [:maybe :map]]]]]
:any]) :any])

View File

@ -7,7 +7,7 @@
[react-native.core :as rn] [react-native.core :as rn]
[schema.core :as schema])) [schema.core :as schema]))
(defn view-internal (defn- view-internal
[{:keys [disabled? on-press container-style]}] [{:keys [disabled? on-press container-style]}]
(let [theme (quo.theme/use-theme) (let [theme (quo.theme/use-theme)
[pressed? set-pressed] (rn/use-state false) [pressed? set-pressed] (rn/use-state false)

View File

@ -5,6 +5,7 @@
quo.components.avatars.account-avatar.view quo.components.avatars.account-avatar.view
quo.components.avatars.channel-avatar.view quo.components.avatars.channel-avatar.view
quo.components.avatars.collection-avatar.view quo.components.avatars.collection-avatar.view
quo.components.avatars.community-avatar.view
quo.components.avatars.group-avatar.view quo.components.avatars.group-avatar.view
quo.components.avatars.icon-avatar quo.components.avatars.icon-avatar
quo.components.avatars.token-avatar.view quo.components.avatars.token-avatar.view
@ -191,6 +192,7 @@
(def account-avatar quo.components.avatars.account-avatar.view/view) (def account-avatar quo.components.avatars.account-avatar.view/view)
(def channel-avatar quo.components.avatars.channel-avatar.view/view) (def channel-avatar quo.components.avatars.channel-avatar.view/view)
(def collection-avatar quo.components.avatars.collection-avatar.view/view) (def collection-avatar quo.components.avatars.collection-avatar.view/view)
(def community-avatar quo.components.avatars.community-avatar.view/view)
(def group-avatar quo.components.avatars.group-avatar.view/view) (def group-avatar quo.components.avatars.group-avatar.view/view)
(def icon-avatar quo.components.avatars.icon-avatar/icon-avatar) (def icon-avatar quo.components.avatars.icon-avatar/icon-avatar)
(def token-avatar quo.components.avatars.token-avatar.view/view) (def token-avatar quo.components.avatars.token-avatar.view/view)

View File

@ -1,6 +1,7 @@
(ns quo.core-spec (ns quo.core-spec
(:require (:require
quo.components.avatars.account-avatar.component-spec quo.components.avatars.account-avatar.component-spec
quo.components.avatars.community-avatar.component-spec
quo.components.avatars.token-avatar.component-spec quo.components.avatars.token-avatar.component-spec
quo.components.avatars.user-avatar.component-spec quo.components.avatars.user-avatar.component-spec
quo.components.banners.banner.component-spec quo.components.banners.banner.component-spec

View File

@ -0,0 +1,24 @@
(ns status-im.contexts.preview.quo.avatars.community-avatar
(:require
[quo.core :as quo]
[react-native.core :as rn]
[status-im.common.resources :as resources]
[status-im.contexts.preview.quo.preview :as preview]))
(def descriptor
[{:type :select
:key :size
:options [{:key :size-32}
{:key :size-24}]}])
(defn view
[]
(let [[state set-state] (rn/use-state {:size :size-32})]
[preview/preview-container
{:state state
:set-state set-state
:descriptor descriptor}
[quo/community-avatar
(assoc state
:image
(resources/get-mock-image :community-logo))]]))

View File

@ -10,6 +10,7 @@
[status-im.contexts.preview.quo.avatars.account-avatar :as account-avatar] [status-im.contexts.preview.quo.avatars.account-avatar :as account-avatar]
[status-im.contexts.preview.quo.avatars.channel-avatar :as channel-avatar] [status-im.contexts.preview.quo.avatars.channel-avatar :as channel-avatar]
[status-im.contexts.preview.quo.avatars.collection-avatar :as collection-avatar] [status-im.contexts.preview.quo.avatars.collection-avatar :as collection-avatar]
[status-im.contexts.preview.quo.avatars.community-avatar :as community-avatar]
[status-im.contexts.preview.quo.avatars.group-avatar :as group-avatar] [status-im.contexts.preview.quo.avatars.group-avatar :as group-avatar]
[status-im.contexts.preview.quo.avatars.icon-avatar :as icon-avatar] [status-im.contexts.preview.quo.avatars.icon-avatar :as icon-avatar]
[status-im.contexts.preview.quo.avatars.token-avatar :as token-avatar] [status-im.contexts.preview.quo.avatars.token-avatar :as token-avatar]
@ -221,7 +222,9 @@
:component shadows/view}] :component shadows/view}]
:animated-list [{:name :animated-header-list :animated-list [{:name :animated-header-list
:component animated-header-list/mock-screen}] :component animated-header-list/mock-screen}]
:avatar [{:name :group-avatar :avatar [{:name :community-avatar
:component community-avatar/view}
{:name :group-avatar
:component group-avatar/view} :component group-avatar/view}
{:name :icon-avatar {:name :icon-avatar
:component icon-avatar/view} :component icon-avatar/view}