Skip to content

Commit a9a17aa

Browse files
tumanov-alextumanov-alex
authored
Implement dropdown-input based on the original dropdown component (#17927)
1 parent 6d69c27 commit a9a17aa

File tree

8 files changed

+290
-1
lines changed

8 files changed

+290
-1
lines changed

Diff for: ‎src/quo/components/dropdowns/dropdown_input/component_spec.cljs

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
(ns quo.components.dropdowns.dropdown-input.component-spec
2+
(:require
3+
[quo.components.dropdowns.dropdown-input.view :as dropdown-input]
4+
[test-helpers.component :as h]))
5+
6+
(h/describe "Dropdown Input"
7+
8+
(h/test "default render"
9+
(let [header-label "Label"
10+
label "Dropdown"]
11+
(h/render [dropdown-input/view
12+
{:label? true
13+
:header-label
14+
header-label} label])
15+
(h/is-truthy (h/get-by-label-text :dropdown))
16+
(h/is-truthy (h/get-by-text header-label))
17+
(h/is-truthy (h/get-by-text label))))
18+
19+
(h/test "render with icon"
20+
(let [label "Dropdown"]
21+
(h/render [dropdown-input/view
22+
{:icon? true
23+
:icon-name
24+
:i/wallet
25+
:label? true}
26+
label])
27+
(h/is-truthy (h/get-by-label-text :dropdown))
28+
(h/is-truthy (h/get-by-label-text :left-icon))
29+
(h/is-truthy (h/get-by-text label))))
30+
31+
(h/test "render in active state"
32+
(let [label "Dropdown"]
33+
(h/render [dropdown-input/view
34+
{:state :active
35+
:label?
36+
true} label])
37+
(h/is-truthy (h/get-by-label-text :dropdown))
38+
(h/is-truthy (h/get-by-label-text :right-icon "Expecting active state icon"))))
39+
40+
(h/test "render in disabled state"
41+
(let [label "Dropdown"]
42+
(h/render [dropdown-input/view
43+
{:state :disabled
44+
:label? true} label])
45+
(h/is-truthy (h/get-by-label-text :dropdown))
46+
(h/is-disabled (h/get-by-text label "Dropdown should be disabled in disabled state"))))
47+
48+
(h/test "on-press"
49+
(let [event (h/mock-fn)
50+
label "Dropdown"]
51+
(h/render [dropdown-input/view
52+
{:on-press event
53+
:label?
54+
true} label])
55+
(h/fire-event :press (h/get-by-text label))
56+
(h/was-called event))))

Diff for: ‎src/quo/components/dropdowns/dropdown_input/properties.cljs

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
(ns quo.components.dropdowns.dropdown-input.properties
2+
(:require
3+
[quo.foundations.colors :as colors]))
4+
5+
(def icon-size 20)
6+
7+
(defn- grey-blur
8+
[theme active?]
9+
{:left-icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
10+
:right-icon-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
11+
:right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
12+
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
13+
:border-color (if active?
14+
(colors/theme-colors colors/neutral-80-opa-20
15+
colors/white-opa-40
16+
theme)
17+
(colors/theme-colors colors/neutral-80-opa-10
18+
colors/white-opa-10
19+
theme))})
20+
21+
(defn- outline
22+
[theme active?]
23+
{:left-icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
24+
:right-icon-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
25+
:right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
26+
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
27+
:border-color (if active?
28+
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
29+
(colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
30+
31+
(defn- grey
32+
[theme active?]
33+
{:left-icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
34+
:right-icon-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
35+
:right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
36+
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
37+
:border-color (if active?
38+
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
39+
(colors/theme-colors colors/neutral-20
40+
colors/neutral-60
41+
theme))})
42+
43+
(defn get-colors
44+
[{:keys [theme state blur?]}]
45+
(let [active? (= state :active)]
46+
(cond
47+
blur? (grey-blur theme active?)
48+
(= theme :dark) (outline theme active?)
49+
(= theme :light) (grey theme active?))))

Diff for: ‎src/quo/components/dropdowns/dropdown_input/style.cljs

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
(ns quo.components.dropdowns.dropdown-input.style
2+
(:require
3+
[quo.foundations.colors :as colors]))
4+
5+
(def gap 8)
6+
7+
(def blur-view
8+
{:position :absolute
9+
:top 0
10+
:left 0
11+
:right 0
12+
:bottom 0})
13+
14+
(def left-icon
15+
{:margin-right gap})
16+
17+
(defn right-icon
18+
[theme]
19+
{:color (colors/theme-colors colors/neutral-100 colors/white theme)
20+
:margin-right gap})
21+
22+
(defn header-label
23+
[theme blur?]
24+
{:color (if blur?
25+
(colors/theme-colors colors/neutral-80-opa-40
26+
colors/white-opa-70
27+
theme)
28+
(colors/theme-colors colors/neutral-50
29+
colors/neutral-40
30+
theme))
31+
:margin-bottom gap})
32+
33+
(def root-container
34+
{:width "100%"
35+
:height 40})
36+
37+
(defn container
38+
[{:keys [background-color border-color]}
39+
{:keys [icon? state]}]
40+
(cond-> {:align-items :center
41+
:justify-content :space-between
42+
:flex-direction :row
43+
:padding-vertical 9
44+
:padding-left 16
45+
:padding-right 12
46+
:overflow :hidden
47+
:background-color background-color
48+
:border-radius 12}
49+
50+
icon?
51+
(assoc :padding-left 12)
52+
53+
border-color
54+
(assoc :border-color border-color
55+
:border-width 1)
56+
57+
(= state :disabled)
58+
(assoc :opacity 0.3)))
59+
60+
(def right-half-container
61+
{:flex-direction :row
62+
:align-items :center})

Diff for: ‎src/quo/components/dropdowns/dropdown_input/view.cljs

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
(ns quo.components.dropdowns.dropdown-input.view
2+
(:require
3+
[quo.components.dropdowns.dropdown-input.properties :as properties]
4+
[quo.components.dropdowns.dropdown-input.style :as style]
5+
[quo.components.icon :as icon]
6+
[quo.components.markdown.text :as text]
7+
[quo.theme :as theme]
8+
[react-native.core :as rn]))
9+
10+
(defn- view-internal
11+
[{:keys [state theme on-press icon?
12+
label? blur?
13+
accessibility-label header-label]
14+
:or {state :default
15+
icon? true
16+
label? true
17+
blur? false
18+
header-label "Label"}
19+
:as props}
20+
label]
21+
(let [{:keys [left-icon-color right-icon-color right-icon-color-2]
22+
:as colors} (properties/get-colors props)
23+
right-icon (if (= state :active) :i/pullup :i/dropdown)]
24+
[rn/view
25+
{:style style/root-container}
26+
(when label?
27+
[text/text
28+
{:size :paragraph-2
29+
:weight :medium
30+
:align :left
31+
:style (style/header-label theme blur?)} header-label])
32+
[rn/pressable
33+
{:accessibility-label (or accessibility-label :dropdown)
34+
:disabled (= state :disabled)
35+
:on-press on-press
36+
:style (style/container colors props)}
37+
[rn/view
38+
{:style style/right-half-container}
39+
(when icon?
40+
[icon/icon
41+
:i/placeholder
42+
{:accessibility-label :left-icon
43+
:color left-icon-color
44+
:size properties/icon-size
45+
:container-style style/left-icon}])
46+
[text/text
47+
{:size :paragraph-1
48+
:weight :regular
49+
:number-of-lines 1
50+
:style (style/right-icon theme)}
51+
label]]
52+
[icon/icon
53+
right-icon
54+
{:size properties/icon-size
55+
:accessibility-label :right-icon
56+
:color right-icon-color
57+
:color-2 right-icon-color-2}]]]))
58+
59+
(def view
60+
"Props:
61+
- state: :default (default) | :active | :disabled
62+
- label: string
63+
- header-label: string
64+
- icon?: boolean
65+
- label?: boolean
66+
- blur?: boolean
67+
- on-press: function"
68+
(theme/with-theme view-internal))

Diff for: ‎src/quo/core.cljs

+2
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
quo.components.drawers.drawer-buttons.view
4949
quo.components.drawers.drawer-top.view
5050
quo.components.drawers.permission-context.view
51+
quo.components.dropdowns.dropdown-input.view
5152
quo.components.dropdowns.dropdown.view
5253
quo.components.dropdowns.network-dropdown.view
5354
quo.components.empty-state.empty-state.view
@@ -232,6 +233,7 @@
232233

233234
;;;; Dropdowns
234235
(def dropdown quo.components.dropdowns.dropdown.view/view)
236+
(def dropdown-input quo.components.dropdowns.dropdown-input.view/view)
235237
(def network-dropdown quo.components.dropdowns.network-dropdown.view/view)
236238

237239
;;;; Empty State

Diff for: ‎src/quo/core_spec.cljs

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
[quo.components.drawers.drawer-buttons.component-spec]
2727
[quo.components.drawers.drawer-top.component-spec]
2828
[quo.components.drawers.permission-context.component-spec]
29+
[quo.components.dropdowns.dropdown-input.component-spec]
2930
[quo.components.dropdowns.dropdown.component-spec]
3031
[quo.components.dropdowns.network-dropdown.component-spec]
3132
[quo.components.gradient.gradient-cover.component-spec]

Diff for: ‎src/status_im2/contexts/quo_preview/dropdowns/dropdown_input.cljs

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
(ns status-im2.contexts.quo-preview.dropdowns.dropdown-input
2+
(:require
3+
[quo.core :as quo]
4+
[reagent.core :as reagent]
5+
[status-im2.contexts.quo-preview.preview :as preview]))
6+
7+
(def descriptor
8+
[{:key :state
9+
:type :select
10+
:options [{:key :default}
11+
{:key :active}
12+
{:key :disabled}]}
13+
{:key :icon?
14+
:type :boolean}
15+
{:key :label?
16+
:type :boolean}
17+
{:key :blur?
18+
:type :boolean}
19+
{:key :header-label
20+
:type :text}
21+
{:key :label
22+
:type :text}])
23+
24+
(defn view
25+
[]
26+
(let [state (reagent/atom {:state :default
27+
:label "Dropdown"
28+
:header-label "Label"
29+
:icon? true
30+
:label? true
31+
:blur? false})
32+
label (reagent/cursor state [:label])
33+
blur? (reagent/cursor state [:blur?])]
34+
[:f>
35+
(fn []
36+
[preview/preview-container
37+
{:state state
38+
:descriptor descriptor
39+
:component-container-style (when-not @blur?
40+
{:align-items :center
41+
:margin-horizontal 30})
42+
:blur-container-style {:align-items :center}
43+
:blur? @blur?
44+
:show-blur-background? true}
45+
[quo/dropdown-input
46+
(assoc @state :on-press #(js/alert "Pressed dropdown"))
47+
@label]])]))

Diff for: ‎src/status_im2/contexts/quo_preview/main.cljs

+5-1
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@
5858
[status-im2.contexts.quo-preview.drawers.permission-drawers :as
5959
permission-drawers]
6060
[status-im2.contexts.quo-preview.dropdowns.dropdown :as dropdown]
61+
[status-im2.contexts.quo-preview.dropdowns.dropdown-input :as
62+
dropdown-input]
6163
[status-im2.contexts.quo-preview.dropdowns.network-dropdown :as
6264
network-dropdown]
6365
[status-im2.contexts.quo-preview.empty-state.empty-state :as empty-state]
@@ -275,7 +277,9 @@
275277
:dropdowns [{:name :dropdown
276278
:component dropdown/view}
277279
{:name :network-dropdown
278-
:component network-dropdown/view}]
280+
:component network-dropdown/view}
281+
{:name :dropdown-input
282+
:component dropdown-input/view}]
279283
:empty-state [{:name :empty-state
280284
:component empty-state/view}]
281285
:gradient [{:name :gradient-cover

0 commit comments

Comments
 (0)