@bifrostui/utils 1.3.0 → 1.3.1-beta.0

package/dist/directionLocationUtil.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 根据元素宽高判断是否超出边界，超出边界则重新定义方向
+ */
+export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
+    rootOffset: any;
+    arrowDirection: any;
+    tipOffset: any;
+    arrowLocation: any;
+}) => {
+    newArrowDirection: any;
+    newArrowLocation: any;
+};
+/**
+ * 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
+ */
+export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
+    rootOffset: any;
+    arrowDirection: any;
+    tipOffset: any;
+    arrowLocation: any;
+}) => any;
+/**
+ * 获取气泡位置和箭头位置
+ */
+export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, selector, }: {
+    childrenRef: any;
+    arrowDirection: any;
+    arrowLocation: any;
+    selector: any;
+}) => {
+    styles: any;
+    newArrowDirection: any;
+    newArrowLocation: any;
+};
+export declare const triggerEventTransform: ({ trigger, click, show, hide }: {
+    trigger: any;
+    click: any;
+    show: any;
+    hide: any;
+}) => {};

package/dist/directionLocationUtil.js

@@ -0,0 +1,235 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var directionLocationUtil_exports = {};
+__export(directionLocationUtil_exports, {
+  getDirectionLocationStyle: () => getDirectionLocationStyle,
+  getNewDirectionLocation: () => getNewDirectionLocation,
+  getStylesAndLocation: () => getStylesAndLocation,
+  triggerEventTransform: () => triggerEventTransform
+});
+module.exports = __toCommonJS(directionLocationUtil_exports);
+const directionCssMap = {
+  left: "right",
+  right: "left",
+  top: "bottom",
+  bottom: "top"
+};
+const getNewDirectionLocation = ({
+  rootOffset,
+  arrowDirection,
+  tipOffset,
+  arrowLocation
+}) => {
+  const { left: cLeft, right: cRight, top: cTop, bottom: cBottom } = rootOffset;
+  const { width, height } = tipOffset;
+  const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
+  const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  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 < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > 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) {
+    newArrowLocation = directionCssMap[arrowLocation];
+  }
+  const isCenter = arrowLocation === "center";
+  if (isCenter && (isDirectionTop || isDirectionBottom)) {
+    if (cLeft + width > pgegWidth) {
+      newArrowLocation = directionCssMap.left;
+    } else if (cRight - width < 0) {
+      newArrowLocation = directionCssMap.right;
+    }
+  } else if (isCenter && (isDirectionLeft || isDirectionRight)) {
+    if (cTop + height > pgegHeight) {
+      newArrowLocation = directionCssMap.top;
+    } else if (cBottom - height < 0) {
+      newArrowLocation = directionCssMap.bottom;
+    }
+  }
+  return {
+    newArrowDirection,
+    newArrowLocation
+  };
+};
+const getDirectionLocationStyle = ({
+  rootOffset,
+  arrowDirection,
+  tipOffset,
+  arrowLocation
+}) => {
+  const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
+  const scrollLeft = window.screenX >= 0 && window.screenX || document.documentElement.scrollLeft;
+  const styles = {};
+  const {
+    width: cWidth,
+    height: cHeight,
+    left: cLeft,
+    right: cRight,
+    top: cTop,
+    bottom: cBottom
+  } = rootOffset;
+  const { width, height } = tipOffset;
+  if (arrowDirection === "top") {
+    styles.top = cTop;
+    styles.transform = `translateY(-100%)`;
+    switch (arrowLocation) {
+      case "left":
+        styles.left = cLeft;
+        break;
+      case "center":
+        styles.left = cLeft + (cWidth - width) / 2;
+        break;
+      case "right":
+        styles.left = cRight;
+        styles.transform = `translate(-100%, -100%)`;
+        break;
+      default:
+        break;
+    }
+  } else if (arrowDirection === "bottom") {
+    styles.top = cBottom;
+    switch (arrowLocation) {
+      case "left":
+        styles.left = cLeft;
+        break;
+      case "center":
+        styles.left = cLeft + (cWidth - width) / 2;
+        break;
+      case "right":
+        styles.left = cRight;
+        styles.transform = `translateX(-100%)`;
+        break;
+      default:
+        break;
+    }
+  } else if (arrowDirection === "left") {
+    styles.left = cLeft;
+    styles.transform = `translateX(-100%)`;
+    switch (arrowLocation) {
+      case "top":
+        styles.top = cTop;
+        break;
+      case "center":
+        styles.top = cTop + (cHeight - height) / 2;
+        break;
+      case "bottom":
+        styles.top = cBottom;
+        styles.transform = `translate(-100%, -100%)`;
+        break;
+      default:
+        break;
+    }
+  } else if (arrowDirection === "right") {
+    styles.left = cRight;
+    switch (arrowLocation) {
+      case "top":
+        styles.top = cTop;
+        break;
+      case "center":
+        styles.top = cTop + (cHeight - height) / 2;
+        break;
+      case "bottom":
+        styles.top = cBottom;
+        styles.transform = `translateY(-100%)`;
+        break;
+      default:
+        break;
+    }
+  }
+  if (styles.top) {
+    styles.top = `${styles.top + scrollTop}px`;
+  }
+  if (styles.left) {
+    styles.left = `${styles.left + scrollLeft}px`;
+  }
+  return styles;
+};
+const getStylesAndLocation = ({
+  childrenRef,
+  arrowDirection,
+  arrowLocation,
+  selector
+}) => {
+  const rootOffset = childrenRef.current.getBoundingClientRect();
+  const $rtDom = document.querySelector(selector);
+  if (!$rtDom)
+    return null;
+  const tipOffset = $rtDom.getBoundingClientRect();
+  const { newArrowDirection, newArrowLocation } = getNewDirectionLocation({
+    rootOffset,
+    arrowDirection,
+    tipOffset,
+    arrowLocation
+  });
+  const styles = getDirectionLocationStyle({
+    rootOffset,
+    arrowDirection: newArrowDirection,
+    tipOffset,
+    arrowLocation: newArrowLocation
+  });
+  styles.visibility = "visible";
+  return {
+    styles,
+    newArrowDirection,
+    newArrowLocation
+  };
+};
+const onMouseEnter = "onMouseEnter";
+const onMouseLeave = "onMouseLeave";
+const onClick = "onClick";
+const TriggerEvent = {
+  hover: [onMouseEnter, onMouseLeave],
+  click: [onClick]
+};
+const triggerEventTransform = ({ trigger, click, show, hide }) => {
+  let triggers = [];
+  if (typeof trigger === "string") {
+    triggers = [trigger];
+  } else if (Array.isArray(trigger)) {
+    triggers = trigger;
+  } else {
+    triggers = ["click"];
+  }
+  const option = {};
+  triggers.forEach((item) => {
+    const eventNames = TriggerEvent[item];
+    eventNames.forEach((eventName) => {
+      let cbk;
+      if (eventName === onMouseEnter) {
+        cbk = show;
+      } else if (eventName === onMouseLeave) {
+        cbk = hide;
+      } else if (eventName === onClick) {
+        cbk = click;
+      }
+      option[eventName] = cbk;
+    });
+  });
+  return option;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getDirectionLocationStyle,
+  getNewDirectionLocation,
+  getStylesAndLocation,
+  triggerEventTransform
+});

package/dist/index.d.ts

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

package/dist/index.js

@@ -36,6 +36,7 @@ __export(src_exports, {
   easing: () => import_transitions.easing,
   getBoundingClientRect: () => import_getBoundingClientRect.default,
   getRootElement: () => import_getRootElement.default,
+  getStylesAndLocation: () => import_directionLocationUtil.getStylesAndLocation,
   getTransitionProps: () => import_transitions.getTransitionProps,
   isAlipay: () => import_isMini.isAlipay,
   isDev: () => import_isDev.default,
@@ -45,6 +46,7 @@ __export(src_exports, {
   setRef: () => import_setRef.default,
   throttle: () => import_throttle.default,
   toArray: () => import_toArray.default,
+  triggerEventTransform: () => import_directionLocationUtil.triggerEventTransform,
   useDidMountEffect: () => import_hooks.useDidMountEffect,
   useDomCss: () => import_hooks.useDomCss,
   useDomReady: () => import_hooks.useDomReady,
@@ -57,6 +59,7 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var import_debounce = __toESM(require("./debounce"));
+var import_directionLocationUtil = require("./directionLocationUtil");
 var import_hex2rgba = __toESM(require("./hex2rgba"));
 var import_hooks = require("./hooks");
 var import_isDev = __toESM(require("./isDev"));
@@ -80,6 +83,7 @@ __reExport(src_exports, require("./render"), module.exports);
   easing,
   getBoundingClientRect,
   getRootElement,
+  getStylesAndLocation,
   getTransitionProps,
   isAlipay,
   isDev,
@@ -89,6 +93,7 @@ __reExport(src_exports, require("./render"), module.exports);
   setRef,
   throttle,
   toArray,
+  triggerEventTransform,
   useDidMountEffect,
   useDomCss,
   useDomReady,

package/es/directionLocationUtil.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 根据元素宽高判断是否超出边界，超出边界则重新定义方向
+ */
+export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
+    rootOffset: any;
+    arrowDirection: any;
+    tipOffset: any;
+    arrowLocation: any;
+}) => {
+    newArrowDirection: any;
+    newArrowLocation: any;
+};
+/**
+ * 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
+ */
+export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
+    rootOffset: any;
+    arrowDirection: any;
+    tipOffset: any;
+    arrowLocation: any;
+}) => any;
+/**
+ * 获取气泡位置和箭头位置
+ */
+export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, selector, }: {
+    childrenRef: any;
+    arrowDirection: any;
+    arrowLocation: any;
+    selector: any;
+}) => {
+    styles: any;
+    newArrowDirection: any;
+    newArrowLocation: any;
+};
+export declare const triggerEventTransform: ({ trigger, click, show, hide }: {
+    trigger: any;
+    click: any;
+    show: any;
+    hide: any;
+}) => {};

package/es/directionLocationUtil.js

@@ -0,0 +1,209 @@
+const directionCssMap = {
+  left: "right",
+  right: "left",
+  top: "bottom",
+  bottom: "top"
+};
+const getNewDirectionLocation = ({
+  rootOffset,
+  arrowDirection,
+  tipOffset,
+  arrowLocation
+}) => {
+  const { left: cLeft, right: cRight, top: cTop, bottom: cBottom } = rootOffset;
+  const { width, height } = tipOffset;
+  const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
+  const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
+  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 < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > 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) {
+    newArrowLocation = directionCssMap[arrowLocation];
+  }
+  const isCenter = arrowLocation === "center";
+  if (isCenter && (isDirectionTop || isDirectionBottom)) {
+    if (cLeft + width > pgegWidth) {
+      newArrowLocation = directionCssMap.left;
+    } else if (cRight - width < 0) {
+      newArrowLocation = directionCssMap.right;
+    }
+  } else if (isCenter && (isDirectionLeft || isDirectionRight)) {
+    if (cTop + height > pgegHeight) {
+      newArrowLocation = directionCssMap.top;
+    } else if (cBottom - height < 0) {
+      newArrowLocation = directionCssMap.bottom;
+    }
+  }
+  return {
+    newArrowDirection,
+    newArrowLocation
+  };
+};
+const getDirectionLocationStyle = ({
+  rootOffset,
+  arrowDirection,
+  tipOffset,
+  arrowLocation
+}) => {
+  const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
+  const scrollLeft = window.screenX >= 0 && window.screenX || document.documentElement.scrollLeft;
+  const styles = {};
+  const {
+    width: cWidth,
+    height: cHeight,
+    left: cLeft,
+    right: cRight,
+    top: cTop,
+    bottom: cBottom
+  } = rootOffset;
+  const { width, height } = tipOffset;
+  if (arrowDirection === "top") {
+    styles.top = cTop;
+    styles.transform = `translateY(-100%)`;
+    switch (arrowLocation) {
+      case "left":
+        styles.left = cLeft;
+        break;
+      case "center":
+        styles.left = cLeft + (cWidth - width) / 2;
+        break;
+      case "right":
+        styles.left = cRight;
+        styles.transform = `translate(-100%, -100%)`;
+        break;
+      default:
+        break;
+    }
+  } else if (arrowDirection === "bottom") {
+    styles.top = cBottom;
+    switch (arrowLocation) {
+      case "left":
+        styles.left = cLeft;
+        break;
+      case "center":
+        styles.left = cLeft + (cWidth - width) / 2;
+        break;
+      case "right":
+        styles.left = cRight;
+        styles.transform = `translateX(-100%)`;
+        break;
+      default:
+        break;
+    }
+  } else if (arrowDirection === "left") {
+    styles.left = cLeft;
+    styles.transform = `translateX(-100%)`;
+    switch (arrowLocation) {
+      case "top":
+        styles.top = cTop;
+        break;
+      case "center":
+        styles.top = cTop + (cHeight - height) / 2;
+        break;
+      case "bottom":
+        styles.top = cBottom;
+        styles.transform = `translate(-100%, -100%)`;
+        break;
+      default:
+        break;
+    }
+  } else if (arrowDirection === "right") {
+    styles.left = cRight;
+    switch (arrowLocation) {
+      case "top":
+        styles.top = cTop;
+        break;
+      case "center":
+        styles.top = cTop + (cHeight - height) / 2;
+        break;
+      case "bottom":
+        styles.top = cBottom;
+        styles.transform = `translateY(-100%)`;
+        break;
+      default:
+        break;
+    }
+  }
+  if (styles.top) {
+    styles.top = `${styles.top + scrollTop}px`;
+  }
+  if (styles.left) {
+    styles.left = `${styles.left + scrollLeft}px`;
+  }
+  return styles;
+};
+const getStylesAndLocation = ({
+  childrenRef,
+  arrowDirection,
+  arrowLocation,
+  selector
+}) => {
+  const rootOffset = childrenRef.current.getBoundingClientRect();
+  const $rtDom = document.querySelector(selector);
+  if (!$rtDom)
+    return null;
+  const tipOffset = $rtDom.getBoundingClientRect();
+  const { newArrowDirection, newArrowLocation } = getNewDirectionLocation({
+    rootOffset,
+    arrowDirection,
+    tipOffset,
+    arrowLocation
+  });
+  const styles = getDirectionLocationStyle({
+    rootOffset,
+    arrowDirection: newArrowDirection,
+    tipOffset,
+    arrowLocation: newArrowLocation
+  });
+  styles.visibility = "visible";
+  return {
+    styles,
+    newArrowDirection,
+    newArrowLocation
+  };
+};
+const onMouseEnter = "onMouseEnter";
+const onMouseLeave = "onMouseLeave";
+const onClick = "onClick";
+const TriggerEvent = {
+  hover: [onMouseEnter, onMouseLeave],
+  click: [onClick]
+};
+const triggerEventTransform = ({ trigger, click, show, hide }) => {
+  let triggers = [];
+  if (typeof trigger === "string") {
+    triggers = [trigger];
+  } else if (Array.isArray(trigger)) {
+    triggers = trigger;
+  } else {
+    triggers = ["click"];
+  }
+  const option = {};
+  triggers.forEach((item) => {
+    const eventNames = TriggerEvent[item];
+    eventNames.forEach((eventName) => {
+      let cbk;
+      if (eventName === onMouseEnter) {
+        cbk = show;
+      } else if (eventName === onMouseLeave) {
+        cbk = hide;
+      } else if (eventName === onClick) {
+        cbk = click;
+      }
+      option[eventName] = cbk;
+    });
+  });
+  return option;
+};
+export {
+  getDirectionLocationStyle,
+  getNewDirectionLocation,
+  getStylesAndLocation,
+  triggerEventTransform
+};

package/es/index.d.ts

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

package/es/index.js

@@ -1,4 +1,8 @@
 import { default as default2 } from "./debounce";
+import {
+  getStylesAndLocation,
+  triggerEventTransform
+} from "./directionLocationUtil";
 import { default as default3 } from "./hex2rgba";
 import {
   useDidMountEffect,
@@ -36,6 +40,7 @@ export {
   easing,
   default10 as getBoundingClientRect,
   default9 as getRootElement,
+  getStylesAndLocation,
   getTransitionProps,
   isAlipay,
   default4 as isDev,
@@ -45,6 +50,7 @@ export {
   default5 as setRef,
   default6 as throttle,
   default7 as toArray,
+  triggerEventTransform,
   useDidMountEffect,
   useDomCss,
   useDomReady,

package/package.json

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