diff --git a/src/quo2/components/list_items/saved_address/component_spec.cljs b/src/quo2/components/list_items/saved_address/component_spec.cljs new file mode 100644 index 0000000000..1468c8e75b --- /dev/null +++ b/src/quo2/components/list_items/saved_address/component_spec.cljs @@ -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)))) diff --git a/src/quo2/components/list_items/saved_address/style.cljs b/src/quo2/components/list_items/saved_address/style.cljs new file mode 100644 index 0000000000..79bfceaaa7 --- /dev/null +++ b/src/quo2/components/list_items/saved_address/style.cljs @@ -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))}) diff --git a/src/quo2/components/list_items/saved_address/view.cljs b/src/quo2/components/list_items/saved_address/view.cljs new file mode 100644 index 0000000000..a65c3290ec --- /dev/null +++ b/src/quo2/components/list_items/saved_address/view.cljs @@ -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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 444a7a2ec8..e8ba7ffc75 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -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 diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index c50d2bd41a..e88d05c716 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -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] diff --git a/src/status_im2/contexts/quo_preview/list_items/saved_address.cljs b/src/status_im2/contexts/quo_preview/list_items/saved_address.cljs new file mode 100644 index 0000000000..5b71ffe768 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/list_items/saved_address.cljs @@ -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)})]]))) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 334512a837..3139708119 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -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