Feat/add on arrow release

README.md

@@ -463,6 +463,10 @@ Receives `direction` (`left`, `right`, `up`, `down`), `extraProps` (see below) a
 This callback HAS to return `true` if you want to proceed with the default directional navigation behavior, or `false`
 if you want to block the navigation in the specified direction.
 
+##### `onArrowRelease` (function)
+Callback that is called when the component is focused and Arrow key is released.
+Receives `direction` (`left`, `right`, `up`, `down`), `extraProps` (see below) as argument.
+
 ##### `onFocus` (function)
 Callback that is called when component gets focus.
 Receives `FocusableComponentLayout`, `extraProps` and `FocusDetails` as arguments.

src/App.tsx

@@ -153,6 +153,7 @@ function Menu({ focusKey: focusKeyParam }: MenuProps) {
     onEnterPress: () => {},
     onEnterRelease: () => {},
     onArrowPress: () => true,
+    onArrowRelease: () => {},
     onFocus: () => {},
     onBlur: () => {},
     extraProps: { foo: 'bar' }
@@ -383,6 +384,85 @@ const ScrollingRows = styled.div`
   flex-grow: 1;
 `;
 
+interface ProgressBarWrapperProps {
+  focused: boolean;
+}
+
+interface ProgressBarProgressProps {
+  percent: number;
+  focused: boolean;
+}
+
+const ProgressBarWrapper = styled.div<ProgressBarWrapperProps>`
+  position: absolute;
+  bottom: 95px;
+  right: 100px;
+  width: 540px;
+  height: 24px;
+  background-color: gray;
+  border-radius: 21px;
+  border-color: white;
+  border-style: solid;
+  border-width: ${({ focused }) => (focused ? '6px' : 0)};
+  box-sizing: border-box;
+`;
+
+const ProgressBarProgress = styled.div<ProgressBarProgressProps>`
+  width: ${({ percent }) => `${percent}%`};
+  height: 100%;
+  background-color: ${({ focused }) =>
+    focused ? 'deepskyblue' : 'dodgerblue'};
+  border-radius: 21px;
+`;
+
+const defaultPercent = 10;
+const seekPercent = 10;
+const delayedTime = 100;
+const DIRECTION_RIGHT = 'right';
+
+function ProgressBar() {
+  const [percent, setPercent] = useState(defaultPercent);
+  const timerRef = useRef<NodeJS.Timer | null>(null);
+  const { ref, focused } = useFocusable({
+    onArrowPress: (direction: string) => {
+      if (direction === DIRECTION_RIGHT && timerRef.current === null) {
+        timerRef.current = setInterval(() => {
+          setPercent((prevPercent) =>
+            prevPercent >= 100 ? prevPercent : prevPercent + seekPercent
+          );
+        }, delayedTime);
+        return true;
+      }
+      return true;
+    },
+    onArrowRelease: (direction: string) => {
+      if (direction === DIRECTION_RIGHT) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    }
+  });
+  useEffect(() => {
+    if (!focused) {
+      setPercent(defaultPercent);
+    }
+  }, [focused]);
+  useEffect(
+    () => () => {
+      if (timerRef.current !== null) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    },
+    []
+  );
+  return (
+    <ProgressBarWrapper ref={ref} focused={focused}>
+      <ProgressBarProgress percent={percent} focused={focused} />
+    </ProgressBarWrapper>
+  );
+}
+
 function Content() {
   const { ref, focusKey } = useFocusable();
 
@@ -415,6 +495,7 @@ function Content() {
               ? selectedAsset.title
               : 'Press "Enter" to select an asset'}
           </SelectedItemTitle>
+          <ProgressBar />
         </SelectedItemWrapper>
         <ScrollingRows ref={ref}>
           <div>

src/SpatialNavigation.ts

@@ -80,6 +80,7 @@ interface FocusableComponent {
   onEnterPress: (details?: KeyPressDetails) => void;
   onEnterRelease: () => void;
   onArrowPress: (direction: string, details: KeyPressDetails) => boolean;
+  onArrowRelease: (direction: string) => void;
   onFocus: (layout: FocusableComponentLayout, details: FocusDetails) => void;
   onBlur: (layout: FocusableComponentLayout, details: FocusDetails) => void;
   onUpdateFocus: (focused: boolean) => void;
@@ -106,6 +107,7 @@ interface FocusableComponentUpdatePayload {
   onEnterPress: (details?: KeyPressDetails) => void;
   onEnterRelease: () => void;
   onArrowPress: (direction: string, details: KeyPressDetails) => boolean;
+  onArrowRelease: (direction: string) => void;
   onFocus: (layout: FocusableComponentLayout, details: FocusDetails) => void;
   onBlur: (layout: FocusableComponentLayout, details: FocusDetails) => void;
 }
@@ -155,9 +157,9 @@ const getChildClosestToOrigin = (
   const comparator =
     writingDirection === WritingDirection.LTR
       ? ({ layout }: FocusableComponent) =>
-          Math.abs(layout.left) + Math.abs(layout.top)
+        Math.abs(layout.left) + Math.abs(layout.top)
       : ({ layout }: FocusableComponent) =>
-          Math.abs(window.innerWidth - layout.right) + Math.abs(layout.top);
+        Math.abs(window.innerWidth - layout.right) + Math.abs(layout.top);
 
   const childrenClosestToOrigin = sortBy(children, comparator);
 
@@ -272,22 +274,22 @@ class SpatialNavigationService {
     const itemStart = isVertical
       ? layout.top
       : writingDirection === WritingDirection.LTR
-      ? layout.left
-      : layout.right;
+        ? layout.left
+        : layout.right;
 
     const itemEnd = isVertical
       ? layout.bottom
       : writingDirection === WritingDirection.LTR
-      ? layout.right
-      : layout.left;
+        ? layout.right
+        : layout.left;
 
     return isIncremental
       ? isSibling
         ? itemStart
         : itemEnd
       : isSibling
-      ? itemEnd
-      : itemStart;
+        ? itemEnd
+        : itemStart;
   }
 
   /**
@@ -405,7 +407,7 @@ class SpatialNavigationService {
     const intersectionLength = Math.max(
       0,
       Math.min(refCoordinateB, siblingCoordinateB) -
-        Math.max(refCoordinateA, siblingCoordinateA)
+      Math.max(refCoordinateA, siblingCoordinateA)
     );
 
     return intersectionLength >= thresholdDistance;
@@ -830,6 +832,14 @@ class SpatialNavigationService {
         if (eventType === KEY_ENTER && this.focusKey) {
           this.onEnterRelease();
         }
+
+        if (this.focusKey && (
+          eventType === DIRECTION_LEFT ||
+          eventType === DIRECTION_RIGHT ||
+          eventType === DIRECTION_UP ||
+          eventType === DIRECTION_DOWN)) {
+          this.onArrowRelease(eventType)
+        }
       };
 
       window.addEventListener('keyup', this.keyUpEventListener);
@@ -921,6 +931,28 @@ class SpatialNavigationService {
     );
   }
 
+  onArrowRelease(direction: string) {
+    const component = this.focusableComponents[this.focusKey];
+
+    /* Guard against last-focused component being unmounted at time of onArrowRelease (e.g due to UI fading out) */
+    if (!component) {
+      this.log('onArrowRelease', 'noComponent');
+
+      return;
+    }
+
+    /* Suppress onArrowRelease if the last-focused item happens to lose its 'focused' status. */
+    if (!component.focusable) {
+      this.log('onArrowRelease', 'componentNotFocusable');
+
+      return;
+    }
+
+    if (component.onArrowRelease) {
+      component.onArrowRelease(direction);
+    }
+  }
+
   /**
    * Move focus by direction, if you can't use buttons or focusing by key.
    *
@@ -1039,12 +1071,12 @@ class SpatialNavigationService {
               ? siblingCutoffCoordinate >= currentCutoffCoordinate // vertical next
               : siblingCutoffCoordinate <= currentCutoffCoordinate // vertical previous
             : this.writingDirection === WritingDirection.LTR
-            ? isIncrementalDirection
-              ? siblingCutoffCoordinate >= currentCutoffCoordinate // horizontal LTR next
-              : siblingCutoffCoordinate <= currentCutoffCoordinate // horizontal LTR previous
-            : isIncrementalDirection
-            ? siblingCutoffCoordinate <= currentCutoffCoordinate // horizontal RTL next
-            : siblingCutoffCoordinate >= currentCutoffCoordinate; // horizontal RTL previous
+              ? isIncrementalDirection
+                ? siblingCutoffCoordinate >= currentCutoffCoordinate // horizontal LTR next
+                : siblingCutoffCoordinate <= currentCutoffCoordinate // horizontal LTR previous
+              : isIncrementalDirection
+                ? siblingCutoffCoordinate <= currentCutoffCoordinate // horizontal RTL next
+                : siblingCutoffCoordinate >= currentCutoffCoordinate; // horizontal RTL previous
         }
 
         return false;
@@ -1128,8 +1160,7 @@ class SpatialNavigationService {
       // eslint-disable-next-line no-console
       console.log(
         `%c${functionName}%c${debugString}`,
-        `background: ${
-          DEBUG_FN_COLORS[this.logIndex % DEBUG_FN_COLORS.length]
+        `background: ${DEBUG_FN_COLORS[this.logIndex % DEBUG_FN_COLORS.length]
         }; color: black; padding: 1px 5px;`,
         'background: #333; color: #BADA55; padding: 1px 5px;',
         ...rest
@@ -1275,6 +1306,7 @@ class SpatialNavigationService {
     onEnterPress,
     onEnterRelease,
     onArrowPress,
+    onArrowRelease,
     onFocus,
     onBlur,
     saveLastFocusedChild,
@@ -1295,6 +1327,7 @@ class SpatialNavigationService {
       onEnterPress,
       onEnterRelease,
       onArrowPress,
+      onArrowRelease,
       onFocus,
       onBlur,
       onUpdateFocus,

src/__tests__/SpatialNavigation.test.ts

@@ -129,11 +129,12 @@ describe('SpatialNavigation', () => {
       } as unknown as HTMLElement,
       isFocusBoundary: false,
       focusable: true,
-      onEnterPress: () => {},
-      onEnterRelease: () => {},
-      onFocus: () => {},
-      onBlur: () => {},
-      onArrowPress: () => true
+      onEnterPress: () => { },
+      onEnterRelease: () => { },
+      onFocus: () => { },
+      onBlur: () => { },
+      onArrowPress: () => true,
+      onArrowRelease: () => { },
     });
 
     SpatialNavigation.navigateByDirection('right', {});