From 0224323380293cfc0d75238b3916797f52094ef1 Mon Sep 17 00:00:00 2001 From: Ben Chidlow Date: Mon, 17 Aug 2020 11:18:05 +0800 Subject: [PATCH 1/3] Removed call of requestAnimationFrame outside of function This allows the base library of @adobe/react-spectrum to used in Gatsby Fixes #842 --- packages/@react-stately/virtualizer/src/tween.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/@react-stately/virtualizer/src/tween.ts b/packages/@react-stately/virtualizer/src/tween.ts index 0a57aa8bc48..0abbc19ad69 100644 --- a/packages/@react-stately/virtualizer/src/tween.ts +++ b/packages/@react-stately/virtualizer/src/tween.ts @@ -20,12 +20,6 @@ let getTime = perfNow ? perfNow.bind(perf) : function () { return Date.now ? Date.now() : new Date().getTime(); }; -// check if we need to get the time each frame (see below) -let fixTs = false; -requestAnimationFrame(function (t) { - fixTs = (t > 1e12) !== (getTime() > 1e12); -}); - export interface CancelablePromise extends Promise { cancel(): void } @@ -42,7 +36,7 @@ export function tween(begin, end, duration, ease, fn): CancelablePromise { raf_id = requestAnimationFrame(function run(t) { // if we're using a high res timer, make sure timestamp is not the old epoch-based value. // http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision - if (fixTs) { + if (t < 1e12) { t = getTime(); } From c5ff001b404473c3742e22b6b635af8118bb2fa1 Mon Sep 17 00:00:00 2001 From: Ben Chidlow Date: Thu, 20 Aug 2020 11:47:39 +0800 Subject: [PATCH 2/3] Updated to use old comparator inside tween --- .../@react-stately/virtualizer/src/tween.ts | 41 +++++++++++-------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/@react-stately/virtualizer/src/tween.ts b/packages/@react-stately/virtualizer/src/tween.ts index 0abbc19ad69..ad787140a60 100644 --- a/packages/@react-stately/virtualizer/src/tween.ts +++ b/packages/@react-stately/virtualizer/src/tween.ts @@ -10,47 +10,52 @@ * governing permissions and limitations under the License. */ -import {Point} from './Point'; +import { Point } from "./Point"; // use high res timer if available -let perf = typeof window !== 'undefined' ? window.performance : null; +let perf = typeof window !== "undefined" ? window.performance : null; // @ts-ignore let perfNow = perf && (perf.now || perf.webkitNow || perf.msNow || perf.mozNow); -let getTime = perfNow ? perfNow.bind(perf) : function () { - return Date.now ? Date.now() : new Date().getTime(); -}; +let getTime = perfNow + ? perfNow.bind(perf) + : function () { + return Date.now ? Date.now() : new Date().getTime(); + }; export interface CancelablePromise extends Promise { - cancel(): void + cancel(): void; } export function tween(begin, end, duration, ease, fn): CancelablePromise { let canceled = false; - let raf_id; + let raf_id: number = 0; - let promise = new Promise(resolve => { - let start = getTime(); - let diffX = end.x - begin.x; - let diffY = end.y - begin.y; + const promise = new Promise((resolve) => { + const start = getTime(); + const diffX = end.x - begin.x; + const diffY = end.y - begin.y; raf_id = requestAnimationFrame(function run(t) { + const fixTs = t > 1e12 !== getTime() > 1e12; // if we're using a high res timer, make sure timestamp is not the old epoch-based value. // http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision - if (t < 1e12) { + if (fixTs) { t = getTime(); } // check if we're done - let delta = t - start; + const delta = t - start; if (delta > duration) { fn(end); resolve(); } else { // call frame callback after computing eased time and get the next frame - let proceed = fn(new Point( - begin.x + diffX * ease(delta / duration), - begin.y + diffY * ease(delta / duration) - )); + const proceed = fn( + new Point( + begin.x + diffX * ease(delta / duration), + begin.y + diffY * ease(delta / duration) + ) + ); if (proceed !== false && !canceled) { raf_id = requestAnimationFrame(run); } @@ -72,5 +77,5 @@ export function linearEasing(t) { } export function easeOut(t) { - return Math.sin(t * Math.PI / 2); + return Math.sin((t * Math.PI) / 2); } From 79990f6da1a7259ba3cd56f55a4cd8a162cac719 Mon Sep 17 00:00:00 2001 From: Ben Chidlow Date: Thu, 20 Aug 2020 12:07:23 +0800 Subject: [PATCH 3/3] Fixed linting --- packages/@react-stately/virtualizer/src/tween.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/@react-stately/virtualizer/src/tween.ts b/packages/@react-stately/virtualizer/src/tween.ts index ad787140a60..0f6e44b43cc 100644 --- a/packages/@react-stately/virtualizer/src/tween.ts +++ b/packages/@react-stately/virtualizer/src/tween.ts @@ -10,20 +10,20 @@ * governing permissions and limitations under the License. */ -import { Point } from "./Point"; +import {Point} from './Point'; // use high res timer if available -let perf = typeof window !== "undefined" ? window.performance : null; +let perf = typeof window !== 'undefined' ? window.performance : null; // @ts-ignore let perfNow = perf && (perf.now || perf.webkitNow || perf.msNow || perf.mozNow); let getTime = perfNow ? perfNow.bind(perf) : function () { - return Date.now ? Date.now() : new Date().getTime(); - }; + return Date.now ? Date.now() : new Date().getTime(); + }; export interface CancelablePromise extends Promise { - cancel(): void; + cancel(): void } export function tween(begin, end, duration, ease, fn): CancelablePromise {