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>
This commit is contained in:
Mohamed Javid 2024-02-10 00:09:15 +05:30 committed by GitHub
parent 9dacc9e8af
commit d1f22cd2b8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 81 additions and 78 deletions

View File

@ -7,7 +7,6 @@
[quo.components.tags.context-tag.view :as context-tag] [quo.components.tags.context-tag.view :as context-tag]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.blur :as blur]
[react-native.core :as rn] [react-native.core :as rn]
[schema.core :as schema] [schema.core :as schema]
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
@ -41,65 +40,57 @@
(defn- view-internal (defn- view-internal
[{:keys [actions description description-text error-message role button-one-label button-two-label [{: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? 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 [text/text
{:size :paragraph-2 {: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 (def view
(quo.theme/with-theme (quo.theme/with-theme

View File

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

View File

@ -6,18 +6,19 @@
[react-native.core :as rn])) [react-native.core :as rn]))
(defn keyboard-item (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 [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]) item])
(defn- view-internal (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] container-style]
:or {left-action :none}}] :or {left-action :none}}]
[rn/view [rn/view
@ -62,12 +63,13 @@
:theme theme}] :theme theme}]
(if delete-key? (if delete-key?
[keyboard-item [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])]])) [keyboard-item])]]))
(def view (quo.theme/with-theme view-internal)) (def view (quo.theme/with-theme view-internal))

View File

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

View File

@ -155,6 +155,12 @@
(swap! input-value delete-from-string start) (swap! input-value delete-from-string start)
(move-input-cursor input-selection (dec start))) (move-input-cursor input-selection (dec start)))
(reagent/flush)))) (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] handle-on-change (fn [v current-limit-amount]
(when (valid-input? @input-value v) (when (valid-input? @input-value v)
(let [num-value (or (parse-double v) 0)] (let [num-value (or (parse-double v) 0)]
@ -287,11 +293,12 @@
:on-press on-confirm :on-press on-confirm
:customization-color color}}] :customization-color color}}]
[quo/numbered-keyboard [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 (defn- view-internal
[props] [props]