Fix: slide button (#18922)

* fix: slide button
This commit is contained in:
Omar Basem 2024-03-05 07:50:03 +04:00 committed by GitHub
parent 5d1e1f8005
commit 62f68ff44b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 31 deletions

View File

@ -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

View File

@ -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?}]))

View File

@ -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