create portal

bilouStrike · bilouStrike · commit 73511f1ecfbd · 2023-01-14T12:40:19.000+01:00
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="portal-root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/components/Atoms/Portal/portal.tsx b/src/components/Atoms/Portal/portal.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { useEffect, ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+type portalT = {
+    children: ReactNode
+}
+
+const Portal:React.FC<portalT> = ({children}) => {
+    const mount = document.getElementById('portal-root');
+    const el = document.createElement('div');
+
+    useEffect(() => {
+        mount?.appendChild(el);
+
+        return () => mount?.removeChild(el) as void;
+    }, [el, mount]);
+
+    return createPortal(children, el);
+}
+
+export default Portal;
diff --git a/src/components/Molecules/Modal/modal.tsx b/src/components/Molecules/Modal/modal.tsx
@@ -11,6 +11,7 @@ import {
 
 import { modalProps } from "./type";
 import Button from "../../Atoms/Button";
+import Portal from "../../Atoms/Portal/portal";
 
 const Modal:React.FC<modalProps> = (props) => {
 
@@ -26,6 +27,7 @@ const Modal:React.FC<modalProps> = (props) => {
     return (
         <>
             { open &&
+            <Portal>
                 <StyledModal>
                     <ModalContent width={width}>
                         <ModalHeader>
@@ -41,6 +43,7 @@ const Modal:React.FC<modalProps> = (props) => {
                         </ModalFooter>
                     </ModalContent>
                 </StyledModal>
+            </Portal>
             }
         </>
     )
diff --git a/src/components/Molecules/Modal/style.tsx b/src/components/Molecules/Modal/style.tsx
@@ -16,7 +16,6 @@ export const StyledModal = styled.div`
     width: 100%;
     height: 100%;
     background-color:rgba(0,0,0,.45);
-    z-index: 1000;
     overflow: auto;
 `;
 
diff --git a/src/components/Molecules/Select/select.tsx b/src/components/Molecules/Select/select.tsx
@@ -7,6 +7,7 @@ import {
     OptionBody,
     Li
 } from "./style";
+import Portal from "../../Atoms/Portal/portal";
 
 const Select:React.FC<selectProps> = (props) => {
 
@@ -20,7 +21,7 @@ const Select:React.FC<selectProps> = (props) => {
     } = props;
 
     const [show, setShow] = useState(false);
-
+    const [bodyCoordinates, setBodyCoordinates] = useState({x : 0, y : 0, height: 0});
     const selectRef = useRef<HTMLDivElement>(null);
     const buttonRef = useRef<HTMLButtonElement>(null);
 
@@ -41,14 +42,21 @@ const Select:React.FC<selectProps> = (props) => {
         return () => document.addEventListener('click', onClickoutside);
     }, [selectRef]);
 
+    const handleButtonClick = () => {
+        setShow(!show);
+        if (buttonRef.current) {
+            const coords = buttonRef.current.getBoundingClientRect();
+            setBodyCoordinates({x: coords.x, y: coords.y, height: coords.height })
+        }
+    }
 
     return (
         <>
             <StyledSelect width={width} ref={selectRef}>
                 <Button 
                     width={width}
                     variant="default"
-                    onClick={() => setShow(!show)}
+                    onClick={handleButtonClick}
                     noborder
                     leftIcon={leftIcon}
                     rightIcon={rightIcon}
@@ -57,21 +65,24 @@ const Select:React.FC<selectProps> = (props) => {
                     <Text>{selectedValue}</Text>
                 </Button>
                 { show && 
-                <OptionBody 
-                    width={width}
-                    justifyTop={buttonRef.current && buttonRef.current.offsetHeight}
-                >
-                    <ul>
-                        {options.map(({label, value}) => 
-                            <Li 
-                                isSelected={selectedValue === value}
-                                onClick={() => handleClick(value)}
-                            >
-                                {label}
-                            </Li>
-                        )}
-                    </ul>
-                </OptionBody>
+                <Portal>
+                    <OptionBody 
+                        width={width}
+                        justifyTop={buttonRef.current && buttonRef.current.offsetHeight}
+                        coords={bodyCoordinates}
+                    >
+                        <ul>
+                            {options.map(({label, value}) => 
+                                <Li 
+                                    isSelected={selectedValue === value}
+                                    onClick={() => handleClick(value)}
+                                >
+                                    {label}
+                                </Li>
+                            )}
+                        </ul>
+                    </OptionBody>
+                </Portal>
                 }
             </StyledSelect>
         </>
diff --git a/src/components/Molecules/Select/style.tsx b/src/components/Molecules/Select/style.tsx
@@ -1,12 +1,13 @@
 import styled from "styled-components";
 import { colors } from "../../../styles/styleGuide";
 
-type widthT = {
+type OptionBodyT = {
     width: string,
     justifyTop?: number | null
+    coords: { x: number, y: number, height: number }
 }
 
-export const StyledSelect = styled.div<widthT>`
+export const StyledSelect = styled.div<{width:string}>`
     position: relative;
     width: ${props => props.width};
 
@@ -15,9 +16,10 @@ export const StyledSelect = styled.div<widthT>`
     }
 `;
 
-export const OptionBody = styled.div<widthT>`
+export const OptionBody = styled.div<OptionBodyT>`
     position: absolute;
-    top: ${props => props.justifyTop ? props.justifyTop + 3 : 0 }px;
+    top: ${props => props?.coords?.y + props?.coords?.height + 3}px;
+    left: ${props => props?.coords?.x}px;
     width: ${props => props.width};
     background-color: ${colors.white};
     border: 1px solid rgb(0, 0, 0, 0.15);
