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

feat: implement address list item component (#17617) 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2023-10-12 14:59:34 -03:00 committed by GitHub
parent 6f8a7bb151
commit edd6b8d62c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 183 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/quo2/components/avatars/wallet_user_avatar.cljs
View File

@ -28,21 +28,25 @@
(defn wallet-user-avatar
"params, first name, last name, color, size
and if it's dark or not!"
[{:keys [f-name l-name customization-color size]
:or {f-name "John"
l-name "Doe"
customization-color :red
size :x-large}}]
[{:keys [f-name l-name customization-color size monospace? uppercase?]
:or {f-name "John"
l-name "Doe"
size :x-large
uppercase? true}}]
(let [circle-size (size circle-sizes)
small? (= size :small)
f-name-initial (-> f-name
string/upper-case
(#(if uppercase? (string/upper-case %) %))
(subs 0 1))
l-name-initial (-> l-name
string/upper-case
(#(if uppercase? (string/upper-case %) %))
(subs 0 1))
circle-color (colors/custom-color customization-color 50 20)
text-color (colors/custom-color-by-theme customization-color 50 60)]
circle-color (if customization-color
(colors/custom-color customization-color 50 20)
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))
text-color (if customization-color
(colors/custom-color-by-theme customization-color 50 60)
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70))]
[rn/view
{:style {:width circle-size
:height circle-size
@ -53,7 +57,7 @@
:background-color circle-color}}
[text/text
{:size (size font-sizes)
:weight (size font-weights)
:weight (if monospace? :monospace (size font-weights))
:style {:color text-color}}
(if small?
(str f-name-initial)

41
src/quo2/components/list_items/address/component_spec.cljs Normal file
View File

@ -0,0 +1,41 @@
(ns quo2.components.list-items.address.component-spec
(:require [test-helpers.component :as h]
[quo2.components.list-items.address.view :as address]
[quo2.foundations.colors :as colors]))
(h/describe "List items: address"
(h/test "default render"
(h/render [address/view])
(h/is-truthy (h/query-by-label-text :container)))
(h/test "on-press-in changes state to :pressed"
(h/render [address/view])
(h/fire-event :on-press-in (h/get-by-label-text :container))
(h/wait-for #(h/has-style (h/query-by-label-text :container)
{:backgroundColor (colors/custom-color :blue 50 5)})))
(h/test "on-press-in changes state to :pressed with blur? enabled"
(h/render [address/view {:blur? true}])
(h/fire-event :on-press-in (h/get-by-label-text :container))
(h/wait-for #(h/has-style (h/query-by-label-text :container)
{:backgroundColor colors/white-opa-5})))
(h/test "on-press-out changes state to :active"
(h/render [address/view])
(h/fire-event :on-press-in (h/get-by-label-text :container))
(h/fire-event :on-press-out (h/get-by-label-text :container))
(h/wait-for #(h/has-style (h/query-by-label-text :container)
{:backgroundColor (colors/custom-color :blue 50 10)})))
(h/test "on-press-out changes state to :active with blur? enabled"
(h/render [address/view {:blur? true}])
(h/fire-event :on-press-in (h/get-by-label-text :container))
(h/fire-event :on-press-out (h/get-by-label-text :container))
(h/wait-for #(h/has-style (h/query-by-label-text :container)
{:backgroundColor colors/white-opa-10})))
(h/test "on-press event is called"
(let [on-press (h/mock-fn)]
(h/render [address/view {:on-press on-press}])
(h/fire-event :on-press (h/get-by-label-text :container))
(h/was-called on-press))))

33
src/quo2/components/list_items/address/style.cljs Normal file
View File

@ -0,0 +1,33 @@
(ns quo2.components.list-items.address.style
(:require [quo2.foundations.colors :as colors]))
(defn- background-color
[state customization-color blur?]
(cond (and (or (= state :pressed) (= state :selected)) (not blur?))
(colors/custom-color customization-color 50 5)
(and (or (= state :pressed) (= state :selected)) blur?)
colors/white-opa-5
(and (= state :active) (not blur?))
(colors/custom-color customization-color 50 10)
(and (= state :active) blur?)
colors/white-opa-10
(and (= state :pressed) blur?) colors/white-opa-10
:else :transparent))
(defn container
[state customization-color blur?]
{:height 56
:border-radius 12
:background-color (background-color state customization-color blur?)
:flex-direction :row
:align-items :center
:padding-horizontal 12
:padding-vertical 6
:justify-content :space-between})
(def left-container
{:flex-direction :row
:align-items :center})
(def account-container
{:margin-left 8})

64
src/quo2/components/list_items/address/view.cljs Normal file
View File

@ -0,0 +1,64 @@
(ns quo2.components.list-items.address.view
(:require [quo2.components.avatars.wallet-user-avatar :as wallet-user-avatar]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[quo2.components.list-items.address.style :as style]
[reagent.core :as reagent]
[clojure.string :as string]))
(defn- left-container
[{:keys [theme address networks blur?]}]
[rn/view {:style style/left-container}
[wallet-user-avatar/wallet-user-avatar
{:size :medium
:f-name "0"
:l-name "x"
:monospace? true
:uppercase? false}]
[rn/view {:style style/account-container}
[text/text {:size :paragraph-1}
(map (fn [network]
^{:key (str network)}
[text/text
{:size :paragraph-1
:weight :semi-bold
:style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")])
networks)
[text/text
{:size :paragraph-1
:weight :monospace
:style {:color (if blur?
colors/white
(colors/theme-colors colors/neutral-100 colors/white theme))}}
(string/replace address "x" "×")]]]])
(defn- internal-view
[]
(let [state (reagent/atom :default)
active? (atom false)
timer (atom nil)
on-press-in (fn []
(when-not (= @state :selected)
(reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
(fn [{:keys [networks address customization-color on-press active-state? blur? theme]
:or {customization-color :blue}}]
(let [on-press-out (fn []
(let [new-state (if (or (not active-state?) @active?) :default :active)]
(when @timer (js/clearTimeout @timer))
(reset! timer nil)
(reset! active? (= new-state :active))
(reset! state new-state)))]
[rn/pressable
{:style (style/container @state customization-color blur?)
:on-press-in on-press-in
:on-press-out on-press-out
:on-press on-press
:accessibility-label :container}
[left-container
{:theme theme
:networks networks
:address address}]]))))
(def view (quo.theme/with-theme internal-view))

2
src/quo2/core.cljs
View File

@ -67,6 +67,7 @@
quo2.components.links.url-preview.view
quo2.components.list-items.account.view
quo2.components.list-items.account-list-card.view
quo2.components.list-items.address.view
quo2.components.list-items.channel.view
quo2.components.list-items.community.view
quo2.components.list-items.dapp.view
@ -265,6 +266,7 @@
;;;; List items
(def account-item quo2.components.list-items.account.view/view)
(def account-list-card quo2.components.list-items.account-list-card.view/view)
(def address quo2.components.list-items.address.view/view)
(def channel quo2.components.list-items.channel.view/view)
(def dapp quo2.components.list-items.dapp.view/view)
(def menu-item quo2.components.list-items.menu-item/menu-item)

26
src/status_im2/contexts/quo_preview/list_items/address.cljs Normal file
View File

@ -0,0 +1,26 @@
(ns status-im2.contexts.quo-preview.list-items.address
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:key :active-state? :type :boolean}
{:key :show-alert-on-press? :type :boolean}
{:key :blur? :type :boolean}
(preview/customization-color-option)])
(defn view
[]
(let [state (reagent/atom {:address "0x0ah...78b"
:networks [:ethereum :optimism]})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? true
:blur-dark-only? true}
[quo/address
(merge @state
(when (:show-alert-on-press? @state)
{:on-press #(js/alert "Pressed!")}))]])))

3
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -84,6 +84,7 @@
account-item]
[status-im2.contexts.quo-preview.list-items.account-list-card :as
account-list-card]
[status-im2.contexts.quo-preview.list-items.address :as address]
[status-im2.contexts.quo-preview.list-items.channel :as channel]
[status-im2.contexts.quo-preview.list-items.dapp :as dapp]
[status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
@ -308,6 +309,8 @@
:component account-item/view}
{:name :account-list-card
:component account-list-card/view}
{:name :address
:component address/view}
{:name :channel
:component channel/view}
{:name :community-list