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

[Refactor#18748] - Collectible Tag (#18804) 

[Refactor Collectible Tag] Improve component schema and add component_spec
This commit is contained in:
Flavio Fraschetti 2024-02-15 09:52:24 -03:00 committed by GitHub
parent e6ea8ae9a9
commit 2e13cfc47f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 119 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/quo/components/tags/collectible_tag/component_spec.cljs Normal file
View File

@ -0,0 +1,52 @@
(ns quo.components.tags.collectible-tag.component-spec
(:require
[quo.components.tags.collectible-tag.view :as collectible-tag]
[test-helpers.component :as h]))
(def collectible-name "Collectible")
(def collectible-id "#123")
(defn get-test-data
[{:keys [options blur? size]}]
{:collectible-name collectible-name
:collectible-id collectible-id
:collectible-img-src {:uri "https://example.com/image.jpg"}
:options options
:blur? (or blur? false)
:size (or size :size-24)})
(h/describe "Collectible_tag tests"
(h/test "Renders Default option"
(let [data (get-test-data {})]
(h/render-with-theme-provider [collectible-tag/view data])
(h/is-truthy (h/get-by-text collectible-name))))
(h/test "Renders Add option"
(let [data (get-test-data {:options :add})]
(h/render-with-theme-provider [collectible-tag/view data])
(h/is-truthy (h/get-by-text collectible-name))))
(h/test "Renders Hold option"
(let [data (get-test-data {:options :hold})]
(h/render-with-theme-provider [collectible-tag/view data])
(h/is-truthy (h/get-by-text collectible-name))))
(h/test "Renders with Blur"
(let [data (get-test-data {:blur? true})]
(h/render-with-theme-provider [collectible-tag/view data])
(h/is-truthy (h/get-by-text collectible-name))))
(h/test "Renders without Blur"
(let [data (get-test-data {:blur? false})]
(h/render-with-theme-provider [collectible-tag/view data])
(h/is-truthy (h/get-by-text collectible-name))))
(h/test "Renders with Size 24"
(let [data (get-test-data {:size :size-24})]
(h/render-with-theme-provider [collectible-tag/view data])
(h/is-truthy (h/get-by-text collectible-name))))
(h/test "Renders with Size 32"
(let [data (get-test-data {:size :size-32})]
(h/render-with-theme-provider [collectible-tag/view data])
(h/is-truthy (h/get-by-text collectible-name)))))

15
src/quo/components/tags/collectible_tag/schema.cljs Normal file
View File

@ -0,0 +1,15 @@
(ns quo.components.tags.collectible-tag.schema)
(def ?schema
[:=>
[:catn
[:props
[:map
[:options {:optional true} [:maybe [:enum :add :hold]]]
[:size {:optional true} [:maybe [:enum :size-24 :size-32]]]
[:blur? {:optional true} [:maybe :boolean]]
[:theme :schema.common/theme]
[:collectible-img-src :schema.common/image-source]
[:collectible-name :string]
[:collectible-id :string]]]]
:any])

99
src/quo/components/tags/collectible_tag/view.cljs
View File

@ -1,70 +1,59 @@
(ns quo.components.tags.collectible-tag.view
(:require
[oops.core :as oops]
[quo.components.icon :as icons]
[quo.components.markdown.text :as text]
[quo.components.tags.collectible-tag.schema :as component-schema]
[quo.components.tags.collectible-tag.style :as style]
[quo.theme]
[react-native.core :as rn]
[react-native.hole-view :as hole-view]
[reagent.core :as reagent]
[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}]])]))
(let [container-width (reagent/atom 0)
on-layout #(->> (oops/oget % :nativeEvent :layout :width)
(reset! container-width))]
(fn [{:keys [options blur? theme collectible-img-src collectible-name collectible-id] :as props}]
(let [size (or (:size props) :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)))
(schema/instrument #'view-internal component-schema/?schema)))

1
src/quo/core_spec.cljs
View File

@ -79,6 +79,7 @@
quo.components.share.share-qr-code.component-spec
quo.components.switchers.base-card.component-spec
quo.components.switchers.group-messaging-card.component-spec
quo.components.tags.collectible-tag.component-spec
quo.components.tags.network-tags.component-spec
quo.components.tags.status-tags-component-spec
quo.components.tags.summary-tag.component-spec

22
src/status_im/contexts/preview/quo/tags/collectible_tag.cljs
View File

@ -1,6 +1,5 @@
(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]
@ -16,9 +15,7 @@
:value "Size 32"}]}
{:key :options
:type :select
:options [{:key false
:value false}
{:key :add
:options [{:key :add
:value :add}
{:key :hold
:value :hold}]}
@ -31,16 +28,11 @@
(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))]
(let [state (reagent/atom {:size :size-24
:collectible-name "Collectible"
:collectible-id "#123"
:collectible-img-src (resources/mock-images :collectible)
:blur? false})]
(fn []
[preview/preview-container
{:state state
@ -48,4 +40,4 @@
:show-blur-background? true
:descriptor descriptor}
[rn/view {:style {:align-items :center}}
[quo/collectible-tag (assoc @state :on-layout on-layout)]]])))
[quo/collectible-tag @state]]])))