status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-16 21:07:21 +00:00
Code Issues Projects Releases Wiki Activity

Update quo/data-item to show accounts and networks as preview (#20382)

Browse Source 
* Update `quo/data-item` to show accounts and networks as preview

* Podfile.lock change reverted
This commit is contained in:
Alexander 2024-06-17 09:37:35 +02:00 committed by GitHub
parent 88b97d1151
commit d2f67ef46c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 73 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/quo/components/settings/data_item/component_spec.cljs
View File

@ -10,9 +10,7 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:icon-right? false
:card? true :card? true
:label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
@ -27,9 +25,7 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:icon-right? false
:card? false :card? false
:label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
@ -45,9 +41,7 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:icon-right? false
:card? true :card? true
:label :none
:status :default :status :default
:size :small :size :small
:title "Label" :title "Label"
@ -63,9 +57,7 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:icon-right? false
:card? true :card? true
:label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
@ -81,9 +73,7 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:icon-right? false
:card? true :card? true
:label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
@ -98,9 +88,7 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:icon-right? false
:card? true :card? true
:label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
@ -115,10 +103,8 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:icon-right? true
:right-icon :i/chevron-right :right-icon :i/chevron-right
:card? true :card? true
:label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
@ -133,10 +119,7 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:icon-right? true
:right-icon :i/chevron-right
:card? true :card? true
:label :preview
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
@ -151,10 +134,7 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:icon-right? true
:right-icon :i/chevron-right
:card? true :card? true
:label :preview
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
@ -170,10 +150,7 @@
(h/render [quo/data-item (h/render [quo/data-item
{:on-press (h/mock-fn) {:on-press (h/mock-fn)
:blur? false :blur? false
:icon-right? true
:right-icon :i/chevron-right
:card? true :card? true
:label :preview
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"

5
src/quo/components/settings/data_item/style.cljs
View File

@ -71,9 +71,8 @@
(colors/theme-colors colors/neutral-100 (colors/theme-colors colors/neutral-100
colors/white colors/white
theme))}) theme))})
(defn right-icon (def right-icon
[label] {:margin-left 12})
{:margin-left (if (or (= label :graph) (= label :none)) 12 8)})
(def left-side (def left-side
{:flex 1}) {:flex 1})

90
src/quo/components/settings/data_item/view.cljs
View File

@ -1,15 +1,13 @@
(ns quo.components.settings.data-item.view (ns quo.components.settings.data-item.view
(:require (:require
[quo.components.avatars.account-avatar.view :as account-avatar] [quo.components.avatars.account-avatar.view :as account-avatar]
[quo.components.common.not-implemented.view :as not-implemented]
[quo.components.icon :as icons] [quo.components.icon :as icons]
[quo.components.list-items.preview-list.view :as preview-list] [quo.components.list-items.preview-list.view :as preview-list]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.components.settings.data-item.style :as style] [quo.components.settings.data-item.style :as style]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]))
[utils.i18n :as i18n]))
(defn- left-loading (defn- left-loading
[{:keys [size blur?]}] [{:keys [size blur?]}]
@ -45,32 +43,24 @@
subtitle]])) subtitle]]))
(defn- left-title (defn- left-title
[{:keys [title label size blur?]}] [{:keys [title blur?]}]
(let [theme (quo.theme/use-theme)] (let [theme (quo.theme/use-theme)]
[rn/view {:style style/title-container} [rn/view {:style style/title-container}
[text/text [text/text
{:weight :regular {:weight :regular
:size :paragraph-2 :size :paragraph-2
:style (style/title blur? theme)} :style (style/title blur? theme)}
title] title]]))
(when (and (= :graph label) (not= :small size))
[text/text
{:weight :regular
:size :label
:style (style/title blur? theme)}
(i18n/label :t/days)])]))
(defn- left-side (defn- left-side
"The description can either be given as a string `subtitle-type` or a component `custom-subtitle`" "The description can either be given as a string `subtitle-type` or a component `custom-subtitle`"
[{:keys [title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color [{:keys [title status size blur? custom-subtitle icon subtitle subtitle-type icon-color
customization-color network-image emoji] customization-color network-image emoji]
:as props}] :as props}]
(let [theme (quo.theme/use-theme)] (let [theme (quo.theme/use-theme)]
[rn/view {:style style/left-side} [rn/view {:style style/left-side}
[left-title [left-title
{:title title {:title title
:label label
:size size
:blur? blur? :blur? blur?
:theme theme}] :theme theme}]
(if (= status :loading) (if (= status :loading)
@ -93,49 +83,43 @@
:network-image network-image}]))])) :network-image network-image}]))]))
(defn- right-side (defn- right-side
[{:keys [label icon-right? right-icon icon-color communities-list]}] [{:keys [right-icon right-content icon-color]}]
[rn/view {:style style/right-container} (let [{:keys [type data size]
(case label :or {size :size-24}} right-content]
:preview [preview-list/view [rn/view {:style style/right-container}
{:type :communities (when type
:number 3 [preview-list/view
:size :size-24} {:type type
communities-list] :number (count data)
:graph [text/text "graph"] :size size}
:none nil data])
nil) (when right-icon
(when icon-right? [rn/view {:style style/right-icon}
[rn/view {:style (style/right-icon label)} [icons/icon right-icon
[icons/icon right-icon {:accessibility-label :icon-right
{:accessibility-label :icon-right :color icon-color
:color icon-color :size 20}]])]))
:size 20}]])])
(defn view (defn view
[{:keys [blur? card? icon-right? right-icon label status size on-press communities-list [{:keys [blur? card? right-icon right-content status size on-press container-style]
container-style]
:as props}] :as props}]
(let [theme (quo.theme/use-theme) (let [theme (quo.theme/use-theme)
icon-color (if (or blur? (= :dark theme)) icon-color (if (or blur? (= :dark theme))
colors/neutral-40 colors/neutral-40
colors/neutral-50)] colors/neutral-50)]
(if (= :graph label) [rn/pressable
[not-implemented/view {:blur? blur?}] {:accessibility-label :data-item
[rn/pressable :disabled (not right-icon)
{:accessibility-label :data-item :on-press on-press
:disabled (not icon-right?) :style (merge (style/container {:size size
:on-press on-press :card? card?
:style (merge (style/container {:size size :blur? blur?
:card? card? :actionable? on-press
:blur? blur? :theme theme})
:actionable? on-press container-style)}
:theme theme}) [left-side props]
container-style)} (when (and (= :default status) (not= :small size))
[left-side props] [right-side
(when (and (= :default status) (not= :small size)) {:right-icon right-icon
[right-side :right-content right-content
{:label label :icon-color icon-color}])]))
:icon-right? icon-right?
:right-icon right-icon
:icon-color icon-color
:communities-list communities-list}])])))

48
src/status_im/contexts/preview/quo/settings/data_item.cljs
View File

@ -6,15 +6,42 @@
[status-im.common.resources :as resources] [status-im.common.resources :as resources]
[status-im.contexts.preview.quo.preview :as preview])) [status-im.contexts.preview.quo.preview :as preview]))
(def communities-list
[{:source (resources/get-mock-image :coinbase)}
{:source (resources/get-mock-image :decentraland)}
{:source (resources/get-mock-image :rarible)}])
(def networks-list
[{:source (quo.resources/get-network :ethereum)}
{:source (quo.resources/get-network :optimism)}
{:source (quo.resources/get-network :arbitrum)}])
(def descriptor (def descriptor
[{:key :blur? :type :boolean} [{:key :blur? :type :boolean}
{:key :card? :type :boolean} {:key :card? :type :boolean}
{:key :icon-right? :type :boolean}
{:type :select {:type :select
:key :label :key :right-icon
:options [{:key :none} :options [{:key :i/chevron-right}
{:key :graph} {:key :i/copy}
{:key :preview}]} {:key nil
:value "None"}]}
{:type :select
:key :right-content
:options [{:key nil
:value "None"}
{:key {:type :communities
:data communities-list}
:value "Communities"}
{:key {:type :network
:data networks-list}
:value "Networks"}
{:key {:type :accounts
:data [{:emoji "🔥" :customization-color :yellow}]}
:value "Account (size-24)"}
{:key {:type :accounts
:data [{:emoji "🔥" :customization-color :yellow}]
:size :size-32}
:value "Account (size-32)"}]}
{:type :select {:type :select
:key :subtitle-type :key :subtitle-type
:options [{:key :default} :options [{:key :default}
@ -30,29 +57,22 @@
:options [{:key :default} :options [{:key :default}
{:key :small}]}]) {:key :small}]}])
(def communities-list
[{:source (resources/get-mock-image :coinbase)}
{:source (resources/get-mock-image :decentraland)}
{:source (resources/get-mock-image :rarible)}])
(defn view (defn view
[] []
(let [state (reagent/atom {:on-press #(js/alert (str "pressed")) (let [state (reagent/atom {:on-press #(js/alert (str "pressed"))
:blur? false :blur? false
:subtitle-type :account :subtitle-type :account
:icon-right? false
:card? true :card? true
:label :none
:status :default :status :default
:size :default :size :default
:title "Label" :title "Label"
:subtitle "Subtitle" :subtitle "Subtitle"
:icon :i/placeholder :icon :i/placeholder
:right-icon :i/chevron-right :right-icon :i/chevron-right
:right-content nil
:emoji "🎮" :emoji "🎮"
:customization-color :yellow :customization-color :yellow
:network-image (quo.resources/get-network :ethereum) :network-image (quo.resources/get-network :ethereum)})]
:communities-list communities-list})]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state

2
src/status_im/contexts/wallet/account/edit_account/view.cljs
View File

@ -83,9 +83,7 @@
{:status :default {:status :default
:size :default :size :default
:subtitle-type :default :subtitle-type :default
:label :none
:blur? false :blur? false
:icon-right? true
:right-icon :i/advanced :right-icon :i/advanced
:card? true :card? true
:title (i18n/label :t/address) :title (i18n/label :t/address)

2
src/status_im/contexts/wallet/account/tabs/about/view.cljs
View File

@ -76,10 +76,8 @@
:content-container-style {:padding-bottom (+ constants/floating-shell-button-height 8)}} :content-container-style {:padding-bottom (+ constants/floating-shell-button-height 8)}}
[quo/data-item [quo/data-item
{:description :default {:description :default
:icon-right? true
:right-icon :i/options :right-icon :i/options
:card? true :card? true
:label :none
:status :default :status :default
:size :default :size :default
:title (if watch-only? (i18n/label :t/watched-address) (i18n/label :t/address)) :title (if watch-only? (i18n/label :t/watched-address) (i18n/label :t/address))

2
src/status_im/contexts/wallet/send/input_amount/view.cljs
View File

@ -48,14 +48,12 @@
:i/advanced]] :i/advanced]]
[quo/data-item [quo/data-item
{:container-style style/fees-data-item {:container-style style/fees-data-item
:label :none
:status (if loading-routes? :loading :default) :status (if loading-routes? :loading :default)
:size :small :size :small
:title (i18n/label :t/fees) :title (i18n/label :t/fees)
:subtitle fees}] :subtitle fees}]
[quo/data-item [quo/data-item
{:container-style style/amount-data-item {:container-style style/amount-data-item
:label :none
:status (if loading-routes? :loading :default) :status (if loading-routes? :loading :default)
:size :small :size :small
:title (i18n/label :t/recipient-gets) :title (i18n/label :t/recipient-gets)

2
src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs
View File

@ -162,9 +162,7 @@
{:container-style style/detail-item {:container-style style/detail-item
:blur? false :blur? false
:description :default :description :default
:icon-right? false
:card? false :card? false
:label :none
:status :default :status :default
:size :small :size :small
:title title :title title

1
src/status_im/contexts/wallet/sheets/network_preferences/view.cljs
View File

@ -81,7 +81,6 @@
{:status :default {:status :default
:size :default :size :default
:description :default :description :default
:label :none
:blur? blur? :blur? blur?
:card? true :card? true
:title (i18n/label :t/address) :title (i18n/label :t/address)

1
src/status_im/contexts/wallet/sheets/remove_account/view.cljs
View File

@ -49,7 +49,6 @@
:custom-subtitle (fn [] :custom-subtitle (fn []
[quo/text {:weight :medium} [quo/text {:weight :medium}
formatted-path]) formatted-path])
:icon-right? true
:right-icon :i/copy :right-icon :i/copy
:on-press (fn [] :on-press (fn []
(rf/dispatch [:toasts/upsert (rf/dispatch [:toasts/upsert