Enhance the `dapp-avatar` component (#20392)
This commit is contained in:
parent
6a7f04a5a8
commit
b119860b81
|
@ -1,23 +1,59 @@
|
|||
(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
|
||||
{:height size
|
||||
:width size})
|
||||
(defn container
|
||||
[size]
|
||||
(let [container-size (size->int size)]
|
||||
{:height container-size
|
||||
:width container-size}))
|
||||
|
||||
(def hole-view
|
||||
{:width size
|
||||
:height size})
|
||||
(defn hole-view
|
||||
[size]
|
||||
(let [container-size (size->int size)]
|
||||
{:width container-size
|
||||
:height container-size}))
|
||||
|
||||
(def context
|
||||
{:width 16
|
||||
:height 16
|
||||
:border-radius 8
|
||||
(defn context
|
||||
[size]
|
||||
(let [context-size (case size
|
||||
:size-32 16
|
||||
:size-64 20
|
||||
20)
|
||||
offset (case size
|
||||
:size-32 -4
|
||||
:size-64 0
|
||||
-4)]
|
||||
{:width context-size
|
||||
:height context-size
|
||||
:border-radius (/ context-size 2)
|
||||
:position :absolute
|
||||
:right -4
|
||||
:bottom -4})
|
||||
:right offset
|
||||
:bottom offset}))
|
||||
|
||||
(def image
|
||||
{:width size
|
||||
:height size})
|
||||
(defn context-hole
|
||||
[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}))
|
||||
|
|
|
@ -11,32 +11,30 @@
|
|||
[:props
|
||||
[:map {:closed true}
|
||||
[:context? {:optional true} [:maybe :boolean]]
|
||||
[:size {:optional true} [:maybe [:enum :size-32 :size-64]]]
|
||||
[:image :schema.common/image-source]
|
||||
[:network-image {:optional true} [:maybe :schema.common/image-source]]
|
||||
[:container-style {:optional true} [:maybe :map]]]]]
|
||||
:any])
|
||||
|
||||
(defn- view-internal
|
||||
[{:keys [context? image network-image container-style]}]
|
||||
[{:keys [context? size image network-image container-style]}]
|
||||
[rn/view
|
||||
{:style (merge style/container container-style)
|
||||
{:style (-> (style/container size)
|
||||
(merge container-style))
|
||||
:accessibility-label :dapp-avatar}
|
||||
[hole-view/hole-view
|
||||
(cond-> {:holes (if context?
|
||||
[{:x 19
|
||||
:y 19
|
||||
:width 18
|
||||
:height 18
|
||||
:borderRadius 9}]
|
||||
[(style/context-hole size)]
|
||||
[])
|
||||
:style style/hole-view}
|
||||
:style (style/hole-view size)}
|
||||
platform/android? (assoc :key context?))
|
||||
[rn/image
|
||||
{:source image
|
||||
:style style/image}]]
|
||||
:style (style/image size)}]]
|
||||
(when context?
|
||||
[rn/image
|
||||
{:source network-image
|
||||
:style style/context}])])
|
||||
:style (style/context size)}])])
|
||||
|
||||
(def view (schema/instrument #'view-internal ?schema))
|
||||
|
|
|
@ -7,11 +7,16 @@
|
|||
|
||||
(def descriptor
|
||||
[{:type :boolean
|
||||
:key :context?}])
|
||||
:key :context?}
|
||||
{:type :select
|
||||
:key :size
|
||||
:options [{:key :size-32}
|
||||
{:key :size-64}]}])
|
||||
|
||||
(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
|
||||
{:state state
|
||||
:set-state set-state
|
||||
|
|
Loading…
Reference in New Issue