Changed onBecameFocused and added onBecameBlurred (#59)

* Changed onBecameFocused and added onBecameBlurred

* typos

Author: enrico-bardelli

CHANGELOG.md

@@ -4,6 +4,12 @@ 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.10.0]
+### Changed
+- Changed behaviour of `onBecameFocused`, now it's invoked also in case of stealFocus
+### Added
+- Added `onBecameBlurred` with the same behaviour of `onBecameFocused` but invoked on component losing focus
+
 ## [2.9.3]
 ### Added
 - Added `KeyDetails` param on callback functions `onEnterPress` and `onArrowPress`

README.md

@@ -86,6 +86,7 @@ const ParentComponent = (props) => (<View>
     onEnterPress={props.onItemPress}
     onArrowPress={props.onArrowPress}
     onBecameFocused={props.onItemFocused}
+    onBecameBlurred={props.onItemBlurred}
   />
   ...
 </View>);
@@ -187,7 +188,7 @@ Enable visual debugging (all layouts, reference points and siblings refernce poi
 Enable Native mode. It will block certain web-only functionality such as:
 - adding window key listeners
 - measuring DOM layout
-- `onBecameFocused` callback doesn't return coordinates, but still has node ref to lazy measure layout
+- `onBecameFocused` and `onBecameBlurred` callbacks doesn't return coordinates, but still has node ref to lazy measure layout
 - coordinates calculations when navigating
 - down-tree propagation
 - last focused child
@@ -302,7 +303,7 @@ const onPress = (direction, {prop1, prop2}) => {
 ```
 
 ### `onBecameFocused`: function
-Callback function that is called when the item becomes focused directly or during propagation of the focus to the children components. For example when you have nested tree of 5 focusable components, this callback will be called on every level of down-tree focus propagation.
+Callback function that is called when the item becomes focused directly or when any of the children components become focused. For example when you have nested tree of 5 focusable components, this callback will be called on every level of down-tree focus change.
 
 Payload:
 Component layout object is passed as a first param. All the component props passed back to this callback. Useful to avoid creating callback functions during render. `x` and `y` are relative coordinates to parent DOM (**not the Focusable parent**) element. `left` and `top` are absolute coordinates on the screen.
@@ -319,6 +320,24 @@ const onFocused = ({width, height, x, y, top, left, node}, {prop1, prop2}) => {.
 ...
 ```
 
+### `onBecameBlurred`: function
+Callback function that is called when the item loses focus or when all the children components lose focus. For example when you have nested tree of 5 focusable components, this callback will be called on every level of down-tree focus change.
+
+Payload:
+Component layout object is passed as a first param. All the component props passed back to this callback. Useful to avoid creating callback functions during render. `x` and `y` are relative coordinates to parent DOM (**not the Focusable parent**) element. `left` and `top` are absolute coordinates on the screen.
+
+```jsx
+const onBlur = ({width, height, x, y, top, left, node}, {prop1, prop2}) => {...};
+
+...
+<FocusableItem 
+  prop1={111}
+  prop2={222}
+  onBecameBlurred={onBlur}
+/>
+...
+```
+
 ## Props passed to Wrapped Component
 ### `focusKey`: string
 Focus key that represents the focus key that was applied to HOC component. Might be `null` when not set. It is recommended to not rely on this prop ¯\\\_(ツ)_/¯

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noriginmedia/react-spatial-navigation",
-  "version": "2.9.3",
+  "version": "2.10.0",
   "description": "HOC-based Spatial Navigation (key navigation) solution for React",
   "main": "dist/index.js",
   "files": [

src/spatialNavigation.js

@@ -659,8 +659,6 @@ class SpatialNavigation {
     );
 
     if (children.length > 0) {
-      this.onIntermediateNodeBecameFocused(targetFocusKey);
-
       const {lastFocusedChildKey, preferredChildFocusKey} = targetComponent;
 
       this.log('getNextFocusKey', 'lastFocusedChildKey is', lastFocusedChildKey);
@@ -712,6 +710,7 @@ class SpatialNavigation {
     onEnterPressHandler,
     onArrowPressHandler,
     onBecameFocusedHandler,
+    onBecameBlurredHandler,
     forgetLastFocusedChild,
     trackChildren,
     onUpdateFocus,
@@ -726,6 +725,7 @@ class SpatialNavigation {
       onEnterPressHandler,
       onArrowPressHandler,
       onBecameFocusedHandler,
+      onBecameBlurredHandler,
       onUpdateFocus,
       onUpdateHasFocusedChild,
       forgetLastFocusedChild,
@@ -849,12 +849,14 @@ class SpatialNavigation {
       const parentComponent = this.focusableComponents[parentFocusKey];
 
       parentComponent && parentComponent.trackChildren && parentComponent.onUpdateHasFocusedChild(false);
+      this.onIntermediateNodeBecameBlurred(parentFocusKey);
     });
 
     forEach(parentsToAddFlag, (parentFocusKey) => {
       const parentComponent = this.focusableComponents[parentFocusKey];
 
       parentComponent && parentComponent.trackChildren && parentComponent.onUpdateHasFocusedChild(true);
+      this.onIntermediateNodeBecameFocused(parentFocusKey);
     });
 
     this.parentsHavingFocusedChild = parents;
@@ -907,6 +909,11 @@ class SpatialNavigation {
       this.focusableComponents[focusKey].onBecameFocusedHandler(this.getNodeLayoutByFocusKey(focusKey));
   }
 
+  onIntermediateNodeBecameBlurred(focusKey) {
+    this.isParticipatingFocusableComponent(focusKey) &&
+      this.focusableComponents[focusKey].onBecameBlurredHandler(this.getNodeLayoutByFocusKey(focusKey));
+  }
+
   pause() {
     this.paused = true;
   }

src/withFocusable.js

@@ -85,6 +85,12 @@ const withFocusable = ({
     }) => (layout) => {
       onBecameFocused(layout, rest);
     },
+    onBecameBlurredHandler: ({
+      onBecameBlurred = noop,
+      ...rest
+    }) => (layout) => {
+      onBecameBlurred(layout, rest);
+    },
     pauseSpatialNavigation: () => SpatialNavigation.pause,
     resumeSpatialNavigation: () => SpatialNavigation.resume
   }),
@@ -99,6 +105,7 @@ const withFocusable = ({
         onEnterPressHandler,
         onArrowPressHandler,
         onBecameFocusedHandler,
+        onBecameBlurredHandler,
         onUpdateFocus,
         onUpdateHasFocusedChild,
         trackChildren,
@@ -115,6 +122,7 @@ const withFocusable = ({
         onEnterPressHandler,
         onArrowPressHandler,
         onBecameFocusedHandler,
+        onBecameBlurredHandler,
         onUpdateFocus,
         onUpdateHasFocusedChild,
         forgetLastFocusedChild: (configForgetLastFocusedChild || forgetLastFocusedChild),
@@ -124,7 +132,12 @@ const withFocusable = ({
     },
     componentDidUpdate(prevProps) {
       const {
-        focused, realFocusKey: focusKey, onBecameFocusedHandler, preferredChildFocusKey, focusable = true
+        focused,
+        realFocusKey: focusKey,
+        onBecameFocusedHandler,
+        onBecameBlurredHandler,
+        preferredChildFocusKey,
+        focusable = true
       } = this.props;
 
       const node = SpatialNavigation.isNativeMode() ? this : findDOMNode(this);
@@ -137,6 +150,8 @@ const withFocusable = ({
 
       if (!prevProps.focused && focused) {
         onBecameFocusedHandler(SpatialNavigation.getNodeLayoutByFocusKey(focusKey));
+      } else if (prevProps.focused && !focused) {
+        onBecameBlurredHandler(SpatialNavigation.getNodeLayoutByFocusKey(focusKey));
       }
     },
     componentWillUnmount() {
@@ -152,6 +167,7 @@ const withFocusable = ({
 
   omitProps([
     'onBecameFocusedHandler',
+    'onBecameBlurredHandler',
     'onEnterPressHandler',
     'onArrowPressHandler',
     'onUpdateFocus',