feat: Add onActive and onInactive props to SpatialNavigationNode

bamlab · Apr 9, 2024 · e79c480 · e79c480
1 parent 7629d76
commit e79c480
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -51,6 +51,8 @@ The `SpatialNavigationNode` component receives the following props:
 | `onFocus`     | `function`                                                                                         | `undefined`  | Callback function to be called when the node gains focus.                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `onBlur`      | `function`                                                                                         | `undefined`  | Callback function to be called when the node loses focus.                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `onSelect`    | `function`                                                                                         | `undefined`  | Callback function to be called when the node is selected.                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `onActive`     | `function`                                                                                         | `undefined`  | Callback function to be called when the node is made active by either itself or one of its descendants gaining focus. |
+| `onInactive`     | `function`                                                                                         | `undefined`  | Callback function to be called when the node was active and due to an updated focus, is no longer active.                                                                                                                                                                                                                                                                        |
 | `orientation` | `'vertical' \| 'horizontal`                                                                        | `'vertical'` | Determines the orientation of the node.                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | `isFocusable` | `boolean`                                                                                          | `false`      | Determines if the node is focusable or not. If it's `true`, the `children` prop must be a function that returns a React element and accepts a parameter with a `isFocused` property. If it's `false` or not provided, `children` can be any valid React node.                                                                                                                                                                                                         |
 | `alignInGrid` | `boolean`                                                                                          | `false`      | Determines whether child lists should behave like a grid.                                                                                                                                                                                                                                                                                                                                                                                                             |

diff --git a/packages/lib/src/spatial-navigation/components/Node.tsx b/packages/lib/src/spatial-navigation/components/Node.tsx
@@ -21,6 +21,8 @@ type DefaultProps = {
   onFocus?: () => void;
   onBlur?: () => void;
   onSelect?: () => void;
+  onActive?: () => void;
+  onInactive?: () => void;
   orientation?: NodeOrientation;
   /** Use this for grid alignment.
    * @see LRUD docs */
@@ -80,6 +82,8 @@ export const SpatialNavigationNode = forwardRef<SpatialNavigationNodeRef, Props>
       onFocus,
       onBlur,
       onSelect,
+      onActive,
+      onInactive,
       orientation = 'vertical',
       isFocusable = false,
       alignInGrid = false,
@@ -129,6 +133,12 @@ export const SpatialNavigationNode = forwardRef<SpatialNavigationNodeRef, Props>
     const currentOnBlur = useRef<() => void>();
     currentOnBlur.current = onBlur;
 
+    const currentOnActive = useRef<() => void>();
+    currentOnActive.current = onActive;
+
+    const currentOnInactive = useRef<() => void>();
+    currentOnInactive.current = onInactive;
+
     const shouldHaveDefaultFocus = useSpatialNavigatorDefaultFocus();
 
     useEffect(() => {
@@ -147,8 +157,14 @@ export const SpatialNavigationNode = forwardRef<SpatialNavigationNodeRef, Props>
         orientation,
         isIndexAlign: alignInGrid,
         indexRange,
-        onActive: () => setIsActive(true),
-        onInactive: () => setIsActive(false),
+        onActive: () => {
+          currentOnActive.current?.();
+          setIsActive(true);
+        },
+        onInactive: () => {
+          currentOnInactive.current?.();
+          setIsActive(false);
+        },
       });
 
       return () => spatialNavigator.unregisterNode(id);