refactore(ViewportCollector): remove private scroll state abstraction

Author: garthenweb

lib/ViewportCollector.tsx

@@ -4,25 +4,13 @@ import raf from 'raf';
 
 import {
   shallowEqualScroll,
-  shallowEqualPrivateScroll,
   shallowEqualDimensions,
   browserSupportsPassiveEvents,
   simpleDebounce,
   debounceOnUpdate,
 } from './utils';
 
-import {
-  IDimensions,
-  IPrivateScroll,
-  IScroll,
-  IViewport,
-  OnUpdateType,
-} from './types';
-
-export const SCROLL_DIR_DOWN = Symbol('SCROLL_DIR_DOWN');
-export const SCROLL_DIR_UP = Symbol('SCROLL_DIR_UP');
-export const SCROLL_DIR_LEFT = Symbol('SCROLL_DIR_LEFT');
-export const SCROLL_DIR_RIGHT = Symbol('SCROLL_DIR_RIGHT');
+import { IDimensions, IScroll, IViewport, OnUpdateType } from './types';
 
 const getNodeScroll = (elem = window) => {
   let { scrollX, scrollY } = elem;
@@ -64,51 +52,39 @@ const getClientDimensions = (): IDimensions => {
   };
 };
 
-const getXDir = (x: number, prev: IPrivateScroll) => {
+const isScrollingLeft = (x: number, prev: IScroll) => {
   switch (true) {
     case x < prev.x:
-      return SCROLL_DIR_LEFT;
+      return true;
     case x > prev.x:
-      return SCROLL_DIR_RIGHT;
+      return false;
     case x === prev.x:
-      return prev.xDir;
+      return prev.isScrollingLeft;
     default:
-      throw new Error('Could not calculate xDir');
+      throw new Error('Could not calculate isScrollingLeft');
   }
 };
 
-const getYDir = (y: number, prev: IPrivateScroll) => {
+const isScrollingUp = (y: number, prev: IScroll) => {
   switch (true) {
     case y < prev.y:
-      return SCROLL_DIR_UP;
+      return true;
     case y > prev.y:
-      return SCROLL_DIR_DOWN;
+      return false;
     case y === prev.y:
-      return prev.yDir;
+      return prev.isScrollingUp;
     default:
       throw new Error('Could not calculate yDir');
   }
 };
 
-const privateToPublicScroll = ({
-  yDir,
-  xDir,
-  ...scroll
-}: IPrivateScroll): IScroll => {
-  return {
-    ...scroll,
-    isScrollingUp: yDir === SCROLL_DIR_UP,
-    isScrollingDown: yDir === SCROLL_DIR_DOWN,
-    isScrollingLeft: xDir === SCROLL_DIR_LEFT,
-    isScrollingRight: xDir === SCROLL_DIR_RIGHT,
-  };
-};
-
-const createInitPrivateScrollState = () => ({
+export const createInitScrollState = () => ({
   x: 0,
   y: 0,
-  xDir: undefined,
-  yDir: undefined,
+  isScrollingUp: false,
+  isScrollingDown: false,
+  isScrollingLeft: false,
+  isScrollingRight: false,
   xTurn: 0,
   yTurn: 0,
   xDTurn: 0,
@@ -126,9 +102,6 @@ const createEmptyDimensionState = (): IDimensions => ({
   documentHeight: 0,
 });
 
-export const createInitScrollState = (): IScroll =>
-  privateToPublicScroll(createInitPrivateScrollState());
-
 export const createInitDimensionsState = (): IDimensions => {
   if (typeof window === 'undefined') {
     return createEmptyDimensionState();
@@ -142,9 +115,9 @@ interface IProps {
 }
 
 export default class ViewportCollector extends React.PureComponent<IProps> {
-  private scrollState: IPrivateScroll;
+  private scrollState: IScroll;
   private dimensionsState: IDimensions;
-  private lastSyncedScrollState: IPrivateScroll;
+  private lastSyncedScrollState: IScroll;
   private lastSyncedDimensionsState: IDimensions;
   private tickId: NodeJS.Timer;
   private componentMightHaveUpdated: boolean;
@@ -154,7 +127,7 @@ export default class ViewportCollector extends React.PureComponent<IProps> {
     this.state = {
       parentProviderExists: false,
     };
-    this.scrollState = createInitPrivateScrollState();
+    this.scrollState = createInitScrollState();
     this.dimensionsState = createInitDimensionsState();
     this.lastSyncedDimensionsState = { ...this.dimensionsState };
     this.lastSyncedScrollState = { ...this.scrollState };
@@ -189,17 +162,22 @@ export default class ViewportCollector extends React.PureComponent<IProps> {
   handleScroll = () => {
     const { x, y } = getNodeScroll();
     const {
-      xDir: prevXDir,
-      yDir: prevYDir,
+      isScrollingLeft: prevIsScrollingLeft,
+      isScrollingUp: prevIsScrollingUp,
       xTurn: prevXTurn,
       yTurn: prevYTurn,
     } = this.scrollState;
 
-    this.scrollState.xDir = getXDir(x, this.scrollState);
-    this.scrollState.yDir = getYDir(y, this.scrollState);
+    this.scrollState.isScrollingLeft = isScrollingLeft(x, this.scrollState);
+    this.scrollState.isScrollingRight = !this.scrollState.isScrollingLeft;
+
+    this.scrollState.isScrollingUp = isScrollingUp(y, this.scrollState);
+    this.scrollState.isScrollingDown = !this.scrollState.isScrollingUp;
 
-    this.scrollState.xTurn = this.scrollState.xDir === prevXDir ? prevXTurn : x;
-    this.scrollState.yTurn = this.scrollState.yDir === prevYDir ? prevYTurn : y;
+    this.scrollState.xTurn =
+      this.scrollState.isScrollingLeft === prevIsScrollingLeft ? prevXTurn : x;
+    this.scrollState.yTurn =
+      this.scrollState.isScrollingUp === prevIsScrollingUp ? prevYTurn : y;
 
     this.scrollState.xDTurn = x - this.scrollState.xTurn;
     this.scrollState.yDTurn = y - this.scrollState.yTurn;
@@ -217,17 +195,17 @@ export default class ViewportCollector extends React.PureComponent<IProps> {
   }, 80);
 
   getPublicScroll: ((scroll: IScroll) => IScroll) = memoize(
-    (scroll: IScroll): IScroll => scroll,
+    (scroll: IScroll): IScroll => ({ ...scroll }),
     shallowEqualScroll,
   );
 
   getPublicDimensions: ((dimensions: IDimensions) => IDimensions) = memoize(
-    (dimensions: IDimensions): IDimensions => dimensions,
+    (dimensions: IDimensions): IDimensions => ({ ...dimensions }),
     shallowEqualDimensions,
   );
 
   syncState = () => {
-    const scrollDidUpdate = !shallowEqualPrivateScroll(
+    const scrollDidUpdate = !shallowEqualScroll(
       this.lastSyncedScrollState,
       this.scrollState,
     );
@@ -265,12 +243,8 @@ export default class ViewportCollector extends React.PureComponent<IProps> {
 
   getPropsFromState(): IViewport {
     return {
-      scroll: this.getPublicScroll(
-        privateToPublicScroll(this.lastSyncedScrollState),
-      ),
-      dimensions: this.getPublicDimensions({
-        ...this.lastSyncedDimensionsState,
-      }),
+      scroll: this.getPublicScroll(this.lastSyncedScrollState),
+      dimensions: this.getPublicDimensions(this.lastSyncedDimensionsState),
     };
   }
 

lib/ViewportProvider.tsx

@@ -44,7 +44,7 @@ export default class ViewportProvider extends React.PureComponent<
   }
 
   triggerUpdateToListeners = (
-    publicState: IViewport,
+    state: IViewport,
     { scrollDidUpdate, dimensionsDidUpdate }: IViewportCollectorUpdateOptions,
     options?: { isIdle: boolean },
   ) => {
@@ -62,15 +62,15 @@ export default class ViewportProvider extends React.PureComponent<
     const layouts = updatableListeners.map(
       ({ recalculateLayoutBeforeUpdate }) => {
         if (recalculateLayoutBeforeUpdate) {
-          return recalculateLayoutBeforeUpdate(publicState);
+          return recalculateLayoutBeforeUpdate(state);
         }
         return null;
       },
     );
 
     updatableListeners.forEach(({ handler }, index) => {
       const layout = layouts[index];
-      handler(publicState, layout);
+      handler(state, layout);
     });
   };
 

lib/types.ts

@@ -1,10 +1,3 @@
-import {
-  SCROLL_DIR_LEFT,
-  SCROLL_DIR_RIGHT,
-  SCROLL_DIR_UP,
-  SCROLL_DIR_DOWN,
-} from './ViewportCollector';
-
 export interface IDimensions {
   width: number;
   height: number;
@@ -29,17 +22,6 @@ export interface IScroll {
   isScrollingRight: boolean;
 }
 
-export interface IPrivateScroll {
-  x: number;
-  y: number;
-  xDir: typeof SCROLL_DIR_LEFT | typeof SCROLL_DIR_RIGHT | undefined;
-  yDir: typeof SCROLL_DIR_UP | typeof SCROLL_DIR_DOWN | undefined;
-  xTurn: number;
-  yTurn: number;
-  xDTurn: number;
-  yDTurn: number;
-}
-
 export interface IRect {
   top: number;
   right: number;

lib/utils.ts

@@ -1,10 +1,4 @@
-import {
-  IRect,
-  IScroll,
-  IPrivateScroll,
-  IDimensions,
-  OnUpdateType,
-} from './types';
+import { IRect, IScroll, IDimensions, OnUpdateType } from './types';
 
 export const shallowEqualScroll = (a: IScroll, b: IScroll) => {
   if (a === b) {
@@ -24,25 +18,6 @@ export const shallowEqualScroll = (a: IScroll, b: IScroll) => {
   );
 };
 
-export const shallowEqualPrivateScroll = (
-  a: IPrivateScroll,
-  b: IPrivateScroll,
-) => {
-  if (a === b) {
-    return true;
-  }
-  return (
-    a.x === b.x &&
-    a.y === b.y &&
-    a.xTurn === b.xTurn &&
-    a.yTurn === b.yTurn &&
-    a.xDTurn === b.xDTurn &&
-    a.yDTurn === b.yDTurn &&
-    a.xDir === b.xDir &&
-    a.yDir === b.yDir
-  );
-};
-
 export const shallowEqualRect = (a: IRect, b: IRect) => {
   if (a === b) {
     return true;