Support images in dropdown component (#22382) (#22495)

Author: alwx

src/quo/components/dropdowns/network_dropdown/component_spec.cljs

@@ -41,4 +41,18 @@
                 :show-new-chain-indicator? true}
                networks-list])
     (h/is-truthy (h/query-by-label-text :network-dropdown))
-    (h/is-truthy (h/query-by-label-text :new-chain-indicator))))
+    (h/is-truthy (h/query-by-label-text :new-chain-indicator)))
+
+  (h/test "Should show label"
+    (h/render [network-dropdown/view
+               {:state :default
+                :label "Mainnet"}
+               networks-list])
+    (h/is-truthy (h/get-by-text "Mainnet")))
+
+  (h/test "Should show dropdown icon"
+    (h/render [network-dropdown/view
+               {:state          :default
+                :dropdown-icon? true}
+               networks-list])
+    (h/is-truthy (h/query-by-label-text :dropdown-icon))))

src/quo/components/dropdowns/network_dropdown/style.cljs

@@ -24,6 +24,19 @@
    :border-color       (container-border-color props)
    :align-items        :center})
 
+(defn dropdown-text
+  [theme]
+  {:color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :padding-left 8})
+
+(def dropdown-icon-container
+  {:padding-left 8})
+
+(defn dropdown-icon-colors
+  [theme]
+  {:background (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :foreground (colors/theme-colors colors/neutral-100 colors/white theme)})
+
 (def new-chain-indicator
   {:position :absolute
    :right    0})

src/quo/components/dropdowns/network_dropdown/view.cljs

@@ -2,12 +2,25 @@
   (:require
     [quo.components.common.new-feature-dot :as new-feature-dot]
     [quo.components.dropdowns.network-dropdown.style :as style]
+    [quo.components.icon :as icon]
     [quo.components.list-items.preview-list.view :as preview-list]
+    [quo.components.markdown.text :as text]
     [quo.context :as quo.context]
     [react-native.core :as rn]))
 
+(defn dropdown-icon
+  [theme]
+  (let [{:keys [background foreground]} (style/dropdown-icon-colors theme)]
+    [rn/view {:style style/dropdown-icon-container}
+     [icon/icon
+      :i/dropdown
+      {:size                20
+       :accessibility-label :dropdown-icon
+       :color               background
+       :color-2             foreground}]]))
+
 (defn view
-  [{:keys [on-press state show-new-chain-indicator?] :as props} networks]
+  [{:keys [on-press state show-new-chain-indicator? label dropdown-icon?] :as props} networks]
   (let [theme                  (quo.context/use-theme)
         [pressed? set-pressed] (rn/use-state false)
         on-press-in            (rn/use-callback #(set-pressed true))
@@ -23,8 +36,18 @@
        [new-feature-dot/view
         {:style               style/new-chain-indicator
          :accessibility-label :new-chain-indicator}])
-     [preview-list/view
-      {:type      :network
-       :list-size (count networks)
-       :size      :size-20}
-      networks]]))
+     [rn/view {:flex-direction :row}
+      [preview-list/view
+       {:type      :network
+        :list-size (count networks)
+        :size      :size-20}
+       networks]
+      (when label
+        [text/text
+         {:size            :paragraph-1
+          :weight          :medium
+          :style           (style/dropdown-text theme)
+          :number-of-lines 1}
+         label])
+      (when dropdown-icon?
+        [dropdown-icon theme])]]))

src/status_im/contexts/preview/quo/dropdowns/network_dropdown.cljs

@@ -19,7 +19,13 @@
     :type    :select
     :options [{:key 1}
               {:key 2}
-              {:key 3}]}])
+              {:key 3}]}
+   {:key     :dropdown-icon?
+    :type    :select
+    :options [{:key true}
+              {:key false}]}
+   {:key  :label
+    :type :text}])
 
 (def ^:private networks-list
   [{:source (quo.resources/get-network :ethereum)}
@@ -28,7 +34,11 @@
 
 (defn view
   []
-  (let [component-state (reagent/atom {:state :default :blur? false :amount 3})]
+  (let [component-state (reagent/atom {:state          :default
+                                       :blur?          false
+                                       :amount         3
+                                       :dropdown-icon? false
+                                       :label          nil})]
     (fn []
       [preview/preview-container
        {:state                 component-state