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

chore(quo): add profile/extended collectible component (#19297)

This commit is contained in:
Jamie Caprani 2024-03-21 15:54:14 +00:00 committed by GitHub
parent fba363d9ea
commit ee35fd52f6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 210 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/quo/components/profile/collectible_list_item/view.cljs
View File

@ -4,7 +4,7 @@
[quo.components.counter.collectible-counter.view :as collectible-counter]
[quo.components.icon :as icon]
[quo.components.list-items.preview-list.view :as preview-list]
[quo.components.markdown.text :as quo]
[quo.components.markdown.text :as text]
[quo.components.profile.collectible-list-item.style :as style]
[quo.foundations.colors :as colors]
[quo.foundations.gradients :as gradients]
@ -14,14 +14,13 @@
[utils.i18n :as i18n]))
(defn- fallback-view
[{:keys [label theme type]}]
[{:keys [label theme]}]
[rn/view
{:style (style/fallback {:type type
:theme theme})}
{:style (style/fallback {:theme theme})}
[rn/view
[icon/icon :i/sad {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]]
[rn/view {:style {:height 4}}]
[quo/text
[text/text
{:size :paragraph-2
:style {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}}
label]])
@ -46,7 +45,7 @@
[rn/view {:style style/card-details-container}
(cond (= :cant-fetch status)
[quo/text
[text/text
{:size :paragraph-1
:weight :medium
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
@ -64,7 +63,7 @@
:size :size-20}
[avatar-image-src]]
[rn/view {:style {:width 8}}]
[quo/text
[text/text
{:size :paragraph-1
:weight :semi-bold
:style style/card-detail-text}
@ -76,7 +75,7 @@
{:size :size-20
:image avatar-image-src}]
[rn/view {:style {:width 8}}]
[quo/text
[text/text
{:size :paragraph-1
:weight :semi-bold
:ellipsize-mode :tail
@ -86,7 +85,7 @@
(defn- card-view
[{:keys [avatar-image-src collectible-name community? counter
gradient-color-index image-src status type]}]
gradient-color-index image-src status]}]
(let [theme (quo.theme/use-theme-value)]
[rn/view {:style (style/card-view-container theme)}
[rn/view {:style {:aspect-ratio 1}}
@ -99,13 +98,11 @@
(= status :unsupported)
[fallback-view
{:theme theme
:type type
:label (i18n/label :t/unsupported-file)}]
(= status :cant-fetch)
[fallback-view
{:theme theme
:type type
:label (i18n/label :t/cant-fetch-info)}]
:else
@ -139,13 +136,11 @@
(= status :unsupported)
[fallback-view
{:theme theme
:type type
:label (i18n/label :t/unsupported-file)}]
(= status :cant-fetch)
[fallback-view
{:theme theme
:type type
:label (i18n/label :t/cant-fetch-info)}]
:else [rn/view {:style {:aspect-ratio 1}}

40
src/quo/components/profile/expanded_collectible/component_spec.cljs Normal file
View File

@ -0,0 +1,40 @@
(ns quo.components.profile.expanded-collectible.component-spec
(:require
[quo.components.profile.expanded-collectible.view :as expanded-collectible]
[test-helpers.component :as h]))
(h/describe "Profile/ expanded collectible "
(h/test "renders with counter and has on-press event"
(let [on-press (h/mock-fn)]
(h/render-with-theme-provider
[expanded-collectible/view
{:image-src
"https://media.istockphoto.com/id/603164912/photo/suburb-asphalt-road-and-sun-flowers.jpg?s=612x612&w=0&k=20&c=qLoQ5QONJduHrQ0kJF3fvoofmGAFcrq6cL84HbzdLQM="
:counter "1200"
:on-press on-press}])
(h/fire-event :press (h/get-by-label-text :expanded-collectible))
(h/was-called on-press)
(h/is-truthy (h/get-by-text "1200"))))
(h/test "renders with status :cant-fetch and has on-press event"
(let [on-press (h/mock-fn)]
(h/render-with-theme-provider
[expanded-collectible/view
{:counter "1200"
:status :cant-fetch
:on-press on-press}])
(h/fire-event :press (h/get-by-label-text :expanded-collectible))
(h/was-called on-press)
(h/is-truthy (h/get-by-translation-text :t/cant-fetch-info))))
(h/test "renders with status :unsupported and has on-press event"
(let [on-press (h/mock-fn)]
(h/render-with-theme-provider
[expanded-collectible/view
{:counter "1200"
:status :unsupported
:on-press on-press}])
(h/fire-event :press (h/get-by-label-text :expanded-collectible))
(h/was-called on-press)
(h/is-truthy (h/get-by-translation-text :t/unsupported-file)))))

33
src/quo/components/profile/expanded_collectible/style.cljs Normal file
View File

@ -0,0 +1,33 @@
(ns quo.components.profile.expanded-collectible.style
(:require [quo.foundations.colors :as colors]
[quo.foundations.shadows :as shadows]))
(def container
(merge (shadows/get 2)
{:flex 1
:align-items :center
:justify-content :center
:border-radius 16}))
(defn image
[square? aspect-ratio]
{:width "100%"
:aspect-ratio (if square? 1 aspect-ratio)
:border-radius 16})
(defn fallback
[{:keys [theme]}]
{:background-color (colors/theme-colors colors/neutral-2_5 colors/neutral-90 theme)
:border-style :dashed
:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
:border-width 1
:border-radius 16
:width "100%"
:aspect-ratio 1
:align-items :center
:justify-content :center})
(def counter
{:position :absolute
:top 12
:right 12})

77
src/quo/components/profile/expanded_collectible/view.cljs Normal file
View File

@ -0,0 +1,77 @@
(ns quo.components.profile.expanded-collectible.view
(:require
[promesa.core :as p]
[quo.components.counter.collectible-counter.view :as collectible-counter]
[quo.components.icon :as icon]
[quo.components.markdown.text :as text]
[quo.components.profile.expanded-collectible.style :as style]
[quo.foundations.colors :as colors]
[quo.theme]
[react-native.core :as rn]
[schema.core :as schema]
[utils.i18n :as i18n]))
(defn- counter-view
[counter]
(when counter
[collectible-counter/view
{:container-style style/counter
:value counter}]))
(defn- fallback-view
[{:keys [label theme counter]}]
[rn/view
{:style (style/fallback {:theme theme})}
[counter-view counter]
[rn/view
[icon/icon :i/sad {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]]
[rn/view {:style {:height 4}}]
[text/text
{:size :paragraph-2
:style {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}}
label]])
(defn view-internal
[{:keys [container-style square? status on-press counter image-src] :or {status :default}}]
(let [theme (quo.theme/use-theme-value)
[image-size set-image-size] (rn/use-state {})]
(rn/use-effect
(fn []
(p/let [[image-width image-height] (rn/image-get-size image-src)]
(set-image-size {:width image-width
:height image-height
:aspect-ratio (/ image-width image-height)})))
[image-src])
[rn/pressable
{:on-press on-press
:accessibility-label :expanded-collectible
:style (merge container-style style/container)}
(case status
:unsupported [fallback-view
{:label (i18n/label :t/unsupported-file)
:counter counter
:theme theme}]
:cant-fetch [fallback-view
{:label (i18n/label :t/cant-fetch-info)
:counter counter
:theme theme}]
[rn/view {:style {:flex 1}}
[rn/image
{:style (style/image square? (:aspect-ratio image-size))
:source image-src}]
[counter-view counter]])]))
(def ?schema
[:=>
[:catn
[:props
[:map {:closed true}
[:image-src {:optional true} string?]
[:container-style {:optional true} [:maybe :map]]
[:square? {:optional true} [:maybe boolean?]]
[:counter {:optional true} [:maybe string?]]
[:status {:optional true} [:maybe [:enum :default :loading :cant-fetch :unsupported]]]
[:on-press {:optional true} [:maybe fn?]]]]]
:any])
(def view (schema/instrument #'view-internal ?schema))

2
src/quo/core.cljs
View File

@ -112,6 +112,7 @@
quo.components.password.tips.view
quo.components.profile.collectible-list-item.view
quo.components.profile.collectible.view
quo.components.profile.expanded-collectible.view
quo.components.profile.link-card.view
quo.components.profile.profile-card.view
quo.components.profile.select-profile.view
@ -354,6 +355,7 @@
;;;; Profile
(def collectible quo.components.profile.collectible.view/collectible)
(def collectible-list-item quo.components.profile.collectible-list-item.view/view)
(def expanded-collectible quo.components.profile.expanded-collectible.view/view)
(def link-card quo.components.profile.link-card.view/view)
(def profile-card quo.components.profile.profile-card.view/profile-card)
(def select-profile quo.components.profile.select-profile.view/view)

1
src/quo/core_spec.cljs
View File

@ -64,6 +64,7 @@
quo.components.onboarding.small-option-card.component-spec
quo.components.password.tips.component-spec
quo.components.profile.collectible-list-item.component-spec
quo.components.profile.expanded-collectible.component-spec
quo.components.profile.link-card.component-spec
quo.components.profile.select-profile.component-spec
quo.components.profile.showcase-nav.component-spec

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

@ -135,6 +135,7 @@
[status-im.contexts.preview.quo.password.tips :as tips]
[status-im.contexts.preview.quo.profile.collectible :as collectible]
[status-im.contexts.preview.quo.profile.collectible-list-item :as collectible-list-item]
[status-im.contexts.preview.quo.profile.expanded-collectible :as expanded-collectible]
[status-im.contexts.preview.quo.profile.link-card :as link-card]
[status-im.contexts.preview.quo.profile.profile-card :as profile-card]
[status-im.contexts.preview.quo.profile.select-profile :as select-profile]
@ -420,6 +421,8 @@
:component collectible/view}
{:name :collectible-list-item
:component collectible-list-item/view}
{:name :expanded-collectible
:component expanded-collectible/view}
{:name :link-card
:component link-card/view}
{:name :profile-card

46
src/status_im/contexts/preview/quo/profile/expanded_collectible.cljs Normal file
View File

@ -0,0 +1,46 @@
(ns status-im.contexts.preview.quo.profile.expanded-collectible
(:require
[quo.core :as quo]
[reagent.core :as reagent]
[status-im.contexts.preview.quo.preview :as preview]))
(defonce vertical-image
"https://images.unsplash.com/photo-1526512340740-9217d0159da9?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dmVydGljYWx8ZW58MHx8MHx8fDA%3D")
(defonce horizontal-image
"https://media.istockphoto.com/id/603164912/photo/suburb-asphalt-road-and-sun-flowers.jpg?s=612x612&w=0&k=20&c=qLoQ5QONJduHrQ0kJF3fvoofmGAFcrq6cL84HbzdLQM=")
(def descriptor
[{:key :square?
:type :boolean}
{:key :counter
:type :text}
{:key :status
:type :select
:options [{:key :loading}
{:key :default}
{:key :unsupported}
{:key :cant-fetch}]}
{:type :select
:key :image-type
:options [{:key :vertical}
{:key :horizontal}]}])
(defn view
[]
(let [state (reagent/atom {:square? false
:counter ""
:status :default
:image-type :horizontal})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 20
:margin-horizontal 35}}
[quo/expanded-collectible
(assoc (dissoc @state :image-type)
:image-src (if (= :vertical (:image-type @state))
vertical-image
horizontal-image)
:counter (when (seq (:counter @state)) (:counter @state))
:on-press #(js/alert "Pressed"))]])))