feat: export utils (#16)

cinnyapp · Apr 22, 2023 · 3cbca38 · 3cbca38
1 parent d228fe6
commit 3cbca38
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,4 +1,5 @@
 export * from "./types";
+export * from "./util";
 export * from "./as";
 export * from "./reset.css";
 export * from "./selectorPreset.css";

diff --git a/src/components/pop-out/PopOut.tsx b/src/components/pop-out/PopOut.tsx
@@ -33,7 +33,7 @@ export const PopOut = ({
     const anchor = anchorRef.current as HTMLElement;
     const popOutEl = popOutRef.current;
 
-    const css = getRelativeFixedPosition(anchor, position, align, offset);
+    const css = getRelativeFixedPosition(anchor.getBoundingClientRect(), position, align, offset);
     if (popOutEl) {
       popOutEl.style.top = css.top;
       popOutEl.style.right = css.right;

diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx
@@ -29,7 +29,12 @@ const useTooltip = (position: Position, align: Align, offset: number, delay: num
 
     const openTooltip = (evt: Event) => {
       if (timeoutId) return;
-      const pos = getRelativeFixedPosition(trigger, position, align, offset);
+      const pos = getRelativeFixedPosition(
+        trigger.getBoundingClientRect(),
+        position,
+        align,
+        offset
+      );
       if (tooltip) {
         tooltip.style.top = pos.top;
         tooltip.style.right = pos.right;

diff --git a/src/components/util.ts b/src/components/util.ts
@@ -9,12 +9,11 @@ export type Position = "top" | "right" | "bottom" | "left";
 export type Align = "start" | "center" | "end";
 
 export const getRelativeFixedPosition = (
-  element: HTMLElement,
+  domRect: DOMRect,
   position: Position,
   align: Align,
   offset: number
 ): PositionCSS => {
-  const cords = element.getBoundingClientRect();
   const { clientWidth, clientHeight } = document.body;
 
   const css = {
@@ -26,25 +25,25 @@ export const getRelativeFixedPosition = (
   };
 
   if (position === "top" || position === "bottom") {
-    if (position === "top") css.bottom = `${clientHeight - cords.top + offset}px`;
-    else css.top = `${cords.bottom + offset}px`;
+    if (position === "top") css.bottom = `${clientHeight - domRect.top + offset}px`;
+    else css.top = `${domRect.bottom + offset}px`;
 
-    if (align === "start") css.left = `${cords.left}px`;
+    if (align === "start") css.left = `${domRect.left}px`;
     if (align === "center") {
-      css.left = `${cords.left + cords.width / 2}px`;
+      css.left = `${domRect.left + domRect.width / 2}px`;
       css.transform = "translateX(-50%)";
     }
-    if (align === "end") css.right = `${clientWidth - cords.right}px`;
+    if (align === "end") css.right = `${clientWidth - domRect.right}px`;
   } else {
-    if (position === "right") css.left = `${cords.right + offset}px`;
-    else css.right = `${clientWidth - cords.left + offset}px`;
+    if (position === "right") css.left = `${domRect.right + offset}px`;
+    else css.right = `${clientWidth - domRect.left + offset}px`;
 
-    if (align === "start") css.top = `${cords.top}px`;
+    if (align === "start") css.top = `${domRect.top}px`;
     if (align === "center") {
       css.transform = "translateY(-50%)";
-      css.top = `${cords.top + cords.height / 2}px`;
+      css.top = `${domRect.top + domRect.height / 2}px`;
     }
-    if (align === "end") css.bottom = `${clientHeight - cords.bottom}px`;
+    if (align === "end") css.bottom = `${clientHeight - domRect.bottom}px`;
   }
 
   return css;