From 62f68ff44b10173946c8bf5919d3209f8836c22d Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Tue, 5 Mar 2024 07:50:03 +0400 Subject: [PATCH] Fix: slide button (#18922) * fix: slide button --- .../components/buttons/slide_button/view.cljs | 45 ++++++++----------- .../standard_auth/slide_button/view.cljs | 5 ++- .../contexts/wallet/create_account/view.cljs | 4 +- 3 files changed, 23 insertions(+), 31 deletions(-) diff --git a/src/quo/components/buttons/slide_button/view.cljs b/src/quo/components/buttons/slide_button/view.cljs index 253521a3aa..76bf523bfd 100644 --- a/src/quo/components/buttons/slide_button/view.cljs +++ b/src/quo/components/buttons/slide_button/view.cljs @@ -14,28 +14,26 @@ [react-native.reanimated :as reanimated])) (defn drag-gesture - [x-pos gestures-disabled? set-gestures-disabled disabled? track-width sliding-complete? + [x-pos disabled? track-width sliding-complete? set-sliding-complete on-complete reset-fn] - (let [gestures-enabled? (not (or disabled? gestures-disabled?))] - (-> (gesture/gesture-pan) - (gesture/with-test-ID :slide-button-gestures) - (gesture/enabled gestures-enabled?) - (gesture/min-distance 0) - (gesture/on-update (fn [event] - (let [x-translation (oops/oget event "translationX") - clamped-x (utils/clamp-value x-translation 0 track-width) - reached-end? (>= clamped-x track-width)] - (reanimated/set-shared-value x-pos clamped-x) - (when (and reached-end? (not sliding-complete?)) - (set-gestures-disabled true) - (set-sliding-complete true) - (when on-complete (on-complete reset-fn)))))) - (gesture/on-end (fn [event] - (let [x-translation (oops/oget event "translationX") - reached-end? (>= x-translation track-width)] - (when (not reached-end?) - (animations/reset-track-position x-pos)))))))) + (-> (gesture/gesture-pan) + (gesture/with-test-ID :slide-button-gestures) + (gesture/enabled (not disabled?)) + (gesture/min-distance 0) + (gesture/on-update (fn [event] + (let [x-translation (oops/oget event "translationX") + clamped-x (utils/clamp-value x-translation 0 track-width) + reached-end? (>= clamped-x track-width)] + (reanimated/set-shared-value x-pos clamped-x) + (when (and reached-end? (not sliding-complete?)) + (set-sliding-complete true) + (when on-complete (on-complete reset-fn)))))) + (gesture/on-end (fn [event] + (let [x-translation (oops/oget event "translationX") + reached-end? (>= x-translation track-width)] + (when (not reached-end?) + (animations/reset-track-position x-pos))))))) (defn view "Options @@ -55,14 +53,11 @@ [track-width set-track-width] (rn/use-state nil) [sliding-complete? set-sliding-complete] (rn/use-state false) - [gestures-disabled? - set-gestures-disabled] (rn/use-state disabled?) on-track-layout (rn/use-callback #(set-track-width (oops/oget % "nativeEvent.layout.width"))) reset-fn (rn/use-callback (fn [] (set-sliding-complete false) - (set-gestures-disabled false) (animations/reset-track-position x-pos))) dimensions (rn/use-callback (partial utils/get-dimensions @@ -77,15 +72,13 @@ [dimensions]) custom-color (if (= type :danger) :danger customization-color) gesture (rn/use-memo #(drag-gesture x-pos - gestures-disabled? - set-gestures-disabled disabled? (dimensions :usable-track) sliding-complete? set-sliding-complete on-complete reset-fn) - [gestures-disabled? sliding-complete? disabled?])] + [sliding-complete? disabled?])] [gesture/gesture-detector {:gesture gesture} [reanimated/view diff --git a/src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs b/src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs index 097af426f1..704a7a5a6e 100644 --- a/src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs +++ b/src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs @@ -9,7 +9,7 @@ (defn view [{:keys [track-text customization-color auth-button-label on-auth-success on-auth-fail - auth-button-icon-left size blur? container-style] + auth-button-icon-left size blur? container-style disabled?] :or {container-style {:flex 1}}}] (let [theme (quo.theme/use-theme-value) auth-method (rf/sub [:auth-method]) @@ -31,4 +31,5 @@ :customization-color customization-color :on-complete on-complete :track-icon (if biometric-auth? :i/face-id :password) - :track-text track-text}])) + :track-text track-text + :disabled? disabled?}])) diff --git a/src/status_im/contexts/wallet/create_account/view.cljs b/src/status_im/contexts/wallet/create_account/view.cljs index b2f64c92b5..f27b0912b4 100644 --- a/src/status_im/contexts/wallet/create_account/view.cljs +++ b/src/status_im/contexts/wallet/create_account/view.cljs @@ -148,9 +148,7 @@ :path @derivation-path :account-name @account-name}]))) :auth-button-label (i18n/label :t/confirm) - ;; TODO (@rende11) Add this property when sliding button issue will fixed - ;; https://github.com/status-im/status-mobile/pull/18683#issuecomment-1941564785 - ;; :disabled? (empty? @account-name) + :disabled? (empty? @account-name) :container-style (style/slide-button-container bottom)}]])))) (defn- view-internal