more cleanup

Author: SleepyWerewolf

src/components/NavigationFocus/FocusContainer.tsx

@@ -43,7 +43,7 @@ export interface IGridItem {
 }
 
 /**
- * In order to accomodate multi-layout grids,
+ * In order to accomodate variable-layout grids,
  * we need to create an intermediate map that keeps track
  * of the "pseudo-index" of an item that spans multiple indices
  * (consider case where item takes 2 grids, but is a single DOM Node)

src/components/NavigationFocus/get-next-grid-index.ts

@@ -34,25 +34,31 @@ const isLeftMostColumn = (itemsPerRow: number, index: number) => (index % itemsP
 const isRightMostColumn = (grid: IGridItem[], itemsPerRow: number, index: number) =>  index % itemsPerRow === itemsPerRow - 1 || index === grid.length - 1;
 const isTopRow = (itemsPerRow: number, index: number) => index <= itemsPerRow - 1;
 
+const isEdgeColumn = (grid: IGridItem[], itemsPerRow: number, index: number, direction: Direction) => {
+  switch (direction) {
+    case 'up': return isTopRow(itemsPerRow, index);
+    case 'down': return isBottomRow(grid, itemsPerRow, index);
+    case 'left': return isLeftMostColumn(itemsPerRow, index);
+    case 'right': return isRightMostColumn(grid, itemsPerRow, index);
+    default: return false;
+  }
+};
+
 /**
- * 
+ * Given a direction (left or right), this function iterates through
+ * a row until it finds a new grid item that is not disabled.
  */
 const getAvailableAdjacentIndex = (grid: IGridItem[], itemsPerRow: number, startingIndex: number, direction: 'left' | 'right') => {
   let newIndex = startingIndex;
   let countIndex = newIndex;
   const offset = DIRECTIONAL_OFFSETS[direction];
 
-  while (!!grid[countIndex]) {
+  while (!!grid[countIndex] && !isEdgeColumn(grid, itemsPerRow, countIndex, direction)) {
     const offsetIndex = countIndex + offset;
 
-    // Bail if it's an edge column
-    if (direction === 'left' ? isLeftMostColumn(itemsPerRow, countIndex) : isRightMostColumn(grid, itemsPerRow, countIndex)) {
+    if (!!grid[offsetIndex] && !grid[offsetIndex].isDisabled && grid[offsetIndex].index !== grid[startingIndex].index) {
+      newIndex = offsetIndex;
       break;
-    } else if (!!grid[offsetIndex]) {
-      if (!grid[offsetIndex].isDisabled && grid[offsetIndex].index !== grid[startingIndex].index) {
-        newIndex = offsetIndex;
-        break;
-      }
     }
 
     countIndex += offset;
@@ -61,14 +67,19 @@ const getAvailableAdjacentIndex = (grid: IGridItem[], itemsPerRow: number, start
   return newIndex;
 };
 
+/**
+ * Given a direction (up or down), this function finds an enabled item
+ * on a row in the given direction. 
+ */
 const getAvailableVerticalIndex = (grid: IGridItem[], itemsPerRow: number, startingIndex: number, direction: 'up' | 'down') => {
   let newIndex = startingIndex;
   const offset = DIRECTIONAL_OFFSETS[direction];
 
-  if (direction === 'up' ? !isTopRow(itemsPerRow, startingIndex) : !isBottomRow(grid, itemsPerRow, startingIndex)) {
+  if (!isEdgeColumn(grid, itemsPerRow, startingIndex, direction)) {
     /**
      * If destination grid is disabled, check if it's a left most column.
-     * If it is, select the tile adjacent right.
+     * If it is, iterate right until we find an enabled grid item.
+     * If it's not, iterate left until we find an enabled grid item.
      */
     do {
       newIndex += (itemsPerRow * offset);