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

migrate reagent part 7 (#19316)

This commit is contained in:
flexsurfer 2024-04-12 15:46:17 +02:00 committed by GitHub
parent 00b0755a73
commit e6b346ca32
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 354 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/quo/components/wallet/account_card/schema.cljs
View File

@ -4,7 +4,6 @@
[:map [:map
[:type {:optional true} [:enum :default :watch-only :add-account :empty :missing-keypair]] [:type {:optional true} [:enum :default :watch-only :add-account :empty :missing-keypair]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:theme :schema.common/theme]
[:metrics? {:optional true} [:maybe :boolean]] [:metrics? {:optional true} [:maybe :boolean]]
[:on-press {:optional true} [:maybe fn?]]]) [:on-press {:optional true} [:maybe fn?]]])

53
src/quo/components/wallet/account_card/view.cljs
View File

@ -11,7 +11,6 @@
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.linear-gradient :as linear-gradient] [react-native.linear-gradient :as linear-gradient]
[reagent.core :as reagent]
[schema.core :as schema])) [schema.core :as schema]))
(defn- loading-view (defn- loading-view
@ -96,13 +95,13 @@
:end {:x 1 :y 0}}]) :end {:x 1 :y 0}}])
(defn- user-account (defn- user-account
[_] [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics?
(let [pressed? (reagent/atom false) on-press]}]
on-press-in #(reset! pressed? true) (let [theme (quo.theme/use-theme-value)
on-press-out #(reset! pressed? false)] [pressed? set-pressed] (rn/use-state false)
(fn [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics? on-press-in (rn/use-callback #(set-pressed true))
theme on-press]}] on-press-out (rn/use-callback #(set-pressed false))
(let [watch-only? (= :watch-only type) watch-only? (= :watch-only type)
missing-keypair? (= :missing-keypair type)] missing-keypair? (= :missing-keypair type)]
(if loading? (if loading?
[loading-view [loading-view
@ -116,7 +115,7 @@
:style (style/card {:customization-color customization-color :style (style/card {:customization-color customization-color
:type type :type type
:theme theme :theme theme
:pressed? @pressed? :pressed? pressed?
:metrics? metrics?}) :metrics? metrics?})
:on-press on-press} :on-press on-press}
(when (and customization-color (and (not watch-only?) (not missing-keypair?))) (when (and customization-color (and (not watch-only?) (not missing-keypair?)))
@ -124,7 +123,7 @@
{:customization-color customization-color {:customization-color customization-color
:border-radius 16 :border-radius 16
:theme theme :theme theme
:pressed? @pressed?}]) :pressed? pressed?}])
[rn/view {:style style/profile-container} [rn/view {:style style/profile-container}
[rn/view {:style {:padding-bottom 2 :margin-right 2}} [rn/view {:style {:padding-bottom 2 :margin-right 2}}
[text/text {:style style/emoji} emoji]] [text/text {:style style/emoji} emoji]]
@ -152,31 +151,31 @@
(when (not= :empty type) (when (not= :empty type)
[metrics-info type theme amount])]) [metrics-info type theme amount])])
(when watch-only? (when watch-only?
[gradient-overview theme customization-color])]))))) [gradient-overview theme customization-color])])))
(defn- add-account-view (defn- add-account-view
[_] [{:keys [on-press customization-color metrics?]}]
(let [pressed? (reagent/atom false)] (let [theme (quo.theme/use-theme-value)
(fn [{:keys [on-press customization-color theme metrics?]}] [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 [rn/pressable
{:on-press on-press {:on-press on-press
:on-press-in #(reset! pressed? true) :on-press-in on-press-in
:on-press-out #(reset! pressed? false) :on-press-out on-press-out
:style (style/add-account-container {:theme theme :style (style/add-account-container {:theme theme
:metrics? metrics? :metrics? metrics?
:pressed? @pressed?})} :pressed? pressed?})}
[button/button [button/button
{:type :primary {:on-press on-press
:type :primary
:size 24 :size 24
:icon true :icon true
:accessibility-label :add-account :accessibility-label :add-account
:on-press on-press :pressed? pressed?
:pressed? @pressed? :icon-only? true
:on-press-in #(reset! pressed? true) :customization-color customization-color}
:on-press-out #(reset! pressed? false) :i/add]]))
:customization-color customization-color
:icon-only? true}
:i/add]])))
(defn- view-internal (defn- view-internal
[{:keys [type] :as props}] [{:keys [type] :as props}]
@ -185,6 +184,4 @@
:add-account [add-account-view props] :add-account [add-account-view props]
nil)) nil))
(def view (def view (schema/instrument #'view-internal component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))

4
src/quo/components/wallet/amount_input/schema.cljs
View File

@ -6,9 +6,7 @@
[:props [:props
[:map {:closed true} [:map {:closed true}
[:status {:optional true} [:maybe [:enum :default :error]]] [:status {:optional true} [:maybe [:enum :default :error]]]
[:theme :schema.common/theme] [:on-change-text {:optional true} [:maybe fn?]]
[:on-inc-press {:optional true} [:maybe fn?]]
[:on-dec-press {:optional true} [:maybe fn?]]
[:container-style {:optional true} [:maybe :map]] [:container-style {:optional true} [:maybe :map]]
[:min-value {:optional true} [:maybe :int]] [:min-value {:optional true} [:maybe :int]]
[:max-value {:optional true} [:maybe :int]] [:max-value {:optional true} [:maybe :int]]

11
src/quo/components/wallet/amount_input/view.cljs
View File

@ -4,7 +4,7 @@
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.components.wallet.amount-input.schema :as amount-input.schema] [quo.components.wallet.amount-input.schema :as amount-input.schema]
[quo.components.wallet.amount-input.style :as style] [quo.components.wallet.amount-input.style :as style]
[quo.theme :as quo.theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[schema.core :as schema])) [schema.core :as schema]))
@ -21,11 +21,12 @@
icon]) icon])
(defn- view-internal (defn- view-internal
[{:keys [on-inc-press on-dec-press theme status value min-value max-value [{:keys [on-inc-press on-dec-press status value min-value max-value
container-style] container-style]
:or {value 0 :or {value 0
min-value 0 min-value 0
max-value 999999999}}] max-value 999999999}}]
(let [theme (quo.theme/use-theme-value)]
[rn/view [rn/view
{:style (merge style/container container-style)} {:style (merge style/container container-style)}
[amount-button [amount-button
@ -48,8 +49,6 @@
:icon :i/add :icon :i/add
:accessibility-label :amount-input-inc-button :accessibility-label :amount-input-inc-button
:on-press on-inc-press :on-press on-inc-press
:disabled? (>= value max-value)}]]) :disabled? (>= value max-value)}]]))
(def view (def view (schema/instrument #'view-internal amount-input.schema/?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal amount-input.schema/?schema)))

9
src/quo/components/wallet/keypair/view.cljs
View File

@ -37,8 +37,9 @@
:border? true}])) :border? true}]))
(defn title-view (defn title-view
[{:keys [details action selected? type blur? customization-color on-options-press theme]}] [{:keys [details action selected? type blur? customization-color on-options-press]}]
(let [{:keys [full-name]} details] (let [theme (quo.theme/use-theme-value)
{:keys [full-name]} details]
[rn/view [rn/view
{:style style/title-container {:style style/title-container
:accessibility-label :title} :accessibility-label :title}
@ -89,7 +90,7 @@
[item & _rest] [item & _rest]
[account-list-card/view item]) [account-list-card/view item])
(defn- view-internal (defn view
[{:keys [accounts action container-style selected? on-press] :as props}] [{:keys [accounts action container-style selected? on-press] :as props}]
[rn/pressable [rn/pressable
{:style (style/container (merge props {:style (style/container (merge props
@ -108,5 +109,3 @@
:render-fn acc-list-card :render-fn acc-list-card
:separator [rn/view {:style {:height 8}}] :separator [rn/view {:style {:height 8}}]
:style {:padding-horizontal 8}}]]) :style {:padding-horizontal 8}}]])
(def view (quo.theme/with-theme view-internal))

3
src/quo/components/wallet/network_routing/schema.cljs
View File

@ -12,6 +12,5 @@
[:amount :int] [:amount :int]
[:max-amount :int] [:max-amount :int]
[:network-name [:or :string :keyword]]]]]] [:network-name [:or :string :keyword]]]]]]
[:container-style {:optional true} [:maybe :map]] [:container-style {:optional true} [:maybe :map]]]]]
[:theme :schema.common/theme]]]]
:any]) :any])

4
src/quo/components/wallet/network_routing/style.cljs
View File

@ -29,13 +29,13 @@
:background-color (colors/resolve-color network-name nil 10)}) :background-color (colors/resolve-color network-name nil 10)})
(defn network-bar (defn network-bar
[{:keys [max-width on-top? bar-division? theme] [{:keys [bar-max-width on-top? bar-division? theme]
{:keys [network-name translate-x-shared-value]} :bar} {:keys [network-name translate-x-shared-value]} :bar}
width-shared-value] width-shared-value]
(reanimated/apply-animations-to-style (reanimated/apply-animations-to-style
{:width width-shared-value {:width width-shared-value
:transform [{:translate-x translate-x-shared-value}]} :transform [{:translate-x translate-x-shared-value}]}
{:max-width max-width {:max-width bar-max-width
:flex-direction :row :flex-direction :row
:justify-content :flex-end :justify-content :flex-end
:background-color (colors/resolve-color network-name nil) :background-color (colors/resolve-color network-name nil)

206
src/quo/components/wallet/network_routing/view.cljs
View File

@ -8,7 +8,6 @@
[react-native.core :as rn] [react-native.core :as rn]
[react-native.gesture :as gesture] [react-native.gesture :as gesture]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[reagent.core :as reagent]
[schema.core :as schema] [schema.core :as schema]
[utils.number])) [utils.number]))
@ -22,39 +21,15 @@
(js/clearTimeout (k @timeouts)) (js/clearTimeout (k @timeouts))
(swap! timeouts assoc k (js/setTimeout exec-fn-and-remove-timeout ms)))) (swap! timeouts assoc k (js/setTimeout exec-fn-and-remove-timeout ms))))
(defn- f-slider (def get-gesture
[slider-shared-values] (memoize
[rn/view {:style style/slider-container} (fn
[reanimated/view {:style (style/slider slider-shared-values)}]]) [[detecting-gesture? slider-width-shared-value max-amount
slider-height-shared-value
(defn f-network-bar amount-shared-value amount-on-gesture-start width->amount
[_] slider-opacity-shared-value on-new-amount set-detecting-gesture]]
(let [detecting-gesture? (reagent/atom false)
amount-on-gesture-start (atom 0)]
(fn [{:keys [total-width total-amount on-press on-new-amount allow-press?]
{:keys [amount-shared-value
max-amount]} :bar
:as props}]
(let [slider-width-shared-value (reanimated/use-shared-value 4)
slider-height-shared-value (reanimated/use-shared-value 32)
slider-opacity-shared-value (reanimated/use-shared-value 0)
network-bar-shared-value (reanimated/interpolate amount-shared-value
[0 total-amount]
[0 total-width])
width->amount #(/ (* % total-amount) total-width)]
[rn/pressable
{:on-press (fn []
(when (and (not @detecting-gesture?) allow-press?)
(on-press)
(reset! detecting-gesture? true)
(animation/show-slider slider-opacity-shared-value)))}
[reanimated/view
{:style (style/network-bar props network-bar-shared-value)
:accessibility-label :network-routing-bar}
[gesture/gesture-detector
{:gesture
(-> (gesture/gesture-pan) (-> (gesture/gesture-pan)
(gesture/enabled @detecting-gesture?) (gesture/enabled detecting-gesture?)
(gesture/on-begin (gesture/on-begin
(fn [_] (fn [_]
(animation/increase-slider slider-width-shared-value slider-height-shared-value) (animation/increase-slider slider-width-shared-value slider-height-shared-value)
@ -71,11 +46,48 @@
(animation/decrease-slider slider-width-shared-value slider-height-shared-value) (animation/decrease-slider slider-width-shared-value slider-height-shared-value)
(animation/hide-slider slider-opacity-shared-value) (animation/hide-slider slider-opacity-shared-value)
(on-new-amount (reanimated/get-shared-value amount-shared-value)) (on-new-amount (reanimated/get-shared-value amount-shared-value))
(add-new-timeout :turn-off-gesture #(reset! detecting-gesture? false) 20))))} (add-new-timeout :turn-off-gesture #(set-detecting-gesture false) 20)))))))
[:f> f-slider
{:width-shared-value slider-width-shared-value (defn network-bar
[{:keys [total-width total-amount on-press on-new-amount allow-press?
bar-idx bar-width bar-max-width]
{:keys [amount-shared-value
max-amount]
:as bar} :bar
:as props}]
(let [[detecting-gesture?
set-detecting-gesture] (rn/use-state false)
amount-on-gesture-start (rn/use-ref-atom 0)
slider-width-shared-value (reanimated/use-shared-value 4)
slider-height-shared-value (reanimated/use-shared-value 32)
slider-opacity-shared-value (reanimated/use-shared-value 0)
network-bar-shared-value (reanimated/interpolate amount-shared-value
[0 total-amount]
[0 total-width])
width->amount #(/ (* % total-amount) total-width)
gesture (get-gesture
[detecting-gesture? slider-width-shared-value max-amount
slider-height-shared-value
amount-shared-value amount-on-gesture-start width->amount
slider-opacity-shared-value on-new-amount set-detecting-gesture])
on-press (rn/use-callback
(fn []
(when (and (not detecting-gesture?) allow-press?)
(on-press bar bar-idx bar-width bar-max-width)
(set-detecting-gesture true)
(animation/show-slider slider-opacity-shared-value)))
[detecting-gesture? allow-press? on-press])]
[rn/pressable
{:on-press on-press}
[reanimated/view
{:style (style/network-bar props network-bar-shared-value)
:accessibility-label :network-routing-bar}
[gesture/gesture-detector {:gesture gesture}
[rn/view {:style style/slider-container}
[reanimated/view
{:style (style/slider {:width-shared-value slider-width-shared-value
:height-shared-value slider-height-shared-value :height-shared-value slider-height-shared-value
:opacity-shared-value slider-opacity-shared-value}]]]])))) :opacity-shared-value slider-opacity-shared-value})}]]]]]))
(defn- add-bar-shared-values (defn- add-bar-shared-values
[{:keys [amount] :as network}] [{:keys [amount] :as network}]
@ -93,23 +105,51 @@
(interleave (repeat [rn/view {:style (style/dashed-line-line network-name)}]) (interleave (repeat [rn/view {:style (style/dashed-line-line network-name)}])
(repeat [rn/view {:style style/dashed-line-space}]))))) (repeat [rn/view {:style style/dashed-line-space}])))))
(defn f-network-routing-bars (defn- network-routing-bars
[_] [{:keys [networks total-width total-amount requesting-data? on-amount-selected]}]
(let [selected-network-idx (reagent/atom nil) (let [[selected-network-idx
press-locked? (reagent/atom false) set-selected-network-idx] (rn/use-state nil)
lock-press #(reset! press-locked? true) [press-locked?
unlock-press #(reset! press-locked? false) set-press-locked] (rn/use-state false)
reset-state-values #(reset! selected-network-idx nil)] lock-press (rn/use-callback #(set-press-locked true))
(fn [{:keys [networks total-width total-amount requesting-data? on-amount-selected]}] unlock-press (rn/use-callback #(set-press-locked false))
(let [bar-opacity-shared-value (reanimated/use-shared-value 0) reset-state-values (rn/use-callback #(set-selected-network-idx nil))
bar-opacity-shared-value (reanimated/use-shared-value 0)
network-bars (map add-bar-shared-values networks) network-bars (map add-bar-shared-values networks)
amount->width #(* % (/ total-width total-amount)) amount->width #(* % (/ total-width total-amount))
bars-widths-negative (map #(-> % get-negative-amount amount->width) bars-widths-negative (map #(-> % get-negative-amount amount->width)
network-bars) network-bars)
last-bar-idx (dec (count network-bars))] last-bar-idx (dec (count network-bars))
network-bar-on-press (rn/use-callback
(fn [bar bar-idx bar-width bar-max-width]
(when-not selected-network-idx
(let [[previous-bars
[_ & next-bars]] (split-at bar-idx network-bars)]
(animation/move-previous-bars
{:bars previous-bars
:bars-widths-negative bars-widths-negative})
(animation/move-pressed-bar
{:bar bar
:bars-widths-negative bars-widths-negative
:number-previous-bars bar-idx})
(animation/move-next-bars
{:bars next-bars
:bars-widths-negative bars-widths-negative
:number-previous-bars (inc bar-idx)
:extra-offset (max 0 (- bar-max-width bar-width))
:add-new-timeout add-new-timeout}))
(animation/show-max-limit-bar bar-opacity-shared-value)
(set-selected-network-idx bar-idx)))
[selected-network-idx bars-widths-negative network-bars])
on-new-amount (rn/use-callback
(fn [new-amount]
(animation/hide-max-limit-bar bar-opacity-shared-value)
(when on-amount-selected
(on-amount-selected new-amount selected-network-idx)))
[on-amount-selected selected-network-idx])]
(rn/use-effect (rn/use-effect
#(when (and (not requesting-data?) @selected-network-idx) #(when (and (not requesting-data?) selected-network-idx)
(let [bar (nth network-bars @selected-network-idx)] (let [bar (nth network-bars selected-network-idx)]
(animation/hide-pressed-bar bar amount->width)) (animation/hide-pressed-bar bar amount->width))
(animation/update-bar-values-and-reset-animations (animation/update-bar-values-and-reset-animations
{:new-network-values networks {:new-network-values networks
@ -127,44 +167,25 @@
bar-width (-> (:amount-shared-value bar) bar-width (-> (:amount-shared-value bar)
(reanimated/get-shared-value) (reanimated/get-shared-value)
(amount->width)) (amount->width))
hide-division? (or (= last-bar-idx bar-idx) @selected-network-idx) hide-division? (or (= last-bar-idx bar-idx) selected-network-idx)
this-bar-selected? (= @selected-network-idx bar-idx)]] this-bar-selected? (= selected-network-idx bar-idx)]]
^{:key (str "network-bar-" bar-idx)} ^{:key (str "network-bar-" bar-idx)}
[:f> f-network-bar [network-bar
{:bar bar {:bar bar
:max-width bar-max-width :bar-idx bar-idx
:bar-width bar-width
:bar-max-width bar-max-width
:total-width total-width :total-width total-width
:total-amount total-amount :total-amount total-amount
:bar-division? hide-division? :bar-division? hide-division?
:on-top? this-bar-selected? :on-top? this-bar-selected?
:allow-press? (and (or (not @selected-network-idx) this-bar-selected?) :allow-press? (and (or (not selected-network-idx) this-bar-selected?)
(not requesting-data?) (not requesting-data?)
(not @press-locked?)) (not press-locked?))
:on-press (fn [] :on-press network-bar-on-press
(when-not @selected-network-idx :on-new-amount on-new-amount}]))
(let [[previous-bars [_ & next-bars]] (split-at bar-idx network-bars)
number-previous-bars bar-idx]
(animation/move-previous-bars
{:bars previous-bars
:bars-widths-negative bars-widths-negative})
(animation/move-pressed-bar
{:bar bar
:bars-widths-negative bars-widths-negative
:number-previous-bars number-previous-bars})
(animation/move-next-bars
{:bars next-bars
:bars-widths-negative bars-widths-negative
:number-previous-bars (inc number-previous-bars)
:extra-offset (max 0 (- bar-max-width bar-width))
:add-new-timeout add-new-timeout}))
(animation/show-max-limit-bar bar-opacity-shared-value)
(reset! selected-network-idx bar-idx)))
:on-new-amount (fn [new-amount]
(animation/hide-max-limit-bar bar-opacity-shared-value)
(when on-amount-selected
(on-amount-selected new-amount @selected-network-idx)))}]))
(let [{:keys [max-amount network-name]} (some->> @selected-network-idx (let [{:keys [max-amount network-name]} (some->> selected-network-idx
(nth network-bars)) (nth network-bars))
limit-bar-width (amount->width max-amount)] limit-bar-width (amount->width max-amount)]
[reanimated/view [reanimated/view
@ -172,22 +193,25 @@
{:opacity-shared-value bar-opacity-shared-value {:opacity-shared-value bar-opacity-shared-value
:width limit-bar-width})} :width limit-bar-width})}
[rn/view {:style (style/max-limit-bar-background network-name)}] [rn/view {:style (style/max-limit-bar-background network-name)}]
[dashed-line network-name]])])))) [dashed-line network-name]])]))
(defn view-internal (defn view-internal
[{:keys [networks container-style theme] :as params}] [{:keys [networks container-style] :as params}]
(reagent/with-let [total-width (reagent/atom nil)] (let [theme (quo.theme/use-theme-value)
[total-width
set-total-width] (rn/use-state nil)
on-layout (rn/use-callback #(let [width (oops/oget % "nativeEvent.layout.width")]
(when (not= width total-width)
(set-total-width width))))]
(rn/use-unmount (fn []
(doseq [[_ living-timeout] @timeouts]
(js/clearTimeout living-timeout))))
[rn/view [rn/view
{:accessibility-label :network-routing {:accessibility-label :network-routing
:style (style/container container-style theme) :style (style/container container-style theme)
:on-layout #(reset! total-width (oops/oget % "nativeEvent.layout.width"))} :on-layout on-layout}
(when @total-width (when total-width
^{:key (str "network-routing-" (count networks))} ^{:key (str "network-routing-" (count networks))}
[:f> f-network-routing-bars (assoc params :total-width @total-width)])] [network-routing-bars (assoc params :total-width total-width)])]))
(finally
(doseq [[_ living-timeout] @timeouts]
(js/clearTimeout living-timeout)))))
(def view (def view (schema/instrument #'view-internal network-routing-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal network-routing-schema/?schema)))

3
src/quo/components/wallet/token_input/schema.cljs
View File

@ -14,6 +14,5 @@
[:networks {:optional true} [:networks {:optional true}
[:maybe [:sequential [:map [:source [:maybe :schema.common/image-source]]]]]] [:maybe [:sequential [:map [:source [:maybe :schema.common/image-source]]]]]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:value {:optional true} [:maybe :string]] [:value {:optional true} [:maybe :string]]]]]
[:theme :schema.common/theme]]]]
:any]) :any])

42
src/quo/components/wallet/token_input/view.cljs
View File

@ -12,7 +12,6 @@
[quo.foundations.common :as common] [quo.foundations.common :as common]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema])) [schema.core :as schema]))
(defn fiat-format (defn fiat-format
@ -75,7 +74,8 @@
[token-name-text theme text]]) [token-name-text theme text]])
(defn input-section (defn input-section
[{:keys [on-change-text value value-atom on-selection-change on-token-press]}] [{:keys [on-change-text value value-internal set-value-internal on-selection-change
on-token-press]}]
(let [input-ref (atom nil) (let [input-ref (atom nil)
set-ref #(reset! input-ref %) set-ref #(reset! input-ref %)
focus-input #(when-let [ref ^js @input-ref] focus-input #(when-let [ref ^js @input-ref]
@ -83,7 +83,7 @@
controlled-input? (some? value) controlled-input? (some? value)
handle-on-change-text (fn [v] handle-on-change-text (fn [v]
(when-not controlled-input? (when-not controlled-input?
(reset! value-atom v)) (set-value-internal v))
(when on-change-text (when on-change-text
(on-change-text v))) (on-change-text v)))
handle-selection-change (fn [^js e] handle-selection-change (fn [^js e]
@ -117,27 +117,30 @@
:on-selection-change handle-selection-change :on-selection-change handle-selection-change
:selection (clj->js selection)} :selection (clj->js selection)}
controlled-input? (assoc :value value) controlled-input? (assoc :value value)
(not controlled-input?) (assoc :default-value @value-atom))]] (not controlled-input?) (assoc :default-value value-internal))]]
[token-label [token-label
{:theme theme {:theme theme
:text (if crypto? token currency) :text (if crypto? token currency)
:value (if controlled-input? value @value-atom)}]]))) :value (if controlled-input? value value-internal)}]])))
(defn- view-internal (defn- view-internal
[] [{:keys [container-style value on-swap] :as props}]
(let [width (:width (rn/get-window)) (let [theme (quo.theme/use-theme-value)
value-atom (reagent/atom nil) width (:width (rn/get-window))
crypto? (reagent/atom true)] [value-internal set-value-internal] (rn/use-state nil)
(fn [{:keys [theme container-style value on-swap] :as props}] [crypto? set-crypto] (rn/use-state true)
(let [handle-on-swap (fn [] handle-on-swap (rn/use-callback
(swap! crypto? not) (fn []
(when on-swap (on-swap @crypto?)))] (set-crypto (not crypto?))
(when on-swap (on-swap (not crypto?))))
[crypto? on-swap])]
[rn/view {:style (merge (style/main-container width) container-style)} [rn/view {:style (merge (style/main-container width) container-style)}
[rn/view {:style style/amount-container} [rn/view {:style style/amount-container}
[input-section [input-section
(assoc props (assoc props
:value-atom value-atom :value-internal value-internal
:crypto? @crypto?)] :set-value-internal set-value-internal
:crypto? crypto?)]
[button/button [button/button
{:icon true {:icon true
:icon-only? true :icon-only? true
@ -149,9 +152,8 @@
[divider-line/view {:container-style (style/divider theme)}] [divider-line/view {:container-style (style/divider theme)}]
[data-info [data-info
(assoc props (assoc props
:crypto? @crypto? :theme theme
:amount (or value @value-atom))]])))) :crypto? crypto?
:amount (or value value-internal))]]))
(def view (def view (schema/instrument #'view-internal component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))

1
src/quo/components/wallet/wallet_activity/schema.cljs
View File

@ -13,7 +13,6 @@
[:blur? {:optional true} [:maybe :boolean]] [:blur? {:optional true} [:maybe :boolean]]
[:on-press {:optional true} [:maybe fn?]] [:on-press {:optional true} [:maybe fn?]]
[:state {:optional true} [:maybe [:= :disabled]]] [:state {:optional true} [:maybe [:= :disabled]]]
[:theme :schema.common/theme]
[:second-tag-prefix {:optional true} [:maybe :keyword]] [:second-tag-prefix {:optional true} [:maybe :keyword]]
[:third-tag-prefix {:optional true} [:maybe :keyword]] [:third-tag-prefix {:optional true} [:maybe :keyword]]
[:fourth-tag-prefix {:optional true} [:maybe :keyword]] [:fourth-tag-prefix {:optional true} [:maybe :keyword]]

25
src/quo/components/wallet/wallet_activity/view.cljs
View File

@ -8,7 +8,6 @@
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.hole-view :as hole-view] [react-native.hole-view :as hole-view]
[reagent.core :as reagent]
[schema.core :as schema] [schema.core :as schema]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
@ -100,23 +99,23 @@
[context-tag/view (merge props {:size 24 :blur? blur?})]]) [context-tag/view (merge props {:size 24 :blur? blur?})]])
(defn- view-internal (defn- view-internal
[_] [{:keys [state blur? first-tag second-tag third-tag fourth-tag on-press
(let [pressed? (reagent/atom false)]
(fn
[{:keys [state theme blur?
on-press
first-tag second-tag third-tag fourth-tag
second-tag-prefix third-tag-prefix fourth-tag-prefix] second-tag-prefix third-tag-prefix fourth-tag-prefix]
:as props}] :as props}]
(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 [rn/pressable
{:style (style/wallet-activity-container {:pressed? @pressed? {:style (style/wallet-activity-container {:pressed? pressed?
:theme theme :theme theme
:blur? blur?}) :blur? blur?})
:accessibility-label :wallet-activity :accessibility-label :wallet-activity
:disabled (= state :disabled) :disabled (= state :disabled)
:on-press on-press :on-press on-press
:on-press-in (fn [] (reset! pressed? true)) :on-press-in on-press-in
:on-press-out (fn [] (reset! pressed? false))} :on-press-out on-press-out}
[rn/view [rn/view
{:style {:flex-direction :row}} {:style {:flex-direction :row}}
[transaction-icon-view props] [transaction-icon-view props]
@ -131,8 +130,6 @@
(when third-tag-prefix [prop-text third-tag-prefix theme]) (when third-tag-prefix [prop-text third-tag-prefix theme])
(when third-tag [prop-tag third-tag blur?]) (when third-tag [prop-tag third-tag blur?])
(when fourth-tag-prefix [prop-text fourth-tag-prefix theme]) (when fourth-tag-prefix [prop-text fourth-tag-prefix theme])
(when fourth-tag [prop-tag fourth-tag blur?])]]]]))) (when fourth-tag [prop-tag fourth-tag blur?])]]]]))
(def view (def view (schema/instrument #'view-internal component-schema/?schema))
(quo.theme/with-theme
(schema/instrument #'view-internal component-schema/?schema)))