From fd1f14ca86dd8f9d957cebd1f3a9b0b39511ea0a Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Wed, 22 May 2024 17:35:15 +0530 Subject: [PATCH] Avatars/Community Avatar Component --- .../community_avatar/component_spec.cljs | 9 +++++++ .../avatars/community_avatar/style.cljs | 12 ++++++++++ .../avatars/community_avatar/view.cljs | 23 ++++++++++++++++++ .../buttons/swap_order_button/schema.cljs | 2 +- .../buttons/swap_order_button/view.cljs | 2 +- src/quo/core.cljs | 2 ++ src/quo/core_spec.cljs | 1 + .../preview/quo/avatars/community_avatar.cljs | 24 +++++++++++++++++++ src/status_im/contexts/preview/quo/main.cljs | 5 +++- 9 files changed, 77 insertions(+), 3 deletions(-) create mode 100644 src/quo/components/avatars/community_avatar/component_spec.cljs create mode 100644 src/quo/components/avatars/community_avatar/style.cljs create mode 100644 src/quo/components/avatars/community_avatar/view.cljs create mode 100644 src/status_im/contexts/preview/quo/avatars/community_avatar.cljs diff --git a/src/quo/components/avatars/community_avatar/component_spec.cljs b/src/quo/components/avatars/community_avatar/component_spec.cljs new file mode 100644 index 00000000000..485045f5dd4 --- /dev/null +++ b/src/quo/components/avatars/community_avatar/component_spec.cljs @@ -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)))) diff --git a/src/quo/components/avatars/community_avatar/style.cljs b/src/quo/components/avatars/community_avatar/style.cljs new file mode 100644 index 00000000000..5641dbe0f02 --- /dev/null +++ b/src/quo/components/avatars/community_avatar/style.cljs @@ -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})) diff --git a/src/quo/components/avatars/community_avatar/view.cljs b/src/quo/components/avatars/community_avatar/view.cljs new file mode 100644 index 00000000000..1518efe0f2b --- /dev/null +++ b/src/quo/components/avatars/community_avatar/view.cljs @@ -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)) diff --git a/src/quo/components/buttons/swap_order_button/schema.cljs b/src/quo/components/buttons/swap_order_button/schema.cljs index c547cfda614..3fa9a772014 100644 --- a/src/quo/components/buttons/swap_order_button/schema.cljs +++ b/src/quo/components/buttons/swap_order_button/schema.cljs @@ -7,5 +7,5 @@ [:map {:closed true} [:disabled? {:optional true} [:maybe :boolean]] [:on-press fn?] - [:container-style {:optional true} [:maybe :any]]]]] + [:container-style {:optional true} [:maybe :map]]]]] :any]) diff --git a/src/quo/components/buttons/swap_order_button/view.cljs b/src/quo/components/buttons/swap_order_button/view.cljs index 589bfcbf3a1..0e82ba8905f 100644 --- a/src/quo/components/buttons/swap_order_button/view.cljs +++ b/src/quo/components/buttons/swap_order_button/view.cljs @@ -7,7 +7,7 @@ [react-native.core :as rn] [schema.core :as schema])) -(defn view-internal +(defn- view-internal [{:keys [disabled? on-press container-style]}] (let [theme (quo.theme/use-theme) [pressed? set-pressed] (rn/use-state false) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index ba146b426ae..2ab0e022a8a 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -5,6 +5,7 @@ quo.components.avatars.account-avatar.view quo.components.avatars.channel-avatar.view quo.components.avatars.collection-avatar.view + quo.components.avatars.community-avatar.view quo.components.avatars.group-avatar.view quo.components.avatars.icon-avatar quo.components.avatars.token-avatar.view @@ -191,6 +192,7 @@ (def account-avatar quo.components.avatars.account-avatar.view/view) (def channel-avatar quo.components.avatars.channel-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 icon-avatar quo.components.avatars.icon-avatar/icon-avatar) (def token-avatar quo.components.avatars.token-avatar.view/view) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index 978da48b813..ef68aa8e0b5 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -1,6 +1,7 @@ (ns quo.core-spec (:require quo.components.avatars.account-avatar.component-spec + quo.components.avatars.community-avatar.component-spec quo.components.avatars.token-avatar.component-spec quo.components.avatars.user-avatar.component-spec quo.components.banners.banner.component-spec diff --git a/src/status_im/contexts/preview/quo/avatars/community_avatar.cljs b/src/status_im/contexts/preview/quo/avatars/community_avatar.cljs new file mode 100644 index 00000000000..002118afc27 --- /dev/null +++ b/src/status_im/contexts/preview/quo/avatars/community_avatar.cljs @@ -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))]])) diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index f8b681b60de..ee30ac5a0e3 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -10,6 +10,7 @@ [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.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.icon-avatar :as icon-avatar] [status-im.contexts.preview.quo.avatars.token-avatar :as token-avatar] @@ -221,7 +222,9 @@ :component shadows/view}] :animated-list [{:name :animated-header-list :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} {:name :icon-avatar :component icon-avatar/view}