Skip to content

Commit

Permalink
migrating to react state. step 2 (#18905)
Browse files Browse the repository at this point in the history
  • Loading branch information
@flexsurfer
flexsurfer authored Feb 28, 2024
1 parent 047e45d commit b7bffb3
Show file tree
Hide file tree
Showing 13 changed files with 507 additions and 526 deletions.
62 changes: 31 additions & 31 deletions src/quo/components/calendar/calendar/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,36 @@
[quo.components.calendar.calendar.years-list.view :as years-list]
[quo.theme :as theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[utils.number :as utils.number]))

(defn- view-internal
[]
(let [selected-year (reagent/atom (utils/current-year))
selected-month (reagent/atom (utils/current-month))
on-change-year #(reset! selected-year %)
on-change-month (fn [new-date]
(reset! selected-year (utils.number/parse-int (:year new-date)))
(reset! selected-month (utils.number/parse-int (:month new-date))))]
(fn [{:keys [on-change start-date end-date theme]}]
[rn/view
{:style (style/container theme)}
[years-list/view
{:on-change-year on-change-year
:year @selected-year}]
[rn/view
{:style style/container-main}
[month-picker/view
{:year @selected-year
:month @selected-month
:on-change on-change-month}]
[weekdays-header/view]
[days-grid/view
{:year @selected-year
:month @selected-month
:start-date start-date
:end-date end-date
:on-change on-change
:customization-color :blue}]]])))

(def view (theme/with-theme view-internal))
(defn view
[{:keys [on-change start-date end-date]}]
(let [theme (theme/use-theme-value)
[selected-year set-selected-year] (rn/use-state (utils/current-year))
[selected-month set-selected-month] (rn/use-state (utils/current-month))
on-change-year (rn/use-callback #(set-selected-year %))
on-change-month (rn/use-callback
(fn [new-date]
(set-selected-year
(utils.number/parse-int (:year new-date)))
(set-selected-month
(utils.number/parse-int (:month new-date)))))]
[rn/view
{:style (style/container theme)}
[years-list/view
{:on-change-year on-change-year
:year selected-year}]
[rn/view
{:style style/container-main}
[month-picker/view
{:year selected-year
:month selected-month
:on-change on-change-month}]
[weekdays-header/view]
[days-grid/view
{:year selected-year
:month selected-month
:start-date start-date
:end-date end-date
:on-change on-change
:customization-color :blue}]]]))
57 changes: 26 additions & 31 deletions src/quo/components/colors/color_picker/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,7 @@
[quo.components.colors.color.constants :as constants]
[quo.components.colors.color.view :as color]
[quo.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]))

(defn- on-change-handler
[selected color-name on-change]
(reset! selected color-name)
(when on-change (on-change color-name)))
[react-native.core :as rn]))

(defn get-item-layout
[_ index]
Expand All @@ -18,15 +12,34 @@
:offset (* (+ constants/color-size 8) index)
:index index})

(defn- view-internal
(defn view
"Options
- `default-selected` Default selected color name.
- `on-change` Callback called when a color is selected `(fn [color-name])`.
- `blur?` Boolean to enable blur background support.}"
[{:keys [default-selected blur? on-change feng-shui? container-style]}]
(let [selected (reagent/atom default-selected)
{window-width :width} (rn/get-window)
ref (atom nil)]
(let [[selected set-selected] (rn/use-state default-selected)
{window-width :width} (rn/get-window)
ref (rn/use-ref-atom nil)
on-ref (rn/use-callback #(reset! ref %))
render-fn (rn/use-callback
(fn [color idx]
[color/view
{:selected? (= color selected)
:on-press (fn [color-name]
(.scrollToIndex ^js @ref
#js
{:animated true
:index idx
:viewPosition 0.5})
(set-selected color-name)
(when on-change (on-change color-name)))
:blur? blur?
:key color
:color color
:idx idx
:window-width window-width}])
[selected blur? on-change @ref])]
(rn/use-mount
(fn []
(js/setTimeout
Expand All @@ -40,32 +53,14 @@
:viewPosition 0.5})))))
50)))
[rn/flat-list
{:ref #(reset! ref %)
{:ref on-ref
;; TODO: using :feng-shui? temporarily while b & w is being developed.
;; https://github.com/status-im/status-mobile/discussions/16676
:data (if feng-shui?
(conj colors/account-colors :feng-shui)
colors/account-colors)
:render-fn (fn [color idx]
[color/view
{:selected? (= color @selected)
:on-press (fn [e]
(.scrollToIndex ^js @ref
#js
{:animated true
:index idx
:viewPosition 0.5})
(on-change-handler selected e on-change))
:blur? blur?
:key color
:color color
:idx idx
:window-width window-width}])
:render-fn render-fn
:get-item-layout get-item-layout
:horizontal true
:shows-horizontal-scroll-indicator false
:content-container-style container-style}]))

(defn view
[props]
[:f> view-internal props])
17 changes: 8 additions & 9 deletions src/quo/components/common/no_flicker_image.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,11 @@
(defn image
"Same as rn/image but cache the image source in a js/Set, so the image won't
flicker when re-render on android"
[]
(let [loaded-source (reagent/atom nil)
on-source-loaded #(reset! loaded-source %)]
(fn [props]
(if platform/ios?
[rn/image props]
[:<>
[rn/image (assoc props :source @loaded-source)]
[caching-image props on-source-loaded]]))))
[props]
(let [[loaded-source set-loaded-source] (rn/use-state nil)
on-source-loaded (rn/use-callback #(set-loaded-source %))]
(if platform/ios?
[rn/image props]
[:<>
[rn/image (assoc props :source loaded-source)]
[caching-image props on-source-loaded]])))
40 changes: 19 additions & 21 deletions src/quo/components/dropdowns/network_dropdown/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,23 @@
[quo.components.dropdowns.network-dropdown.style :as style]
[quo.components.list-items.preview-list.view :as preview-list]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]))
[react-native.core :as rn]))

(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/view
{:type :network
:list-size (count networks)
:size :size-20}
networks]])))

(def view (quo.theme/with-theme internal-view))
(defn view
[{:keys [on-press state] :as props} networks]
(let [theme (quo.theme/use-theme-value)
[pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))]
[rn/pressable
{:style (style/dropdown-container (merge props {:pressed? pressed? :theme theme}))
:accessibility-label :network-dropdown
:disabled (= state :disabled)
:on-press on-press
:on-press-in on-press-in
:on-press-out on-press-out}
[preview-list/view
{:type :network
:list-size (count networks)
:size :size-20}
networks]]))
28 changes: 13 additions & 15 deletions src/quo/components/graph/interactive_graph/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
(def initial-spacing 56)
(def end-spacing 22)
(def y-axis-label-width -33)
(def inspecting? (reagent/atom false))

(defn- pointer
[customization-color]
Expand All @@ -32,14 +31,9 @@
:pointer-color customization-color
:pointer-strip-enable-gradient true})

(defn- get-pointer-props
[pointer-props]
(let [pointer-index (.-pointerIndex ^js pointer-props)]
(reset! inspecting? (not= pointer-index -1))))

(defn- get-line-color
[state theme]
(if @inspecting?
[state theme inspecting?]
(if inspecting?
(colors/theme-colors colors/neutral-80-opa-40
colors/white-opa-20
theme)
Expand All @@ -51,11 +45,13 @@
colors/danger-60
theme))))

(defn- view-internal
[{:keys [data state customization-color theme reference-value reference-prefix decimal-separator]
(defn view
[{:keys [data state customization-color reference-value reference-prefix decimal-separator]
:or {reference-prefix "$"
decimal-separator :dot}}]
(let [data (if (> (count data) max-data-points)
(let [theme (quo.theme/use-theme-value)
[inspecting? set-inspecting] (rn/use-state false)
data (if (> (count data) max-data-points)
(utils/downsample-data data max-data-points)
data)
highest-value (utils/find-highest-value data)
Expand All @@ -64,7 +60,11 @@
max-value (- (utils/calculate-rounded-max highest-value) min-value)
step-value (/ max-value 4)
width (:width (rn/get-window))
line-color (get-line-color state theme)
line-color (get-line-color state theme inspecting?)
get-pointer-props (rn/use-callback
(fn [pointer-props]
(let [pointer-index (.-pointerIndex ^js pointer-props)]
(set-inspecting (not= pointer-index -1)))))
rules-color (colors/theme-colors colors/neutral-80-opa-10
colors/white-opa-5
theme)
Expand Down Expand Up @@ -119,7 +119,7 @@
:show-strip-on-focus true
:reference-line-1-config {:color rules-color}
:reference-line-1-position 0
:show-reference-line-2 (and (not @inspecting?)
:show-reference-line-2 (and (not inspecting?)
(<= reference-value highest-value)
(>= reference-value lowest-value))
:reference-line-2-config {:color y-axis-label-text-color
Expand All @@ -138,5 +138,3 @@
:x-axis-label-text-style (style/x-axis-label-text (/ width (count x-axis-label-texts))
y-axis-label-text-color)
:x-axis-label-texts x-axis-label-texts}]]))

(def view (quo.theme/with-theme view-internal))
33 changes: 14 additions & 19 deletions src/quo/components/inputs/address_input/component_spec.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
(h/fire-event :on-focus (h/get-by-label-text :address-text-input))
(h/has-prop (h/get-by-label-text :address-text-input)
:placeholder-text-color
colors/neutral-40)))
colors/neutral-30)))

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

(h/test "scanned value is properly set"
(let [on-change-text (h/mock-fn)
scanned-value "scanned-value"]
(h/test "default value is properly set"
(let [default-value "default-value"]
(with-redefs [clipboard/get-string #(% "")]
(h/render [address-input/address-input
{:scanned-value scanned-value
:on-change-text on-change-text
:ens-regex ens-regex}])
(-> (h/wait-for #(h/get-by-label-text :clear-button))
(.then (fn []
(h/was-called-with on-change-text scanned-value)
(h/has-prop (h/get-by-label-text :address-text-input)
:default-value
scanned-value)))))))
{:default-value default-value
:ens-regex ens-regex}])
(h/has-prop (h/get-by-label-text :address-text-input)
:value
default-value))))

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

(h/test "on blur with text and blur? false"
(with-redefs [clipboard/get-string #(% "")]
(h/render [address-input/address-input
{:scanned-value "scanned value"
{:default-value "default value"
:ens-regex ens-regex}])
(-> (h/wait-for #(h/get-by-label-text :clear-button))
(.then (fn []
Expand All @@ -71,7 +66,7 @@
(h/test "on blur with text blur? true"
(with-redefs [clipboard/get-string #(% "")]
(h/render [address-input/address-input
{:scanned-value "scanned value"
{:default-value "default value"
:blur? true
:ens-regex ens-regex}])
(-> (h/wait-for #(h/get-by-label-text :clear-button))
Expand Down Expand Up @@ -106,7 +101,7 @@
(let [on-clear (h/mock-fn)]
(with-redefs [clipboard/get-string #(% "")]
(h/render [address-input/address-input
{:scanned-value "scanned value"
{:default-value "default value"
:on-clear on-clear
:ens-regex ens-regex}])
(-> (h/wait-for #(h/get-by-label-text :clear-button))
Expand Down Expand Up @@ -148,7 +143,7 @@
(-> (h/wait-for #(h/get-by-label-text :clear-button))
(.then (fn []
(h/has-prop (h/get-by-label-text :address-text-input)
:default-value
:value
clipboard)))))))

(h/test "ENS loading state and call on-detect-ens"
Expand Down
Loading

0 comments on commit b7bffb3

Please sign in to comment.