Skip to content
This repository was archived by the owner on May 5, 2023. It is now read-only.

Commit 9868d65

Browse files
authored
Added onEnter release event (#98)
1 parent c4ad505 commit 9868d65

6 files changed

Lines changed: 46 additions & 3 deletions

File tree

CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
44
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
55
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66

7+
## [2.12.8]
8+
### Added
9+
- onEnterRelease event triggered when the Enter is released from the focused item
10+
711
## [2.12.7]
812
### Added
913
- SSR support, additional checks for `window` object to avoid errors on SSR environments.

README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,18 +284,22 @@ String that is used as a component focus key. Should be **unique**, otherwise it
284284
### `onEnterPress`: function
285285
Callback function that is called when the item is currently focused and Enter (OK) key is pressed.
286286

287+
### `onEnterRelease`: function
288+
Callback function that is called when the item is currently focused and Enter (OK) key is released.
289+
287290
Payload:
288291
1. All the props passed to HOC is passed back to this callback. Useful to avoid creating callback functions during render.
289292
2. [Details](#keydetails-object) - info about pressed keys
290293

291294
```jsx
292295
const onPress = ({prop1, prop2}, details) => {...};
293-
296+
const onRelease = ({prop1, prop2}) => {...};
294297
...
295298
<FocusableItem
296299
prop1={111}
297300
prop2={222}
298301
onEnterPress={onPress}
302+
onEnterRelease={onRelease}
299303
/>
300304
...
301305
```

package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@noriginmedia/react-spatial-navigation",
3-
"version": "2.12.7",
3+
"version": "2.12.8",
44
"description": "HOC-based Spatial Navigation (key navigation) solution for React",
55
"main": "dist/index.js",
66
"files": [

src/spatialNavigation.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -443,6 +443,10 @@ class SpatialNavigation {
443443
if (this.throttle && !this.throttleKeypresses) {
444444
this.keyDownEventListener.cancel();
445445
}
446+
447+
if (eventType === KEY_ENTER && this.focusKey) {
448+
this.onEnterRelease();
449+
}
446450
};
447451

448452
window.addEventListener('keyup', this.keyUpEventListener);
@@ -483,6 +487,26 @@ class SpatialNavigation {
483487
component.onEnterPressHandler && component.onEnterPressHandler(details);
484488
}
485489

490+
onEnterRelease() {
491+
const component = this.focusableComponents[this.focusKey];
492+
493+
/* Guard against last-focused component being unmounted at time of onEnterRelease (e.g due to UI fading out) */
494+
if (!component) {
495+
this.log('onEnterRelease', 'noComponent');
496+
497+
return;
498+
}
499+
500+
/* Suppress onEnterRelease if the last-focused item happens to lose its 'focused' status. */
501+
if (!component.focusable) {
502+
this.log('onEnterRelease', 'componentNotFocusable');
503+
504+
return;
505+
}
506+
507+
component.onEnterReleaseHandler && component.onEnterReleaseHandler();
508+
}
509+
486510
onArrowPress(...args) {
487511
const component = this.focusableComponents[this.focusKey];
488512

@@ -722,6 +746,7 @@ class SpatialNavigation {
722746
node,
723747
parentFocusKey,
724748
onEnterPressHandler,
749+
onEnterReleaseHandler,
725750
onArrowPressHandler,
726751
onBecameFocusedHandler,
727752
onBecameBlurredHandler,
@@ -739,6 +764,7 @@ class SpatialNavigation {
739764
node,
740765
parentFocusKey,
741766
onEnterPressHandler,
767+
onEnterReleaseHandler,
742768
onArrowPressHandler,
743769
onBecameFocusedHandler,
744770
onBecameBlurredHandler,

src/withFocusable.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,12 @@ const withFocusable = ({
7777
}) => (details) => {
7878
onEnterPress(rest, details);
7979
},
80+
onEnterReleaseHandler: ({
81+
onEnterRelease = noop,
82+
...rest
83+
}) => () => {
84+
onEnterRelease(rest);
85+
},
8086
onArrowPressHandler: ({
8187
onArrowPress = noop,
8288
...rest
@@ -106,6 +112,7 @@ const withFocusable = ({
106112
preferredChildFocusKey,
107113
forgetLastFocusedChild = false,
108114
onEnterPressHandler,
115+
onEnterReleaseHandler,
109116
onArrowPressHandler,
110117
onBecameFocusedHandler,
111118
onBecameBlurredHandler,
@@ -125,6 +132,7 @@ const withFocusable = ({
125132
parentFocusKey,
126133
preferredChildFocusKey,
127134
onEnterPressHandler,
135+
onEnterReleaseHandler,
128136
onArrowPressHandler,
129137
onBecameFocusedHandler,
130138
onBecameBlurredHandler,
@@ -169,6 +177,7 @@ const withFocusable = ({
169177
'onBecameFocusedHandler',
170178
'onBecameBlurredHandler',
171179
'onEnterPressHandler',
180+
'onEnterReleaseHandler',
172181
'onArrowPressHandler',
173182
'onUpdateFocus',
174183
'onUpdateHasFocusedChild',

0 commit comments

Comments
 (0)