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)
|
(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}))
|
||||||
|
|
|
@ -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))
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue