feat: implement account list item component (#17303)

Signed-off-by: Brian Sztamfater <[email protected]>

Author: briansztamfater

src/quo2/components/list_items/account/component_spec.cljs

@@ -0,0 +1,86 @@
+(ns quo2.components.list-items.account.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.components.list-items.account.view :as account]
+            [quo2.foundations.colors :as colors]))
+
+(h/describe "List items: account"
+  (h/test "default render'"
+    (h/render [account/view])
+    (h/is-truthy (h/query-by-label-text :container)))
+
+  (h/test "on-press-in changes state to :pressed"
+    (h/render [account/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 [account/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 [account/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 [account/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 changes state to :selected"
+    (h/render [account/view {:selectable? 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/is-truthy (h/query-by-label-text :check-icon))))
+
+  (h/test "on-press-out calls on-press"
+    (let [on-press (h/mock-fn)]
+      (h/render [account/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 token props if type :tag"
+    (h/render [account/view {:type :tag}])
+    (h/is-truthy (h/query-by-label-text :tag-container)))
+
+  (h/test "renders keycard icon if title-icon? is true"
+    (h/render [account/view {:title-icon? true}])
+    (h/is-truthy (h/query-by-label-text :keycard-icon)))
+
+  (h/test "doesn't render keycard icon if title-icon? is false"
+    (h/render [account/view])
+    (h/is-falsy (h/query-by-label-text :keycard-icon)))
+
+  (h/test "renders balance container but not arrow icon if type :balance-neutral"
+    (h/render [account/view {:type :balance-neutral}])
+    (h/is-truthy (h/query-by-label-text :balance-container))
+    (h/is-falsy (h/query-by-label-text :arrow-icon)))
+
+  (h/test "renders balance container and negative arrow icon if type :balance-negative"
+    (h/render [account/view {:type :balance-negative}])
+    (h/is-truthy (h/query-by-label-text :balance-container))
+    (h/is-truthy (h/query-by-label-text :icon-negative))
+    (h/is-falsy (h/query-by-label-text :icon-positive)))
+
+  (h/test "renders balance container and positive arrow icon if type :balance-positive"
+    (h/render [account/view {:type :balance-positive}])
+    (h/is-truthy (h/query-by-label-text :balance-container))
+    (h/is-falsy (h/query-by-label-text :icon-negative))
+    (h/is-truthy (h/query-by-label-text :icon-positive)))
+
+  (h/test "renders options button if type :action"
+    (let [on-options-press (h/mock-fn)]
+      (h/render [account/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))))

src/quo2/components/list_items/account/style.cljs

@@ -0,0 +1,110 @@
+(ns quo2.components.list-items.account.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn- background-color
+  [{:keys [state blur? customization-color]}]
+  (cond (or (= state :pressed) (= state :selected))
+        (if blur? colors/white-opa-5 (colors/custom-color customization-color 50 5))
+        (= state :active)
+        (if blur? colors/white-opa-10 (colors/custom-color customization-color 50 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})
+
+(defn metric-text
+  [type theme]
+  {:color (case type
+            :balance-positive (colors/theme-colors colors/success-50 colors/success-60 theme)
+            :balance-negative (colors/theme-colors colors/danger-50 colors/danger-60 theme)
+            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
+
+(defn dot-divider
+  [type theme]
+  {:width             2
+   :height            2
+   :border-radius     2
+   :margin-horizontal 4
+   :background-color  (case type
+                        :balance-positive (colors/theme-colors colors/success-50-opa-40
+                                                               colors/success-60-opa-40
+                                                               theme)
+                        :balance-negative (colors/theme-colors colors/danger-50-opa-40
+                                                               colors/danger-50-opa-40
+                                                               theme)
+                        (colors/theme-colors colors/neutral-80-opa-40 colors/neutral-50-opa-40 theme))})
+
+(defn arrow-icon
+  [type theme]
+  {:size  16
+   :color (if (= type :balance-positive)
+            (colors/theme-colors colors/success-50 colors/success-60 theme)
+            (colors/theme-colors colors/danger-50 colors/danger-60 theme))})
+
+(def arrow-icon-container
+  {:margin-left 4})
+
+(def account-container
+  {:margin-left 8})
+
+(def account-title-container
+  {:flex-direction :row
+   :height         22
+   :align-items    :center})
+
+(defn account-address
+  [blur? theme]
+  {:height 18
+   :color  (if blur?
+             colors/white-opa-40
+             (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
+
+(def keycard-icon-container
+  {:margin-left 4})
+
+(def token-tag-container
+  {:height      40
+   :padding-top 4})
+
+(defn token-tag-text-container
+  [blur? theme]
+  {:flex-direction     :row
+   :align-items        :center
+   :height             16
+   :padding-horizontal 3
+   :border-width       1
+   :border-radius      6
+   :border-color       (if blur?
+                         colors/white-opa-10
+                         (colors/theme-colors colors/neutral-20
+                                              colors/neutral-80
+                                              theme))})
+
+(defn token-tag-text
+  [blur? theme]
+  {:margin-top -1
+   :color      (if blur?
+                 colors/white-opa-70
+                 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
+
+(def balance-container
+  {:align-items     :flex-end
+   :justify-content :space-between})
+
+(def metrics-container
+  {:flex-direction :row
+   :align-items    :center
+   :margin-top     2})

src/quo2/components/list_items/account/view.cljs

@@ -0,0 +1,155 @@
+(ns quo2.components.list-items.account.view
+  (:require [quo2.components.avatars.account-avatar.view :as account-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.account.style :as style]
+            [reagent.core :as reagent]
+            [quo2.components.icon :as icon]))
+
+(defn- account-view
+  [{:keys [account-props title-icon? blur? theme]
+    :or   {title-icon? false}}]
+  [rn/view {:style style/left-container}
+   [account-avatar/view (assoc account-props :size 32)]
+   [rn/view {:style style/account-container}
+    [rn/view
+     {:style style/account-title-container}
+     [text/text
+      {:weight :semi-bold
+       :size   :paragraph-1}
+      (:name account-props)]
+     (when title-icon?
+       [rn/view
+        {:style               style/keycard-icon-container
+         :accessibility-label :keycard-icon}
+        [icon/icon :i/keycard
+         {:size  20
+          :color (if blur?
+                   colors/white-opa-40
+                   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]
+    [text/text {:size :paragraph-2}
+     [text/text
+      {:size   :paragraph-2
+       :weight :monospace
+       :style  (style/account-address blur? theme)}
+      (:address account-props)]]]])
+
+(defn- balance-view
+  [{:keys [balance-props type theme]}]
+  [rn/view
+   {:style               style/balance-container
+    :accessibility-label :balance-container}
+   [text/text
+    {:weight :medium
+     :size   :paragraph-2}
+    (:fiat-value balance-props)]
+   [rn/view
+    {:style style/metrics-container}
+    [text/text
+     {:size  :paragraph-2
+      :style (style/metric-text type theme)}
+     (str (:percentage-change balance-props) "%")]
+    [rn/view {:style (style/dot-divider type theme)}]
+    [text/text
+     {:size  :paragraph-2
+      :style (style/metric-text type theme)}
+     (:fiat-change balance-props)]
+    (when (not= type :balance-neutral)
+      [rn/view
+       {:style               style/arrow-icon-container
+        :accessibility-label :arrow-icon}
+       [icon/icon (if (= type :balance-positive) :i/positive :i/negative)
+        (assoc (style/arrow-icon type theme)
+               :accessibility-label
+               (if (= type :balance-positive) :icon-positive :icon-negative))]])]])
+
+(defn- token-tag
+  [{:keys [token-props blur? theme]}]
+  ;; TODO: Use Tiny tag component when available (issue #17341)
+  [rn/view
+   {:style               (style/token-tag-text-container blur? theme)
+    :accessibility-label :tag-container}
+   [text/text
+    {:size   :label
+     :weight :medium
+     :style  (style/token-tag-text blur? theme)}
+    (str (:value token-props) " " (:symbol token-props))]])
+
+(defn- options-button
+  [{:keys [on-options-press blur? theme]}]
+  [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))}]])
+
+(defn- check-icon
+  [{:keys [blur? customization-color theme]}]
+  [rn/view {:accessibility-label :check-icon}
+   [icon/icon :i/check
+    {:color (if blur?
+              colors/white
+              (colors/theme-colors (colors/custom-color customization-color 50)
+                                   (colors/custom-color customization-color 60)
+                                   theme))}]])
+
+(defn- f-internal-view
+  []
+  (let [state               (reagent/atom :default)
+        active-or-selected? (atom false)
+        timer               (atom nil)
+        on-press-in         (fn []
+                              (when-not (= @state :selected)
+                                (reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
+    (fn [{:keys [type selectable? blur? customization-color on-press]
+          :or   {customization-color :blue
+                 type                :default
+                 blur?               false}
+          :as   props}]
+      (let [on-press-out (fn []
+                           (let [new-state (if @active-or-selected?
+                                             :default
+                                             (if (and (= type :default) selectable?)
+                                               :selected
+                                               :active))]
+                             (when @timer (js/clearTimeout @timer))
+                             (reset! timer nil)
+                             (reset! active-or-selected? (or (= new-state :active)
+                                                             (= new-state :selected)))
+                             (reset! state new-state)
+                             (when on-press
+                               (on-press))))]
+        (rn/use-effect
+         #(cond (and selectable? (= type :default) (= @state :active))         (reset! state :selected)
+                (and (not selectable?) (= type :default) (= @state :selected)) (reset! state :active))
+         [selectable?])
+        [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}
+         [account-view props]
+         [rn/view {:style (when (= type :tag) style/token-tag-container)}
+          (when (or (= type :balance-neutral)
+                    (= type :balance-negative)
+                    (= type :balance-positive))
+            [balance-view props])
+          (when (= type :tag)
+            [token-tag props])
+          (when (= type :action)
+            [options-button props])
+          (when (and (= type :default)
+                     (= @state :selected))
+            [check-icon props])]]))))
+
+(defn- internal-view
+  [props]
+  [:f> f-internal-view props])
+
+(def view (quo.theme/with-theme internal-view))

src/quo2/core.cljs

@@ -64,6 +64,7 @@
     quo2.components.links.link-preview.view
     quo2.components.links.url-preview-list.view
     quo2.components.links.url-preview.view
+    quo2.components.list-items.account.view
     quo2.components.list-items.account-list-card.view
     quo2.components.list-items.channel.view
     quo2.components.list-items.community.view
@@ -255,6 +256,7 @@
 (def url-preview-list quo2.components.links.url-preview-list.view/view)
 
 ;;;; 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 channel quo2.components.list-items.channel.view/view)
 (def dapp quo2.components.list-items.dapp.view/view)

src/quo2/core_spec.cljs

@@ -37,6 +37,7 @@
     [quo2.components.links.link-preview.component-spec]
     [quo2.components.links.url-preview-list.component-spec]
     [quo2.components.links.url-preview.component-spec]
+    [quo2.components.list-items.account.component-spec]
     [quo2.components.list-items.channel.component-spec]
     [quo2.components.list-items.community.component-spec]
     [quo2.components.list-items.dapp.component-spec]