Refactor HoverCard components with typed props

rad-ui · Dec 1, 2024 · 8c5f0e6 · 8c5f0e6
1 parent 1440811
commit 8c5f0e6
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 14 deletions.
diff --git a/src/components/ui/HoverCard/HoverCard.tsx b/src/components/ui/HoverCard/HoverCard.tsx
@@ -6,9 +6,34 @@ import HoverCardPortal from './fragments/HoverCardPortal';
 import HoverCardContent from './fragments/HoverCardContent';
 import HoverCardArrow from './fragments/HoverCardArrow';
 
-const HoverCard = ({ children, content = undefined, ...props }) => {
+type HoverCardProps = {
+    children: React.ReactNode,
+    content: React.ReactNode,
+    customRootClass?: string,
+    openDelay?: number,
+    closeDelay?: number,
+    onOpenChange?: (open: boolean) => void
+    props?: React.HTMLAttributes<HTMLElement>,
+}
+
+const HoverCard = ({
+    children,
+    onOpenChange = () => { },
+    content = undefined,
+    customRootClass = '',
+    openDelay = 100,
+    closeDelay = 200,
+    ...props
+}: HoverCardProps) => {
     return (
-        <HoverCardRoot {...props}>
+        <HoverCardRoot
+            open={undefined}
+            onOpenChange={onOpenChange}
+            openDelay={openDelay}
+            closeDelay={closeDelay}
+            customRootClass={customRootClass}
+            {...props}
+        >
             <HoverCardTrigger>
                 {children}
             </HoverCardTrigger>

diff --git a/src/components/ui/HoverCard/contexts/HoverCardContext.tsx b/src/components/ui/HoverCard/contexts/HoverCardContext.tsx
@@ -3,11 +3,22 @@ import { createContext } from 'react';
 type HoverCardContextType = {
     isOpen: boolean;
     handleOpenChange: (open: boolean) => void;
+    floatingRefs: {
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    };
+    getReferenceProps: () => Record<string, any>;
+    getFloatingProps: () => Record<string, any>;
+    floatingStyles: React.CSSProperties;
+    rootClass: string;
+    closeWithDelay: () => void;
+    closeWithoutDelay: () => void;
+    openWithDelay: () => void;
+    floatingContext: any;
+    arrowRef: any;
+
 };
 
-const HoverCardContext = createContext<HoverCardContextType>({
-    isOpen: false,
-    handleOpenChange: () => {}
-});
+const HoverCardContext = createContext<HoverCardContextType>({} as HoverCardContextType);
 
 export default HoverCardContext;
diff --git a/src/components/ui/HoverCard/fragments/HoverCardContent.tsx b/src/components/ui/HoverCard/fragments/HoverCardContent.tsx
@@ -2,7 +2,12 @@ import React, { useContext, useEffect } from 'react';
 
 import HoverCardContext from '../contexts/HoverCardContext';
 
-const HoverCardContent = ({ children, ...props }) => {
+type HoverCardContentProps = {
+    children: React.ReactNode,
+    props?: React.HTMLAttributes<HTMLElement>
+}
+
+const HoverCardContent = ({ children, ...props }: HoverCardContentProps) => {
     const {
         isOpen,
         floatingRefs,

diff --git a/src/components/ui/HoverCard/fragments/HoverCardPortal.tsx b/src/components/ui/HoverCard/fragments/HoverCardPortal.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
 
-const HoverCardPortal = ({ children, ...props }) => {
+type HoverCardPortalProps = {
+    children: React.ReactNode,
+    props: React.HTMLAttributes<HTMLElement>
+}
+
+const HoverCardPortal = ({ children, ...props }: HoverCardPortalProps) => {
     return <div {...props}>{children}</div>;
 };
 

diff --git a/src/components/ui/HoverCard/fragments/HoverCardRoot.tsx b/src/components/ui/HoverCard/fragments/HoverCardRoot.tsx
@@ -13,7 +13,7 @@ type HoverCardRootProps = {
     customRootClass: string,
     openDelay: number,
     closeDelay: number,
-    props: React.HTMLAttributes<HTMLElement>
+    props?: React.HTMLAttributes<HTMLElement>
 }
 
 const HoverCardRoot = ({ children, open: controlledOpen = undefined, onOpenChange, customRootClass = '', openDelay = 100, closeDelay = 200, ...props }: HoverCardRootProps) => {
@@ -65,15 +65,11 @@ const HoverCardRoot = ({ children, open: controlledOpen = undefined, onOpenChang
     ]);
 
     const markMouseIsExiting = () => {
-        console.log('marking mouse as exiting');
         setMouseIsExiting(true);
-        console.log('\n');
     };
 
     const markMouseIsEntering = () => {
-        console.log('marking mouse as entering');
         setMouseIsExiting(false);
-        console.log('/n');
     };
 
     const openWithDelay = () => {

diff --git a/src/components/ui/HoverCard/fragments/HoverCardTrigger.tsx b/src/components/ui/HoverCard/fragments/HoverCardTrigger.tsx
@@ -4,7 +4,12 @@ import HoverCardContext from '../contexts/HoverCardContext';
 
 import Primitive from '~/core/primitives/Primitive';
 
-const HoverCardTrigger = ({ children, ...props }) => {
+type HoverCardTriggerProps = {
+    children: React.ReactNode,
+    props?: React.HTMLAttributes<HTMLElement>
+}
+
+const HoverCardTrigger = ({ children, ...props }: HoverCardTriggerProps) => {
     const { floatingRefs, closeWithDelay, openWithDelay } = useContext(HoverCardContext);
 
     return <>