fixup! fixup! fixup! fixup! Feat(web): Add FloatingUI support to Tool…

…tip components
lmc-eu · Jan 8, 2024 · 331fb7e · 331fb7e
1 parent efb5297
commit 331fb7e
Showing 1 changed file with 47 additions and 48 deletions.
diff --git a/packages/web/src/js/Tooltip.ts b/packages/web/src/js/Tooltip.ts
@@ -28,9 +28,8 @@ type Config = {
   placementControlled: boolean;
 };
 
-export const transformStringToArray = (str: string) => {
-  return str.split(',').map((item) => item.trim()) as FloatingUI.Placement[];
-};
+export const transformStringToArray = (str: string) =>
+  str.split(',').map((item) => item.trim()) as FloatingUI.Placement[];
 
 class Tooltip extends BaseComponent {
   arrow: HTMLElement;
@@ -147,10 +146,10 @@ class Tooltip extends BaseComponent {
   }
 
   getTipTooltipWrapper() {
-    const id = this.tip.getAttribute('id');
+    const id = this.tip.getAttribute('id') as string;
 
     const triggerWrapperElement = document
-      .getElementById(id!)
+      .getElementById(id)
       ?.closest('[data-spirit-element="tooltip-wrapper"]') as HTMLElement;
 
     return triggerWrapperElement;
@@ -246,51 +245,51 @@ class Tooltip extends BaseComponent {
     const hasShift = this.getShiftConfig();
     const hasSize = this.getSizeConfig(tooltip);
 
-    if (!button || !tooltip) return;
-
-    computePosition(button, tooltip, {
-      placement: userPlacement,
-      middleware: [
-        floatingOffset(tooltipOffset),
-        hasFlip,
-        hasShift,
-        hasSize,
-        floatingArrow({ element: arrow, padding: arrowCornerOffset }), // arrow() should be placed at the end
-      ],
-    }).then(({ x, y, middlewareData, placement }) => {
-      Object.assign(tooltip.style, {
-        top: `${y}px`,
-        left: `${x}px`,
-      });
-
-      const side = placement.split('-')[0];
-
-      const staticSide = {
-        top: 'bottom',
-        right: 'left',
-        bottom: 'top',
-        left: 'right',
-      }[side] as 'top' | 'right' | 'bottom' | 'left';
-
-      if (middlewareData.arrow && arrow) {
-        const offset =
-          staticSide === 'top' || staticSide === 'bottom'
-            ? arrow.offsetHeight
-            : (arrow.offsetHeight + arrow.offsetWidth) / 2;
-
-        const { x: arrowX, y: arrowY } = middlewareData.arrow;
-
-        Object.assign(arrow.style, {
-          left: arrowX != null ? `${arrowX}px` : '',
-          top: arrowY != null ? `${arrowY}px` : '',
-          bottom: '',
-          right: '',
-          [staticSide]: `-${Math.floor(offset)}px`,
+    if (button && tooltip) {
+      computePosition(button, tooltip, {
+        placement: userPlacement,
+        middleware: [
+          floatingOffset(tooltipOffset),
+          hasFlip,
+          hasShift,
+          hasSize,
+          floatingArrow({ element: arrow, padding: arrowCornerOffset }), // arrow() should be placed at the end
+        ],
+      }).then(({ x, y, middlewareData, placement }) => {
+        Object.assign(tooltip.style, {
+          top: `${y}px`,
+          left: `${x}px`,
         });
-      }
 
-      tooltip.dataset.spiritPlacement = placement;
-    });
+        const side = placement.split('-')[0];
+
+        const staticSide = {
+          top: 'bottom',
+          right: 'left',
+          bottom: 'top',
+          left: 'right',
+        }[side] as 'top' | 'right' | 'bottom' | 'left';
+
+        if (middlewareData.arrow && arrow) {
+          const offset =
+            staticSide === 'top' || staticSide === 'bottom'
+              ? arrow.offsetHeight
+              : (arrow.offsetHeight + arrow.offsetWidth) / 2;
+
+          const { x: arrowX, y: arrowY } = middlewareData.arrow;
+
+          Object.assign(arrow.style, {
+            left: arrowX != null ? `${arrowX}px` : '',
+            top: arrowY != null ? `${arrowY}px` : '',
+            bottom: '',
+            right: '',
+            [staticSide]: `-${Math.floor(offset)}px`,
+          });
+        }
+
+        tooltip.dataset.spiritPlacement = placement;
+      });
+    }
   }
 }