Enhance the `dapp-avatar` component (#20392)

This commit is contained in:
Alexander 2024-06-11 15:26:04 +02:00 committed by GitHub
parent 6a7f04a5a8
commit b119860b81
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 68 additions and 29 deletions

View File

@ -1,23 +1,59 @@
(ns quo.components.avatars.dapp-avatar.style) (ns quo.components.avatars.dapp-avatar.style)
(def ^:const size 32) (defn- size->int
[size]
(case size
:size-32 32
:size-64 64
32))
(def container (defn container
{:height size [size]
:width size}) (let [container-size (size->int size)]
{:height container-size
:width container-size}))
(def hole-view (defn hole-view
{:width size [size]
:height size}) (let [container-size (size->int size)]
{:width container-size
:height container-size}))
(def context (defn context
{:width 16 [size]
:height 16 (let [context-size (case size
:border-radius 8 :size-32 16
:position :absolute :size-64 20
:right -4 20)
:bottom -4}) offset (case size
:size-32 -4
:size-64 0
-4)]
{:width context-size
:height context-size
:border-radius (/ context-size 2)
:position :absolute
:right offset
:bottom offset}))
(def image (defn context-hole
{:width size [size]
:height size}) (let [context-hole-size (case size
:size-32 18
:size-64 24
18)
offset (case size
:size-32 19
:size-64 42
19)]
{:x offset
:y offset
:width context-hole-size
:height context-hole-size
:borderRadius (/ context-hole-size 2)}))
(defn image
[size]
(let [container-size (size->int size)]
{:width container-size
:height container-size}))

View File

@ -11,32 +11,30 @@
[:props [:props
[:map {:closed true} [:map {:closed true}
[:context? {:optional true} [:maybe :boolean]] [:context? {:optional true} [:maybe :boolean]]
[:size {:optional true} [:maybe [:enum :size-32 :size-64]]]
[:image :schema.common/image-source] [:image :schema.common/image-source]
[:network-image {:optional true} [:maybe :schema.common/image-source]] [:network-image {:optional true} [:maybe :schema.common/image-source]]
[:container-style {:optional true} [:maybe :map]]]]] [:container-style {:optional true} [:maybe :map]]]]]
:any]) :any])
(defn- view-internal (defn- view-internal
[{:keys [context? image network-image container-style]}] [{:keys [context? size image network-image container-style]}]
[rn/view [rn/view
{:style (merge style/container container-style) {:style (-> (style/container size)
(merge container-style))
:accessibility-label :dapp-avatar} :accessibility-label :dapp-avatar}
[hole-view/hole-view [hole-view/hole-view
(cond-> {:holes (if context? (cond-> {:holes (if context?
[{:x 19 [(style/context-hole size)]
:y 19
:width 18
:height 18
:borderRadius 9}]
[]) [])
:style style/hole-view} :style (style/hole-view size)}
platform/android? (assoc :key context?)) platform/android? (assoc :key context?))
[rn/image [rn/image
{:source image {:source image
:style style/image}]] :style (style/image size)}]]
(when context? (when context?
[rn/image [rn/image
{:source network-image {:source network-image
:style style/context}])]) :style (style/context size)}])])
(def view (schema/instrument #'view-internal ?schema)) (def view (schema/instrument #'view-internal ?schema))

View File

@ -7,11 +7,16 @@
(def descriptor (def descriptor
[{:type :boolean [{:type :boolean
:key :context?}]) :key :context?}
{:type :select
:key :size
:options [{:key :size-32}
{:key :size-64}]}])
(defn view (defn view
[] []
(let [[state set-state] (rn/use-state {:context? false})] (let [[state set-state] (rn/use-state {:context? false
:size :size-32})]
[preview/preview-container [preview/preview-container
{:state state {:state state
:set-state set-state :set-state set-state