diff --git a/fixtures/view-transition/src/components/SwipeRecognizer.js b/fixtures/view-transition/src/components/SwipeRecognizer.js index 81239fdcdd00a..7e7176d194d83 100644 --- a/fixtures/view-transition/src/components/SwipeRecognizer.js +++ b/fixtures/view-transition/src/components/SwipeRecognizer.js @@ -38,9 +38,15 @@ export default function SwipeRecognizer({ () => { gesture(direction); }, - { - range: [0, direction === 'left' || direction === 'up' ? 100 : 0, 100], - } + direction === 'left' || direction === 'up' + ? { + rangeStart: 100, + rangeEnd: 0, + } + : { + rangeStart: 0, + rangeEnd: 100, + } ); } function onScrollEnd() { diff --git a/packages/react-reconciler/src/ReactFiberGestureScheduler.js b/packages/react-reconciler/src/ReactFiberGestureScheduler.js index 4d28abf80e337..7018506c4752a 100644 --- a/packages/react-reconciler/src/ReactFiberGestureScheduler.js +++ b/packages/react-reconciler/src/ReactFiberGestureScheduler.js @@ -23,10 +23,8 @@ import {getCurrentGestureOffset, stopViewTransition} from './ReactFiberConfig'; export type ScheduledGesture = { provider: GestureTimeline, count: number, // The number of times this same provider has been started. - direction: boolean, // false = previous, true = next - rangePrevious: number, // The end along the timeline where the previous state is reached. - rangeCurrent: number, // The starting offset along the timeline. - rangeNext: number, // The end along the timeline where the next state is reached. + rangeStart: number, // The percentage along the timeline where the "current" state starts. + rangeEnd: number, // The percentage along the timeline where the "destination" state is reached. running: null | RunningViewTransition, // Used to cancel the running transition after we're done. prev: null | ScheduledGesture, // The previous scheduled gesture in the queue for this root. next: null | ScheduledGesture, // The next scheduled gesture in the queue for this root. @@ -51,10 +49,8 @@ export function scheduleGesture( const gesture: ScheduledGesture = { provider: provider, count: 0, - direction: false, - rangePrevious: -1, - rangeCurrent: -1, - rangeNext: -1, + rangeStart: 0, // Uninitialized + rangeEnd: 100, // Uninitialized running: null, prev: prev, next: null, @@ -73,45 +69,24 @@ export function startScheduledGesture( gestureTimeline: GestureTimeline, gestureOptions: ?GestureOptions, ): null | ScheduledGesture { - const currentOffset = getCurrentGestureOffset(gestureTimeline); - const range = gestureOptions && gestureOptions.range; - const rangePrevious: number = range ? range[0] : 0; // If no range is provider we assume it's the starting point of the range. - const rangeCurrent: number = range ? range[1] : currentOffset; - const rangeNext: number = range ? range[2] : 100; // If no range is provider we assume it's the starting point of the range. - if (__DEV__) { - if ( - (rangePrevious > rangeCurrent && rangeNext > rangeCurrent) || - (rangePrevious < rangeCurrent && rangeNext < rangeCurrent) - ) { - console.error( - 'The range of a gesture needs "previous" and "next" to be on either side of ' + - 'the "current" offset. Both cannot be above current and both cannot be below current.', - ); - } - } - const isFlippedDirection = rangePrevious > rangeNext; - const initialDirection = - // If a range is specified we can imply initial direction if it's not the current - // value such as if the gesture starts after it has already moved. - currentOffset < rangeCurrent - ? isFlippedDirection - : currentOffset > rangeCurrent - ? !isFlippedDirection - : // Otherwise, look for an explicit option. - gestureOptions - ? gestureOptions.direction === 'next' - : false; - + const rangeStart = + gestureOptions && gestureOptions.rangeStart != null + ? gestureOptions.rangeStart + : getCurrentGestureOffset(gestureTimeline); + const rangeEnd = + gestureOptions && gestureOptions.rangeEnd != null + ? gestureOptions.rangeEnd + : rangeStart < 50 + ? 100 + : 0; let prev = root.pendingGestures; while (prev !== null) { if (prev.provider === gestureTimeline) { // Existing instance found. prev.count++; // Update the options. - prev.direction = initialDirection; - prev.rangePrevious = rangePrevious; - prev.rangeCurrent = rangeCurrent; - prev.rangeNext = rangeNext; + prev.rangeStart = rangeStart; + prev.rangeEnd = rangeEnd; return prev; } const next = prev.next; diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js index 9dc9c7fe567ef..3f3f733b86667 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js @@ -3932,10 +3932,8 @@ function commitGestureOnRoot( pendingViewTransition = finishedGesture.running = startGestureTransition( root.containerInfo, finishedGesture.provider, - finishedGesture.rangeCurrent, - finishedGesture.direction - ? finishedGesture.rangeNext - : finishedGesture.rangePrevious, + finishedGesture.rangeStart, + finishedGesture.rangeEnd, pendingTransitionTypes, flushGestureMutations, flushGestureAnimations, diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js index 95515143a4fc1..5b73d552d8415 100644 --- a/packages/shared/ReactTypes.js +++ b/packages/shared/ReactTypes.js @@ -172,8 +172,8 @@ export type ReactFormState = [ export type GestureProvider = any; export type GestureOptions = { - direction?: 'previous' | 'next', - range?: [/*previous*/ number, /*current*/ number, /*next*/ number], + rangeStart?: number, + rangeEnd?: number, }; export type Awaited = T extends null | void