status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[Communities] Add quo Collectible Tag (#18748) 

* register and basic imports for collectible tag component

* implement variations and design for collectible tag component

* Refined based on review feedback and implemented schema enhancements
This commit is contained in:
Flavio Fraschetti 2024-02-12 07:40:12 -03:00 committed by GitHub
parent d1f22cd2b8
commit 6e22e63158
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 177 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/quo/components/tags/collectible_tag/style.cljs Normal file
View File

@ -0,0 +1,50 @@
(ns quo.components.tags.collectible-tag.style
(:require
[quo.foundations.colors :as colors]))
(defn container
[size options blur? theme]
(let [hold? (= options :hold)]
(merge {:background-color (if blur?
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
(colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
:flex-direction :row
:align-items :center
:padding-left 2
:border-width (if hold? 1 0)
:border-radius 0
:border-color (colors/resolve-color :success theme)}
(condp = size
:size-24 {:height (if hold? 26 24)
:padding-right 10
:border-radius 8}
:size-32 {:height (if hold? 34 32)
:padding-right 12
:border-radius 10}))))
(defn options-icon
[size]
(assoc
(condp = size
:size-24 {:right -8
:top -8}
:size-32 {:right -6
:top -6})
:position
:absolute))
(defn collectible-img
[size]
(condp = size
:size-24 {:width 20
:height 20
:margin-right 6
:border-radius 6}
:size-32 {:width 28
:height 28
:margin-right 8
:border-radius 8}))
(defn label
[theme]
{:color (colors/theme-colors colors/neutral-100 colors/white theme)})

70
src/quo/components/tags/collectible_tag/view.cljs Normal file
View File

@ -0,0 +1,70 @@
(ns quo.components.tags.collectible-tag.view
(:require
[quo.components.icon :as icons]
[quo.components.markdown.text :as text]
[quo.components.tags.collectible-tag.style :as style]
[quo.theme]
[react-native.core :as rn]
[react-native.hole-view :as hole-view]
[schema.core :as schema]))
(def ?schema
[:=>
[:catn
[:props
[:map {:closed true}
[:options {:optional true} [:maybe [:enum false :add :hold]]]
[:size {:optional true} [:enum :size-24 :size-32]]
[:blur? {:optional true} :boolean]
[:theme :schema.common/theme]
[:collectible-img-src [:or :int :string]]
[:collectible-name :string]
[:collectible-id :string]
[:container-width :number]
[:on-layout {:optional true} [:maybe fn?]]]]]
:any])
(defn- view-internal
[]
(fn [{:keys [options size blur? theme collectible-img-src collectible-name collectible-id
container-width on-layout]
:or {size :size-24}}]
[rn/view
{:on-layout on-layout}
[hole-view/hole-view
{:holes (if options
[{:x (- container-width
(case size
:size-24 10
:size-32 12
nil))
:y (case size
:size-24 -6
:size-32 -4
nil)
:width 16
:height 16
:borderRadius 8}]
[])}
[rn/view {:style (style/container size options blur? theme)}
[rn/image {:style (style/collectible-img size) :source collectible-img-src}]
[text/text
{:size :paragraph-2
:weight :medium
:style (style/label theme)}
collectible-name]
[text/text
{:size :paragraph-2
:weight :medium
:margin-left 5
:style (style/label theme)}
collectible-id]]]
(when options
[rn/view {:style (style/options-icon size)}
[icons/icon (if (= options :hold) :i/hold :i/add-token)
{:size 20
:no-color true}]])]))
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))

2
src/quo/core.cljs
View File

@ -135,6 +135,7 @@
quo.components.tabs.account-selector
quo.components.tabs.segmented-tab
quo.components.tabs.tabs.view
quo.components.tags.collectible-tag.view
quo.components.tags.context-tag.view
quo.components.tags.network-tags.view
quo.components.tags.number-tag.view
@ -387,6 +388,7 @@
(def account-selector quo.components.tabs.account-selector/account-selector)
;;;; Tags
(def collectible-tag quo.components.tags.collectible-tag.view/view)
(def context-tag quo.components.tags.context-tag.view/view)
(def network-tags quo.components.tags.network-tags.view/view)
(def number-tag quo.components.tags.number-tag.view/view)

5
src/status_im/contexts/preview/quo/main.cljs
View File

@ -158,6 +158,7 @@
[status-im.contexts.preview.quo.tabs.account-selector :as account-selector]
[status-im.contexts.preview.quo.tabs.segmented-tab :as segmented]
[status-im.contexts.preview.quo.tabs.tabs :as tabs]
[status-im.contexts.preview.quo.tags.collectible-tag :as collectible-tag]
[status-im.contexts.preview.quo.tags.context-tags :as context-tags]
[status-im.contexts.preview.quo.tags.network-tags :as network-tags]
[status-im.contexts.preview.quo.tags.number-tag :as number-tag]
@ -457,7 +458,9 @@
:component tabs/view}
{:name :account-selector
:component account-selector/view}]
:tags [{:name :context-tags
:tags [{:name :collectible-tag
:component collectible-tag/view}
{:name :context-tags
:component context-tags/view}
{:name :network-tags
:component network-tags/view}

51
src/status_im/contexts/preview/quo/tags/collectible_tag.cljs Normal file
View File

@ -0,0 +1,51 @@
(ns status-im.contexts.preview.quo.tags.collectible-tag
(:require
[oops.core :refer [oget]]
[quo.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im.common.resources :as resources]
[status-im.contexts.preview.quo.preview :as preview]))
(def descriptor
[{:key :size
:type :select
:options [{:key :size-24
:value "Size 24"}
{:key :size-32
:value "Size 32"}]}
{:key :options
:type :select
:options [{:key false
:value false}
{:key :add
:value :add}
{:key :hold
:value :hold}]}
{:key :blur?
:type :boolean}
{:key :collectible-name
:type :text}
{:key :collectible-id
:type :text}])
(defn view
[]
(let [state (reagent/atom {:size :size-24
:collectible-name "Collectible"
:collectible-id "#123"
:collectible-img-src (resources/mock-images :collectible)
:options false
:blur? false
:container-width 0})
on-layout #(swap! state assoc
:container-width
(oget % :nativeEvent :layout :width))]
(fn []
[preview/preview-container
{:state state
:blur? (:blur? @state)
:show-blur-background? true
:descriptor descriptor}
[rn/view {:style {:align-items :center}}
[quo/collectible-tag (assoc @state :on-layout on-layout)]]])))