@bifrostui/utils 1.4.3-beta.0 → 1.4.3

package/dist/directionLocationUtil.d.ts

@@ -1,8 +1,10 @@
 /**
  * 根据元素宽高判断是否超出边界，超出边界则重新定义方向
  */
-export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
-    rootOffset: any;
+export declare const getNewDirectionLocation: ({ scrollRoot, scrollRootOffset, childrenOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
+    scrollRoot: any;
+    scrollRootOffset: any;
+    childrenOffset: any;
     arrowDirection: any;
     tipOffset: any;
     arrowLocation: any;
@@ -14,17 +16,21 @@ export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tip
 /**
  * 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
  */
-export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
-    rootOffset: any;
+export declare const getDirectionLocationStyle: ({ childrenOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
+    childrenOffset: any;
     arrowDirection: any;
     tipOffset: any;
     arrowLocation: any;
     offsetSpacing: any;
-}) => any;
+}) => {
+    styles: any;
+    childrenStyle: any;
+};
 /**
  * 获取气泡位置和箭头位置
  */
-export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
+export declare const getStylesAndLocation: ({ scrollRoot, childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
+    scrollRoot?: Element;
     childrenRef: any;
     arrowDirection: any;
     arrowLocation: any;
@@ -32,6 +38,7 @@ export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrow
     selector: any;
 }) => {
     styles: any;
+    childrenStyle: any;
     newArrowDirection: any;
     newArrowLocation: any;
 };

package/dist/directionLocationUtil.js

@@ -30,8 +30,13 @@ const directionCssMap = {
   top: "bottom",
   bottom: "top"
 };
+const isBodyScroll = (scrollRoot) => {
+  return scrollRoot === document.body;
+};
 const getNewDirectionLocation = ({
-  rootOffset,
+  scrollRoot,
+  scrollRootOffset,
+  childrenOffset,
   arrowDirection,
   tipOffset,
   arrowLocation,
@@ -44,43 +49,56 @@ const getNewDirectionLocation = ({
     bottom: cBottom,
     width: cWidth,
     height: cHeight
-  } = rootOffset;
+  } = childrenOffset;
   const { width, height } = tipOffset;
-  const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
-  const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  const {
+    top: sTop,
+    bottom: sBottom,
+    left: sLeft,
+    right: sRight
+  } = scrollRootOffset;
+  const pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
+  const pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  const maxTop = isBodyScroll(scrollRoot) ? 0 : sTop;
+  const maxBottom = isBodyScroll(scrollRoot) ? pageHeight : sBottom;
+  const maxLeft = isBodyScroll(scrollRoot) ? 0 : sLeft;
+  const maxRight = isBodyScroll(scrollRoot) ? pageWidth : sRight;
   let newArrowDirection = arrowDirection;
   let newArrowLocation = arrowLocation;
   const isDirectionTop = arrowDirection === "top";
   const isDirectionBottom = arrowDirection === "bottom";
   const isDirectionLeft = arrowDirection === "left";
   const isDirectionRight = arrowDirection === "right";
-  if (isDirectionTop && cTop - height - offsetSpacing < 0 || isDirectionBottom && cBottom + height + offsetSpacing > pgegHeight || isDirectionLeft && cLeft - width - offsetSpacing < 0 || isDirectionRight && cRight + width + offsetSpacing > pgegWidth) {
+  if (isDirectionTop && cTop - height - offsetSpacing < maxTop || isDirectionBottom && cBottom + height + offsetSpacing > maxBottom || isDirectionLeft && cLeft - width - offsetSpacing < maxLeft || isDirectionRight && cRight + width + offsetSpacing > maxRight) {
     newArrowDirection = directionCssMap[arrowDirection];
   }
-  if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
+  if (arrowLocation === "top" && cTop + height > maxBottom || arrowLocation === "bottom" && cBottom - height < maxTop || arrowLocation === "left" && cLeft + width > maxRight || arrowLocation === "right" && cRight - width < maxLeft) {
     newArrowLocation = directionCssMap[arrowLocation];
   }
   const isCenter = arrowLocation === "center";
   if (isCenter && (isDirectionTop || isDirectionBottom)) {
-    if (cLeft + (cWidth - width) / 2 + width > pgegWidth) {
+    if (cLeft + (cWidth - width) / 2 + width > maxRight) {
       newArrowLocation = directionCssMap.left;
-    } else if (cLeft + (cWidth - width) / 2 < 0) {
+    } else if (cLeft + (cWidth - width) / 2 < maxLeft) {
       newArrowLocation = directionCssMap.right;
     }
   } else if (isCenter && (isDirectionLeft || isDirectionRight)) {
-    if (cTop + (cHeight - height) / 2 + cHeight > pgegHeight) {
+    if (cTop + (cHeight - height) / 2 + cHeight > maxBottom) {
       newArrowLocation = directionCssMap.top;
-    } else if (cTop + (cHeight - height) / 2 < 0) {
+    } else if (cTop + (cHeight - height) / 2 < maxTop) {
       newArrowLocation = directionCssMap.bottom;
     }
   }
+  if (arrowLocation === "none") {
+    newArrowLocation = "none";
+  }
   return {
     newArrowDirection,
     newArrowLocation
   };
 };
 const getDirectionLocationStyle = ({
-  rootOffset,
+  childrenOffset,
   arrowDirection,
   tipOffset,
   arrowLocation,
@@ -96,7 +114,11 @@ const getDirectionLocationStyle = ({
     right: cRight,
     top: cTop,
     bottom: cBottom
-  } = rootOffset;
+  } = childrenOffset;
+  let childrenStyle = {};
+  if (cWidth && cHeight) {
+    childrenStyle = { width: `${cWidth}px`, height: `${cHeight}px` };
+  }
   const { width, height } = tipOffset;
   if (arrowDirection === "top") {
     styles.top = cTop - offsetSpacing - height;
@@ -110,6 +132,9 @@ const getDirectionLocationStyle = ({
       case "right":
         styles.left = cRight - width;
         break;
+      case "none":
+        styles.left = cLeft;
+        break;
       default:
         break;
     }
@@ -125,6 +150,9 @@ const getDirectionLocationStyle = ({
       case "right":
         styles.left = cRight - width;
         break;
+      case "none":
+        styles.left = cLeft;
+        break;
       default:
         break;
     }
@@ -140,6 +168,9 @@ const getDirectionLocationStyle = ({
       case "bottom":
         styles.top = cBottom - height;
         break;
+      case "none":
+        styles.top = cTop;
+        break;
       default:
         break;
     }
@@ -155,6 +186,9 @@ const getDirectionLocationStyle = ({
       case "bottom":
         styles.top = cBottom - height;
         break;
+      case "none":
+        styles.top = cTop;
+        break;
       default:
         break;
     }
@@ -165,9 +199,10 @@ const getDirectionLocationStyle = ({
   if (styles.left) {
     styles.left = `${styles.left + scrollLeft}px`;
   }
-  return styles;
+  return { styles, childrenStyle };
 };
 const getStylesAndLocation = ({
+  scrollRoot = document.body,
   childrenRef,
   arrowDirection,
   arrowLocation,
@@ -180,20 +215,23 @@ const getStylesAndLocation = ({
     );
     return null;
   }
-  const rootOffset = childrenRef.current.getBoundingClientRect();
+  const childrenOffset = childrenRef.current.getBoundingClientRect();
   const $rtDom = document.querySelector(selector);
   if (!$rtDom)
     return null;
   const tipOffset = $rtDom.getBoundingClientRect();
+  const scrollRootOffset = scrollRoot.getBoundingClientRect();
   const { newArrowDirection, newArrowLocation } = getNewDirectionLocation({
-    rootOffset,
+    scrollRoot,
+    scrollRootOffset,
+    childrenOffset,
     arrowDirection,
     tipOffset,
     arrowLocation,
     offsetSpacing
   });
-  const styles = getDirectionLocationStyle({
-    rootOffset,
+  const { styles, childrenStyle } = getDirectionLocationStyle({
+    childrenOffset,
     arrowDirection: newArrowDirection,
     tipOffset,
     arrowLocation: newArrowLocation,
@@ -202,6 +240,7 @@ const getStylesAndLocation = ({
   styles.visibility = "visible";
   return {
     styles,
+    childrenStyle,
     newArrowDirection,
     newArrowLocation
   };

package/es/directionLocationUtil.d.ts

@@ -1,8 +1,10 @@
 /**
  * 根据元素宽高判断是否超出边界，超出边界则重新定义方向
  */
-export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
-    rootOffset: any;
+export declare const getNewDirectionLocation: ({ scrollRoot, scrollRootOffset, childrenOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
+    scrollRoot: any;
+    scrollRootOffset: any;
+    childrenOffset: any;
     arrowDirection: any;
     tipOffset: any;
     arrowLocation: any;
@@ -14,17 +16,21 @@ export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tip
 /**
  * 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
  */
-export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
-    rootOffset: any;
+export declare const getDirectionLocationStyle: ({ childrenOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
+    childrenOffset: any;
     arrowDirection: any;
     tipOffset: any;
     arrowLocation: any;
     offsetSpacing: any;
-}) => any;
+}) => {
+    styles: any;
+    childrenStyle: any;
+};
 /**
  * 获取气泡位置和箭头位置
  */
-export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
+export declare const getStylesAndLocation: ({ scrollRoot, childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
+    scrollRoot?: Element;
     childrenRef: any;
     arrowDirection: any;
     arrowLocation: any;
@@ -32,6 +38,7 @@ export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrow
     selector: any;
 }) => {
     styles: any;
+    childrenStyle: any;
     newArrowDirection: any;
     newArrowLocation: any;
 };

package/es/directionLocationUtil.js

@@ -4,8 +4,13 @@ const directionCssMap = {
   top: "bottom",
   bottom: "top"
 };
+const isBodyScroll = (scrollRoot) => {
+  return scrollRoot === document.body;
+};
 const getNewDirectionLocation = ({
-  rootOffset,
+  scrollRoot,
+  scrollRootOffset,
+  childrenOffset,
   arrowDirection,
   tipOffset,
   arrowLocation,
@@ -18,43 +23,56 @@ const getNewDirectionLocation = ({
     bottom: cBottom,
     width: cWidth,
     height: cHeight
-  } = rootOffset;
+  } = childrenOffset;
   const { width, height } = tipOffset;
-  const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
-  const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  const {
+    top: sTop,
+    bottom: sBottom,
+    left: sLeft,
+    right: sRight
+  } = scrollRootOffset;
+  const pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
+  const pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  const maxTop = isBodyScroll(scrollRoot) ? 0 : sTop;
+  const maxBottom = isBodyScroll(scrollRoot) ? pageHeight : sBottom;
+  const maxLeft = isBodyScroll(scrollRoot) ? 0 : sLeft;
+  const maxRight = isBodyScroll(scrollRoot) ? pageWidth : sRight;
   let newArrowDirection = arrowDirection;
   let newArrowLocation = arrowLocation;
   const isDirectionTop = arrowDirection === "top";
   const isDirectionBottom = arrowDirection === "bottom";
   const isDirectionLeft = arrowDirection === "left";
   const isDirectionRight = arrowDirection === "right";
-  if (isDirectionTop && cTop - height - offsetSpacing < 0 || isDirectionBottom && cBottom + height + offsetSpacing > pgegHeight || isDirectionLeft && cLeft - width - offsetSpacing < 0 || isDirectionRight && cRight + width + offsetSpacing > pgegWidth) {
+  if (isDirectionTop && cTop - height - offsetSpacing < maxTop || isDirectionBottom && cBottom + height + offsetSpacing > maxBottom || isDirectionLeft && cLeft - width - offsetSpacing < maxLeft || isDirectionRight && cRight + width + offsetSpacing > maxRight) {
     newArrowDirection = directionCssMap[arrowDirection];
   }
-  if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
+  if (arrowLocation === "top" && cTop + height > maxBottom || arrowLocation === "bottom" && cBottom - height < maxTop || arrowLocation === "left" && cLeft + width > maxRight || arrowLocation === "right" && cRight - width < maxLeft) {
     newArrowLocation = directionCssMap[arrowLocation];
   }
   const isCenter = arrowLocation === "center";
   if (isCenter && (isDirectionTop || isDirectionBottom)) {
-    if (cLeft + (cWidth - width) / 2 + width > pgegWidth) {
+    if (cLeft + (cWidth - width) / 2 + width > maxRight) {
       newArrowLocation = directionCssMap.left;
-    } else if (cLeft + (cWidth - width) / 2 < 0) {
+    } else if (cLeft + (cWidth - width) / 2 < maxLeft) {
       newArrowLocation = directionCssMap.right;
     }
   } else if (isCenter && (isDirectionLeft || isDirectionRight)) {
-    if (cTop + (cHeight - height) / 2 + cHeight > pgegHeight) {
+    if (cTop + (cHeight - height) / 2 + cHeight > maxBottom) {
       newArrowLocation = directionCssMap.top;
-    } else if (cTop + (cHeight - height) / 2 < 0) {
+    } else if (cTop + (cHeight - height) / 2 < maxTop) {
       newArrowLocation = directionCssMap.bottom;
     }
   }
+  if (arrowLocation === "none") {
+    newArrowLocation = "none";
+  }
   return {
     newArrowDirection,
     newArrowLocation
   };
 };
 const getDirectionLocationStyle = ({
-  rootOffset,
+  childrenOffset,
   arrowDirection,
   tipOffset,
   arrowLocation,
@@ -70,7 +88,11 @@ const getDirectionLocationStyle = ({
     right: cRight,
     top: cTop,
     bottom: cBottom
-  } = rootOffset;
+  } = childrenOffset;
+  let childrenStyle = {};
+  if (cWidth && cHeight) {
+    childrenStyle = { width: `${cWidth}px`, height: `${cHeight}px` };
+  }
   const { width, height } = tipOffset;
   if (arrowDirection === "top") {
     styles.top = cTop - offsetSpacing - height;
@@ -84,6 +106,9 @@ const getDirectionLocationStyle = ({
       case "right":
         styles.left = cRight - width;
         break;
+      case "none":
+        styles.left = cLeft;
+        break;
       default:
         break;
     }
@@ -99,6 +124,9 @@ const getDirectionLocationStyle = ({
       case "right":
         styles.left = cRight - width;
         break;
+      case "none":
+        styles.left = cLeft;
+        break;
       default:
         break;
     }
@@ -114,6 +142,9 @@ const getDirectionLocationStyle = ({
       case "bottom":
         styles.top = cBottom - height;
         break;
+      case "none":
+        styles.top = cTop;
+        break;
       default:
         break;
     }
@@ -129,6 +160,9 @@ const getDirectionLocationStyle = ({
       case "bottom":
         styles.top = cBottom - height;
         break;
+      case "none":
+        styles.top = cTop;
+        break;
       default:
         break;
     }
@@ -139,9 +173,10 @@ const getDirectionLocationStyle = ({
   if (styles.left) {
     styles.left = `${styles.left + scrollLeft}px`;
   }
-  return styles;
+  return { styles, childrenStyle };
 };
 const getStylesAndLocation = ({
+  scrollRoot = document.body,
   childrenRef,
   arrowDirection,
   arrowLocation,
@@ -154,20 +189,23 @@ const getStylesAndLocation = ({
     );
     return null;
   }
-  const rootOffset = childrenRef.current.getBoundingClientRect();
+  const childrenOffset = childrenRef.current.getBoundingClientRect();
   const $rtDom = document.querySelector(selector);
   if (!$rtDom)
     return null;
   const tipOffset = $rtDom.getBoundingClientRect();
+  const scrollRootOffset = scrollRoot.getBoundingClientRect();
   const { newArrowDirection, newArrowLocation } = getNewDirectionLocation({
-    rootOffset,
+    scrollRoot,
+    scrollRootOffset,
+    childrenOffset,
     arrowDirection,
     tipOffset,
     arrowLocation,
     offsetSpacing
   });
-  const styles = getDirectionLocationStyle({
-    rootOffset,
+  const { styles, childrenStyle } = getDirectionLocationStyle({
+    childrenOffset,
     arrowDirection: newArrowDirection,
     tipOffset,
     arrowLocation: newArrowLocation,
@@ -176,6 +214,7 @@ const getStylesAndLocation = ({
   styles.visibility = "visible";
   return {
     styles,
+    childrenStyle,
     newArrowDirection,
     newArrowLocation
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/utils",
-  "version": "1.4.3-beta.0",
+  "version": "1.4.3",
   "description": "BUI React utilities for building components.",
   "main": "dist/index.js",
   "module": "es/index.js",