-
Notifications
You must be signed in to change notification settings - Fork 985
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(quo): add profile/extended collectible component (#19297)
- Loading branch information
Showing
8 changed files
with
210 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
src/quo/components/profile/expanded_collectible/component_spec.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 changes: 33 additions & 0 deletions
33
src/quo/components/profile/expanded_collectible/style.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
src/status_im/contexts/preview/quo/profile/expanded_collectible.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"))]]))) |