refactor(Popup): add constant for arrow size

shervinchen · Apr 18, 2024 · 420d450 · 420d450
1 parent 1f122d2
commit 420d450
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/packages/Popup/PopupArrow.tsx b/packages/Popup/PopupArrow.tsx
@@ -1,6 +1,10 @@
 import { FC, useMemo } from 'react';
 import classNames from 'classnames';
-import { getTargetRect, computePopupArrowPosition } from './computePopup';
+import {
+  getTargetRect,
+  computePopupArrowPosition,
+  arrowSize,
+} from './computePopup';
 import { PopupArrowProps, PopupArrowOffset } from './Popup.types';
 
 const PopupArrow: FC<PopupArrowProps> = ({
@@ -18,7 +22,7 @@ const PopupArrow: FC<PopupArrowProps> = ({
   }, [targetRef]);
   const { left, top, right, bottom, transform } = computePopupArrowPosition(
     arrowOffset,
-    withBorder ? '4px' : '3px',
+    withBorder ? `${arrowSize / 2 + 1}px` : `${arrowSize / 2}px`,
     placement
   );
   const classes = classNames('raw-popup-arrow', className);
@@ -27,8 +31,8 @@ const PopupArrow: FC<PopupArrowProps> = ({
     <span className={classes}>
       <style jsx>{`
         .raw-popup-arrow {
-          width: 6px;
-          height: 6px;
+          width: ${arrowSize}px;
+          height: ${arrowSize}px;
           position: absolute;
           left: ${left};
           top: ${top};

diff --git a/packages/Popup/computePopup.ts b/packages/Popup/computePopup.ts
@@ -7,6 +7,8 @@ import {
   PopupPosition,
 } from './Popup.types';
 
+export const arrowSize = 8;
+
 export const getTargetRect = (
   targetRef?: MutableRefObject<HTMLElement | null>
 ) => {
@@ -74,69 +76,68 @@ export const computePopupPosition = (
     getPopupContainer
   );
   const { width, height } = getTargetRect(targetRef);
-  const offset = 6;
 
   const placements: {
     [key in PopupPlacement]: PopupPosition;
   } = {
     top: {
-      top: top - offset,
+      top: top - arrowSize,
       left: left + width / 2,
       transform: 'translate(-50%, -100%)',
     },
     topLeft: {
-      top: top - offset,
+      top: top - arrowSize,
       left,
       transform: 'translate(0, -100%)',
     },
     topRight: {
-      top: top - offset,
+      top: top - arrowSize,
       left: left + width,
       transform: 'translate(-100%, -100%)',
     },
     bottom: {
-      top: bottom + offset,
+      top: bottom + arrowSize,
       left: left + width / 2,
       transform: 'translate(-50%, 0)',
     },
     bottomLeft: {
-      top: bottom + offset,
+      top: bottom + arrowSize,
       left,
       transform: 'translate(0, 0)',
     },
     bottomRight: {
-      top: bottom + offset,
+      top: bottom + arrowSize,
       left: left + width,
       transform: 'translate(-100%, 0)',
     },
     left: {
       top: top + height / 2,
-      left: left - offset,
+      left: left - arrowSize,
       transform: 'translate(-100%, -50%)',
     },
     leftTop: {
       top,
-      left: left - offset,
+      left: left - arrowSize,
       transform: 'translate(-100%, 0)',
     },
     leftBottom: {
       top: top + height,
-      left: left - offset,
+      left: left - arrowSize,
       transform: 'translate(-100%, -100%)',
     },
     right: {
       top: top + height / 2,
-      left: right + offset,
+      left: right + arrowSize,
       transform: 'translate(0, -50%)',
     },
     rightTop: {
       top,
-      left: right + offset,
+      left: right + arrowSize,
       transform: 'translate(0, 0)',
     },
     rightBottom: {
       top: top + height,
-      left: right + offset,
+      left: right + arrowSize,
       transform: 'translate(0, -100%)',
     },
   };