simpler solution

cypress-io · Nov 30, 2023 · 11f25b9 · 11f25b9
1 parent 1fba21c
commit 11f25b9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 21 deletions.
diff --git a/components/DocMenu/react/DocMenu.tsx b/components/DocMenu/react/DocMenu.tsx
@@ -21,11 +21,11 @@ export const DocMenu: React.FC<DocMenuProps> = ({
       {items.map((item, index) =>
         'items' in item ? (
           <li key={index} className="relative list-none p-0">
-            <DocGroup group={item} collapsible={collapsible} />
+            <DocGroup index={index} group={item} collapsible={collapsible} />
           </li>
         ) : (
           <DocLink key={index} item={item} collapsible={collapsible} />
-        )
+        ),
       )}
     </ul>
   )

diff --git a/components/DocMenu/react/_DocGroup.tsx b/components/DocMenu/react/_DocGroup.tsx
@@ -5,6 +5,7 @@ import { NavGroup, classes } from '@cypress-design/constants-docmenu'
 import { DocLink } from './_DocLink'
 
 export interface DocGroupProps {
+  index: number
   group: NavGroup
   collapsible: boolean
   depth?: number
@@ -16,6 +17,7 @@ export const DocGroup: React.FC<DocGroupProps> = ({
   collapsible,
   depth = 0,
   setHeight,
+  index,
 }) => {
   const [open, setOpen] = React.useState(depth === 0)
   const [itemsHeights, setItemsHeights] = React.useState<number[]>(
@@ -53,14 +55,14 @@ export const DocGroup: React.FC<DocGroupProps> = ({
   }
 
   const onSetHeightCallback = React.useCallback(
-    (index: number, height: number) => {
+    (height: number) => {
       setItemsHeights((prev) => {
         const newHeights = [...prev]
         newHeights[index] = height
         return newHeights
       })
     },
-    [setItemsHeights],
+    [setItemsHeights, index],
   )
 
   const Head = collapsible ? 'button' : group.href ? 'a' : 'div'
@@ -110,7 +112,7 @@ export const DocGroup: React.FC<DocGroupProps> = ({
         {group.items.map((item, index) =>
           'items' in item ? (
             <li key={index} className="relative list-none p-0">
-              <DocGroupWithIndex
+              <DocGroup
                 group={item}
                 depth={depth + 1}
                 setHeight={onSetHeightCallback}
@@ -132,19 +134,3 @@ export const DocGroup: React.FC<DocGroupProps> = ({
     </>
   )
 }
-
-const DocGroupWithIndex: React.FC<
-  Omit<DocGroupProps, 'setHeight'> & {
-    index: number
-    setHeight: (index: number, height: number) => void
-  }
-> = ({ setHeight, index, ...props }) => {
-  const onSetHeight = React.useCallback(
-    (height: number) => {
-      setHeight(index, height)
-    },
-    [index, setHeight],
-  )
-
-  return <DocGroup {...props} setHeight={onSetHeight} />
-}