From edd6b8d62ccaf9032b388955f13910787ecd2b0c Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Thu, 12 Oct 2023 14:59:34 -0300 Subject: [PATCH] feat: implement address list item component (#17617) Signed-off-by: Brian Sztamfater --- .../avatars/wallet_user_avatar.cljs | 24 ++++--- .../list_items/address/component_spec.cljs | 41 ++++++++++++ .../components/list_items/address/style.cljs | 33 ++++++++++ .../components/list_items/address/view.cljs | 64 +++++++++++++++++++ src/quo2/core.cljs | 2 + .../quo_preview/list_items/address.cljs | 26 ++++++++ src/status_im2/contexts/quo_preview/main.cljs | 3 + 7 files changed, 183 insertions(+), 10 deletions(-) create mode 100644 src/quo2/components/list_items/address/component_spec.cljs create mode 100644 src/quo2/components/list_items/address/style.cljs create mode 100644 src/quo2/components/list_items/address/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/list_items/address.cljs diff --git a/src/quo2/components/avatars/wallet_user_avatar.cljs b/src/quo2/components/avatars/wallet_user_avatar.cljs index 722d597365..eae352af97 100644 --- a/src/quo2/components/avatars/wallet_user_avatar.cljs +++ b/src/quo2/components/avatars/wallet_user_avatar.cljs @@ -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) diff --git a/src/quo2/components/list_items/address/component_spec.cljs b/src/quo2/components/list_items/address/component_spec.cljs new file mode 100644 index 0000000000..b6d0e6fcee --- /dev/null +++ b/src/quo2/components/list_items/address/component_spec.cljs @@ -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)))) diff --git a/src/quo2/components/list_items/address/style.cljs b/src/quo2/components/list_items/address/style.cljs new file mode 100644 index 0000000000..bf5c341be3 --- /dev/null +++ b/src/quo2/components/list_items/address/style.cljs @@ -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}) diff --git a/src/quo2/components/list_items/address/view.cljs b/src/quo2/components/list_items/address/view.cljs new file mode 100644 index 0000000000..032d102fe1 --- /dev/null +++ b/src/quo2/components/list_items/address/view.cljs @@ -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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 42cda56b2f..62b785c799 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -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) diff --git a/src/status_im2/contexts/quo_preview/list_items/address.cljs b/src/status_im2/contexts/quo_preview/list_items/address.cljs new file mode 100644 index 0000000000..d287b5e01e --- /dev/null +++ b/src/status_im2/contexts/quo_preview/list_items/address.cljs @@ -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!")}))]]))) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index e85ffcd436..3a940a06fa 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -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