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

Add data-item to `quo/category` (#20542) 

* feat: added data-item to category quo component

* feat: session proposal with data-item & category

* test: category with data-items

* chore: removed unnecessary ->

* fix: trailing newline
This commit is contained in:
Lungu Cristian 2024-06-25 15:35:45 +03:00 committed by GitHub
parent 0ed39a42ef
commit f93e372d18
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 127 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/quo/components/settings/category/component_spec.cljs
View File

@ -51,3 +51,24 @@
:right-icon :i/globe
:chevron? true}]}])
(h/is-truthy (h/get-by-text "subtitle"))))
(h/describe "Data Item Category tests"
(h/test "category renders"
(h/render [category/category
{:list-type :data-item
:label "Label"
:data [{:title "Item 1"
:subtitle "subtitle"
:right-icon :i/globe}]}])
(h/is-truthy (h/get-by-text "Label"))
(h/is-truthy (h/get-by-text "Item 1"))
(h/is-truthy (h/get-by-text "subtitle")))
(h/test "category renders without label"
(h/render [category/category
{:list-type :data-item
:data [{:title "Item 1"
:subtitle "subtitle"
:right-icon :i/globe}]}])
(h/is-falsy (h/query-by-label-text "Label"))
(h/is-truthy (h/get-by-text "Item 1"))))

32
src/quo/components/settings/category/data_item/view.cljs Normal file
View File

@ -0,0 +1,32 @@
(ns quo.components.settings.category.data-item.view
(:require
[quo.components.markdown.text :as text]
[quo.components.settings.category.style :as style]
[quo.components.settings.data-item.view :as data-item]
[quo.theme :as quo.theme]
[react-native.core :as rn]))
(defn view
[{:keys [label data container-style blur?]}]
(let [theme (quo.theme/use-theme)
last-item (rn/use-memo #(last data) [data])]
[rn/view {:style (merge (style/container label) container-style)}
(when label
[text/text
{:weight :medium
:size :paragraph-2
:style (style/label blur? theme)}
label])
[rn/view {:style (style/settings-items blur? theme)}
(for [item data
;; NOTE: overwriting the background of the data-item in favor of the category bg
:let [data-item-container-style (-> item :container-style (assoc :background-color nil))
data-item-props (assoc item
:blur? blur?
:container-style data-item-container-style)]]
^{:key item}
[:<>
[data-item/view data-item-props]
(when-not (= item last-item)
[rn/view {:style (style/settings-separator blur? theme)}])])]]))

9
src/quo/components/settings/category/view.cljs
View File

@ -1,10 +1,13 @@
(ns quo.components.settings.category.view
(:require
[quo.components.settings.category.data-item.view :as data-item]
[quo.components.settings.category.reorder.view :as reorder]
[quo.components.settings.category.settings.view :as settings]))
(defn category
[{:keys [list-type] :as props}]
(if (= list-type :settings)
[settings/settings-category props]
[reorder/reorder-category props]))
(condp = list-type
:settings [settings/settings-category props]
:data-item [data-item/view props]
:reorder [reorder/reorder-category props]
nil))

30
src/status_im/contexts/preview/quo/settings/category.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.contexts.preview.quo.settings.category
(:require
[quo.core :as quo]
[quo.foundations.colors :as colors]
[reagent.core :as reagent]
[status-im.common.resources :as resources]
[status-im.contexts.preview.quo.preview :as preview]))
@ -17,6 +18,24 @@
:image-props :i/browser
:image-size 32})))
(defn create-data-item-array
[n]
(vec
(for [i (range n)]
{:blur? false
:description :default
:icon-right? true
:right-icon :i/chevron-right
:icon-color colors/neutral-10
:card? false
:label :preview
:status :default
:size :default
:right-content {:type :accounts
:data [{:emoji "🔥" :customization-color :yellow}]}
:title (str "Item title " i)
:subtitle "Item subtitle"})))
(def descriptor
[{:key :blur? :type :boolean}
{:key :list-type
@ -24,7 +43,11 @@
:options [{:key :settings
:value :settings}
{:key :reorder
:value :reorder}]}])
:value :reorder}
{:key :data-item
:value :data-item}]}])
(def ^:constant n-items 5)
(defn view
[]
@ -32,7 +55,10 @@
:blur? false
:list-type :settings})]
(fn []
(let [data (create-item-array 5)]
(let [list-type (:list-type @state)
data (if (= list-type :data-item)
(create-data-item-array n-items)
(create-item-array n-items))]
[preview/preview-container
{:state state
:descriptor descriptor

5
src/status_im/contexts/wallet/wallet_connect/session_proposal/style.cljs
View File

@ -24,8 +24,3 @@
(def approval-li-spacer
{:width 8})
(def detail-item
{:margin-bottom 20
:margin-horizontal 20
:padding 12})

74
src/status_im/contexts/wallet/wallet_connect/session_proposal/view.cljs
View File

@ -2,6 +2,7 @@
(:require
[quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.foundations.resources :as quo.resources]
[quo.theme]
[react-native.core :as rn]
[status-im.common.floating-button-page.view :as floating-button-page]
@ -44,41 +45,47 @@
[quo/text label]])
labels)]))
(defn- accounts-data-item
(defn- get-placeholder-networks
[]
;; TODO. This account is currently hard coded in
;; `status-im.contexts.wallet.wallet-connect.events`. Should be selectable and changeable
(let [accounts (rf/sub [:wallet/accounts-without-watched-accounts])
name (-> accounts first :name)]
[quo/data-item
{:container-style style/detail-item
:blur? false
:description :default
:icon-right? true
:right-icon :i/chevron-right
:icon-color colors/neutral-10
:card? false
:label :preview
;; TODO. The quo component for data item doesn't support showing accounts yet
:status :default
:size :small
:title (i18n/label :t/account-title)
:subtitle name}]))
[{:source (quo.resources/get-network :ethereum)}
{:source (quo.resources/get-network :optimism)}
{:source (quo.resources/get-network :arbitrum)}])
(defn- networks-data-item
(defn- connection-category
[]
[quo/data-item
{:container-style style/detail-item
:blur? false
:description :default
:icon-right? true
:card? true
:label :none
:status :default
:size :small
:title (i18n/label :t/networks)
;; TODO. The quo component for data-item does not support showing networks yet
:subtitle "Networks will show up here"}])
(let [{:keys [name emoji customization-color]} (first (rf/sub
[:wallet/accounts-without-watched-accounts]))
data-item-common-props {:blur? false
:description :default
:card? false
:label :preview
:status :default
:size :default}
account-data-item-props (assoc data-item-common-props
:right-content {:type :accounts
:size :size-32
:data [{:emoji emoji
:customization-color
customization-color}]}
:on-press #(js/alert "Not yet implemented")
:title (i18n/label :t/account-title)
:subtitle name
:icon-right? true
:right-icon :i/chevron-right
:icon-color colors/neutral-10)
networks-data-item-props (assoc data-item-common-props
:right-content {:type :network
:data
(get-placeholder-networks)}
:title (i18n/label :t/networks)
;; TODO. The quo component for data-item
;; does not support showing networks yet
:subtitle "Networks placeholder")]
[quo/category
{:blur? false
:list-type :data-item
:data [account-data-item-props
networks-data-item-props]}]))
(defn- footer
[]
@ -114,6 +121,5 @@
:footer [footer]}
[rn/view
[dapp-metadata]
[accounts-data-item]
[networks-data-item]
[connection-category]
[approval-note]]])