Fix [Datepicker] position should use window size

iguazio · Feb 13, 2024 · 13d5cd8 · 13d5cd8
1 parent 3e49faa
commit 13d5cd8
Showing 1 changed file with 23 additions and 9 deletions.
diff --git a/src/lib/components/PopUpDialog/PopUpDialog.js b/src/lib/components/PopUpDialog/PopUpDialog.js
@@ -18,6 +18,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { createPortal } from 'react-dom'
+import { throttle } from 'lodash'
 
 import RoundedIcon from '../RoundedIcon/RoundedIcon'
 import Tooltip from '../Tooltip/Tooltip'
@@ -58,26 +59,36 @@ const PopUpDialog = React.forwardRef(
     }, [closePopUp])
 
     const calculateCustomPopUpPosition = useCallback(() => {
-      if (customPosition && customPosition.element) {
+      if (customPosition?.element?.current && ref?.current) {
         const elementRect = customPosition.element.current.getBoundingClientRect()
-        const popUpRect = ref?.current.getBoundingClientRect()
+        const popUpRect = ref.current.getBoundingClientRect()
         const [verticalPosition, horizontalPosition] = customPosition.position.split('-')
-        const leftPosition =
+        const margin = 15
+        const marginToElement = 5
+        let leftPosition =
           horizontalPosition === 'left' ? elementRect.right - popUpRect.width : elementRect.left
         let topPosition
 
         if (verticalPosition === 'top') {
           topPosition =
-            elementRect.top > popUpRect.height ? elementRect.top - popUpRect.height - 5 : 5
+            elementRect.top > popUpRect.height + margin
+              ? elementRect.top - popUpRect.height - marginToElement
+              : margin
         } else {
           topPosition =
-            popUpRect.height + elementRect.bottom > window.innerHeight
-              ? window.innerHeight - popUpRect.height - 5
-              : elementRect.bottom + 5
+            popUpRect.height + elementRect.bottom + margin > window.innerHeight
+              ? window.innerHeight - popUpRect.height - margin
+              : elementRect.bottom + marginToElement
         }
 
         ref.current.style.top = `${topPosition}px`
 
+        const styleLeft = style?.left?.endsWith?.('px') ? parseInt(style.left) : 0
+
+        if (leftPosition + popUpRect.width + margin + styleLeft > window.innerWidth) {
+          leftPosition = window.innerWidth - popUpRect.width - margin - styleLeft
+        }
+
         if (style.left) {
           ref.current.style.left = `calc(${leftPosition}px + ${style.left})`
         } else {
@@ -91,10 +102,13 @@ const PopUpDialog = React.forwardRef(
     }, [calculateCustomPopUpPosition])
 
     useEffect(() => {
-      window.addEventListener('resize', calculateCustomPopUpPosition)
+      const throttledCalculatedCustomPopUpPosition = throttle(calculateCustomPopUpPosition, 100, {
+        trailing: true
+      })
+      window.addEventListener('resize', throttledCalculatedCustomPopUpPosition)
 
       return () => {
-        window.removeEventListener('resize', calculateCustomPopUpPosition)
+        window.removeEventListener('resize', throttledCalculatedCustomPopUpPosition)
       }
     })