Newly-added raf-based timeouts now fall back to setTimeout for older browsers (eg IE9)

Author: bvaughn

source/Grid/Grid.js

@@ -13,6 +13,7 @@ import type {
   OverscanIndicesGetter,
   Alignment
 } from "./types";
+import type { AnimationTimeoutId } from "../utils/requestAnimationTimeout";
 
 import React from "react";
 import cn from "classnames";
@@ -301,7 +302,7 @@ export default class Grid extends React.PureComponent {
   _rowStartIndex: number;
   _rowStopIndex: number;
 
-  _disablePointerEventsTimeoutId: ?number;
+  _disablePointerEventsTimeoutId: ?AnimationTimeoutId;
 
   constructor(props: Props) {
     super(props);

source/Masonry/Masonry.js

@@ -7,6 +7,8 @@ import {
   cancelAnimationTimeout
 } from "../utils/requestAnimationTimeout";
 
+import type { AnimationTimeoutId } from "../utils/requestAnimationTimeout";
+
 const emptyObject = {};
 
 /**
@@ -58,6 +60,7 @@ export default class Masonry extends PureComponent {
     tabIndex: 0
   };
 
+  _debounceResetIsScrollingId: AnimationTimeoutId;
   _invalidateOnUpdateStartIndex: ?number = null;
   _invalidateOnUpdateStopIndex: ?number = null;
   _positionCache: PositionCache = new PositionCache();

source/utils/animationFrame.js

@@ -0,0 +1,41 @@
+/** @flow */
+
+type Callback = (timestamp: number) => void;
+type CancelAnimationFrame = (requestId: number) => void;
+type ClearTimeout = (timeoutId?: any) => void;
+type RequestAnimationFrame = (callback: Callback) => number;
+
+// Properly handle server-side rendering.
+let win;
+if (typeof window !== "undefined") {
+  win = window;
+} else if (typeof self !== "undefined") {
+  win = self;
+} else {
+  win = this;
+}
+
+// requestAnimationFrame() shim by Paul Irish
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+const request =
+  win.requestAnimationFrame ||
+  win.webkitRequestAnimationFrame ||
+  win.mozRequestAnimationFrame ||
+  win.oRequestAnimationFrame ||
+  win.msRequestAnimationFrame ||
+  function(callback: Callback): RequestAnimationFrame {
+    return (win: any).setTimeout(callback, 1000 / 60);
+  };
+
+const cancel =
+  win.cancelAnimationFrame ||
+  win.webkitCancelAnimationFrame ||
+  win.mozCancelAnimationFrame ||
+  win.oCancelAnimationFrame ||
+  win.msCancelAnimationFrame ||
+  function(id: number) {
+    (win: any).clearTimeout(id);
+  };
+
+export const raf: RequestAnimationFrame = (request: any);
+export const caf: CancelAnimationFrame = (cancel: any);

source/utils/requestAnimationTimeout.js

@@ -1,26 +1,37 @@
-export function cancelAnimationTimeout(frame) {
-  window.cancelAnimationFrame(frame.id);
-}
+/** @flow */
+
+import { caf, raf } from "./animationFrame";
+
+export type AnimationTimeoutId = {
+  id: number
+};
+
+export const cancelAnimationTimeout = (frame: AnimationTimeoutId) =>
+  caf(frame.id);
 
 /**
- * Recursively calls requestAnimationFrame until a specified delay has been met
- * or exceeded. When the delay time has been reached the function you're timing
- * out will be called.
+ * Recursively calls requestAnimationFrame until a specified delay has been met or exceeded.
+ * When the delay time has been reached the function you're timing out will be called.
  *
  * Credit: Joe Lambert (https://gist.github.com/joelambert/1002116#file-requesttimeout-js)
  */
-export function requestAnimationTimeout(func, delay) {
+export const requestAnimationTimeout = (
+  callback: Function,
+  delay: number
+): AnimationTimeoutId => {
   const start = Date.now();
-  const frame = new Object();
 
-  function timeout() {
+  const timeout = () => {
     if (Date.now() - start >= delay) {
-      func.call();
+      callback.call();
     } else {
-      frame.id = window.requestAnimationFrame(timeout);
+      frame.id = raf(timeout);
     }
-  }
+  };
+
+  const frame: AnimationTimeoutId = {
+    id: raf(timeout)
+  };
 
-  frame.id = window.requestAnimationFrame(timeout);
   return frame;
-}
+};