@noriginmedia/react-spatial-navigation
Advanced tools
@noriginmedia/react-spatial-navigation - npm Package Compare versions
Comparing version 2.7.1 to 2.7.2
@@ -7,3 +7,7 @@ # Changelog | ||
| ## [2.7.0] | ||
| ## [2.7.2] | ||
| ### Changed | ||
| - Allowed components to be focused with `setFocus` even if they have `focusable={false}` | ||
| ## [2.7.1] | ||
| ### Added | ||
@@ -10,0 +14,0 @@ - `focusable` prop that enables component as a focusable target. Default is true. Usable when you need to temporarily disable focusable behaviour on the component. E.g. disabled button state. |
@@ -199,8 +199,4 @@ 'use strict'; | ||
| value: function componentDidMount() { | ||
| var _this3 = this; | ||
| this.props.setFocus(); | ||
| setTimeout(function () { | ||
| _this3.props.setFocus(); | ||
| }, 0); | ||
| window.addEventListener('keydown', this.onPressKey); | ||
@@ -258,10 +254,10 @@ } | ||
| var _this4 = _possibleConstructorReturn(this, (Content.__proto__ || Object.getPrototypeOf(Content)).call(this, props)); | ||
| var _this3 = _possibleConstructorReturn(this, (Content.__proto__ || Object.getPrototypeOf(Content)).call(this, props)); | ||
| _this4.state = { | ||
| _this3.state = { | ||
| currentProgram: null | ||
| }; | ||
| _this4.onProgramPress = _this4.onProgramPress.bind(_this4); | ||
| return _this4; | ||
| _this3.onProgramPress = _this3.onProgramPress.bind(_this3); | ||
| return _this3; | ||
| } | ||
@@ -408,9 +404,9 @@ | ||
| var _this7 = _possibleConstructorReturn(this, (Category.__proto__ || Object.getPrototypeOf(Category)).call(this, props)); | ||
| var _this6 = _possibleConstructorReturn(this, (Category.__proto__ || Object.getPrototypeOf(Category)).call(this, props)); | ||
| _this7.scrollRef = null; | ||
| _this6.scrollRef = null; | ||
| _this7.onProgramFocused = _this7.onProgramFocused.bind(_this7); | ||
| _this7.onProgramArrowPress = _this7.onProgramArrowPress.bind(_this7); | ||
| return _this7; | ||
| _this6.onProgramFocused = _this6.onProgramFocused.bind(_this6); | ||
| _this6.onProgramArrowPress = _this6.onProgramArrowPress.bind(_this6); | ||
| return _this6; | ||
| } | ||
@@ -444,3 +440,3 @@ | ||
| value: function render() { | ||
| var _this8 = this; | ||
| var _this7 = this; | ||
@@ -463,3 +459,3 @@ // console.log('Category rendered: ', this.props.realFocusKey); | ||
| if (reference) { | ||
| _this8.scrollRef = reference; | ||
| _this7.scrollRef = reference; | ||
| } | ||
@@ -470,10 +466,10 @@ } | ||
| return _react2.default.createElement(ProgramFocusable, _extends({}, program, { | ||
| focusKey: 'PROGRAM-' + _this8.props.realFocusKey + '-' + index, | ||
| onPress: _this8.props.onProgramPress, | ||
| onEnterPress: _this8.props.onProgramPress, | ||
| focusKey: 'PROGRAM-' + _this7.props.realFocusKey + '-' + index, | ||
| onPress: _this7.props.onProgramPress, | ||
| onEnterPress: _this7.props.onProgramPress, | ||
| key: program.title, | ||
| onBecameFocused: _this8.onProgramFocused, | ||
| onArrowPress: _this8.onProgramArrowPress, | ||
| onBecameFocused: _this7.onProgramFocused, | ||
| onArrowPress: _this7.onProgramArrowPress, | ||
| programIndex: index, | ||
| categoryIndex: _this8.props.categoryIndex | ||
| categoryIndex: _this7.props.categoryIndex | ||
| })); | ||
@@ -505,8 +501,8 @@ }) | ||
| var _this9 = _possibleConstructorReturn(this, (Categories.__proto__ || Object.getPrototypeOf(Categories)).call(this, props)); | ||
| var _this8 = _possibleConstructorReturn(this, (Categories.__proto__ || Object.getPrototypeOf(Categories)).call(this, props)); | ||
| _this9.scrollRef = null; | ||
| _this8.scrollRef = null; | ||
| _this9.onCategoryFocused = _this9.onCategoryFocused.bind(_this9); | ||
| return _this9; | ||
| _this8.onCategoryFocused = _this8.onCategoryFocused.bind(_this8); | ||
| return _this8; | ||
| } | ||
@@ -526,3 +522,3 @@ | ||
| value: function render() { | ||
| var _this10 = this; | ||
| var _this9 = this; | ||
@@ -536,3 +532,3 @@ // console.log('Categories rendered: ', this.props.realFocusKey); | ||
| if (reference) { | ||
| _this10.scrollRef = reference; | ||
| _this9.scrollRef = reference; | ||
| } | ||
@@ -546,5 +542,5 @@ }, | ||
| }, category, { | ||
| onProgramPress: _this10.props.onProgramPress, | ||
| onProgramPress: _this9.props.onProgramPress, | ||
| key: category.title, | ||
| onBecameFocused: _this10.onCategoryFocused, | ||
| onBecameFocused: _this9.onCategoryFocused, | ||
| categoryIndex: index | ||
@@ -551,0 +547,0 @@ |
@@ -550,3 +550,2 @@ 'use strict'; | ||
| /* We will not check whether currentComponent is focusable; it's fine to navigate AWAY from a disabled component. */ | ||
| if (currentComponent) { | ||
@@ -612,3 +611,2 @@ var parentFocusKey = currentComponent.parentFocusKey, | ||
| value: function saveLastFocusedChildKey(component, focusKey) { | ||
| /* We won't check whether component is focusable; it's fine to save a disabled component as the lastFocusedChild. */ | ||
| if (component) { | ||
@@ -808,3 +806,3 @@ this.log('saveLastFocusedChildKey', component.focusKey + ' lastFocusedChildKey set', focusKey); | ||
| value: function setCurrentFocusedKey(focusKey) { | ||
| if (this.isParticipatingFocusableComponent(this.focusKey) && focusKey !== this.focusKey) { | ||
| if (this.isFocusableComponent(this.focusKey) && focusKey !== this.focusKey) { | ||
| var oldComponent = this.focusableComponents[this.focusKey]; | ||
@@ -947,8 +945,2 @@ var parentComponent = this.focusableComponents[oldComponent.parentFocusKey]; | ||
| if (!this.isParticipatingFocusableComponent(newFocusKey)) { | ||
| this.log('setFocus', 'noParticipatingFocusTargets', newFocusKey); | ||
| return; | ||
| } | ||
| this.log('setFocus', 'newFocusKey', newFocusKey); | ||
@@ -955,0 +947,0 @@ |
| { | ||
| "name": "@noriginmedia/react-spatial-navigation", | ||
| "version": "2.7.1", | ||
| "version": "2.7.2", | ||
| "description": "HOC-based Spatial Navigation (key navigation) solution for React", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -250,3 +250,4 @@ # react-spatial-navigation | ||
| Note that behaviour is undefined for trees of components in which an `focusable={false}` component has any `focusable={true}` components as descendants; it is recommended to ensure that all components in a given branch of the spatial navigation tree have a common `focusable` state. | ||
| Note that behaviour is undefined for trees of components in which an `focusable={false}` component has any `focusable={true}` components as descendants; it is recommended to ensure that all components in a given branch of the spatial navigation tree have a common `focusable` state. | ||
| Also `focusable={false}` does not prevent component from being directly focused with `setFocus`. It only blocks "automatic" focus logic such as directional navigation, or focusing component as lastFocusedChild or preferredFocusChild. | ||
@@ -253,0 +254,0 @@ * **false** |
@@ -145,5 +145,3 @@ /* eslint-disable react/no-multi-comp */ | ||
| componentDidMount() { | ||
| setTimeout(() => { | ||
| this.props.setFocus(); | ||
| }, 0); | ||
| this.props.setFocus(); | ||
@@ -150,0 +148,0 @@ window.addEventListener('keydown', this.onPressKey); |
@@ -476,3 +476,2 @@ import filter from 'lodash/filter'; | ||
| /* We will not check whether currentComponent is focusable; it's fine to navigate AWAY from a disabled component. */ | ||
| if (currentComponent) { | ||
@@ -555,3 +554,2 @@ const {parentFocusKey, focusKey, layout} = currentComponent; | ||
| saveLastFocusedChildKey(component, focusKey) { | ||
| /* We won't check whether component is focusable; it's fine to save a disabled component as the lastFocusedChild. */ | ||
| if (component) { | ||
@@ -736,3 +734,3 @@ this.log('saveLastFocusedChildKey', `${component.focusKey} lastFocusedChildKey set`, focusKey); | ||
| setCurrentFocusedKey(focusKey) { | ||
| if (this.isParticipatingFocusableComponent(this.focusKey) && focusKey !== this.focusKey) { | ||
| if (this.isFocusableComponent(this.focusKey) && focusKey !== this.focusKey) { | ||
| const oldComponent = this.focusableComponents[this.focusKey]; | ||
@@ -860,8 +858,2 @@ const parentComponent = this.focusableComponents[oldComponent.parentFocusKey]; | ||
| if (!this.isParticipatingFocusableComponent(newFocusKey)) { | ||
| this.log('setFocus', 'noParticipatingFocusTargets', newFocusKey); | ||
| return; | ||
| } | ||
| this.log('setFocus', 'newFocusKey', newFocusKey); | ||
@@ -868,0 +860,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by0.24%
411
Worsened metrics
- Total package byte prevSize
- decreased by-0.01%
4667751
- Lines of code
- decreased by-0.54%
3111