status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Network dropdown component (#16982)

This commit is contained in:
Volodymyr Kozieiev 2023-08-23 14:12:15 +01:00 committed by GitHub
parent 4cef868eab
commit 821e39a562
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 177 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/quo2/components/dropdowns/network_dropdown/component_spec.cljs Normal file
View File

@ -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))))

24
src/quo2/components/dropdowns/network_dropdown/style.cljs Normal file
View File

@ -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})

26
src/quo2/components/dropdowns/network_dropdown/view.cljs Normal file
View File

@ -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))

34
src/quo2/components/list_items/preview_list.cljs
View File

@ -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?}

2
src/quo2/core.cljs
View File

@ -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)

1
src/quo2/core_spec.cljs
View File

@ -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]

4
src/quo2/foundations/resources.cljs
View File

@ -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))

49
src/status_im2/contexts/quo_preview/dropdowns/network_dropdown.cljs Normal file
View File

@ -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)]]])))

15
src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
View File

@ -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
[]

5
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -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