Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions fixtures/view-transition/src/components/SwipeRecognizer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
57 changes: 16 additions & 41 deletions packages/react-reconciler/src/ReactFiberGestureScheduler.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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,
Expand All @@ -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;
Expand Down
6 changes: 2 additions & 4 deletions packages/react-reconciler/src/ReactFiberWorkLoop.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/shared/ReactTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -172,8 +172,8 @@ export type ReactFormState<S, ReferenceId> = [
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> = T extends null | void
Expand Down
Loading