fix(NavigationManager): allow itemPosX and itemPosY to animate the It…

…ems element and adjust on the update lifecycle
rdkcentral · Mar 11, 2024 · 5e39c16 · 5e39c16
1 parent 4a9c28a
commit 5e39c16
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 17 deletions.
diff --git a/packages/@lightningjs/ui-components/src/components/Column/Column.stories.js b/packages/@lightningjs/ui-components/src/components/Column/Column.stories.js
@@ -20,6 +20,7 @@ import lng from '@lightningjs/core';
 import { context } from '../../globals';
 import { flatten, getWidthByUpCount } from '../../utils';
 import Row from '../Row';
+import TitleRow from '../TitleRow';
 import Tile from '../Tile';
 import Button from '../Button';
 import { default as ColumnComponent } from '.';
@@ -36,6 +37,19 @@ const columnHeight =
   context.theme.layout.screenH -
   2 * (context.theme.layout.marginY + context.theme.layout.gutterY);
 
+const createRows = (rowType, length, style, items) => {
+  return Array.from({ length }).map((_, i) => {
+    return {
+      type: rowType,
+      title: `Row ${i}`,
+      autoResizeHeight: true,
+      w: getWidthByUpCount(context.theme, 1),
+      items,
+      style
+    };
+  });
+};
+
 // creates an array of buttons to be used in Stories
 const createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => {
   return Array.from({ length }).map((_, i) => {
@@ -770,3 +784,23 @@ RemovingItems.parameters = {
   storyDetails:
     'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.'
 };
+
+export const ShiftingItemPos = () =>
+  class ShiftingItemPos extends lng.Component {
+    static _template() {
+      return {
+        Column: {
+          type: ColumnComponent,
+          h:
+            context.theme.layout.screenH -
+            2 * (context.theme.layout.marginY + context.theme.layout.gutterY),
+          items: createRows(
+            TitleRow,
+            10,
+            { mode: { focused: { titleMarginBottom: 100 } } },
+            createItems(Button, 10)
+          )
+        }
+      };
+    }
+  };
diff --git a/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js b/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js
@@ -39,7 +39,7 @@ export default class FocusManager extends Base {
   }
 
   static get properties() {
-    return ['direction', 'wrapSelected'];
+    return ['direction', 'wrapSelected', 'itemPosX', 'itemPosY'];
   }
 
   _construct() {
@@ -89,21 +89,21 @@ export default class FocusManager extends Base {
     this._checkSkipFocus();
   }
 
-  set itemPosX(x) {
-    this.Items.x = this._itemPosX = x;
-  }
+  // set itemPosX(x) {
+  //   this.Items.x = this._itemPosX = x;
+  // }
 
-  get itemPosX() {
-    return this._itemPosX;
-  }
+  // get itemPosX() {
+  //   return this._itemPosX;
+  // }
 
-  set itemPosY(y) {
-    this.Items.y = this._itemPosY = y;
-  }
+  // set itemPosY(y) {
+  //   this.Items.y = this._itemPosY = y;
+  // }
 
-  get itemPosY() {
-    return this._itemPosY;
-  }
+  // get itemPosY() {
+  //   return this._itemPosY;
+  // }
 
   _resetItems() {
     this.Items.childList.clear();

diff --git a/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.js b/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.js
@@ -104,9 +104,16 @@ export default class NavigationManager extends FocusManager {
   }
 
   _update() {
+    super._update();
+    this._updateDefaultItemPos();
     this._updateLayout();
   }
 
+  _updateDefaultItemPos() {
+    const itemPos = this._isRow ? { y: this.itemPosY } : { x: this.itemPosX };
+    this.applySmooth(this.Items, itemPos);
+  }
+
   _updateLayout() {
     const { lengthDimension, crossDimension, crossAxis, innerCrossDimension } =
       this._directionPropNames;

diff --git a/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js b/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js
@@ -52,9 +52,9 @@ export default class TitleRow extends Row {
   }
 
   _update() {
+    this._updateRow();
     super._update();
     this._updateTitle();
-    this._updateRow();
   }
 
   _autoResize() {
@@ -94,9 +94,10 @@ export default class TitleRow extends Row {
   }
 
   _updateRow() {
-    this.applySmooth(this.Items, {
-      y: this.title ? this._Title.finalH + this.style.titleMarginBottom : 0
-    });
+    this.itemPosY =
+      this.title && this._Title
+        ? this._Title.finalH + this.style.titleMarginBottom
+        : 0;
   }
 
   set announce(announce) {