From e2b7a299b443a1b4fafdc768e264e63943d2f1bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Mon, 26 Jun 2023 14:19:09 -0600 Subject: [PATCH] [#16322] Add carousel tap gesture * Add tap gesture to carousel * Updates uses of carousel * Gestures only detected on carousel content instead of full screen on Android --- .../onboarding/common/background/view.cljs | 2 +- .../onboarding/common/carousel/animation.cljs | 27 ++++++++++--------- .../onboarding/common/carousel/style.cljs | 17 +++++------- .../onboarding/common/carousel/view.cljs | 13 +++++---- .../contexts/onboarding/identifiers/view.cljs | 2 +- 5 files changed, 31 insertions(+), 30 deletions(-) diff --git a/src/status_im2/contexts/onboarding/common/background/view.cljs b/src/status_im2/contexts/onboarding/common/background/view.cljs index c63fd50674..fe33f78e58 100644 --- a/src/status_im2/contexts/onboarding/common/background/view.cljs +++ b/src/status_im2/contexts/onboarding/common/background/view.cljs @@ -79,7 +79,7 @@ :paused? paused? :header-text header-text :header-background true - :swipeable? true + :gesture :swipeable :background [background-image (* 4 window-width)]}] (when dark-overlay? [blur/view diff --git a/src/status_im2/contexts/onboarding/common/carousel/animation.cljs b/src/status_im2/contexts/onboarding/common/carousel/animation.cljs index b1da09396d..1ce2530625 100644 --- a/src/status_im2/contexts/onboarding/common/carousel/animation.cljs +++ b/src/status_im2/contexts/onboarding/common/carousel/animation.cljs @@ -95,18 +95,21 @@ (defn drag-gesture [progress paused] - (-> - (gesture/gesture-pan) - (gesture/enabled true) - (gesture/max-pointers 1) - (gesture/on-finalize - (fn [event] - (let [next? (< (oops/oget event "translationX") (- drag-limit)) - previous? (> (oops/oget event "translationX") drag-limit)] - (when next? - (update-progress progress paused (get-next-progress progress))) - (when previous? - (update-progress progress paused (get-previous-progress progress)))))))) + (-> (gesture/gesture-pan) + (gesture/max-pointers 1) + (gesture/on-finalize + (fn [event] + (let [next? (< (oops/oget event "translationX") (- drag-limit)) + previous? (> (oops/oget event "translationX") drag-limit)] + (when next? + (update-progress progress paused (get-next-progress progress))) + (when previous? + (update-progress progress paused (get-previous-progress progress)))))))) + +(defn tap-gesture + [progress paused] + (-> (gesture/gesture-tap) + (gesture/on-end #(update-progress progress paused (get-next-progress progress))))) (defn carousel-left-position [window-width animate? progress] diff --git a/src/status_im2/contexts/onboarding/common/carousel/style.cljs b/src/status_im2/contexts/onboarding/common/carousel/style.cljs index ffcc9c6ebd..82b88d9f64 100644 --- a/src/status_im2/contexts/onboarding/common/carousel/style.cljs +++ b/src/status_im2/contexts/onboarding/common/carousel/style.cljs @@ -63,14 +63,9 @@ (defn carousel-container [left animate?] - (let [normal-style {:position :absolute - :right 0 - :top 0 - :bottom 0 - :flex-direction :row - :left left}] - (if animate? - (reanimated/apply-animations-to-style - {:left left} - normal-style) - normal-style))) + (cond->> {:position :absolute + :right 0 + :top 0 + :flex-direction :row + :left left} + animate? (reanimated/apply-animations-to-style {:left left}))) diff --git a/src/status_im2/contexts/onboarding/common/carousel/view.cljs b/src/status_im2/contexts/onboarding/common/carousel/view.cljs index 19fb4a9779..b2bb049143 100644 --- a/src/status_im2/contexts/onboarding/common/carousel/view.cljs +++ b/src/status_im2/contexts/onboarding/common/carousel/view.cljs @@ -50,15 +50,18 @@ :progress-bar-width progress-bar-width}]])) (defn f-view - [{:keys [animate? progress paused? header-text background header-background swipeable?]}] + [{:keys [animate? progress paused? header-text background header-background gesture]}] (let [window-width (rf/sub [:dimensions/window-width]) status-bar-height (:status-bar-height @navigation/constants) progress-bar-width (- window-width 40) carousel-left (animation/carousel-left-position window-width animate? progress) - container-view (if animate? reanimated/view rn/view)] + container-view (if animate? reanimated/view rn/view) + identified-gesture (case gesture + :swipeable (animation/drag-gesture progress paused?) + :tappable (animation/tap-gesture progress paused?) + nil)] [:<> - [gesture/gesture-detector - {:gesture (when swipeable? (animation/drag-gesture progress paused?))} + [gesture/gesture-detector {:gesture identified-gesture} [container-view {:style (style/carousel-container carousel-left animate?)} (for [index (range 2)] ^{:key index} @@ -68,7 +71,7 @@ :index index :header-text header-text :header-background header-background} - (when background background)])]] + background])]] [rn/view {:style (style/progress-bar-container progress-bar-width diff --git a/src/status_im2/contexts/onboarding/identifiers/view.cljs b/src/status_im2/contexts/onboarding/identifiers/view.cljs index a12c95c2b1..d9ce2d7b8b 100644 --- a/src/status_im2/contexts/onboarding/identifiers/view.cljs +++ b/src/status_im2/contexts/onboarding/identifiers/view.cljs @@ -41,7 +41,7 @@ {:animate? true :progress progress :paused? paused? - :swipeable? false + :gesture :tappable :header-text header-text}] [rn/view {:style style/content-container} [quo/profile-card