From 821e39a5621c706a48a1d29f95b22c0359060e2f Mon Sep 17 00:00:00 2001 From: Volodymyr Kozieiev Date: Wed, 23 Aug 2023 14:12:15 +0100 Subject: [PATCH] Network dropdown component (#16982) --- .../network_dropdown/component_spec.cljs | 35 +++++++++++++ .../dropdowns/network_dropdown/style.cljs | 24 +++++++++ .../dropdowns/network_dropdown/view.cljs | 26 ++++++++++ .../components/list_items/preview_list.cljs | 34 +++++++------ src/quo2/core.cljs | 2 + src/quo2/core_spec.cljs | 1 + src/quo2/foundations/resources.cljs | 4 ++ .../dropdowns/network_dropdown.cljs | 49 +++++++++++++++++++ .../quo_preview/list_items/preview_lists.cljs | 15 ++++-- src/status_im2/contexts/quo_preview/main.cljs | 5 +- 10 files changed, 177 insertions(+), 18 deletions(-) create mode 100644 src/quo2/components/dropdowns/network_dropdown/component_spec.cljs create mode 100644 src/quo2/components/dropdowns/network_dropdown/style.cljs create mode 100644 src/quo2/components/dropdowns/network_dropdown/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/dropdowns/network_dropdown.cljs diff --git a/src/quo2/components/dropdowns/network_dropdown/component_spec.cljs b/src/quo2/components/dropdowns/network_dropdown/component_spec.cljs new file mode 100644 index 0000000000..dda3dc584f --- /dev/null +++ b/src/quo2/components/dropdowns/network_dropdown/component_spec.cljs @@ -0,0 +1,35 @@ +(ns quo2.components.dropdowns.network-dropdown.component-spec + (:require [quo2.components.dropdowns.network-dropdown.view :as network-dropdown] + [quo2.foundations.resources :as quo.resources] + [test-helpers.component :as h])) + +(def ^:private networks-list + [{:source (quo.resources/get-network :ethereum)} + {:source (quo.resources/get-network :optimism)} + {:source (quo.resources/get-network :arbitrum)}]) + +(h/describe "Network dropdown" + (h/test "default render" + (h/render [network-dropdown/view {:state :default} + networks-list]) + (h/is-truthy (h/query-by-label-text :network-dropdown))) + + (h/test "Should call :on-press in enabled state" + (let [on-press (h/mock-fn)] + (h/render [network-dropdown/view + {:state :default + :on-press on-press} + networks-list]) + (h/is-truthy (h/query-by-label-text :network-dropdown)) + (h/fire-event :press (h/query-by-label-text :network-dropdown)) + (h/was-called on-press))) + + (h/test "Should not call :on-press in disabled state" + (let [on-press (h/mock-fn)] + (h/render [network-dropdown/view + {:state :disabled + :on-press on-press} + networks-list]) + (h/is-truthy (h/query-by-label-text :network-dropdown)) + (h/fire-event :press (h/query-by-label-text :network-dropdown)) + (h/was-not-called on-press)))) diff --git a/src/quo2/components/dropdowns/network_dropdown/style.cljs b/src/quo2/components/dropdowns/network_dropdown/style.cljs new file mode 100644 index 0000000000..6467243fa1 --- /dev/null +++ b/src/quo2/components/dropdowns/network_dropdown/style.cljs @@ -0,0 +1,24 @@ +(ns quo2.components.dropdowns.network-dropdown.style + (:require [quo2.foundations.colors :as colors])) + +(defn container-border-color + [{:keys [state blur? theme pressed?]}] + (let [default-color (if blur? + colors/neutral-80-opa-5 + (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)) + active-color (if blur? + colors/neutral-80-opa-10 + (colors/theme-colors colors/neutral-40 colors/neutral-60 theme))] + (condp = state + :disabled default-color + :default (if pressed? active-color default-color)))) + +(defn dropdown-container + [{:keys [state] :as props}] + {:border-width 1 + :border-radius 10 + :padding-horizontal 8 + :padding-vertical 6 + :opacity (if (= state :disabled) 0.3 1) + :border-color (container-border-color props) + :align-items :center}) diff --git a/src/quo2/components/dropdowns/network_dropdown/view.cljs b/src/quo2/components/dropdowns/network_dropdown/view.cljs new file mode 100644 index 0000000000..1420cce42a --- /dev/null +++ b/src/quo2/components/dropdowns/network_dropdown/view.cljs @@ -0,0 +1,26 @@ +(ns quo2.components.dropdowns.network-dropdown.view + (:require [quo2.theme :as quo.theme] + [quo2.components.dropdowns.network-dropdown.style :as style] + [react-native.core :as rn] + [quo2.components.list-items.preview-list :as preview-list] + [reagent.core :as reagent])) + +(defn- internal-view + [_ _] + (let [pressed? (reagent/atom false)] + (fn + [{:keys [on-press state] :as props} networks] + [rn/pressable + {:style (style/dropdown-container (merge props {:pressed? @pressed?})) + :accessibility-label :network-dropdown + :disabled (= state :disabled) + :on-press on-press + :on-press-in (fn [] (reset! pressed? true)) + :on-press-out (fn [] (reset! pressed? false))} + [preview-list/preview-list + {:type :network + :list-size (count networks) + :size 20} + networks]]))) + +(def view (quo.theme/with-theme internal-view)) diff --git a/src/quo2/components/list_items/preview_list.cljs b/src/quo2/components/list_items/preview_list.cljs index 6a6f203980..84b4d3a145 100644 --- a/src/quo2/components/list_items/preview_list.cljs +++ b/src/quo2/components/list_items/preview_list.cljs @@ -21,6 +21,12 @@ :hole-size 26 :hole-x 19 :hole-y -1} + 20 {:border-radius {:circular 10 :rounded 8} + :hole-radius {:circular 11 :rounded 9} + :margin-left -4 + :hole-size 22 + :hole-x 15 + :hole-y -1} 16 {:border-radius {:circular 8 :rounded 8} :hole-radius {:circular 9 :rounded 9} :margin-left -4 @@ -32,19 +38,19 @@ (defn avatar [item type size border-radius] (case type - :user [user-avatar/user-avatar - (merge {:ring? false - :status-indicator? false - :size (case size - 32 :small - 24 :xs - 16 :xxxs)} - item)] - (:photo :collectible) [fast-image/fast-image - {:source (:source item) - :style {:width size - :height size - :border-radius border-radius}}])) + :user [user-avatar/user-avatar + (merge {:ring? false + :status-indicator? false + :size (case size + 32 :small + 24 :xs + 16 :xxxs)} + item)] + (:photo :collectible :network) [fast-image/fast-image + {:source (:source item) + :style {:width size + :height size + :border-radius border-radius}}])) (defn list-item [index type size item list-size margin-left @@ -115,7 +121,7 @@ (defn- preview-list-internal "[preview-list opts items] opts - {:type :user/:community/:account/:token/:collectible/:dapp + {:type :user/:community/:account/:token/:collectible/:dapp/:network :size 32/24/16 :list-size override items count in overflow label (optional) :transparent? overflow-label transparent?} diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index e8d6afebc3..cbfde3eaa8 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -41,6 +41,7 @@ quo2.components.drawers.drawer-buttons.view quo2.components.drawers.permission-context.view quo2.components.dropdowns.dropdown + quo2.components.dropdowns.network-dropdown.view quo2.components.empty-state.empty-state.view quo2.components.gradient.gradient-cover.view quo2.components.graph.wallet-graph.view @@ -193,6 +194,7 @@ ;;;; Dropdowns (def dropdown quo2.components.dropdowns.dropdown/dropdown) +(def network-dropdown quo2.components.dropdowns.network-dropdown.view/view) ;;;; Empty State (def empty-state quo2.components.empty-state.empty-state.view/empty-state) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 0e03f9b542..95974ede20 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -23,6 +23,7 @@ [quo2.components.drawers.documentation-drawers.component-spec] [quo2.components.drawers.drawer-buttons.component-spec] [quo2.components.drawers.permission-context.component-spec] + [quo2.components.dropdowns.network-dropdown.component-spec] [quo2.components.gradient.gradient-cover.component-spec] [quo2.components.graph.wallet-graph.component-spec] [quo2.components.inputs.input.component-spec] diff --git a/src/quo2/foundations/resources.cljs b/src/quo2/foundations/resources.cljs index d9f12b9c93..50828dab25 100644 --- a/src/quo2/foundations/resources.cljs +++ b/src/quo2/foundations/resources.cljs @@ -28,3 +28,7 @@ {:ethereum (js/require "../resources/images/tokens/mainnet/ETH-network.png") :optimism (js/require "../resources/images/tokens/mainnet/OP.png") :arbitrum (js/require "../resources/images/tokens/mainnet/ARB.png")}) + +(defn get-network + [n] + (get networks n)) diff --git a/src/status_im2/contexts/quo_preview/dropdowns/network_dropdown.cljs b/src/status_im2/contexts/quo_preview/dropdowns/network_dropdown.cljs new file mode 100644 index 0000000000..f387d6cce3 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/dropdowns/network_dropdown.cljs @@ -0,0 +1,49 @@ +(ns status-im2.contexts.quo-preview.dropdowns.network-dropdown + (:require [quo2.foundations.resources :as quo.resources] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview] + [quo2.core :as quo])) + +(def descriptor + [{:key :state + :type :select + :options [{:key :default + :value "Default"} + {:key :disabled + :value "Disabled"}]} + {:key :blur? + :type :select + :options [{:key true + :value "True"} + {:key false + :value "False"}]} + {:key :amount + :type :select + :options [{:key 1 + :value 1} + {:key 2 + :value 2} + {:key 3 + :value 3}]}]) + +(def ^:private networks-list + [{:source (quo.resources/get-network :ethereum)} + {:source (quo.resources/get-network :optimism)} + {:source (quo.resources/get-network :arbitrum)}]) + +(defn preview-dropdown + [] + (let [component-state (reagent/atom {:state :default :blur? false :amount 3})] + (fn [] + + [preview/preview-container + {:state component-state + :descriptor descriptor + :blur? (:blur? @component-state) + :show-blur-background? true} + [rn/view {:style {:align-self :center}} + [quo/network-dropdown + (merge {:on-press #(js/alert "Dropdown pressed")} + @component-state) + (take (:amount @component-state) networks-list)]]]))) diff --git a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs index 9e8ed7ce6c..3cc3ab6126 100644 --- a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs @@ -1,6 +1,7 @@ (ns status-im2.contexts.quo-preview.list-items.preview-lists (:require [quo2.components.list-items.preview-list :as quo2] [quo2.foundations.colors :as colors] + [quo2.foundations.resources :as quo.resources] [react-native.core :as rn] [reagent.core :as reagent] [utils.i18n :as i18n] @@ -23,7 +24,9 @@ :options [{:key :user :value "User"} {:key :photo - :value "Photo"}]} + :value "Photo"} + {:key :network + :value "Network"}]} {:label "List Size" :key :list-size :default 10 @@ -44,6 +47,11 @@ {:source (resources/get-mock-image :photo2)} {:source (resources/get-mock-image :photo3)}]) +(def networks-list + [{:source (quo.resources/get-network :ethereum)} + {:source (quo.resources/get-network :optimism)} + {:source (quo.resources/get-network :arbitrum)}]) + (defn cool-preview [] (let [state (reagent/atom {:type :user @@ -60,8 +68,9 @@ :align-items :center} [quo2/preview-list @state (case @type - :user user-list - :photo photos-list)]]]]))) + :user user-list + :photo photos-list + :network networks-list)]]]]))) (defn preview-preview-lists [] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 722c000c8d..f92fe31642 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -45,6 +45,7 @@ [status-im2.contexts.quo-preview.drawers.drawer-buttons :as drawer-buttons] [status-im2.contexts.quo-preview.drawers.permission-drawers :as permission-drawers] [status-im2.contexts.quo-preview.dropdowns.dropdown :as dropdown] + [status-im2.contexts.quo-preview.dropdowns.network-dropdown :as network-dropdown] [status-im2.contexts.quo-preview.foundations.shadows :as shadows] [status-im2.contexts.quo-preview.info.info-message :as info-message] [status-im2.contexts.quo-preview.info.information-box :as information-box] @@ -200,7 +201,9 @@ {:name :permission-drawers :component permission-drawers/preview-permission-drawers}] :dropdowns [{:name :dropdown - :component dropdown/preview-dropdown}] + :component dropdown/preview-dropdown} + {:name :network-dropdown + :component network-dropdown/preview-dropdown}] :empty-state [{:name :empty-state :component empty-state/preview-empty-state}] :gradient [{:name :gradient-cover