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 saved address component (#17398) 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2023-09-28 12:13:49 -03:00 committed by GitHub
parent ba57ab9ae4
commit 5ea78084d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 211 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/quo2/components/list_items/saved_address/component_spec.cljs Normal file
View File

@ -0,0 +1,51 @@
(ns quo2.components.list-items.saved-address.component-spec
(:require [test-helpers.component :as h]
[quo2.components.list-items.saved-address.view :as saved-address]
[quo2.foundations.colors :as colors]))
(h/describe "List items: saved address"
(h/test "default render"
(h/render [saved-address/view])
(h/is-truthy (h/query-by-label-text :container)))
(h/test "on-press-in changes state to :pressed"
(h/render [saved-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 [saved-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 [saved-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 [saved-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-out calls on-press"
(let [on-press (h/mock-fn)]
(h/render [saved-address/view {:on-press on-press}])
(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/was-called on-press)))
(h/test "renders options button if type :action"
(let [on-options-press (h/mock-fn)]
(h/render [saved-address/view
{:type :action
:on-options-press on-options-press}])
(h/is-truthy (h/query-by-label-text :options-button))
(h/fire-event :on-press (h/get-by-label-text :options-button))
(h/was-called on-options-press))))

42
src/quo2/components/list_items/saved_address/style.cljs Normal file
View File

@ -0,0 +1,42 @@
(ns quo2.components.list-items.saved-address.style
(:require [quo2.foundations.colors :as colors]))
(defn- background-color
[{:keys [state blur? customization-color]}]
(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
[props]
{:height 56
:border-radius 12
:background-color (background-color props)
: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 name-text
{:height 22})
(def account-container
{:margin-left 8})
(defn account-address
[blur? theme]
{:color (if blur?
colors/white-opa-40
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})

79
src/quo2/components/list_items/saved_address/view.cljs Normal file
View File

@ -0,0 +1,79 @@
(ns quo2.components.list-items.saved-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.saved-address.style :as style]
[reagent.core :as reagent]
[quo2.components.icon :as icon]
[clojure.string :as string]))
(defn- left-container
[{:keys [blur? theme name address customization-color]}]
(let [names (remove string/blank? (string/split name " "))
first-name (if (> (count names) 0) (first names) "")
last-name (if (> (count names) 1) (last names) "")]
[rn/view {:style style/left-container}
[wallet-user-avatar/wallet-user-avatar
{:size :medium
:f-name first-name
:l-name last-name
:color customization-color}]
[rn/view {:style style/account-container}
[text/text
{:weight :semi-bold
:size :paragraph-1
:style style/name-text}
name]
[text/text {:size :paragraph-2}
[text/text
{:size :paragraph-2
:weight :monospace
:style (style/account-address blur? theme)}
address]]]]))
(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 [blur? user-props customization-color
on-press
on-options-press
theme]
:or {customization-color :blue
blur? false}}]
(let [on-press-out (fn []
(let [new-state (if @active? :default :active)]
(when @timer (js/clearTimeout @timer))
(reset! timer nil)
(reset! active? (= new-state :active))
(reset! state new-state)
(when on-press
(on-press))))]
[rn/pressable
{:style (style/container
{:state @state :blur? blur? :customization-color customization-color})
:on-press-in on-press-in
:on-press-out on-press-out
:accessibility-label :container}
[left-container
{:blur? blur?
:theme theme
:name (:name user-props)
:address (:address user-props)
:customization-color (:customization-color user-props)}]
[rn/pressable
{:accessibility-label :options-button
:on-press #(when on-options-press
(on-options-press))}
[icon/icon :i/options
{:color (if blur?
colors/white-opa-70
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]]]))))
(def view (quo.theme/with-theme internal-view))

2
src/quo2/core.cljs
View File

@ -70,6 +70,7 @@
quo2.components.list-items.dapp.view
quo2.components.list-items.menu-item
quo2.components.list-items.preview-list.view
quo2.components.list-items.saved-address.view
quo2.components.list-items.token-value.view
quo2.components.list-items.user-list
quo2.components.loaders.skeleton-list.view
@ -261,6 +262,7 @@
(def preview-list quo2.components.list-items.preview-list.view/view)
(def user-list quo2.components.list-items.user-list/user-list)
(def community-list-item quo2.components.list-items.community.view/view)
(def saved-address quo2.components.list-items.saved-address.view/view)
(def token-value quo2.components.list-items.token-value.view/view)
;;;; Loaders

1
src/quo2/core_spec.cljs
View File

@ -40,6 +40,7 @@
[quo2.components.list-items.channel.component-spec]
[quo2.components.list-items.community.component-spec]
[quo2.components.list-items.dapp.component-spec]
[quo2.components.list-items.saved-address.component-spec]
[quo2.components.list-items.token-value.component-spec]
[quo2.components.loaders.skeleton-list.component-spec]
[quo2.components.markdown.text-component-spec]

33
src/status_im2/contexts/quo_preview/list_items/saved_address.cljs Normal file
View File

@ -0,0 +1,33 @@
(ns status-im2.contexts.quo-preview.list-items.saved-address
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[(preview/customization-color-option {:key :account-color})
{:key :blur? :type :boolean}
{:key :title :type :text}
(preview/customization-color-option)])
(defn view
[]
(let [state (reagent/atom {:type :default
:customization-color :blue
:account-color :flamingo
:title "Alisher Yakupov"
:address "0x21a...49e"
:on-options-press #(js/alert "Options button pressed!")})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? true
:blur-dark-only? true}
[quo/saved-address
(assoc @state
:user-props
{:name (:title @state)
:address (:address @state)
:emoji (:emoji @state)
:customization-color (:account-color @state)})]])))

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

@ -70,6 +70,7 @@
[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]
[status-im2.contexts.quo-preview.list-items.saved-address :as saved-address]
[status-im2.contexts.quo-preview.list-items.token-value :as token-value]
[status-im2.contexts.quo-preview.list-items.user-list :as user-list]
[status-im2.contexts.quo-preview.list-items.community-list :as community-list]
@ -279,6 +280,8 @@
:component dapp/preview}
{:name :preview-lists
:component preview-lists/view}
{:name :saved-address
:component saved-address/view}
{:name :token-value
:component token-value/view}
{:name :user-list