feat: quo2 implement amount input component

src/quo/components/wallet/amount_input/component_spec.cljs

@@ -0,0 +1,43 @@
+(ns quo.components.wallet.amount-input.component-spec
+  (:require
+    [oops.core :as oops]
+    [quo.components.wallet.amount-input.view :as amount-input]
+    [quo.foundations.colors :as colors]
+    [test-helpers.component :as h]))
+
+(defn- render
+  [component]
+  (h/render-with-theme-provider component :light))
+
+(h/describe "Amount input component"
+  (h/test "Renders with default value"
+    (let [text-expected 0]
+      (render [amount-input/view {:init-value text-expected}])
+      (h/is-truthy (h/query-by-label-text :amount-input))
+      (h/is-equal (oops/oget (h/get-by-label-text :amount-input) "props" "value")
+                  (str text-expected))))
+
+  (h/test "When the value = minimum dec button is disabled"
+    (render [amount-input/view
+             {:init-value 0
+              :min-value  0}])
+    (h/is-truthy
+     (oops/oget (h/get-by-label-text :amount-input-dec-button) "props" "accessibilityState" "disabled")))
+
+  (h/test "When the value = maximum inc button is disabled"
+    (render [amount-input/view
+             {:init-value 100
+              :max-value  100}])
+    (h/is-truthy
+     (oops/oget (h/get-by-label-text :amount-input-inc-button) "props" "accessibilityState" "disabled")))
+
+  (h/test "Renders the error state"
+    (render [amount-input/view {:status :error}])
+    (h/is-equal (colors/resolve-color :danger :light)
+                (oops/oget (h/get-by-label-text :amount-input) "props" "style" "color")))
+
+  (h/test "on-change-text function is fired"
+    (let [on-change-text (h/mock-fn)]
+      (render [amount-input/view {:on-change-text on-change-text}])
+      (h/fire-event :change-text (h/get-by-label-text :amount-input) "100")
+      (h/was-called on-change-text))))

src/quo/components/wallet/amount_input/schema.cljs

@@ -0,0 +1,17 @@
+(ns quo.components.wallet.amount-input.schema)
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:status {:optional true} [:enum :default :error]]
+      [:theme :schema.common/theme]
+      [:on-change-text {:optional true} [:maybe fn?]]
+      [:container-style {:optional true} [:maybe :map]]
+      [:auto-focus {:optional true} [:maybe :boolean]]
+      [:min-value {:optional true} [:maybe :int]]
+      [:max-value {:optional true} [:maybe :int]]
+      [:return-key-type {:optional true} [:maybe :keyword]]
+      [:init-value {:optional true} [:maybe :int]]]]]
+   :any])

src/quo/components/wallet/amount_input/style.cljs

@@ -0,0 +1,17 @@
+(ns quo.components.wallet.amount-input.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(def container
+  {:flex-direction  :row
+   :justify-content :center
+   :align-items     :center})
+
+(def input-container {:flex 1})
+
+(defn input-text
+  [theme type]
+  {:padding 0
+   :color   (if (= type :error)
+              (colors/resolve-color :danger theme)
+              (colors/theme-colors colors/neutral-100 colors/white theme))})

src/quo/components/wallet/amount_input/view.cljs

@@ -0,0 +1,85 @@
+(ns quo.components.wallet.amount-input.view
+  (:require
+    [quo.components.buttons.button.view :as button]
+    [quo.components.markdown.text :as text]
+    [quo.components.wallet.amount-input.schema :as amount-input.schema]
+    [quo.components.wallet.amount-input.style :as style]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [schema.core :as schema]))
+
+(defn- amount-button
+  [{:keys [theme accessibility-label disabled? icon on-press]}]
+  [button/button
+   {:icon-only?          true
+    :theme               theme
+    :disabled?           disabled?
+    :type                :outline
+    :accessibility-label accessibility-label
+    :size                32
+    :on-press            on-press}
+   icon])
+
+(defn- process-amount
+  [input-value min-value max-value]
+  (let [parsed-input-value (parse-double input-value)]
+    (cond
+      (nil? parsed-input-value)  min-value
+      (>= input-value max-value) max-value
+      (<= input-value min-value) min-value
+      :else                      parsed-input-value)))
+
+(defn- view-internal
+  [{:keys [on-change-text
+           auto-focus
+           init-value
+           return-key-type
+           container-style]
+    :or   {auto-focus      false
+           init-value      0
+           return-key-type :done}}]
+  (let [value (reagent/atom init-value)]
+    (fn [{:keys [theme status min-value max-value]
+          :or   {status    :default
+                 min-value 0
+                 max-value 999999999}}]
+      [rn/view
+       {:style (merge style/container container-style)}
+       [amount-button
+        {:theme               theme
+         :accessibility-label :amount-input-dec-button
+         :icon                :i/remove
+         :on-press            #(swap! value dec)
+         :disabled?           (>= min-value @value)}]
+       [rn/view {:style style/input-container}
+        [rn/text-input
+         {:style
+          (text/text-style
+           {:size   :heading-1
+            :weight :semi-bold
+            :align  :center
+            :style  (style/input-text theme status)})
+          :accessibility-label :amount-input
+          :editable true
+          :auto-focus auto-focus
+          :value (str @value)
+          :keyboard-appearance (quo.theme/theme-value :light :dark theme)
+          :return-key-type return-key-type
+          :input-mode :numeric
+          :on-change-text (fn [input-value]
+                            (let [processed-amount (process-amount input-value min-value max-value)]
+                              (reset! value processed-amount)
+                              (when on-change-text
+                                (on-change-text processed-amount))
+                              (reagent/flush)))}]] ;; Fixes the input flickering issue when typing
+       [amount-button
+        {:theme               theme
+         :icon                :i/add
+         :accessibility-label :amount-input-inc-button
+         :on-press            #(swap! value inc)
+         :disabled?           (>= @value max-value)}]])))
+
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal amount-input.schema/?schema)))

src/quo/core.cljs

@@ -155,6 +155,7 @@
     quo.components.wallet.account-overview.view
     quo.components.wallet.account-permissions.view
     quo.components.wallet.address-text.view
+    quo.components.wallet.amount-input.view
     quo.components.wallet.confirmation-progress.view
     quo.components.wallet.keypair.view
     quo.components.wallet.network-amount.view
@@ -412,6 +413,7 @@
 (def account-overview quo.components.wallet.account-overview.view/view)
 (def account-permissions quo.components.wallet.account-permissions.view/view)
 (def address-text quo.components.wallet.address-text.view/view)
+(def amount-input quo.components.wallet.amount-input.view/view)
 (def confirmation-propgress quo.components.wallet.confirmation-progress.view/view)
 (def keypair quo.components.wallet.keypair.view/view)
 (def network-amount quo.components.wallet.network-amount.view/view)

src/quo/core_spec.cljs

@@ -89,6 +89,7 @@
     quo.components.wallet.account-origin.component-spec
     quo.components.wallet.account-overview.component-spec
     quo.components.wallet.account-permissions.component-spec
+    quo.components.wallet.amount-input.component-spec
     quo.components.wallet.confirmation-progress.component-spec
     quo.components.wallet.keypair.component-spec
     quo.components.wallet.network-amount.component-spec

src/status_im/contexts/preview/quo/main.cljs

@@ -177,6 +177,7 @@
     [status-im.contexts.preview.quo.wallet.account-overview :as
      account-overview]
     [status-im.contexts.preview.quo.wallet.account-permissions :as account-permissions]
+    [status-im.contexts.preview.quo.wallet.amount-input :as amount-input]
     [status-im.contexts.preview.quo.wallet.confirmation-progress :as
      confirmation-progress]
     [status-im.contexts.preview.quo.wallet.keypair :as keypair]
@@ -490,6 +491,8 @@
                         :component account-overview/view}
                        {:name      :account-permissions
                         :component account-permissions/view}
+                       {:name      :amount-input
+                        :component amount-input/view}
                        {:name      :confirmation-progress
                         :component confirmation-progress/view}
                        {:name :keypair :component keypair/view}

src/status_im/contexts/preview/quo/wallet/amount_input.cljs

@@ -0,0 +1,29 @@
+(ns status-im.contexts.preview.quo.wallet.amount-input
+  (:require
+    [quo.core :as quo]
+    [reagent.core :as reagent]
+    [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:key  :max-value
+    :type :number}
+   {:key  :min-value
+    :type :number}
+   {:key  :init-value
+    :type :number}
+   {:type    :select
+    :key     :status
+    :options [{:key :default}
+              {:key :error}]}])
+
+(defn view
+  []
+  (let [state (reagent/atom {:max-value  10000
+                             :min-value  0
+                             :init-value 1
+                             :status     :default})]
+    (fn []
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [quo/amount-input @state]])))