Wallet - Clear input on long press delete (#18732)

This commit allows clearing the amount input (in the send flow) by long-pressing the delete key.

---------

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

src/quo/components/drawers/bottom_actions/view.cljs

@@ -7,7 +7,6 @@
     [quo.components.tags.context-tag.view :as context-tag]
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
-    [react-native.blur :as blur]
     [react-native.core :as rn]
     [schema.core :as schema]
     [utils.i18n :as i18n]))
@@ -41,65 +40,57 @@
 (defn- view-internal
   [{:keys [actions description description-text error-message role button-one-label button-two-label
            blur? button-one-props button-two-props theme scroll? container-style]}]
-  [blur/view
+  [rn/view
-   {:blur-amount   20
+   {:style (merge (style/container scroll? blur? theme) container-style)}
-    :blur-type     :transparent
+   (when (= description :top-error)
-    :overlay-color (if blur?
+     [rn/view {:style style/error-message}
-                     colors/neutral-80-opa-1-blur
+      [icon/icon
-                     (colors/theme-colors colors/white-70-blur
+       :i/alert
-                                          colors/neutral-95-opa-70-blur
+       {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)
-                                          theme))}
+        :size  16}]
-   [rn/view
-    {:style (merge (style/container scroll? blur? theme) container-style)}
-    (when (= description :top-error)
-      [rn/view {:style style/error-message}
-       [icon/icon
-        :i/alert
-        {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)
-         :size  16}]
-       [text/text
-        {:size  :paragraph-2
-         :style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
-        error-message]])
-
-    (when (= description :top)
-      [rn/view
-       {:style style/description-top}
-       [text/text
-        {:size  :paragraph-2
-         :style (style/description-top-text scroll? blur? theme)}
-        (i18n/label :t/eligible-to-join-as)]
-       [context-tag/view
-        {:type    :icon
-         :size    24
-         :icon    (role role-icon)
-         :blur?   blur?
-         :context (i18n/label (keyword "t" role))}]])
-
-    [rn/view {:style style/buttons-container}
-     (when (= actions :two-actions)
-       [button/button
-        (merge
-         {:size                40
-          :background          (when (or blur? scroll?) :blur)
-          :container-style     style/button-container
-          :theme               theme
-          :accessibility-label :button-two}
-         button-two-props)
-        button-two-label])
-     [button/button
-      (merge
-       {:size                40
-        :container-style     style/button-container
-        :background          (when (or blur? scroll?) :blur)
-        :theme               theme
-        :accessibility-label :button-one}
-       button-one-props)
-      button-one-label]]
-    (when (= description :bottom)
       [text/text
        {:size  :paragraph-2
-        :style (style/description-bottom scroll? blur? theme)} description-text])]])
+        :style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
+       error-message]])
+
+   (when (= description :top)
+     [rn/view
+      {:style style/description-top}
+      [text/text
+       {:size  :paragraph-2
+        :style (style/description-top-text scroll? blur? theme)}
+       (i18n/label :t/eligible-to-join-as)]
+      [context-tag/view
+       {:type    :icon
+        :size    24
+        :icon    (role role-icon)
+        :blur?   blur?
+        :context (i18n/label (keyword "t" role))}]])
+
+   [rn/view {:style style/buttons-container}
+    (when (= actions :two-actions)
+      [button/button
+       (merge
+        {:size                40
+         :background          (when (or blur? scroll?) :blur)
+         :container-style     style/button-container
+         :theme               theme
+         :accessibility-label :button-two}
+        button-two-props)
+       button-two-label])
+    [button/button
+     (merge
+      {:size                40
+       :container-style     style/button-container
+       :background          (when (or blur? scroll?) :blur)
+       :theme               theme
+       :accessibility-label :button-one}
+      button-one-props)
+     button-one-label]]
+   (when (= description :bottom)
+     [text/text
+      {:size  :paragraph-2
+       :style (style/description-bottom scroll? blur? theme)} description-text])])
 
 (def view
   (quo.theme/with-theme

src/quo/components/numbered_keyboard/keyboard_key/view.cljs

@@ -15,7 +15,7 @@
 (defn- view-internal
   []
   (let [pressed? (reagent/atom false)]
-    (fn [{:keys [disabled? theme blur? on-press type]} label]
+    (fn [{:keys [disabled? theme blur? on-press on-long-press type]} label]
       (let [label-color      (style/get-label-color disabled? theme blur?)
             background-color (style/toggle-background-color @pressed? blur? theme)]
         [rn/pressable
@@ -24,6 +24,9 @@
           :on-press                (fn []
                                      (when on-press
                                        (on-press label)))
+          :on-long-press           (fn []
+                                     (when (fn? on-long-press)
+                                       (on-long-press label)))
           :allow-multiple-presses? true
           :on-press-in             #(reset! pressed? true)
           :on-press-out            #(reset! pressed? false)

src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs

@@ -6,18 +6,19 @@
     [react-native.core :as rn]))
 
 (defn keyboard-item
-  [{:keys [item type disabled? on-press blur? theme]}]
+  [{:keys [item type disabled? on-press on-long-press blur? theme]}]
   [keyboard-key/view
-   {:disabled? disabled?
+   {:disabled?     disabled?
-    :on-press  on-press
+    :on-press      on-press
-    :blur?     blur?
+    :on-long-press on-long-press
-    :theme     theme
+    :blur?         blur?
-    :type      type}
+    :theme         theme
+    :type          type}
    item])
 
 (defn- view-internal
   []
-  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete
+  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete on-long-press-delete
                container-style]
         :or   {left-action :none}}]
     [rn/view
@@ -62,12 +63,13 @@
         :theme     theme}]
       (if delete-key?
         [keyboard-item
-         {:item      :i/backspace
+         {:item          :i/backspace
-          :type      :key
+          :type          :key
-          :disabled? disabled?
+          :disabled?     disabled?
-          :on-press  on-delete
+          :on-press      on-delete
-          :blur?     blur?
+          :on-long-press on-long-press-delete
-          :theme     theme}]
+          :blur?         blur?
+          :theme         theme}]
         [keyboard-item])]]))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im/contexts/communities/actions/addresses_for_permissions/events_test.cljs

@@ -1,6 +1,6 @@
 (ns status-im.contexts.communities.actions.addresses-for-permissions.events-test
   (:require
-    [cljs.test :refer [is deftest]]
+    [cljs.test :refer [deftest is]]
     [status-im.contexts.communities.actions.addresses-for-permissions.events :as sut]))
 
 (def community-id "0x1")

src/status_im/contexts/wallet/send/input_amount/view.cljs

@@ -155,6 +155,12 @@
                                       (swap! input-value delete-from-string start)
                                       (move-input-cursor input-selection (dec start)))
                                     (reagent/flush))))
+        on-long-press-delete  (fn [loading-routes?]
+                                (when-not loading-routes?
+                                  (reset! input-value "")
+                                  (reset! input-error false)
+                                  (move-input-cursor input-selection 0)
+                                  (reagent/flush)))
         handle-on-change      (fn [v current-limit-amount]
                                 (when (valid-input? @input-value v)
                                   (let [num-value (or (parse-double v) 0)]
@@ -287,11 +293,12 @@
                               :on-press            on-confirm
                               :customization-color color}}]
          [quo/numbered-keyboard
-          {:container-style (style/keyboard-container bottom)
+          {:container-style      (style/keyboard-container bottom)
-           :left-action     :dot
+           :left-action          :dot
-           :delete-key?     true
+           :delete-key?          true
-           :on-press        #(handle-keyboard-press % loading-routes? current-limit)
+           :on-press             #(handle-keyboard-press % loading-routes? current-limit)
-           :on-delete       #(handle-delete loading-routes? current-limit)}]]))))
+           :on-delete            #(handle-delete loading-routes? current-limit)
+           :on-long-press-delete #(on-long-press-delete loading-routes?)}]]))))
 
 (defn- view-internal
   [props]