refactor: give the content component as children and not as prop …

…to the Modal
subugoe · Feb 7, 2025 · 23eca7f · 23eca7f
1 parent 4ccf7f6
commit 23eca7f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -3,17 +3,14 @@ import { FC, ReactNode, useEffect, useState } from 'react'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 
 interface ModalProps {
-  TriggerButton?: ReactNode,
-  showPopover?: boolean,
-  Content?: ReactNode,
-  position?: Position
+    children: ReactNode,
+    TriggerButton?: ReactNode,
+    showPopover?: boolean,
+    position?: Position
 }
 
 const Modal: FC<ModalProps> = ({
-  TriggerButton,
-  showPopover,
-  Content,
-  position
+  children, TriggerButton, showPopover, position
 }) => {
 
   const [isOpen, setIsOpen] = useState(false)
@@ -25,7 +22,7 @@ const Modal: FC<ModalProps> = ({
   useEffect(() => {
     if (showPopover) setIsOpen(true)
   }, [position])
-  
+
   return <div className="local-tree-modal">
     <Popover open={isOpen} onOpenChange={handleOpenChange}>
       <PopoverTrigger asChild>
@@ -36,7 +33,7 @@ const Modal: FC<ModalProps> = ({
           top: `${position?.y + 40}px`,
           left: `${position?.x}px`,
         }}>
-        {Content}
+        {children}
       </PopoverContent>
     </Popover>
   </div>

diff --git a/src/components/tree/GlobalTree.tsx b/src/components/tree/GlobalTree.tsx
@@ -36,8 +36,9 @@ const GlobalTree: FC = () => {
   return <div className="t-mt-24 t-ml-10 t-w-96">
     <Tree nodes={treeNodes} onSelect={onSelectNode} getChildren={getChildren}/>
     <Modal showPopover={showSelectionModal}
-      Content={<GlobalTreeSelectionModalContent selectedItemIndices={selectedItemIndices.current}/>}
-      position={positionSelectedItem}/>
+      position={positionSelectedItem}>
+      <GlobalTreeSelectionModalContent selectedItemIndices={selectedItemIndices.current}/>
+    </Modal>
   </div>
 }