diff --git a/CHANGELOG.md b/CHANGELOG.md index 74b8d9b..52b6ff5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [2.12.9] +### Changed +- performance optimization: updateLayout is only called for components affected by navigation + ## [2.12.8] ### Added - onEnterRelease event triggered when the Enter is released from the focused item diff --git a/package-lock.json b/package-lock.json index 4700499..d94c606 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@noriginmedia/react-spatial-navigation", - "version": "2.12.8", + "version": "2.12.9", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 98c6504..7ea02fb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@noriginmedia/react-spatial-navigation", - "version": "2.12.8", + "version": "2.12.9", "description": "HOC-based Spatial Navigation (key navigation) solution for React", "main": "dist/index.js", "files": [ diff --git a/src/spatialNavigation.js b/src/spatialNavigation.js index c082e36..12ab57c 100644 --- a/src/spatialNavigation.js +++ b/src/spatialNavigation.js @@ -569,7 +569,9 @@ class SpatialNavigation { this.log('smartNavigate', 'this.focusKey', this.focusKey); if (!this.nativeMode && !fromParentFocusKey) { - this.updateAllLayouts(); + forOwn(this.focusableComponents, (component) => { + component.layoutUpdated = false; + }); } const currentComponent = this.focusableComponents[fromParentFocusKey || this.focusKey]; @@ -581,6 +583,7 @@ class SpatialNavigation { ); if (currentComponent) { + this.updateLayout(currentComponent.focusKey); const {parentFocusKey, focusKey, layout} = currentComponent; const isVerticalDirection = direction === DIRECTION_DOWN || direction === DIRECTION_UP; @@ -598,6 +601,7 @@ class SpatialNavigation { */ const siblings = filter(this.focusableComponents, (component) => { if (component.parentFocusKey === parentFocusKey && component.focusable) { + this.updateLayout(component.focusKey); const siblingCutoffCoordinate = SpatialNavigation.getCutoffCoordinate( isVerticalDirection, isIncrementalDirection, @@ -726,6 +730,7 @@ class SpatialNavigation { /** * Otherwise, trying to focus something by coordinates */ + children.forEach((component) => this.updateLayout(component.focusKey)); const {focusKey: childKey} = getChildClosestToOrigin(children); this.log('getNextFocusKey', 'childKey will be focused', childKey); @@ -790,7 +795,8 @@ class SpatialNavigation { * E.g. used in native environments to lazy-measure the layout on focus */ node - } + }, + layoutUpdated: false }; if (this.nativeMode) { @@ -841,6 +847,8 @@ class SpatialNavigation { const component = this.focusableComponents[focusKey]; if (component) { + this.updateLayout(component.focusKey); + return component.layout; } @@ -1002,7 +1010,7 @@ class SpatialNavigation { updateLayout(focusKey) { const component = this.focusableComponents[focusKey]; - if (!component || this.nativeMode) { + if (!component || this.nativeMode || component.layoutUpdated) { return; }