@gingkoo/pandora-metabase 1.0.0-alpha.3 → 1.0.0-alpha.4

package/lib/es/components/popup.d.ts

@@ -11,6 +11,7 @@ export declare function generateTrigger(PortalComponent: any): {
         getCurrentNodePos: () => {
             x: number;
             y: number;
+            t: number;
             h: any;
         };
         getContainer: () => HTMLSpanElement;
@@ -54,6 +55,7 @@ declare const _default: {
         getCurrentNodePos: () => {
             x: number;
             y: number;
+            t: number;
             h: any;
         };
         getContainer: () => HTMLSpanElement;

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-metabase v1.0.0-alpha.3
+ * @gingkoo/pandora-metabase v1.0.0-alpha.4
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -1813,6 +1813,7 @@ const getComputedTranslate = obj => {
 };
 // 获取元素距离浏览器顶部的距离
 const getElementTop = elem => {
+  if (!elem) return 0;
   let elemTop = elem.offsetTop;
   let pElem = elem.offsetParent;
   while (pElem != null) {
@@ -1826,6 +1827,7 @@ const getElementTop = elem => {
 };
 // 获取元素距离浏览器顶部的距离
 const getElementLeft = elem => {
+  if (!elem) return 0;
   let elemLeft = elem.offsetLeft;
   let pElem = elem.offsetParent;
   while (pElem != null) {
@@ -1837,8 +1839,23 @@ const getElementLeft = elem => {
   }
   return elemLeft;
 };
-const getScrollTop = () => {
-  return document.documentElement.scrollTop;
+// 获取元素可见范围内高度
+const getContainerVisibleHeight = container => {
+  if (!container) return 0;
+  const rect = container.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  // 元素顶部在视口上方 -> 不可见
+  if (rect.bottom < 0) return 0;
+  // 元素底部在视口下方 -> 不可见
+  if (rect.top > windowHeight) return 0;
+  // 可见区域的 top 和 bottom
+  const visibleTop = Math.max(rect.top, 0);
+  const visibleBottom = Math.min(rect.bottom, windowHeight);
+  // 可见高度
+  return visibleBottom - visibleTop;
+};
+const getScrollTop = elem => {
+  return elem?.scrollTop || document.documentElement.scrollTop;
 };
 // 浏览器可视宽高
 const getWindowSize = () => {
@@ -3445,7 +3462,7 @@ function generateTrigger(PortalComponent) {
       this.props.visible && this.props.closable && this.props.hideVisible();
     };
     attachParent = popupContainer => {
-      let mountNode = returnDocument().body;
+      let mountNode = this.props.container || returnDocument().body;
       mountNode.appendChild(popupContainer);
     };
     getCurrentNodePos = () => {
@@ -3454,8 +3471,9 @@ function generateTrigger(PortalComponent) {
         container
       } = this.props;
       return {
-        x: getElementLeft(node),
-        y: getElementTop(node) - (container?.scrollTop || 0),
+        x: getElementLeft(node) - getElementLeft(container),
+        y: getElementTop(node) - getElementTop(container),
+        t: getElementTop(container),
         h: node.offsetHeight
       };
     };
@@ -3498,19 +3516,21 @@ function generateTrigger(PortalComponent) {
     didUpdate = () => {
       if (!this.props.node) return false;
       let {
-        innerSpacing = 10
+        innerSpacing = 10,
+        container
       } = this.props;
       let pos = this.getCurrentNodePos();
-      let posY = pos.y - getScrollTop();
+      let posY = pos.y - getScrollTop(container);
       if (!this.ref) return false;
       let realHeight = this.ref?.current?.childNodes?.[0]?.offsetHeight || 0;
       if (!realHeight) return false;
       let {
         height: winH
       } = getWindowSize();
-      let downH = winH - posY - pos.h; // 元素下面可用高度
+      let containerH = getContainerVisibleHeight(container);
+      let downH = (containerH || winH) - posY - pos.h; // 元素下面可用高度
       let maxHeight = 0;
-      let topHeight = getScrollTop();
+      let topHeight = getScrollTop(container);
       if (downH >= posY || realHeight <= downH - innerSpacing - outSpacing) {
         // 下面比上面宽敞 或 下面足够放下所有 放下面
         maxHeight = Math.min(realHeight, downH - innerSpacing - outSpacing);