components\HyperLinkModal.tsx

import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
import { useWindowSize } from '@Hooks'
import { useSelector } from 'react-redux'

interface ModalProps {
  isOpen: boolean
  children: React.ReactNode
}

const HyperLinkModal = ({ isOpen, children }: ModalProps) => {
  const size = useWindowSize()
  const elPopupContainerRef = useRef<HTMLDivElement>(null)

  const sidebarShow = useSelector((state: any) => state.sidebarShow.sidebarShow)
  const [elRvCustomPopupRect, setElRvCustomPopupRect] =
    useState<DOMRect | null>(null)

  useLayoutEffect(() => {
    if (elPopupContainerRef.current) {
      setElRvCustomPopupRect(
        elPopupContainerRef.current!.getBoundingClientRect()
      )
    }
  }, [isOpen])

  useEffect(() => {
    if (elPopupContainerRef.current) {
      setTimeout(() => {
        setElRvCustomPopupRect(
          elPopupContainerRef.current!.getBoundingClientRect()
        )
      }, 200)
    }
  }, [sidebarShow])

  useEffect(() => {
    if (elPopupContainerRef.current) {
      setElRvCustomPopupRect(
        elPopupContainerRef.current!.getBoundingClientRect()
      )
    }
  }, [size.windowSize.width])
  if (!isOpen) return null
  return (
    <div
      className="absolute z-[10] w-full h-full inset-0"
      ref={elPopupContainerRef}
    >
      <div
        className="fixed"
        style={{
          width: `${
            elRvCustomPopupRect?.width
              ? elRvCustomPopupRect?.width + 'px'
              : '0px'
          } `,
          height: `100%`
        }}
      >
        <div className="z-20 absolute top-[40%] left-1/2 transform translate-center w-auto h-auto min-w-[520px] max-w-[800px] bg-white  border-solid border-[#2E3A69] rounded-[4px] shadow-md select-text overflow-hidden">
          {children}
        </div>
      </div>
    </div>
  )
}
export default HyperLinkModal