z.diff

gistfile1.txt

diff --git a/app/js/plex/base/views/v3/helpers/shouldPureComponentUpdate.js b/app/js/plex/base/views/v3/helpers/shouldPureComponentUpdate.js
index 689166b..291f489 100644
--- a/app/js/plex/base/views/v3/helpers/shouldPureComponentUpdate.js
+++ b/app/js/plex/base/views/v3/helpers/shouldPureComponentUpdate.js
@@ -6,54 +6,54 @@ export default function shouldPureComponentUpdate(instance, nextProps, nextState
   const contextEqual = nextContext ? shallowEqual(instance.context, nextContext) : true;
   const shouldUpdate = !propsEqual || !stateEqual || !contextEqual;
 
-  if (__DEV__ && shouldUpdate) {
-    const filter = /ocus/;
-    // Set this to `true` for verbose value logging.
-    const explodeValues = true;
-    const name = instance._reactInternalInstance._instance.constructor.name;
-    if (filter.test(name)) {
-      const explode = (current, next, keys) => {
-        return keys.reduce((acc, key) => {
-          // Returning a Boolean works around `children` being unable to
-          // serialize cleanly.
-          acc[key] = (key === 'children') ? true : { current: current[key], next: next[key] };
-          return acc;
-        }, {});
-      };
-      const diff = (current, next) => {
-        const shallowDiff = require('shallow-diff');
-        const result = shallowDiff(current, next);
+  // if (__DEV__ && shouldUpdate) {
+  //   const filter = /ocus/;
+  //   // Set this to `true` for verbose value logging.
+  //   const explodeValues = true;
+  //   const name = instance._reactInternalInstance._instance.constructor.name;
+  //   if (filter.test(name)) {
+  //     const explode = (current, next, keys) => {
+  //       return keys.reduce((acc, key) => {
+  //         // Returning a Boolean works around `children` being unable to
+  //         // serialize cleanly.
+  //         acc[key] = (key === 'children') ? true : { current: current[key], next: next[key] };
+  //         return acc;
+  //       }, {});
+  //     };
+  //     const diff = (current, next) => {
+  //       const shallowDiff = require('shallow-diff');
+  //       const result = shallowDiff(current, next);
 
-        delete result.unchanged;
+  //       delete result.unchanged;
 
-        ['updated', 'added', 'deleted'].forEach((key) => {
-          if (result[key].length) {
-            if (explodeValues) {
-              result[key] = explode(current, next, result[key]);
-            }
-          } else {
-            delete result[key];
-          }
-        });
+  //       ['updated', 'added', 'deleted'].forEach((key) => {
+  //         if (result[key].length) {
+  //           if (explodeValues) {
+  //             result[key] = explode(current, next, result[key]);
+  //           }
+  //         } else {
+  //           delete result[key];
+  //         }
+  //       });
 
-        return JSON.stringify(result);
-      };
+  //       return JSON.stringify(result);
+  //     };
 
-      if (!stateEqual || !contextEqual) {
-        console.group('shouldPureComponentUpdate(): %s has changed', name);
-        // if (!propsEqual) {
-        //   console.debug('props:', diff(instance.props, nextProps));
-        // }
-        if (!stateEqual) {
-          console.debug('state:', diff(instance.state, nextState));
-        }
-        if (!contextEqual) {
-          console.debug('context:', diff(instance.context, nextContext));
-        }
-        console.groupEnd();
-      }
-    }
-  }
+  //     if (!stateEqual || !contextEqual) {
+  //       console.group('shouldPureComponentUpdate(): %s has changed', name);
+  //       // if (!propsEqual) {
+  //       //   console.debug('props:', diff(instance.props, nextProps));
+  //       // }
+  //       if (!stateEqual) {
+  //         console.debug('state:', diff(instance.state, nextState));
+  //       }
+  //       if (!contextEqual) {
+  //         console.debug('context:', diff(instance.context, nextContext));
+  //       }
+  //       console.groupEnd();
+  //     }
+  //   }
+  // }
 
   return shouldUpdate;
 }
diff --git a/app/js/plex/pmp/sandbox/demo/enterable2/utils/enterable/interactionManager.js b/app/js/plex/pmp/sandbox/demo/enterable2/utils/enterable/interactionManager.js
index 641fa4e..a828e31 100644
--- a/app/js/plex/pmp/sandbox/demo/enterable2/utils/enterable/interactionManager.js
+++ b/app/js/plex/pmp/sandbox/demo/enterable2/utils/enterable/interactionManager.js
@@ -120,7 +120,7 @@ class InteractionManager {
 
     const pathPermutations = permutePath(path);
 
-    console.log('Registering path "%s"', path, pathPermutations);
+    console.log('Registering path "%s"', path);
 
     for (let i = 0; i < pathPermutations.length; i++) {
       const currentParentPath = pathPermutations[i - 1];
@@ -218,18 +218,20 @@ class InteractionManager {
 
     // console.group('InteractionManager#unregister():', path);
 
-    if (value.children) {
-      for (let i = 0; i < value.children.length; i++) {
-        const childPath = value.children[i];
-        // console.log('Unregistering child path of "%s"', childPath);
-        this.unregister(childPath);
-      }
-    }
+    // if (value.children) {
+    //   for (let i = 0; i < value.children.length; i++) {
+    //     const childPath = value.children[i];
+    //     // console.log('Unregistering child path of "%s"', childPath);
+    //     this.unregister(childPath);
+    //   }
+    // }
 
     if (value.parent) {
       const parent = this.paths[value.parent];
-      const index = parent.children.indexOf(path);
-      parent.children.splice(index, 1);
+      if (parent) {
+        const index = parent.children.indexOf(path);
+        parent.children.splice(index, 1);
+      }
     }
 
     delete value.callback;
@@ -377,4 +379,8 @@ class InteractionManager {
 
 }
 
-export default new InteractionManager();
+const instance = new InteractionManager();
+
+window.instance = instance;
+
+export default instance;
diff --git a/app/js/plex/pmp/sandbox/demo/enterable2/views/v3/helpers/specs/collectEnteredRect.js b/app/js/plex/pmp/sandbox/demo/enterable2/views/v3/helpers/specs/collectEnteredRect.js
index f964800..102e467 100644
--- a/app/js/plex/pmp/sandbox/demo/enterable2/views/v3/helpers/specs/collectEnteredRect.js
+++ b/app/js/plex/pmp/sandbox/demo/enterable2/views/v3/helpers/specs/collectEnteredRect.js
@@ -1,6 +1,6 @@
 import { VERTICAL, HORIZONTAL } from 'plex/pmp/views/v3/helpers/props/scrollDirections';
 
-export default function collect(manager, newState, props) {
+export default function collectEnteredRect(manager, newState, props) {
   if (!newState.isEntered) {
     return newState;
   }
diff --git a/app/js/plex/pmp/sandbox/demo/list/scrolling-static-list.js b/app/js/plex/pmp/sandbox/demo/list/scrolling-static-list.js
index 7c5274f..b612c81 100644
--- a/app/js/plex/pmp/sandbox/demo/list/scrolling-static-list.js
+++ b/app/js/plex/pmp/sandbox/demo/list/scrolling-static-list.js
@@ -32,10 +32,10 @@ export default function () {
       rows: 1,
       innerHorizontalPadding: 10,
       getCellWidth() {
-        return 200;
+        return 600;
       },
       getCellHeight() {
-        return 200;
+        return 600;
       }
     };
 
diff --git a/app/js/plex/pmp/sandbox/demo/list/views/v3/components/core/lists/List.js b/app/js/plex/pmp/sandbox/demo/list/views/v3/components/core/lists/List.js
index 12abf56..b5e3ca6 100644
--- a/app/js/plex/pmp/sandbox/demo/list/views/v3/components/core/lists/List.js
+++ b/app/js/plex/pmp/sandbox/demo/list/views/v3/components/core/lists/List.js
@@ -123,6 +123,8 @@ class List extends Component {
     const props = this.props;
     const state = this.state;
 
+    console.group('renderCells');
+
     const keys = this._keyPool.getKeys(
       state.renderStartIndex,
       state.renderEndIndex,
@@ -137,6 +139,8 @@ class List extends Component {
       cells.push(this.renderCell(keys[key], key));
     }
 
+    console.groupEnd();
+
     return cells;
   }
 
diff --git a/app/js/plex/pmp/sandbox/demo/list/views/v3/components/core/lists/ListScroller.js b/app/js/plex/pmp/sandbox/demo/list/views/v3/components/core/lists/ListScroller.js
index a14c518..4cb626a 100644
--- a/app/js/plex/pmp/sandbox/demo/list/views/v3/components/core/lists/ListScroller.js
+++ b/app/js/plex/pmp/sandbox/demo/list/views/v3/components/core/lists/ListScroller.js
@@ -4,8 +4,6 @@ import assert from 'plex/base/utils/log/assert';
 import shouldPureComponentUpdate from 'plex/base/views/v3/helpers/shouldPureComponentUpdate';
 import pageStorage from 'plex/base/views/v3/helpers/pageStorage';
 import layoutShape from 'plex/base/views/v3/helpers/props/shapes/layoutShape';
-import collectEnteredRect from 'plex/pmp/sandbox/demo/enterable2/views/v3/helpers/specs/collectEnteredRect';
-import centerFocusedPositionStrategy from 'plex/pmp/sandbox/demo/enterable2/views/v3/helpers/specs/centerFocusedPositionStrategy';
 import Measure from 'plex/base/views/v3/components/core/Measure';
 import Scroller from 'plex/pmp/views/v3/components/core/Scroller';
 import { all, VERTICAL, HORIZONTAL } from 'plex/pmp/views/v3/helpers/props/scrollDirections';
@@ -53,49 +51,6 @@ class ListScroller extends Component {
     );
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (!nextProps.isEntered) {
-      return;
-    }
-
-    const {
-      scrollTop,
-      scrollLeft,
-      height,
-      width
-    } = this.state;
-
-    const {
-      focusX,
-      focusY,
-      scrollDirection
-    } = this.props;
-
-    if (scrollDirection === VERTICAL && nextProps.focusY !== focusY) {
-      const nextScrollTop = centerFocusedPositionStrategy(
-        scrollTop, height, nextProps.focusY, nextProps.focusHeight
-      );
-
-      if (scrollTop !== nextScrollTop) {
-        this.setState({
-          scrollTop: nextScrollTop
-        });
-      }
-    }
-
-    if (scrollDirection === HORIZONTAL && nextProps.focusX !== focusX) {
-      const nextScrollLeft = centerFocusedPositionStrategy(
-        scrollLeft, width, nextProps.focusX, nextProps.focusWidth
-      );
-
-      if (scrollLeft !== nextScrollLeft)  {
-        this.setState({
-          scrollLeft: nextScrollLeft
-        });
-      }
-    }
-  }
-
   shouldComponentUpdate(nextProps, nextState) {
     return shouldPureComponentUpdate(this, nextProps, nextState);
   }
@@ -236,6 +191,7 @@ class ListScroller extends Component {
         {
           isMeasured &&
             <Scroller
+              enterableKey="scroller"
               allowWheel={allowWheel}
               clientHeight={height}
               clientWidth={width}
@@ -274,17 +230,13 @@ ListScroller.propTypes = {
   scrollPositionStorageKey: PropTypes.string,
   onListUpdate: PropTypes.func,
   onListScrollIndexChange: PropTypes.func,
-  focusX: PropTypes.number,
-  focusY: PropTypes.number,
   focusWidth: PropTypes.number,
   focusHeight: PropTypes.number
 };
 
 ListScroller.defaultProps = {
   ignorePosition: true,
-  component: List,
-  focusX: 0,
-  focusY: 0
+  component: List
 };
 
-export default focusContainer(null, collectEnteredRect)(ListScroller);
+export default focusContainer()(ListScroller);
diff --git a/app/js/plex/pmp/views/v3/components/core/Scroller.js b/app/js/plex/pmp/views/v3/components/core/Scroller.js
index b6df94a..593ec5d 100644
--- a/app/js/plex/pmp/views/v3/components/core/Scroller.js
+++ b/app/js/plex/pmp/views/v3/components/core/Scroller.js
@@ -6,7 +6,10 @@ import capabilities from 'plex/base/utils/capabilities';
 import { resolve } from 'plex/base/adapters/adapters';
 import { mapValidComponents } from 'plex/base/views/v3/helpers/ValidComponentChildren';
 import shouldPureComponentUpdate from 'plex/base/views/v3/helpers/shouldPureComponentUpdate';
-import { scrollDirections } from 'plex/pmp/views/v3/helpers/props';
+import centerFocusedPositionStrategy from 'plex/pmp/sandbox/demo/enterable2/views/v3/helpers/specs/centerFocusedPositionStrategy';
+import { all, VERTICAL, HORIZONTAL } from 'plex/pmp/views/v3/helpers/props/scrollDirections';
+import collectEnteredRect from 'plex/pmp/sandbox/demo/enterable2/views/v3/helpers/specs/collectEnteredRect';
+import focusContainer from 'plex/pmp/sandbox/demo/enterable2/views/v3/decorators/focusContainer';
 import styles from './Scroller.css';
 
 /*
@@ -52,15 +55,46 @@ class Scroller extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    if (!nextProps.isEntered) {
+      return;
+    }
+
+    const scrollTop = this._currentScrollTop;
+    const scrollLeft = this._currentScrollLeft;
+
     const {
-      scrollDirection,
-      scrollLeft,
-      scrollTop
+      clientHeight,
+      clientWidth,
+      focusX,
+      focusY,
+      scrollDirection
     } = this.props;
 
+    if (scrollDirection === VERTICAL && nextProps.focusY !== focusY) {
+      const nextScrollTop = centerFocusedPositionStrategy(
+        scrollTop, clientHeight, nextProps.focusY, nextProps.focusHeight
+      );
+
+      if (scrollTop !== nextScrollTop) {
+        this._scrollTo({ scrollTop: nextScrollTop });
+        return;
+      }
+    }
+
+    if (scrollDirection === HORIZONTAL && nextProps.focusX !== focusX) {
+      const nextScrollLeft = centerFocusedPositionStrategy(
+        scrollLeft, clientWidth, nextProps.focusX, nextProps.focusWidth
+      );
+
+      if (scrollLeft !== nextScrollLeft)  {
+        this._scrollTo({ scrollLeft: nextScrollLeft });
+        return;
+      }
+    }
+
     if (
-      (nextProps.scrollTop !== scrollTop && scrollDirection === scrollDirections.VERTICAL) ||
-      (nextProps.scrollLeft !== scrollLeft && scrollDirection === scrollDirections.HORIZONTAL)
+      (nextProps.scrollTop !== scrollTop && scrollDirection === VERTICAL) ||
+      (nextProps.scrollLeft !== scrollLeft && scrollDirection === HORIZONTAL)
     ) {
       this.setState({
         isScrolling: true
@@ -184,7 +218,7 @@ class Scroller extends Component {
   }
 
   _clampPosition(position, scrollDimension, clientDimension) {
-    return Math.round(Math.max(Math.min(position, scrollDimension - clientDimension), 0));
+    return Math.max(Math.min(position, scrollDimension - clientDimension), 0);
   }
 
   //
@@ -217,7 +251,7 @@ class Scroller extends Component {
   @autobind
   onWheel(event) {
     const props = this.props;
-    const isVerticalScroller = props.scrollDirection === scrollDirections.VERTICAL;
+    const isVerticalScroller = props.scrollDirection === VERTICAL;
 
     let deltaX = event.deltaX;
     let deltaY = event.deltaY;
@@ -310,7 +344,7 @@ Scroller.propTypes = {
   isScrollingTimeout: PropTypes.number.isRequired,
   onScrollComplete: PropTypes.func,
   onScrollPositionChange: PropTypes.func,
-  scrollDirection: PropTypes.oneOf(scrollDirections.all).isRequired,
+  scrollDirection: PropTypes.oneOf(all).isRequired,
   scrollHeight: PropTypes.number.isRequired,
   scrollLeft: PropTypes.number,
   scrollTop: PropTypes.number,
@@ -327,7 +361,9 @@ Scroller.defaultProps = {
   isScrollingTimeout: 0,
   scrollHeight: 0,
   scrollWidth: 0,
-  scrollDuration: 1000
+  scrollDuration: 1000,
+  focusX: 0,
+  focusY: 0
 };
 
-export default Scroller;
+export default focusContainer(null, collectEnteredRect)(Scroller);