refactor: cleanups suggested by Adam

openedx · Dec 16, 2024 · 7b95f95 · 7b95f95
1 parent 23ee64b
commit 7b95f95
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 20 deletions.
diff --git a/src/hooks/tests/useIndexOfLastVisibleChild.test.tsx b/src/hooks/tests/useIndexOfLastVisibleChild.test.tsx
@@ -12,12 +12,12 @@ window.ResizeObserver = window.ResizeObserver
   }));
 
 function TestComponent() {
-  const [containerElementRef, setContainerElementRef] = React.useState<HTMLDivElement | null>(null);
-  const overflowElementRef = React.useRef(null);
-  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(containerElementRef, overflowElementRef.current);
+  const containerElementRef = React.useRef<HTMLDivElement>(null);
+  const overflowElementRef = React.useRef<HTMLDivElement>(null);
+  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(containerElementRef.current, overflowElementRef.current);
 
   return (
-    <div ref={setContainerElementRef} style={{ display: 'flex' }}>
+    <div ref={containerElementRef} style={{ display: 'flex' }}>
       <div style={{ width: '250px' }} className="element">Element 1</div>
       <div style={{ width: '250px' }} className="element">Element 2</div>
       <div style={{ width: '250px' }} className="element">Element 3</div>

diff --git a/src/hooks/useArrowKeyNavigation.tsx b/src/hooks/useArrowKeyNavigation.tsx
@@ -1,24 +1,24 @@
 import { useRef, useEffect } from 'react';
 
-/**
- * A React hook to enable arrow key navigation on a component.
- */
+interface HandleEnterArgs {
+  event: KeyboardEvent;
+  currentIndex: number;
+  activeElement: HTMLElement;
+}
 
-function handleEnter(
-  { event, currentIndex, activeElement }: { event: KeyboardEvent, currentIndex: number, activeElement: HTMLElement },
-) {
+function handleEnter({ event, currentIndex, activeElement }: HandleEnterArgs) {
   if (currentIndex === -1) { return; }
   activeElement.click();
   event.preventDefault();
 }
 
-function handleArrowKey(
-  { event, currentIndex, availableElements }: {
-    event: KeyboardEvent,
-    currentIndex: number,
-    availableElements: NodeListOf<HTMLElement>,
-  },
-) {
+interface HandleArrowKeyArgs {
+  event: KeyboardEvent;
+  currentIndex: number;
+  availableElements: NodeListOf<HTMLElement>;
+}
+
+function handleArrowKey({ event, currentIndex, availableElements }: HandleArrowKeyArgs) {
   // If the focus isn't in the container, focus on the first thing
   if (currentIndex === -1) { availableElements[0].focus(); }
 
@@ -44,6 +44,13 @@ function handleArrowKey(
   event.preventDefault();
 }
 
+interface HandleEventsArgs {
+  event: KeyboardEvent;
+  ignoredKeys?: string[];
+  parentNode: HTMLElement | undefined;
+  selectors?: string;
+}
+
 /**
  * Implement arrow key navigation for the given parentNode
  */
@@ -52,7 +59,7 @@ function handleEvents({
   ignoredKeys = [],
   parentNode,
   selectors = 'a,button,input',
-}: { event: KeyboardEvent, ignoredKeys?: string[], parentNode: HTMLElement | undefined, selectors?: string }) {
+}: HandleEventsArgs) {
   if (!parentNode) { return; }
 
   const { key } = event;
@@ -90,6 +97,9 @@ export interface ArrowKeyNavProps {
   ignoredKeys?: string[];
 }
 
+/**
+ * A React hook to enable arrow key navigation on a component.
+ */
 export default function useArrowKeyNavigation(props: ArrowKeyNavProps = {}) {
   const { selectors, ignoredKeys } = props;
   const parentNode = useRef<HTMLElement>();

diff --git a/src/hooks/useIndexOfLastVisibleChild.tsx b/src/hooks/useIndexOfLastVisibleChild.tsx
@@ -11,8 +11,8 @@ import { useLayoutEffect, useState } from 'react';
  * @param overflowElementRef - overflow element
  */
 const useIndexOfLastVisibleChild = (
-  containerElementRef: Element | null,
-  overflowElementRef: Element | null,
+  containerElementRef: HTMLElement | null,
+  overflowElementRef: HTMLElement | null,
 ): number => {
   const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);