x-ui-design 0.7.52 → 0.7.54

package/dist/index.esm.js

@@ -2828,72 +2828,35 @@ const TimePicker = ({
       }
     }
   };
-  const toAbove = () => {
-    setDropdownPosition({
-      top: (inputRef.current?.getBoundingClientRect().top || 0) + document.documentElement.scrollTop + (inputRef.current?.offsetHeight || 0),
-      left: (inputRef.current?.getBoundingClientRect().left || 0) + document.documentElement.scrollLeft
-    });
-  };
-  const toBelow = () => {
-    setDropdownPosition({
-      top: (inputRef.current?.getBoundingClientRect().top || 0) + document.documentElement.scrollTop - 230,
-      left: (inputRef.current?.getBoundingClientRect().left || 0) + document.documentElement.scrollLeft
-    });
-  };
   const dropdownPossition = useCallback(() => {
-    if (!inputRef.current) {
-      return {};
-    }
-    const scrollableParents = getScrollParents(inputRef.current)[1];
-    const offsetHeight = getPopupContainer ? window.innerHeight : scrollableParents?.offsetHeight;
-    const shouldShowAbove = offsetHeight - (inputRef.current?.getBoundingClientRect().bottom || 0) < 230;
-    const shouldShowBelow = inputRef.current?.getBoundingClientRect().top < 230;
-    console.log({
-      shouldShowBelow,
-      shouldShowAbove
-    });
-    if (open && !shouldShowBelow && !shouldShowAbove) {
-      setDropdownPosition(previousDropdownPosition => {
-        if (!Object.keys(previousDropdownPosition).length) {
-          if (getPopupContainer) {
-            return {
-              top: (inputRef.current?.getBoundingClientRect().top || 0) + document.documentElement.scrollTop - 230,
-              left: (inputRef.current?.getBoundingClientRect().left || 0) + document.documentElement.scrollLeft
-            };
-          } else {
-            return {
-              top: (inputRef.current?.offsetTop || 0) + (inputRef.current?.offsetHeight || 0),
-              left: inputRef.current?.offsetLeft
-            };
-          }
-        }
-        return previousDropdownPosition;
-      });
-    }
+    if (!inputRef.current) return {};
+    const inputRect = inputRef.current.getBoundingClientRect();
+    const popupEl = popupRef.current;
+    const dropdownHeight = popupEl?.offsetHeight || 230;
+    const popupContainer = getPopupContainer ? getPopupContainer(document.body) : getScrollParents(inputRef.current)[1] || document.body;
+    const containerRect = popupContainer.getBoundingClientRect();
+    const spaceAbove = inputRect.top - containerRect.top;
+    const spaceBelow = containerRect.bottom - inputRect.bottom;
+    const shouldShowAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
     if (getPopupContainer) {
-      if (!shouldShowBelow) {
-        toBelow();
-        return;
-      }
-      if (!shouldShowAbove) {
-        toAbove();
-      }
-    } else {
-      if (shouldShowBelow) {
+      if (shouldShowAbove) {
         setDropdownPosition({
-          top: inputRef.current.offsetTop + inputRef.current.offsetHeight,
-          left: inputRef.current?.offsetLeft
+          top: (inputRef.current?.getBoundingClientRect().top || 0) + document.documentElement.scrollTop - 230,
+          left: (inputRef.current?.getBoundingClientRect().left || 0) + document.documentElement.scrollLeft
         });
-        return;
-      }
-      if (shouldShowAbove) {
+      } else {
         setDropdownPosition({
-          top: inputRef.current?.offsetHeight - inputRef.current.offsetHeight - (popupRef.current?.offsetHeight || 0) - 8,
-          left: inputRef.current?.offsetLeft
+          top: (inputRef.current?.getBoundingClientRect().top || 0) + document.documentElement.scrollTop + (inputRef.current?.offsetHeight || 0),
+          left: (inputRef.current?.getBoundingClientRect().left || 0) + document.documentElement.scrollLeft
         });
       }
+    } else {
+      setDropdownPosition({
+        top: shouldShowAbove ? inputRef.current.offsetTop - (popupEl?.offsetHeight || dropdownHeight) - 8 : inputRef.current.offsetTop + inputRef.current.offsetHeight,
+        left: inputRef.current.offsetLeft
+      });
     }
-  }, [open, inputRef.current]);
+  }, [open, getPopupContainer]);
   const getScrollParents = useCallback(element => {
     const parents = [];
     let current = element.parentElement;