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

Reuse controlled input logic in collectibles sending page (#20146) 

* reuse controlled input logic for sending collectibles
This commit is contained in:
Volodymyr Kozieiev 2024-06-06 17:34:52 +01:00 committed by GitHub
parent d7530dfbee
commit f1310c7e6c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 62 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/status_im/common/controlled_input/utils.cljs
View File

@ -5,7 +5,8 @@
(def init-state
{:value ""
:error? false
:upper-limit nil})
:upper-limit nil
:lower-limit nil})
(defn input-value
[state]
@ -23,19 +24,31 @@
[state error?]
(assoc state :error? error?))
(defn- upper-limit
(defn upper-limit
[state]
(:upper-limit state))
(defn lower-limit
[state]
(:lower-limit state))
(defn upper-limit-exceeded?
[state]
(and
(upper-limit state)
(> (numeric-value state) (upper-limit state))))
(defn lower-limit-exceeded?
[state]
(and
(lower-limit state)
(< (numeric-value state) (lower-limit state))))
(defn- recheck-errorness
[state]
(set-input-error state (upper-limit-exceeded? state)))
(set-input-error state
(or (upper-limit-exceeded? state)
(lower-limit-exceeded? state))))
(defn set-input-value
[state value]
@ -43,12 +56,33 @@
(assoc :value value)
recheck-errorness))
(defn set-numeric-value
[state value]
(set-input-value state (str value)))
(defn set-upper-limit
[state limit]
(when limit
(-> state
(assoc :upper-limit limit)
recheck-errorness)))
(defn set-lower-limit
[state limit]
(-> state
(assoc :upper-limit limit)
(assoc :lower-limit limit)
recheck-errorness))
(defn increase
[state]
(let [new-val (inc (numeric-value state))]
(set-input-value state (str new-val))))
(defn decrease
[state]
(let [new-val (dec (numeric-value state))]
(set-input-value state (str new-val))))
(def ^:private not-digits-or-dot-pattern
#"[^0-9+\.]")

3
src/status_im/contexts/wallet/collectible/utils.cljs
View File

@ -17,7 +17,8 @@
"image/gif"
"image/bmp"
"image/png"
"image/webp"})
"image/webp"
"image/avif"})
(defn supported-file?
[collectible-type]

46
src/status_im/contexts/wallet/send/select_collectible_amount/view.cljs
View File

@ -2,6 +2,7 @@
(:require
[quo.core :as quo]
[react-native.core :as rn]
[status-im.common.controlled-input.utils :as controlled-input]
[status-im.contexts.wallet.collectible.utils :as utils]
[status-im.contexts.wallet.common.account-switcher.view :as account-switcher]
[status-im.contexts.wallet.send.select-collectible-amount.style :as style]
@ -11,24 +12,23 @@
(defn view
[]
(let [on-close (rn/use-callback #(rf/dispatch [:navigate-back]))
[value set-value] (rn/use-state 1)
inc-value (rn/use-callback (fn [] (set-value (inc value)))
[value])
dec-value (rn/use-callback (fn [] (set-value (dec value)))
[value])
add-digit (rn/use-callback (fn [digit]
(set-value (+ (js/parseInt digit)
(* value 10))))
[value])
delete-digit (rn/use-callback (fn []
(set-value (Math/floor (/ value 10))))
[value])
send-transaction-data (rf/sub [:wallet/wallet-send])
collectible (:collectible send-transaction-data)
balance (utils/collectible-balance collectible)
[value set-value] (rn/use-state (-> controlled-input/init-state
(controlled-input/set-numeric-value 1)
(controlled-input/set-lower-limit 1)))
preview-uri (get-in collectible [:preview-url :uri])
incorrect-value? (or (< value 1) (> value balance))]
incorrect-value? (controlled-input/input-error value)
increase-value (rn/use-callback #(set-value controlled-input/increase))
decrease-value (rn/use-callback #(set-value controlled-input/decrease))
delete-character (rn/use-callback #(set-value controlled-input/delete-last))
add-character (rn/use-callback (fn [c]
(set-value #(controlled-input/add-character % c))))]
(rn/use-effect
(fn []
(set-value #(controlled-input/set-upper-limit % balance)))
[balance])
[rn/view
[account-switcher/view
{:icon-name :i/arrow-left
@ -44,13 +44,12 @@
{:title (i18n/label :t/max {:number balance})
:status (if incorrect-value? :error :default)
:container-style style/network-tags-container}]
[quo/amount-input
{:max-value (if (integer? balance) balance 0)
:min-value 1
:value value
:on-inc-press inc-value
:on-dec-press dec-value
{:max-value (controlled-input/upper-limit value)
:min-value (controlled-input/lower-limit value)
:value (controlled-input/numeric-value value)
:on-inc-press increase-value
:on-dec-press decrease-value
:container-style style/amount-input-container
:status (if incorrect-value? :error :default)}]
[quo/bottom-actions
@ -58,12 +57,11 @@
:button-one-props {:on-press #(rf/dispatch
[:wallet/set-collectible-amount-to-send
{:stack-id :screen/wallet.select-collectible-amount
:amount value}])
:amount (controlled-input/numeric-value value)}])
:disabled? incorrect-value?}
:button-one-label (i18n/label :t/confirm)}]
[quo/numbered-keyboard
{:left-action :none
:delete-key? true
:on-press add-digit
:on-delete delete-digit}]]))
:on-press add-character
:on-delete delete-character}]]))