diff --git a/packages/@lightningjs/ui-components/src/components/Column/Column.stories.js b/packages/@lightningjs/ui-components/src/components/Column/Column.stories.js index 3d657b7dc..8b109348a 100644 --- 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/ControlRow/__snapshots__/ControlRow.test.js.snap b/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap index 8ce6ba083..472307252 100644 --- a/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap @@ -609,7 +609,7 @@ exports[`ControlRow renders 1`] = ` "visible": true, "w": 880, "x": -40, - "y": 68, + "y": 20, "zIndex": 0, }, "Title": { diff --git a/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js b/packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js index 0f2601b43..a9fc4db8d 100644 --- 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,22 +89,6 @@ export default class FocusManager extends Base { this._checkSkipFocus(); } - set itemPosX(x) { - this.Items.x = this._itemPosX = x; - } - - get itemPosX() { - return this._itemPosX; - } - - set itemPosY(y) { - this.Items.y = this._itemPosY = y; - } - - get itemPosY() { - return this._itemPosY; - } - _resetItems() { this.Items.childList.clear(); this.Items.patch({ diff --git a/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.js b/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.js index 676e21d59..286f6cffd 100644 --- 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 index de7909019..cbe15f458 100644 --- a/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js +++ b/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js @@ -52,14 +52,14 @@ export default class TitleRow extends Row { } _update() { - super._update(); this._updateTitle(); this._updateRow(); + super._update(); } _autoResize() { this.w = this.w || this.style.w; - this.h = this.autoResizeHeight ? this.Items.y + this.Items.h : this.h; + this.h = this.autoResizeHeight ? this.itemPosY + this.Items.h : this.h; } _updateTitle() { @@ -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) { diff --git a/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.test.js b/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.test.js index 5a029929e..7629288c0 100644 --- a/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.test.js +++ b/packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.test.js @@ -96,12 +96,12 @@ describe('TitleRow', () => { items }, { - spyOnMethods: ['_titleLoaded'] + spyOnMethods: ['_update'] } ); expect(titleRow._Items.y).toBe(titleRow.style.titleMarginBottom); - await titleRow.__titleLoadedSpyPromise; + await titleRow.__updateSpyPromise; expect(titleRow._Items.y).toBe( titleRow._Title.finalH + titleRow.style.titleMarginBottom diff --git a/packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap b/packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap index e9adaa727..13885e62a 100644 --- a/packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap +++ b/packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap @@ -282,7 +282,7 @@ exports[`TitleRow renders 1`] = ` "visible": true, "w": 2220, "x": 0, - "y": 68, + "y": 20, "zIndex": 0, }, "Title": {