Skip to content

Commit b7bffb3

Browse files
flexsurferflexsurfer
authored
migrating to react state. step 2 (#18905)
1 parent 047e45d commit b7bffb3

File tree

13 files changed

+507
-526
lines changed

13 files changed

+507
-526
lines changed

‎src/quo/components/calendar/calendar/view.cljs

+31-31
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,36 @@
88
[quo.components.calendar.calendar.years-list.view :as years-list]
99
[quo.theme :as theme]
1010
[react-native.core :as rn]
11-
[reagent.core :as reagent]
1211
[utils.number :as utils.number]))
1312

14-
(defn- view-internal
15-
[]
16-
(let [selected-year (reagent/atom (utils/current-year))
17-
selected-month (reagent/atom (utils/current-month))
18-
on-change-year #(reset! selected-year %)
19-
on-change-month (fn [new-date]
20-
(reset! selected-year (utils.number/parse-int (:year new-date)))
21-
(reset! selected-month (utils.number/parse-int (:month new-date))))]
22-
(fn [{:keys [on-change start-date end-date theme]}]
23-
[rn/view
24-
{:style (style/container theme)}
25-
[years-list/view
26-
{:on-change-year on-change-year
27-
:year @selected-year}]
28-
[rn/view
29-
{:style style/container-main}
30-
[month-picker/view
31-
{:year @selected-year
32-
:month @selected-month
33-
:on-change on-change-month}]
34-
[weekdays-header/view]
35-
[days-grid/view
36-
{:year @selected-year
37-
:month @selected-month
38-
:start-date start-date
39-
:end-date end-date
40-
:on-change on-change
41-
:customization-color :blue}]]])))
42-
43-
(def view (theme/with-theme view-internal))
13+
(defn view
14+
[{:keys [on-change start-date end-date]}]
15+
(let [theme (theme/use-theme-value)
16+
[selected-year set-selected-year] (rn/use-state (utils/current-year))
17+
[selected-month set-selected-month] (rn/use-state (utils/current-month))
18+
on-change-year (rn/use-callback #(set-selected-year %))
19+
on-change-month (rn/use-callback
20+
(fn [new-date]
21+
(set-selected-year
22+
(utils.number/parse-int (:year new-date)))
23+
(set-selected-month
24+
(utils.number/parse-int (:month new-date)))))]
25+
[rn/view
26+
{:style (style/container theme)}
27+
[years-list/view
28+
{:on-change-year on-change-year
29+
:year selected-year}]
30+
[rn/view
31+
{:style style/container-main}
32+
[month-picker/view
33+
{:year selected-year
34+
:month selected-month
35+
:on-change on-change-month}]
36+
[weekdays-header/view]
37+
[days-grid/view
38+
{:year selected-year
39+
:month selected-month
40+
:start-date start-date
41+
:end-date end-date
42+
:on-change on-change
43+
:customization-color :blue}]]]))

‎src/quo/components/colors/color_picker/view.cljs

+26-31
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,7 @@
33
[quo.components.colors.color.constants :as constants]
44
[quo.components.colors.color.view :as color]
55
[quo.foundations.colors :as colors]
6-
[react-native.core :as rn]
7-
[reagent.core :as reagent]))
8-
9-
(defn- on-change-handler
10-
[selected color-name on-change]
11-
(reset! selected color-name)
12-
(when on-change (on-change color-name)))
6+
[react-native.core :as rn]))
137

148
(defn get-item-layout
159
[_ index]
@@ -18,15 +12,34 @@
1812
:offset (* (+ constants/color-size 8) index)
1913
:index index})
2014

21-
(defn- view-internal
15+
(defn view
2216
"Options
2317
- `default-selected` Default selected color name.
2418
- `on-change` Callback called when a color is selected `(fn [color-name])`.
2519
- `blur?` Boolean to enable blur background support.}"
2620
[{:keys [default-selected blur? on-change feng-shui? container-style]}]
27-
(let [selected (reagent/atom default-selected)
28-
{window-width :width} (rn/get-window)
29-
ref (atom nil)]
21+
(let [[selected set-selected] (rn/use-state default-selected)
22+
{window-width :width} (rn/get-window)
23+
ref (rn/use-ref-atom nil)
24+
on-ref (rn/use-callback #(reset! ref %))
25+
render-fn (rn/use-callback
26+
(fn [color idx]
27+
[color/view
28+
{:selected? (= color selected)
29+
:on-press (fn [color-name]
30+
(.scrollToIndex ^js @ref
31+
#js
32+
{:animated true
33+
:index idx
34+
:viewPosition 0.5})
35+
(set-selected color-name)
36+
(when on-change (on-change color-name)))
37+
:blur? blur?
38+
:key color
39+
:color color
40+
:idx idx
41+
:window-width window-width}])
42+
[selected blur? on-change @ref])]
3043
(rn/use-mount
3144
(fn []
3245
(js/setTimeout
@@ -40,32 +53,14 @@
4053
:viewPosition 0.5})))))
4154
50)))
4255
[rn/flat-list
43-
{:ref #(reset! ref %)
56+
{:ref on-ref
4457
;; TODO: using :feng-shui? temporarily while b & w is being developed.
4558
;; https://github.com/status-im/status-mobile/discussions/16676
4659
:data (if feng-shui?
4760
(conj colors/account-colors :feng-shui)
4861
colors/account-colors)
49-
:render-fn (fn [color idx]
50-
[color/view
51-
{:selected? (= color @selected)
52-
:on-press (fn [e]
53-
(.scrollToIndex ^js @ref
54-
#js
55-
{:animated true
56-
:index idx
57-
:viewPosition 0.5})
58-
(on-change-handler selected e on-change))
59-
:blur? blur?
60-
:key color
61-
:color color
62-
:idx idx
63-
:window-width window-width}])
62+
:render-fn render-fn
6463
:get-item-layout get-item-layout
6564
:horizontal true
6665
:shows-horizontal-scroll-indicator false
6766
:content-container-style container-style}]))
68-
69-
(defn view
70-
[props]
71-
[:f> view-internal props])

‎src/quo/components/common/no_flicker_image.cljs

+8-9
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,11 @@
3535
(defn image
3636
"Same as rn/image but cache the image source in a js/Set, so the image won't
3737
flicker when re-render on android"
38-
[]
39-
(let [loaded-source (reagent/atom nil)
40-
on-source-loaded #(reset! loaded-source %)]
41-
(fn [props]
42-
(if platform/ios?
43-
[rn/image props]
44-
[:<>
45-
[rn/image (assoc props :source @loaded-source)]
46-
[caching-image props on-source-loaded]]))))
38+
[props]
39+
(let [[loaded-source set-loaded-source] (rn/use-state nil)
40+
on-source-loaded (rn/use-callback #(set-loaded-source %))]
41+
(if platform/ios?
42+
[rn/image props]
43+
[:<>
44+
[rn/image (assoc props :source loaded-source)]
45+
[caching-image props on-source-loaded]])))

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

+19-21
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,23 @@
33
[quo.components.dropdowns.network-dropdown.style :as style]
44
[quo.components.list-items.preview-list.view :as preview-list]
55
[quo.theme :as quo.theme]
6-
[react-native.core :as rn]
7-
[reagent.core :as reagent]))
6+
[react-native.core :as rn]))
87

9-
(defn- internal-view
10-
[_ _]
11-
(let [pressed? (reagent/atom false)]
12-
(fn
13-
[{:keys [on-press state] :as props} networks]
14-
[rn/pressable
15-
{:style (style/dropdown-container (merge props {:pressed? @pressed?}))
16-
:accessibility-label :network-dropdown
17-
:disabled (= state :disabled)
18-
:on-press on-press
19-
:on-press-in (fn [] (reset! pressed? true))
20-
:on-press-out (fn [] (reset! pressed? false))}
21-
[preview-list/view
22-
{:type :network
23-
:list-size (count networks)
24-
:size :size-20}
25-
networks]])))
26-
27-
(def view (quo.theme/with-theme internal-view))
8+
(defn view
9+
[{:keys [on-press state] :as props} networks]
10+
(let [theme (quo.theme/use-theme-value)
11+
[pressed? set-pressed] (rn/use-state false)
12+
on-press-in (rn/use-callback #(set-pressed true))
13+
on-press-out (rn/use-callback #(set-pressed false))]
14+
[rn/pressable
15+
{:style (style/dropdown-container (merge props {:pressed? pressed? :theme theme}))
16+
:accessibility-label :network-dropdown
17+
:disabled (= state :disabled)
18+
:on-press on-press
19+
:on-press-in on-press-in
20+
:on-press-out on-press-out}
21+
[preview-list/view
22+
{:type :network
23+
:list-size (count networks)
24+
:size :size-20}
25+
networks]]))

‎src/quo/components/graph/interactive_graph/view.cljs

+13-15
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
(def initial-spacing 56)
1515
(def end-spacing 22)
1616
(def y-axis-label-width -33)
17-
(def inspecting? (reagent/atom false))
1817

1918
(defn- pointer
2019
[customization-color]
@@ -32,14 +31,9 @@
3231
:pointer-color customization-color
3332
:pointer-strip-enable-gradient true})
3433

35-
(defn- get-pointer-props
36-
[pointer-props]
37-
(let [pointer-index (.-pointerIndex ^js pointer-props)]
38-
(reset! inspecting? (not= pointer-index -1))))
39-
4034
(defn- get-line-color
41-
[state theme]
42-
(if @inspecting?
35+
[state theme inspecting?]
36+
(if inspecting?
4337
(colors/theme-colors colors/neutral-80-opa-40
4438
colors/white-opa-20
4539
theme)
@@ -51,11 +45,13 @@
5145
colors/danger-60
5246
theme))))
5347

54-
(defn- view-internal
55-
[{:keys [data state customization-color theme reference-value reference-prefix decimal-separator]
48+
(defn view
49+
[{:keys [data state customization-color reference-value reference-prefix decimal-separator]
5650
:or {reference-prefix "$"
5751
decimal-separator :dot}}]
58-
(let [data (if (> (count data) max-data-points)
52+
(let [theme (quo.theme/use-theme-value)
53+
[inspecting? set-inspecting] (rn/use-state false)
54+
data (if (> (count data) max-data-points)
5955
(utils/downsample-data data max-data-points)
6056
data)
6157
highest-value (utils/find-highest-value data)
@@ -64,7 +60,11 @@
6460
max-value (- (utils/calculate-rounded-max highest-value) min-value)
6561
step-value (/ max-value 4)
6662
width (:width (rn/get-window))
67-
line-color (get-line-color state theme)
63+
line-color (get-line-color state theme inspecting?)
64+
get-pointer-props (rn/use-callback
65+
(fn [pointer-props]
66+
(let [pointer-index (.-pointerIndex ^js pointer-props)]
67+
(set-inspecting (not= pointer-index -1)))))
6868
rules-color (colors/theme-colors colors/neutral-80-opa-10
6969
colors/white-opa-5
7070
theme)
@@ -119,7 +119,7 @@
119119
:show-strip-on-focus true
120120
:reference-line-1-config {:color rules-color}
121121
:reference-line-1-position 0
122-
:show-reference-line-2 (and (not @inspecting?)
122+
:show-reference-line-2 (and (not inspecting?)
123123
(<= reference-value highest-value)
124124
(>= reference-value lowest-value))
125125
:reference-line-2-config {:color y-axis-label-text-color
@@ -138,5 +138,3 @@
138138
:x-axis-label-text-style (style/x-axis-label-text (/ width (count x-axis-label-texts))
139139
y-axis-label-text-color)
140140
:x-axis-label-texts x-axis-label-texts}]]))
141-
142-
(def view (quo.theme/with-theme view-internal))

‎src/quo/components/inputs/address_input/component_spec.cljs

+14-19
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
(h/fire-event :on-focus (h/get-by-label-text :address-text-input))
2121
(h/has-prop (h/get-by-label-text :address-text-input)
2222
:placeholder-text-color
23-
colors/neutral-40)))
23+
colors/neutral-30)))
2424

2525
(h/test "on focus with blur? true"
2626
(with-redefs [clipboard/get-string #(% "")]
@@ -30,35 +30,30 @@
3030
(h/fire-event :on-focus (h/get-by-label-text :address-text-input))
3131
(h/has-prop (h/get-by-label-text :address-text-input)
3232
:placeholder-text-color
33-
colors/neutral-80-opa-40)))
33+
colors/neutral-80-opa-20)))
3434

35-
(h/test "scanned value is properly set"
36-
(let [on-change-text (h/mock-fn)
37-
scanned-value "scanned-value"]
35+
(h/test "default value is properly set"
36+
(let [default-value "default-value"]
3837
(with-redefs [clipboard/get-string #(% "")]
3938
(h/render [address-input/address-input
40-
{:scanned-value scanned-value
41-
:on-change-text on-change-text
42-
:ens-regex ens-regex}])
43-
(-> (h/wait-for #(h/get-by-label-text :clear-button))
44-
(.then (fn []
45-
(h/was-called-with on-change-text scanned-value)
46-
(h/has-prop (h/get-by-label-text :address-text-input)
47-
:default-value
48-
scanned-value)))))))
39+
{:default-value default-value
40+
:ens-regex ens-regex}])
41+
(h/has-prop (h/get-by-label-text :address-text-input)
42+
:value
43+
default-value))))
4944

5045
(h/test "clear icon is shown when input has text"
5146
(with-redefs [clipboard/get-string #(% "")]
5247
(h/render [address-input/address-input
53-
{:scanned-value "scanned value"
48+
{:default-value "default value"
5449
:ens-regex ens-regex}])
5550
(-> (h/wait-for #(h/get-by-label-text :clear-button-container))
5651
(.then #(h/is-truthy (h/get-by-label-text :clear-button))))))
5752

5853
(h/test "on blur with text and blur? false"
5954
(with-redefs [clipboard/get-string #(% "")]
6055
(h/render [address-input/address-input
61-
{:scanned-value "scanned value"
56+
{:default-value "default value"
6257
:ens-regex ens-regex}])
6358
(-> (h/wait-for #(h/get-by-label-text :clear-button))
6459
(.then (fn []
@@ -71,7 +66,7 @@
7166
(h/test "on blur with text blur? true"
7267
(with-redefs [clipboard/get-string #(% "")]
7368
(h/render [address-input/address-input
74-
{:scanned-value "scanned value"
69+
{:default-value "default value"
7570
:blur? true
7671
:ens-regex ens-regex}])
7772
(-> (h/wait-for #(h/get-by-label-text :clear-button))
@@ -106,7 +101,7 @@
106101
(let [on-clear (h/mock-fn)]
107102
(with-redefs [clipboard/get-string #(% "")]
108103
(h/render [address-input/address-input
109-
{:scanned-value "scanned value"
104+
{:default-value "default value"
110105
:on-clear on-clear
111106
:ens-regex ens-regex}])
112107
(-> (h/wait-for #(h/get-by-label-text :clear-button))
@@ -148,7 +143,7 @@
148143
(-> (h/wait-for #(h/get-by-label-text :clear-button))
149144
(.then (fn []
150145
(h/has-prop (h/get-by-label-text :address-text-input)
151-
:default-value
146+
:value
152147
clipboard)))))))
153148

154149
(h/test "ENS loading state and call on-detect-ens"

0 commit comments

Comments
 (0)