@bifrostui/utils 1.4.2 → 1.4.3-beta.0

package/dist/directionLocationUtil.d.ts

@@ -1,11 +1,12 @@
 /**
  * 根据元素宽高判断是否超出边界，超出边界则重新定义方向
  */
-export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
+export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
     rootOffset: any;
     arrowDirection: any;
     tipOffset: any;
     arrowLocation: any;
+    offsetSpacing: any;
 }) => {
     newArrowDirection: any;
     newArrowLocation: any;
@@ -13,19 +14,21 @@ export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tip
 /**
  * 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
  */
-export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
+export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
     rootOffset: any;
     arrowDirection: any;
     tipOffset: any;
     arrowLocation: any;
+    offsetSpacing: any;
 }) => any;
 /**
  * 获取气泡位置和箭头位置
  */
-export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, selector, }: {
+export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
     childrenRef: any;
     arrowDirection: any;
     arrowLocation: any;
+    offsetSpacing: any;
     selector: any;
 }) => {
     styles: any;
@@ -38,3 +41,12 @@ export declare const triggerEventTransform: ({ trigger, click, show, hide }: {
     show: any;
     hide: any;
 }) => {};
+/**
+ * for example： placement = 'topLeft'， return { direction: 'top', location: 'left' }
+ * @param placement
+ * @returns
+ */
+export declare const parsePlacement: (placement: any) => {
+    direction: any;
+    location: any;
+};

package/dist/directionLocationUtil.js

@@ -20,6 +20,7 @@ __export(directionLocationUtil_exports, {
   getDirectionLocationStyle: () => getDirectionLocationStyle,
   getNewDirectionLocation: () => getNewDirectionLocation,
   getStylesAndLocation: () => getStylesAndLocation,
+  parsePlacement: () => parsePlacement,
   triggerEventTransform: () => triggerEventTransform
 });
 module.exports = __toCommonJS(directionLocationUtil_exports);
@@ -33,9 +34,17 @@ const getNewDirectionLocation = ({
   rootOffset,
   arrowDirection,
   tipOffset,
-  arrowLocation
+  arrowLocation,
+  offsetSpacing
 }) => {
-  const { left: cLeft, right: cRight, top: cTop, bottom: cBottom } = rootOffset;
+  const {
+    left: cLeft,
+    right: cRight,
+    top: cTop,
+    bottom: cBottom,
+    width: cWidth,
+    height: cHeight
+  } = rootOffset;
   const { width, height } = tipOffset;
   const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
   const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
@@ -45,7 +54,7 @@ const getNewDirectionLocation = ({
   const isDirectionBottom = arrowDirection === "bottom";
   const isDirectionLeft = arrowDirection === "left";
   const isDirectionRight = arrowDirection === "right";
-  if (isDirectionTop && cTop - height < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > pgegWidth) {
+  if (isDirectionTop && cTop - height - offsetSpacing < 0 || isDirectionBottom && cBottom + height + offsetSpacing > pgegHeight || isDirectionLeft && cLeft - width - offsetSpacing < 0 || isDirectionRight && cRight + width + offsetSpacing > pgegWidth) {
     newArrowDirection = directionCssMap[arrowDirection];
   }
   if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
@@ -53,15 +62,15 @@ const getNewDirectionLocation = ({
   }
   const isCenter = arrowLocation === "center";
   if (isCenter && (isDirectionTop || isDirectionBottom)) {
-    if (cLeft + width > pgegWidth) {
+    if (cLeft + (cWidth - width) / 2 + width > pgegWidth) {
       newArrowLocation = directionCssMap.left;
-    } else if (cRight - width < 0) {
+    } else if (cLeft + (cWidth - width) / 2 < 0) {
       newArrowLocation = directionCssMap.right;
     }
   } else if (isCenter && (isDirectionLeft || isDirectionRight)) {
-    if (cTop + height > pgegHeight) {
+    if (cTop + (cHeight - height) / 2 + cHeight > pgegHeight) {
       newArrowLocation = directionCssMap.top;
-    } else if (cBottom - height < 0) {
+    } else if (cTop + (cHeight - height) / 2 < 0) {
       newArrowLocation = directionCssMap.bottom;
     }
   }
@@ -74,10 +83,11 @@ const getDirectionLocationStyle = ({
   rootOffset,
   arrowDirection,
   tipOffset,
-  arrowLocation
+  arrowLocation,
+  offsetSpacing
 }) => {
   const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
-  const scrollLeft = window.screenX >= 0 && window.screenX || document.documentElement.scrollLeft;
+  const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
   const styles = {};
   const {
     width: cWidth,
@@ -89,8 +99,7 @@ const getDirectionLocationStyle = ({
   } = rootOffset;
   const { width, height } = tipOffset;
   if (arrowDirection === "top") {
-    styles.top = cTop;
-    styles.transform = `translateY(-100%)`;
+    styles.top = cTop - offsetSpacing - height;
     switch (arrowLocation) {
       case "left":
         styles.left = cLeft;
@@ -99,14 +108,13 @@ const getDirectionLocationStyle = ({
         styles.left = cLeft + (cWidth - width) / 2;
         break;
       case "right":
-        styles.left = cRight;
-        styles.transform = `translate(-100%, -100%)`;
+        styles.left = cRight - width;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "bottom") {
-    styles.top = cBottom;
+    styles.top = cBottom + offsetSpacing;
     switch (arrowLocation) {
       case "left":
         styles.left = cLeft;
@@ -115,15 +123,13 @@ const getDirectionLocationStyle = ({
         styles.left = cLeft + (cWidth - width) / 2;
         break;
       case "right":
-        styles.left = cRight;
-        styles.transform = `translateX(-100%)`;
+        styles.left = cRight - width;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "left") {
-    styles.left = cLeft;
-    styles.transform = `translateX(-100%)`;
+    styles.left = cLeft - offsetSpacing - width;
     switch (arrowLocation) {
       case "top":
         styles.top = cTop;
@@ -132,14 +138,13 @@ const getDirectionLocationStyle = ({
         styles.top = cTop + (cHeight - height) / 2;
         break;
       case "bottom":
-        styles.top = cBottom;
-        styles.transform = `translate(-100%, -100%)`;
+        styles.top = cBottom - height;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "right") {
-    styles.left = cRight;
+    styles.left = cRight + offsetSpacing;
     switch (arrowLocation) {
       case "top":
         styles.top = cTop;
@@ -148,8 +153,7 @@ const getDirectionLocationStyle = ({
         styles.top = cTop + (cHeight - height) / 2;
         break;
       case "bottom":
-        styles.top = cBottom;
-        styles.transform = `translateY(-100%)`;
+        styles.top = cBottom - height;
         break;
       default:
         break;
@@ -167,6 +171,7 @@ const getStylesAndLocation = ({
   childrenRef,
   arrowDirection,
   arrowLocation,
+  offsetSpacing,
   selector
 }) => {
   if (!(childrenRef == null ? void 0 : childrenRef.current)) {
@@ -184,13 +189,15 @@ const getStylesAndLocation = ({
     rootOffset,
     arrowDirection,
     tipOffset,
-    arrowLocation
+    arrowLocation,
+    offsetSpacing
   });
   const styles = getDirectionLocationStyle({
     rootOffset,
     arrowDirection: newArrowDirection,
     tipOffset,
-    arrowLocation: newArrowLocation
+    arrowLocation: newArrowLocation,
+    offsetSpacing
   });
   styles.visibility = "visible";
   return {
@@ -232,10 +239,24 @@ const triggerEventTransform = ({ trigger, click, show, hide }) => {
   });
   return option;
 };
+const parsePlacement = (placement) => {
+  const positionArr = placement.split(/([A-Z])/);
+  const direction = positionArr[0];
+  let location;
+  if (positionArr.length > 1) {
+    positionArr.splice(0, 1);
+    location = positionArr.join("").toLowerCase();
+  }
+  return {
+    direction,
+    location
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getDirectionLocationStyle,
   getNewDirectionLocation,
   getStylesAndLocation,
+  parsePlacement,
   triggerEventTransform
 });

package/dist/getRootElement/index.miniapp.d.ts

@@ -1,3 +1,3 @@
 import type { TaroElement } from '@tarojs/runtime';
-declare const getRootElement: (rootEle?: TaroElement | (() => TaroElement)) => TaroElement | HTMLElement;
+declare const getRootElement: (rootEle?: TaroElement | (() => TaroElement)) => HTMLElement | TaroElement;
 export default getRootElement;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { default as debounce } from './debounce';
-export { getStylesAndLocation, triggerEventTransform, } from './directionLocationUtil';
+export { getStylesAndLocation, triggerEventTransform, parsePlacement, } from './directionLocationUtil';
 export { default as convertHexToRGBA } from './hex2rgba';
 export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, useValue, useDomReady, useSize, useDomCss, useTouch, useUniqueId, } from './hooks';
 export { default as isDev } from './isDev';

package/dist/index.js

@@ -43,6 +43,7 @@ __export(src_exports, {
   isMini: () => import_isMini.isMini,
   isMiniapp: () => import_isMini.isMiniapp,
   isWeapp: () => import_isMini.isWeapp,
+  parsePlacement: () => import_directionLocationUtil.parsePlacement,
   setRef: () => import_setRef.default,
   throttle: () => import_throttle.default,
   toArray: () => import_toArray.default,
@@ -91,6 +92,7 @@ __reExport(src_exports, require("./render"), module.exports);
   isMini,
   isMiniapp,
   isWeapp,
+  parsePlacement,
   setRef,
   throttle,
   toArray,

package/es/directionLocationUtil.d.ts

@@ -1,11 +1,12 @@
 /**
  * 根据元素宽高判断是否超出边界，超出边界则重新定义方向
  */
-export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
+export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
     rootOffset: any;
     arrowDirection: any;
     tipOffset: any;
     arrowLocation: any;
+    offsetSpacing: any;
 }) => {
     newArrowDirection: any;
     newArrowLocation: any;
@@ -13,19 +14,21 @@ export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tip
 /**
  * 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
  */
-export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
+export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
     rootOffset: any;
     arrowDirection: any;
     tipOffset: any;
     arrowLocation: any;
+    offsetSpacing: any;
 }) => any;
 /**
  * 获取气泡位置和箭头位置
  */
-export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, selector, }: {
+export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
     childrenRef: any;
     arrowDirection: any;
     arrowLocation: any;
+    offsetSpacing: any;
     selector: any;
 }) => {
     styles: any;
@@ -38,3 +41,12 @@ export declare const triggerEventTransform: ({ trigger, click, show, hide }: {
     show: any;
     hide: any;
 }) => {};
+/**
+ * for example： placement = 'topLeft'， return { direction: 'top', location: 'left' }
+ * @param placement
+ * @returns
+ */
+export declare const parsePlacement: (placement: any) => {
+    direction: any;
+    location: any;
+};

package/es/directionLocationUtil.js

@@ -8,9 +8,17 @@ const getNewDirectionLocation = ({
   rootOffset,
   arrowDirection,
   tipOffset,
-  arrowLocation
+  arrowLocation,
+  offsetSpacing
 }) => {
-  const { left: cLeft, right: cRight, top: cTop, bottom: cBottom } = rootOffset;
+  const {
+    left: cLeft,
+    right: cRight,
+    top: cTop,
+    bottom: cBottom,
+    width: cWidth,
+    height: cHeight
+  } = rootOffset;
   const { width, height } = tipOffset;
   const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
   const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
@@ -20,7 +28,7 @@ const getNewDirectionLocation = ({
   const isDirectionBottom = arrowDirection === "bottom";
   const isDirectionLeft = arrowDirection === "left";
   const isDirectionRight = arrowDirection === "right";
-  if (isDirectionTop && cTop - height < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > pgegWidth) {
+  if (isDirectionTop && cTop - height - offsetSpacing < 0 || isDirectionBottom && cBottom + height + offsetSpacing > pgegHeight || isDirectionLeft && cLeft - width - offsetSpacing < 0 || isDirectionRight && cRight + width + offsetSpacing > pgegWidth) {
     newArrowDirection = directionCssMap[arrowDirection];
   }
   if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
@@ -28,15 +36,15 @@ const getNewDirectionLocation = ({
   }
   const isCenter = arrowLocation === "center";
   if (isCenter && (isDirectionTop || isDirectionBottom)) {
-    if (cLeft + width > pgegWidth) {
+    if (cLeft + (cWidth - width) / 2 + width > pgegWidth) {
       newArrowLocation = directionCssMap.left;
-    } else if (cRight - width < 0) {
+    } else if (cLeft + (cWidth - width) / 2 < 0) {
       newArrowLocation = directionCssMap.right;
     }
   } else if (isCenter && (isDirectionLeft || isDirectionRight)) {
-    if (cTop + height > pgegHeight) {
+    if (cTop + (cHeight - height) / 2 + cHeight > pgegHeight) {
       newArrowLocation = directionCssMap.top;
-    } else if (cBottom - height < 0) {
+    } else if (cTop + (cHeight - height) / 2 < 0) {
       newArrowLocation = directionCssMap.bottom;
     }
   }
@@ -49,10 +57,11 @@ const getDirectionLocationStyle = ({
   rootOffset,
   arrowDirection,
   tipOffset,
-  arrowLocation
+  arrowLocation,
+  offsetSpacing
 }) => {
   const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
-  const scrollLeft = window.screenX >= 0 && window.screenX || document.documentElement.scrollLeft;
+  const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
   const styles = {};
   const {
     width: cWidth,
@@ -64,8 +73,7 @@ const getDirectionLocationStyle = ({
   } = rootOffset;
   const { width, height } = tipOffset;
   if (arrowDirection === "top") {
-    styles.top = cTop;
-    styles.transform = `translateY(-100%)`;
+    styles.top = cTop - offsetSpacing - height;
     switch (arrowLocation) {
       case "left":
         styles.left = cLeft;
@@ -74,14 +82,13 @@ const getDirectionLocationStyle = ({
         styles.left = cLeft + (cWidth - width) / 2;
         break;
       case "right":
-        styles.left = cRight;
-        styles.transform = `translate(-100%, -100%)`;
+        styles.left = cRight - width;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "bottom") {
-    styles.top = cBottom;
+    styles.top = cBottom + offsetSpacing;
     switch (arrowLocation) {
       case "left":
         styles.left = cLeft;
@@ -90,15 +97,13 @@ const getDirectionLocationStyle = ({
         styles.left = cLeft + (cWidth - width) / 2;
         break;
       case "right":
-        styles.left = cRight;
-        styles.transform = `translateX(-100%)`;
+        styles.left = cRight - width;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "left") {
-    styles.left = cLeft;
-    styles.transform = `translateX(-100%)`;
+    styles.left = cLeft - offsetSpacing - width;
     switch (arrowLocation) {
       case "top":
         styles.top = cTop;
@@ -107,14 +112,13 @@ const getDirectionLocationStyle = ({
         styles.top = cTop + (cHeight - height) / 2;
         break;
       case "bottom":
-        styles.top = cBottom;
-        styles.transform = `translate(-100%, -100%)`;
+        styles.top = cBottom - height;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "right") {
-    styles.left = cRight;
+    styles.left = cRight + offsetSpacing;
     switch (arrowLocation) {
       case "top":
         styles.top = cTop;
@@ -123,8 +127,7 @@ const getDirectionLocationStyle = ({
         styles.top = cTop + (cHeight - height) / 2;
         break;
       case "bottom":
-        styles.top = cBottom;
-        styles.transform = `translateY(-100%)`;
+        styles.top = cBottom - height;
         break;
       default:
         break;
@@ -142,6 +145,7 @@ const getStylesAndLocation = ({
   childrenRef,
   arrowDirection,
   arrowLocation,
+  offsetSpacing,
   selector
 }) => {
   if (!(childrenRef == null ? void 0 : childrenRef.current)) {
@@ -159,13 +163,15 @@ const getStylesAndLocation = ({
     rootOffset,
     arrowDirection,
     tipOffset,
-    arrowLocation
+    arrowLocation,
+    offsetSpacing
   });
   const styles = getDirectionLocationStyle({
     rootOffset,
     arrowDirection: newArrowDirection,
     tipOffset,
-    arrowLocation: newArrowLocation
+    arrowLocation: newArrowLocation,
+    offsetSpacing
   });
   styles.visibility = "visible";
   return {
@@ -207,9 +213,23 @@ const triggerEventTransform = ({ trigger, click, show, hide }) => {
   });
   return option;
 };
+const parsePlacement = (placement) => {
+  const positionArr = placement.split(/([A-Z])/);
+  const direction = positionArr[0];
+  let location;
+  if (positionArr.length > 1) {
+    positionArr.splice(0, 1);
+    location = positionArr.join("").toLowerCase();
+  }
+  return {
+    direction,
+    location
+  };
+};
 export {
   getDirectionLocationStyle,
   getNewDirectionLocation,
   getStylesAndLocation,
+  parsePlacement,
   triggerEventTransform
 };

package/es/index.d.ts

@@ -1,5 +1,5 @@
 export { default as debounce } from './debounce';
-export { getStylesAndLocation, triggerEventTransform, } from './directionLocationUtil';
+export { getStylesAndLocation, triggerEventTransform, parsePlacement, } from './directionLocationUtil';
 export { default as convertHexToRGBA } from './hex2rgba';
 export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, useValue, useDomReady, useSize, useDomCss, useTouch, useUniqueId, } from './hooks';
 export { default as isDev } from './isDev';

package/es/index.js

@@ -1,7 +1,8 @@
 import { default as default2 } from "./debounce";
 import {
   getStylesAndLocation,
-  triggerEventTransform
+  triggerEventTransform,
+  parsePlacement
 } from "./directionLocationUtil";
 import { default as default3 } from "./hex2rgba";
 import {
@@ -48,6 +49,7 @@ export {
   isMini,
   isMiniapp,
   isWeapp,
+  parsePlacement,
   default5 as setRef,
   default6 as throttle,
   default7 as toArray,

package/package.json

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