@bifrostui/utils 1.4.2-beta.1 → 1.4.3-beta.0

package/dist/directionLocationUtil.d.ts

@@ -41,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);
@@ -98,8 +99,7 @@ const getDirectionLocationStyle = ({
   } = rootOffset;
   const { width, height } = tipOffset;
   if (arrowDirection === "top") {
-    styles.top = cTop - offsetSpacing;
-    styles.transform = `translateY(-100%)`;
+    styles.top = cTop - offsetSpacing - height;
     switch (arrowLocation) {
       case "left":
         styles.left = cLeft;
@@ -108,8 +108,7 @@ 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;
@@ -124,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 - offsetSpacing;
-    styles.transform = `translateX(-100%)`;
+    styles.left = cLeft - offsetSpacing - width;
     switch (arrowLocation) {
       case "top":
         styles.top = cTop;
@@ -141,8 +138,7 @@ 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;
@@ -157,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;
@@ -170,7 +165,6 @@ const getDirectionLocationStyle = ({
   if (styles.left) {
     styles.left = `${styles.left + scrollLeft}px`;
   }
-  styles.width = `${width}px`;
   return styles;
 };
 const getStylesAndLocation = ({
@@ -245,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/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

@@ -41,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

@@ -73,8 +73,7 @@ const getDirectionLocationStyle = ({
   } = rootOffset;
   const { width, height } = tipOffset;
   if (arrowDirection === "top") {
-    styles.top = cTop - offsetSpacing;
-    styles.transform = `translateY(-100%)`;
+    styles.top = cTop - offsetSpacing - height;
     switch (arrowLocation) {
       case "left":
         styles.left = cLeft;
@@ -83,8 +82,7 @@ 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;
@@ -99,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 - offsetSpacing;
-    styles.transform = `translateX(-100%)`;
+    styles.left = cLeft - offsetSpacing - width;
     switch (arrowLocation) {
       case "top":
         styles.top = cTop;
@@ -116,8 +112,7 @@ 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;
@@ -132,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;
@@ -145,7 +139,6 @@ const getDirectionLocationStyle = ({
   if (styles.left) {
     styles.left = `${styles.left + scrollLeft}px`;
   }
-  styles.width = `${width}px`;
   return styles;
 };
 const getStylesAndLocation = ({
@@ -220,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-beta.1",
+  "version": "1.4.3-beta.0",
   "description": "BUI React utilities for building components.",
   "main": "dist/index.js",
   "module": "es/index.js",