@bifrostui/utils 2.0.0-alpha.0 → 2.0.0-alpha.2

package/es/directionLocationUtil.js

@@ -1,12 +1,31 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { getScrollRect, getClientRect } from "./domUtils";
+import getBoundingClientRect from "./getBoundingClientRect";
 const directionCssMap = {
   left: "right",
   right: "left",
   top: "bottom",
   bottom: "top"
 };
-const isBodyScroll = (scrollRoot) => {
-  return scrollRoot === document.body;
-};
 const getNewDirectionLocation = ({
   scrollRoot,
   scrollRootOffset,
@@ -29,14 +48,15 @@ const getNewDirectionLocation = ({
     top: sTop,
     bottom: sBottom,
     left: sLeft,
-    right: sRight
+    right: sRight,
+    width: pageWidth,
+    height: pageHeight
   } = 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;
+  const isBodyRoot = !scrollRoot;
+  const maxTop = isBodyRoot ? 0 : sTop;
+  const maxBottom = isBodyRoot ? pageHeight : sBottom;
+  const maxLeft = isBodyRoot ? 0 : sLeft;
+  const maxRight = isBodyRoot ? pageWidth : sRight;
   let newArrowDirection = arrowDirection;
   let newArrowLocation = arrowLocation;
   const isDirectionTop = arrowDirection === "top";
@@ -71,16 +91,14 @@ const getNewDirectionLocation = ({
     newArrowLocation
   };
 };
-const getDirectionLocationStyle = ({
+const getDirectionLocationStyle = (_0) => __async(void 0, [_0], function* ({
   childrenOffset,
   arrowDirection,
   tipOffset,
   arrowLocation,
   offsetSpacing
-}) => {
-  const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
-  const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
-  const styles = {};
+}) {
+  const { top: scrollTop, left: scrollLeft } = yield getScrollRect();
   const {
     width: cWidth,
     height: cHeight,
@@ -94,107 +112,125 @@ const getDirectionLocationStyle = ({
     childrenStyle = { width: `${cWidth}px`, height: `${cHeight}px` };
   }
   const { width, height } = tipOffset;
+  let styleTop;
+  let styleLeft;
   if (arrowDirection === "top") {
-    styles.top = cTop - offsetSpacing - height;
+    styleTop = cTop - offsetSpacing - height;
     switch (arrowLocation) {
       case "left":
-        styles.left = cLeft;
+        styleLeft = cLeft;
         break;
       case "center":
-        styles.left = cLeft + (cWidth - width) / 2;
+        styleLeft = cLeft + (cWidth - width) / 2;
         break;
       case "right":
-        styles.left = cRight - width;
+        styleLeft = cRight - width;
         break;
       case "none":
-        styles.left = cLeft;
+        styleLeft = cLeft;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "bottom") {
-    styles.top = cBottom + offsetSpacing;
+    styleTop = cBottom + offsetSpacing;
     switch (arrowLocation) {
       case "left":
-        styles.left = cLeft;
+        styleLeft = cLeft;
         break;
       case "center":
-        styles.left = cLeft + (cWidth - width) / 2;
+        styleLeft = cLeft + (cWidth - width) / 2;
         break;
       case "right":
-        styles.left = cRight - width;
+        styleLeft = cRight - width;
         break;
       case "none":
-        styles.left = cLeft;
+        styleLeft = cLeft;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "left") {
-    styles.left = cLeft - offsetSpacing - width;
+    styleLeft = cLeft - offsetSpacing - width;
     switch (arrowLocation) {
       case "top":
-        styles.top = cTop;
+        styleTop = cTop;
         break;
       case "center":
-        styles.top = cTop + (cHeight - height) / 2;
+        styleTop = cTop + (cHeight - height) / 2;
         break;
       case "bottom":
-        styles.top = cBottom - height;
+        styleTop = cBottom - height;
         break;
       case "none":
-        styles.top = cTop;
+        styleTop = cTop;
         break;
       default:
         break;
     }
   } else if (arrowDirection === "right") {
-    styles.left = cRight + offsetSpacing;
+    styleLeft = cRight + offsetSpacing;
     switch (arrowLocation) {
       case "top":
-        styles.top = cTop;
+        styleTop = cTop;
         break;
       case "center":
-        styles.top = cTop + (cHeight - height) / 2;
+        styleTop = cTop + (cHeight - height) / 2;
         break;
       case "bottom":
-        styles.top = cBottom - height;
+        styleTop = cBottom - height;
         break;
       case "none":
-        styles.top = cTop;
+        styleTop = cTop;
         break;
       default:
         break;
     }
   }
-  if (styles.top) {
-    styles.top = `${styles.top + scrollTop}px`;
+  if (styleTop) {
+    styleTop = `${styleTop + scrollTop}px`;
   }
-  if (styles.left) {
-    styles.left = `${styles.left + scrollLeft}px`;
+  if (styleLeft) {
+    styleLeft = `${styleLeft + scrollLeft}px`;
   }
+  const styles = {
+    top: 0,
+    left: 0,
+    transform: `translate3d(${styleLeft}, ${styleTop}, 0)`,
+    visibility: ""
+  };
   return { styles, childrenStyle };
-};
-const getStylesAndLocation = ({
-  scrollRoot = document.body,
+});
+const getStylesAndLocation = (_0) => __async(void 0, [_0], function* ({
+  scrollRoot,
   childrenRef,
-  arrowDirection,
-  arrowLocation,
-  offsetSpacing,
-  selector
-}) => {
+  tipRef,
+  arrowDirection = "top",
+  arrowLocation = "center",
+  offsetSpacing = 0
+}) {
   if (!(childrenRef == null ? void 0 : childrenRef.current)) {
     console.error(
       "\u7EC4\u4EF6\u5305\u88F9\u7684children\u53EF\u80FD\u662F\u4E00\u4E2A\u7EC4\u4EF6\uFF0C\u60A8\u7684\u5F53\u524D\u5199\u6CD5\u53EF\u80FD\u5BFC\u81F4ref\u6CA1\u6709\u7ED1\u5B9A\u5230children\u4E0A\uFF0C\u8BF7\u5C1D\u8BD5\u5BF9children\u5BF9\u5E94\u7684\u7EC4\u4EF6\u4F7F\u7528/* @__PURE__ */ React.forwardRef\u6765\u89E3\u51B3"
     );
     return null;
   }
-  const childrenOffset = childrenRef.current.getBoundingClientRect();
-  const $rtDom = document.querySelector(selector);
-  if (!$rtDom)
-    return null;
-  const tipOffset = $rtDom.getBoundingClientRect();
-  const scrollRootOffset = scrollRoot.getBoundingClientRect();
+  const childrenOffset = yield getBoundingClientRect(childrenRef.current);
+  const tipOffset = yield getBoundingClientRect(tipRef.current);
+  if (!tipOffset || !childrenOffset) {
+    return {
+      styles: {},
+      childrenStyle: {},
+      newArrowDirection: arrowDirection,
+      newArrowLocation: arrowLocation
+    };
+  }
+  let scrollRootOffset;
+  if (scrollRoot) {
+    scrollRootOffset = yield getBoundingClientRect(scrollRoot);
+  } else {
+    scrollRootOffset = yield getClientRect();
+  }
   const { newArrowDirection, newArrowLocation } = getNewDirectionLocation({
     scrollRoot,
     scrollRootOffset,
@@ -204,7 +240,7 @@ const getStylesAndLocation = ({
     arrowLocation,
     offsetSpacing
   });
-  const { styles, childrenStyle } = getDirectionLocationStyle({
+  const { styles, childrenStyle } = yield getDirectionLocationStyle({
     childrenOffset,
     arrowDirection: newArrowDirection,
     tipOffset,
@@ -218,7 +254,7 @@ const getStylesAndLocation = ({
     newArrowDirection,
     newArrowLocation
   };
-};
+});
 const onMouseEnter = "onMouseEnter";
 const onMouseLeave = "onMouseLeave";
 const onClick = "onClick";

package/es/domUtils/addClass.d.ts

@@ -0,0 +1 @@
+export declare const addClass: (element: Element | SVGElement, className: string) => void;

package/es/domUtils/addClass.js

@@ -0,0 +1,23 @@
+const hasClass = (element, className) => {
+  if (element.classList)
+    return !!className && element.classList.contains(className);
+  return ` ${element.className.baseVal || element.className} `.indexOf(
+    ` ${className} `
+  ) !== -1;
+};
+const addClass = (element, className) => {
+  if (element.classList) {
+    element.classList.add(className);
+  } else if (!hasClass(element, className))
+    if (typeof element.className === "string") {
+      element.className = `${element.className} ${className}`;
+    } else {
+      element.setAttribute(
+        "class",
+        `${element.className && element.className.baseVal || ""} ${className}`
+      );
+    }
+};
+export {
+  addClass
+};

package/es/domUtils/index.d.ts

@@ -0,0 +1,3 @@
+export { getClientRect, getScrollRect } from './rect';
+export { addClass } from './addClass';
+export { removeClass } from './removeClass';

package/es/domUtils/index.js

@@ -0,0 +1,9 @@
+import { getClientRect, getScrollRect } from "./rect";
+import { addClass } from "./addClass";
+import { removeClass } from "./removeClass";
+export {
+  addClass,
+  getClientRect,
+  getScrollRect,
+  removeClass
+};

package/es/domUtils/index.miniapp.d.ts

@@ -0,0 +1,3 @@
+export { getClientRect, getScrollRect } from './rect';
+export { addClass } from './addClass';
+export { removeClass } from './removeClass';

package/es/domUtils/index.miniapp.js

@@ -0,0 +1,9 @@
+import { getClientRect, getScrollRect } from "./rect";
+import { addClass } from "./addClass";
+import { removeClass } from "./removeClass";
+export {
+  addClass,
+  getClientRect,
+  getScrollRect,
+  removeClass
+};

package/es/domUtils/rect.d.ts

@@ -0,0 +1,12 @@
+export declare const getClientRect: () => Promise<{
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}>;
+export declare const getScrollRect: () => Promise<{
+    top: number;
+    left: number;
+}>;

package/es/domUtils/rect.js

@@ -0,0 +1,22 @@
+const getClientRect = () => {
+  const width = window.innerWidth || document.documentElement.clientWidth;
+  const height = window.innerHeight || document.documentElement.clientHeight;
+  return Promise.resolve({
+    width,
+    height,
+    left: 0,
+    top: 0,
+    right: width,
+    bottom: height
+  });
+};
+const getScrollRect = () => {
+  return Promise.resolve({
+    top: window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop,
+    left: window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft
+  });
+};
+export {
+  getClientRect,
+  getScrollRect
+};

package/es/domUtils/rect.miniapp.d.ts

@@ -0,0 +1,2 @@
+export declare const getClientRect: () => Promise<unknown>;
+export declare const getScrollRect: () => Promise<unknown>;

package/es/domUtils/rect.miniapp.js

@@ -0,0 +1,54 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import Taro from "@tarojs/taro";
+const getClientRect = () => {
+  return new Promise((resolve, reject) => {
+    try {
+      const res = Taro.getSystemInfoSync();
+      const width = res.windowWidth;
+      const height = res.windowHeight;
+      const clientInfo = __spreadProps(__spreadValues({}, res), {
+        width,
+        height,
+        left: 0,
+        top: 0,
+        right: width,
+        bottom: height
+      });
+      resolve(clientInfo);
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
+const getScrollRect = () => {
+  return new Promise((resolve) => {
+    Taro.createSelectorQuery().selectViewport().scrollOffset().exec((res) => {
+      resolve({
+        top: res[0].scrollTop,
+        left: res[0].scrollLeft
+      });
+    });
+  });
+};
+export {
+  getClientRect,
+  getScrollRect
+};

package/es/domUtils/removeClass.d.ts

@@ -0,0 +1 @@
+export declare const removeClass: (element: Element | SVGElement, className: string) => void;

package/es/domUtils/removeClass.js

@@ -0,0 +1,24 @@
+const replaceClassName = (origClass, classToRemove) => {
+  return origClass.replace(new RegExp(`(^|\\s)${classToRemove}(?:\\s|$)`, "g"), "$1").replace(/\s+/g, " ").replace(/^\s*|\s*$/g, "");
+};
+const removeClass = (element, className) => {
+  if (element.classList) {
+    element.classList.remove(className);
+  } else if (typeof element.className === "string") {
+    element.className = replaceClassName(
+      element.className,
+      className
+    );
+  } else {
+    element.setAttribute(
+      "class",
+      replaceClassName(
+        element.className && element.className.baseVal || "",
+        className
+      )
+    );
+  }
+};
+export {
+  removeClass
+};

package/es/getBoundingClientRect/index.d.ts

@@ -1 +1 @@
-export default function getBoundingClientRect(ele: Element): Promise<DOMRect>;
+export default function getBoundingClientRect(ele: Element | null): Promise<DOMRect>;

package/es/getBoundingClientRect/index.js

@@ -1,4 +1,17 @@
 function getBoundingClientRect(ele) {
+  if (!ele) {
+    return Promise.resolve({
+      width: 0,
+      height: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => ({})
+    });
+  }
   return Promise.resolve(ele.getBoundingClientRect());
 }
 export {

package/es/getBoundingClientRect/index.miniapp.d.ts

@@ -1,2 +1 @@
-import type { TaroElement } from '@tarojs/runtime';
-export default function getBoundingClientRect(ele: TaroElement): Promise<DOMRect>;
+export default function getBoundingClientRect(ele: any): Promise<DOMRect>;

package/es/getBoundingClientRect/index.miniapp.js

@@ -1,10 +1,39 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import Taro from "@tarojs/taro";
+import { isTt, isWeapp } from "../isMini";
 function getBoundingClientRect(ele) {
-  return new Promise((resolve) => {
-    const query = Taro.createSelectorQuery();
-    query.select(`#${ele.uid}`).boundingClientRect().exec(([res]) => {
-      resolve(res);
-    });
+  return __async(this, null, function* () {
+    let result;
+    if (isWeapp || isTt) {
+      result = yield ele.getBoundingClientRect();
+    } else {
+      const query = Taro.createSelectorQuery();
+      result = yield new Promise((resolve) => {
+        query.select(`#${ele.uid}`).boundingClientRect().exec(([res]) => {
+          resolve(res);
+        });
+      });
+    }
+    return result;
   });
 }
 export {

package/es/getRootContainer/index.d.ts

@@ -0,0 +1,2 @@
+declare const getRootContainer: (rootCon?: HTMLElement | (() => HTMLElement) | Window, defaultCon?: any) => any;
+export default getRootContainer;

package/es/getRootContainer/index.js

@@ -0,0 +1,9 @@
+const getRootContainer = (rootCon, defaultCon) => {
+  const rootElement = typeof rootCon === "function" ? rootCon() : rootCon;
+  const defaultRootElement = document.body;
+  return rootElement || defaultCon || defaultRootElement;
+};
+var getRootContainer_default = getRootContainer;
+export {
+  getRootContainer_default as default
+};

package/es/getRootContainer/index.miniapp.d.ts

@@ -0,0 +1,3 @@
+import type { TaroElement } from '@tarojs/runtime';
+declare const getRootContainer: (rootCon?: TaroElement | (() => TaroElement), defaultCon?: any) => any;
+export default getRootContainer;

package/es/{getRootElement → getRootContainer}/index.miniapp.js

@@ -1,13 +1,13 @@
 import Taro from "@tarojs/taro";
-const getRootElement = (rootEle) => {
+const getRootContainer = (rootCon, defaultCon) => {
   const currentPages = Taro.getCurrentPages() || [];
   const currentPage = currentPages[currentPages.length - 1];
   const pageElement = currentPage == null ? void 0 : currentPage.$taroPath;
   const defaultRootElement = document.getElementById(pageElement);
-  const rootElement = typeof rootEle === "function" ? rootEle() : rootEle;
-  return rootElement || defaultRootElement;
+  const rootElement = typeof rootCon === "function" ? rootCon() : rootCon;
+  return rootElement || defaultCon || defaultRootElement;
 };
-var index_miniapp_default = getRootElement;
+var index_miniapp_default = getRootContainer;
 export {
   index_miniapp_default as default
 };

package/es/hooks/index.d.ts

@@ -1,11 +1,11 @@
 import useDidMountEffect from './useDidMountEffect';
 import useEventCallback from './useEventCallback';
 import useForkRef from './useForkRef';
-import useTouchEmulator from './useTouchEmulator';
+import useTouchEmulator, { touchEmulator, emulateTouchStart, emulateTouchMove, emulateTouchEnd } from './useTouchEmulator';
 import useValue from './useValue';
 import useDomReady from './useDomReady';
 import useSize from './useSize';
 import useDomCss from './useDomCss';
 import useTouch from './useTouch';
 import useUniqueId from './useUniqueId';
-export { useValue, useForkRef, useEventCallback, useDidMountEffect, useTouchEmulator, useDomReady, useSize, useDomCss, useTouch, useUniqueId, };
+export { useValue, useForkRef, useEventCallback, useDidMountEffect, useTouchEmulator, touchEmulator, emulateTouchStart, emulateTouchMove, emulateTouchEnd, useDomReady, useSize, useDomCss, useTouch, useUniqueId, };

package/es/hooks/index.js

@@ -1,7 +1,12 @@
 import useDidMountEffect from "./useDidMountEffect";
 import useEventCallback from "./useEventCallback";
 import useForkRef from "./useForkRef";
-import useTouchEmulator from "./useTouchEmulator";
+import useTouchEmulator, {
+  touchEmulator,
+  emulateTouchStart,
+  emulateTouchMove,
+  emulateTouchEnd
+} from "./useTouchEmulator";
 import useValue from "./useValue";
 import useDomReady from "./useDomReady";
 import useSize from "./useSize";
@@ -9,6 +14,10 @@ import useDomCss from "./useDomCss";
 import useTouch from "./useTouch";
 import useUniqueId from "./useUniqueId";
 export {
+  emulateTouchEnd,
+  emulateTouchMove,
+  emulateTouchStart,
+  touchEmulator,
   useDidMountEffect,
   useDomCss,
   useDomReady,

package/es/hooks/useTouchEmulator.d.ts

@@ -1 +1,7 @@
-export default function useTouchEmulator(dom?: HTMLElement | Window): void;
+declare const emulateTouchStart: (ev: any) => void;
+declare const emulateTouchMove: (ev: any) => void;
+declare const emulateTouchEnd: (ev: any) => void;
+declare function useTouchEmulator(dom?: HTMLElement | Window): void;
+declare const touchEmulator: (dom?: HTMLElement | Window) => () => void;
+export default useTouchEmulator;
+export { touchEmulator, emulateTouchStart, emulateTouchMove, emulateTouchEnd };

package/es/hooks/useTouchEmulator.js

@@ -66,25 +66,44 @@ function getActiveTouches(mouseEv) {
   }
   return createTouchList(mouseEv);
 }
+const emulateTouchStart = onMouse("touchstart");
+const emulateTouchMove = onMouse("touchmove");
+const emulateTouchEnd = onMouse("touchend");
 function useTouchEmulator(dom = window) {
-  const touchStart = onMouse("touchstart");
-  const touchMove = onMouse("touchmove");
-  const touchEnd = onMouse("touchend");
   useEffect(() => {
     if (dom) {
-      dom.addEventListener("mousedown", touchStart, true);
-      dom.addEventListener("mousemove", touchMove, true);
-      dom.addEventListener("mouseup", touchEnd, true);
+      dom.addEventListener("mousedown", emulateTouchStart, true);
+      dom.addEventListener("mousemove", emulateTouchMove, true);
+      dom.addEventListener("mouseup", emulateTouchEnd, true);
     }
     return () => {
       if (dom) {
-        dom.removeEventListener("mousedown", touchStart, true);
-        dom.removeEventListener("mousemove", touchMove, true);
-        dom.removeEventListener("mouseup", touchEnd, true);
+        dom.removeEventListener("mousedown", emulateTouchStart, true);
+        dom.removeEventListener("mousemove", emulateTouchMove, true);
+        dom.removeEventListener("mouseup", emulateTouchEnd, true);
       }
     };
   }, [dom]);
 }
+const touchEmulator = (dom = window) => {
+  if (dom) {
+    dom.addEventListener("mousedown", emulateTouchStart, true);
+    dom.addEventListener("mousemove", emulateTouchMove, true);
+    dom.addEventListener("mouseup", emulateTouchEnd, true);
+  }
+  return function() {
+    if (dom) {
+      dom.removeEventListener("mousedown", emulateTouchStart, true);
+      dom.removeEventListener("mousemove", emulateTouchMove, true);
+      dom.removeEventListener("mouseup", emulateTouchEnd, true);
+    }
+  };
+};
+var useTouchEmulator_default = useTouchEmulator;
 export {
-  useTouchEmulator as default
+  useTouchEmulator_default as default,
+  emulateTouchEnd,
+  emulateTouchMove,
+  emulateTouchStart,
+  touchEmulator
 };