From d1f22cd2b8535af09e9ceba991798c68f8d31489 Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Sat, 10 Feb 2024 00:09:15 +0530 Subject: [PATCH] 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> --- .../drawers/bottom_actions/view.cljs | 107 ++++++++---------- .../numbered_keyboard/keyboard_key/view.cljs | 5 +- .../numbered_keyboard/view.cljs | 28 ++--- .../events_test.cljs | 2 +- .../wallet/send/input_amount/view.cljs | 17 ++- 5 files changed, 81 insertions(+), 78 deletions(-) diff --git a/src/quo/components/drawers/bottom_actions/view.cljs b/src/quo/components/drawers/bottom_actions/view.cljs index eb7f2a06ec..6d1a3377d7 100644 --- a/src/quo/components/drawers/bottom_actions/view.cljs +++ b/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 - {:blur-amount 20 - :blur-type :transparent - :overlay-color (if blur? - colors/neutral-80-opa-1-blur - (colors/theme-colors colors/white-70-blur - colors/neutral-95-opa-70-blur - theme))} - [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) + [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 (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 diff --git a/src/quo/components/numbered_keyboard/keyboard_key/view.cljs b/src/quo/components/numbered_keyboard/keyboard_key/view.cljs index 72d443eb5b..bcd15c4ac3 100644 --- a/src/quo/components/numbered_keyboard/keyboard_key/view.cljs +++ b/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) diff --git a/src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs b/src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs index a29f26b6a7..80f42e1116 100644 --- a/src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs +++ b/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? - :on-press on-press - :blur? blur? - :theme theme - :type type} + {:disabled? disabled? + :on-press on-press + :on-long-press on-long-press + :blur? blur? + :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 - :type :key - :disabled? disabled? - :on-press on-delete - :blur? blur? - :theme theme}] + {:item :i/backspace + :type :key + :disabled? disabled? + :on-press on-delete + :on-long-press on-long-press-delete + :blur? blur? + :theme theme}] [keyboard-item])]])) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/communities/actions/addresses_for_permissions/events_test.cljs b/src/status_im/contexts/communities/actions/addresses_for_permissions/events_test.cljs index cfb3aef237..7a77ab2b2a 100644 --- a/src/status_im/contexts/communities/actions/addresses_for_permissions/events_test.cljs +++ b/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") diff --git a/src/status_im/contexts/wallet/send/input_amount/view.cljs b/src/status_im/contexts/wallet/send/input_amount/view.cljs index da3315b20c..fcb482db66 100644 --- a/src/status_im/contexts/wallet/send/input_amount/view.cljs +++ b/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) - :left-action :dot - :delete-key? true - :on-press #(handle-keyboard-press % loading-routes? current-limit) - :on-delete #(handle-delete loading-routes? current-limit)}]])))) + {:container-style (style/keyboard-container bottom) + :left-action :dot + :delete-key? true + :on-press #(handle-keyboard-press % 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]