added autoRestoreFocus prop (#63)

* added autoRestoreFocus prop

* changes from review

Author: SMishra25

CHANGELOG.md

@@ -3,6 +3,9 @@ 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.0]
+### Changed
+- added `autoRestoreFocus` prop to control whether parent component should restore focus on any available child when a currently focused child component is unmounted.
 
 ## [2.11.0]
 ### Changed

README.md

@@ -87,6 +87,7 @@ const ParentComponent = (props) => (<View>
     onArrowPress={props.onArrowPress}
     onBecameFocused={props.onItemFocused}
     onBecameBlurred={props.onItemBlurred}
+    autoRestoreFocus={false}
   />
   ...
 </View>);
@@ -236,6 +237,11 @@ Determine whether this component should not remember the last focused child comp
 * **false (default)**
 * **true**
 
+##### `autoRestoreFocus`: boolean
+To determine whether parent component should focus the first available child component when currently focused child is unmounted.
+* **true (default)**
+* **false**
+
 ## Props that can be applied to HOC
 All these props are optional.
 
@@ -245,6 +251,9 @@ Same as in [config](#config).
 ### `forgetLastFocusedChild`: boolean
 Same as in [config](#config).
 
+### `autoRestoreFocus`: boolean
+Same as in [config](#config).
+
 ### `focusable`: boolean
 Determine whether this component should be focusable (in other words, whether it's *currently* participating in the spatial navigation tree). This allows a focusable component to be ignored as a navigation target despite being mounted (e.g. due to being off-screen, hidden, or temporarily disabled).
 

package.json

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

src/spatialNavigation.js

@@ -717,6 +717,7 @@ class SpatialNavigation {
     onUpdateFocus,
     onUpdateHasFocusedChild,
     preferredChildFocusKey,
+    autoRestoreFocus,
     focusable
   }) {
     this.focusableComponents[focusKey] = {
@@ -734,6 +735,7 @@ class SpatialNavigation {
       lastFocusedChildKey: null,
       preferredChildFocusKey,
       focusable,
+      autoRestoreFocus,
       layout: {
         x: 0,
         y: 0,
@@ -788,7 +790,7 @@ class SpatialNavigation {
       /**
        * If the component was also focused at this time, focus another one
        */
-      if (isFocused) {
+      if (isFocused && parentComponent.autoRestoreFocus) {
         this.setFocus(parentFocusKey);
       }
     }

src/withFocusable.js

@@ -18,7 +18,8 @@ const omitProps = (keys) => mapProps((props) => omit(props, keys));
 
 const withFocusable = ({
   forgetLastFocusedChild: configForgetLastFocusedChild = false,
-  trackChildren: configTrackChildren = false
+  trackChildren: configTrackChildren = false,
+  autoRestoreFocus: configAutoRestoreFocus
 } = {}) => compose(
   getContext({
     /**
@@ -109,7 +110,8 @@ const withFocusable = ({
         onUpdateFocus,
         onUpdateHasFocusedChild,
         trackChildren,
-        focusable = true
+        focusable = true,
+        autoRestoreFocus = true
       } = this.props;
 
       const node = SpatialNavigation.isNativeMode() ? this : findDOMNode(this);
@@ -127,6 +129,7 @@ const withFocusable = ({
         onUpdateHasFocusedChild,
         forgetLastFocusedChild: (configForgetLastFocusedChild || forgetLastFocusedChild),
         trackChildren: (configTrackChildren || trackChildren),
+        autoRestoreFocus: configAutoRestoreFocus !== undefined ? configAutoRestoreFocus : autoRestoreFocus,
         focusable
       });
     },
@@ -164,7 +167,8 @@ const withFocusable = ({
     'onUpdateFocus',
     'onUpdateHasFocusedChild',
     'forgetLastFocusedChild',
-    'trackChildren'
+    'trackChildren',
+    'autoRestoreFocus'
   ])
 );