update

Author: li-jia-nan

docs/examples/safe-hover.tsx

@@ -1,16 +1,15 @@
-import Trigger, { type TriggerRef } from '@rc-component/trigger';
-import React from 'react';
-import {
-  getSafeHoverAreaPolygons,
-  type SafeHoverPoint,
-} from '../../src/util/safeHover';
+import Trigger from '@rc-component/trigger';
+import type { TriggerRef } from '@rc-component/trigger';
+import React, { useState } from 'react';
+import { getSafeHoverAreaPolygons } from '../../src/util/safeHover';
+import type { SafeHoverPoint } from '../../src/util/safeHover';
 import '../../assets/index.less';
 
-type SafeHoverPolygon = {
+interface SafeHoverPolygon {
   points: SafeHoverPoint[];
   fill: string;
   stroke: string;
-};
+}
 
 const safeHoverPolygonStyles = [
   {
@@ -38,12 +37,10 @@ const popupStyle: React.CSSProperties = {
   boxShadow: '0 6px 16px rgba(0, 0, 0, 0.12)',
 };
 
-const SafeHoverDemo = () => {
+const SafeHoverDemo: React.FC = () => {
   const triggerRef = React.useRef<TriggerRef>(null);
 
-  const [safeHoverPolygons, setSafeHoverPolygons] = React.useState<
-    SafeHoverPolygon[]
-  >([]);
+  const [safeHoverPolygons, setPolygons] = useState<SafeHoverPolygon[]>([]);
 
   const updateSafeHoverPolygons = (
     event: React.MouseEvent<HTMLElement> | React.PointerEvent<HTMLElement>,
@@ -52,20 +49,18 @@ const SafeHoverDemo = () => {
     const popup = triggerRef.current?.popupElement;
 
     if (!target || !popup) {
-      setSafeHoverPolygons([]);
+      setPolygons([]);
       return;
     }
 
     const leavePoint: SafeHoverPoint = [event.clientX, event.clientY];
-    setSafeHoverPolygons(
+
+    setPolygons(
       getSafeHoverAreaPolygons(
         leavePoint,
         target.getBoundingClientRect(),
         popup.getBoundingClientRect(),
-      ).map((points, index) => ({
-        points,
-        ...safeHoverPolygonStyles[index],
-      })),
+      ).map((points, i) => ({ points, ...safeHoverPolygonStyles[i] })),
     );
   };
 
@@ -83,17 +78,19 @@ const SafeHoverDemo = () => {
             zIndex: 999,
           }}
         >
-          {safeHoverPolygons.map(({ points, fill, stroke }, index) => (
-            <polygon
-              // eslint-disable-next-line react/no-array-index-key
-              key={index}
-              points={points.map((point) => point.join(',')).join(' ')}
-              fill={fill}
-              stroke={stroke}
-              strokeDasharray="4 3"
-              strokeWidth={1}
-            />
-          ))}
+          {safeHoverPolygons.map(({ points, fill, stroke }, index) => {
+            return (
+              <polygon
+                // eslint-disable-next-line react/no-array-index-key
+                key={`polygon-${index}`}
+                points={points.map((point) => point.join(',')).join(' ')}
+                fill={fill}
+                stroke={stroke}
+                strokeDasharray="4 3"
+                strokeWidth={1}
+              />
+            );
+          })}
         </svg>
       )}
       <Trigger
@@ -105,18 +102,15 @@ const SafeHoverDemo = () => {
         popupStyle={popupStyle}
         onOpenChange={(nextOpen) => {
           if (!nextOpen) {
-            setSafeHoverPolygons([]);
+            setPolygons([]);
           }
         }}
         popup={
-          <div onMouseEnter={() => setSafeHoverPolygons([])}>
+          <div onMouseEnter={() => setPolygons([])}>
             <strong>Safe hover popup</strong>
             <div style={{ marginTop: 8 }}>
               Move through the gap to reach me.
             </div>
-            <button style={{ marginTop: 12 }} type="button">
-              Popup action
-            </button>
           </div>
         }
       >
@@ -126,10 +120,9 @@ const SafeHoverDemo = () => {
           onMouseLeave={updateSafeHoverPolygons}
           onPointerLeave={updateSafeHoverPolygons}
         >
-          Hover target
+          trigger
         </button>
       </Trigger>
-
       <div
         style={{
           width: 240,

src/util/safeHover.ts

@@ -7,7 +7,10 @@ export type SafeHoverRect = Pick<
 
 export type SafeHoverSide = 'top' | 'bottom' | 'left' | 'right';
 
-function isPointInPolygon(point: SafeHoverPoint, polygon: SafeHoverPoint[]) {
+export const isPointInPolygon = (
+  point: SafeHoverPoint,
+  polygon: SafeHoverPoint[],
+) => {
   const [x, y] = point;
   let isInside = false;
 
@@ -23,63 +26,57 @@ function isPointInPolygon(point: SafeHoverPoint, polygon: SafeHoverPoint[]) {
   }
 
   return isInside;
-}
+};
 
-function isPointInRect(point: SafeHoverPoint, rect: SafeHoverRect) {
+export const isPointInRect = (point: SafeHoverPoint, rect: SafeHoverRect) => {
   return (
     point[0] >= rect.left &&
     point[0] <= rect.right &&
     point[1] >= rect.top &&
     point[1] <= rect.bottom
   );
-}
+};
 
-export function getSafeHoverSide(
+export const getSafeHoverSide = (
   targetRect: SafeHoverRect,
   popupRect: SafeHoverRect,
-): SafeHoverSide | null {
+): SafeHoverSide | null => {
   const gaps: { side: SafeHoverSide; value: number }[] = [
     { side: 'top', value: targetRect.top - popupRect.bottom },
     { side: 'bottom', value: popupRect.top - targetRect.bottom },
     { side: 'left', value: targetRect.left - popupRect.right },
     { side: 'right', value: popupRect.left - targetRect.right },
   ];
-
   const largestGap = gaps.reduce((prev, next) =>
     next.value > prev.value ? next : prev,
   );
-
   return largestGap.value > 0 ? largestGap.side : null;
-}
+};
 
-function isLeavePointTowardsPopup(
+const isLeavePointTowardsPopup = (
   side: SafeHoverSide,
   leavePoint: SafeHoverPoint,
   targetRect: SafeHoverRect,
-) {
+) => {
   const [x, y] = leavePoint;
-
   switch (side) {
     case 'top':
       return y <= targetRect.top + 1;
-
     case 'bottom':
       return y >= targetRect.bottom - 1;
-
     case 'left':
       return x <= targetRect.left + 1;
-
     case 'right':
       return x >= targetRect.right - 1;
   }
-}
+};
 
-function getSafeHoverGapPolygon(
+const getSafeHoverGapPolygon = (
   side: SafeHoverSide,
   targetRect: SafeHoverRect,
   popupRect: SafeHoverRect,
   buffer: number,
-): SafeHoverPoint[] {
+): SafeHoverPoint[] => {
   const verticalRect =
     popupRect.width > targetRect.width ? targetRect : popupRect;
   const horizontalRect =
@@ -88,7 +85,6 @@ function getSafeHoverGapPolygon(
   const right = verticalRect.right + buffer;
   const top = horizontalRect.top - buffer;
   const bottom = horizontalRect.bottom + buffer;
-
   switch (side) {
     case 'top':
       return [
@@ -97,23 +93,20 @@ function getSafeHoverGapPolygon(
         [right, targetRect.top + 1],
         [right, popupRect.bottom - 1],
       ];
-
     case 'bottom':
       return [
         [left, targetRect.bottom - 1],
         [left, popupRect.top + 1],
         [right, popupRect.top + 1],
         [right, targetRect.bottom - 1],
       ];
-
     case 'left':
       return [
         [popupRect.right - 1, top],
         [popupRect.right - 1, bottom],
         [targetRect.left + 1, bottom],
         [targetRect.left + 1, top],
       ];
-
     case 'right':
       return [
         [targetRect.right - 1, top],
@@ -122,70 +115,66 @@ function getSafeHoverGapPolygon(
         [popupRect.left + 1, top],
       ];
   }
-}
+};
 
-function getSafeHoverIntentPolygon(
+const getSafeHoverIntentPolygon = (
   side: SafeHoverSide,
   leavePoint: SafeHoverPoint,
   popupRect: SafeHoverRect,
   buffer: number,
-): SafeHoverPoint[] {
+): SafeHoverPoint[] => {
   switch (side) {
     case 'top':
       return [
         leavePoint,
         [popupRect.left - buffer, popupRect.bottom + buffer],
         [popupRect.right + buffer, popupRect.bottom + buffer],
       ];
-
     case 'bottom':
       return [
         leavePoint,
         [popupRect.right + buffer, popupRect.top - buffer],
         [popupRect.left - buffer, popupRect.top - buffer],
       ];
-
     case 'left':
       return [
         leavePoint,
         [popupRect.right + buffer, popupRect.bottom + buffer],
         [popupRect.right + buffer, popupRect.top - buffer],
       ];
-
     case 'right':
       return [
         leavePoint,
         [popupRect.left - buffer, popupRect.top - buffer],
         [popupRect.left - buffer, popupRect.bottom + buffer],
       ];
   }
-}
+};
 
-export function getSafeHoverAreaPolygons(
+export const getSafeHoverAreaPolygons = (
   leavePoint: SafeHoverPoint,
   targetRect: SafeHoverRect,
   popupRect: SafeHoverRect,
   buffer = 0.5,
-) {
+) => {
   const side = getSafeHoverSide(targetRect, popupRect);
 
   if (!side || !isLeavePointTowardsPopup(side, leavePoint, targetRect)) {
     return [];
   }
-
   return [
     getSafeHoverGapPolygon(side, targetRect, popupRect, buffer),
     getSafeHoverIntentPolygon(side, leavePoint, popupRect, buffer),
   ];
-}
+};
 
-export function isPointInSafeHoverArea(
+export const isPointInSafeHoverArea = (
   point: SafeHoverPoint,
   leavePoint: SafeHoverPoint,
   targetRect: SafeHoverRect,
   popupRect: SafeHoverRect,
   buffer = 0.5,
-) {
+) => {
   const safeHoverPolygons = getSafeHoverAreaPolygons(
     leavePoint,
     targetRect,
@@ -204,4 +193,4 @@ export function isPointInSafeHoverArea(
   // The gap polygon keeps the straight corridor open; the intent polygon
   // catches diagonal movement toward the popup edge.
   return safeHoverPolygons.some((polygon) => isPointInPolygon(point, polygon));
-}
+};

typings.d.ts

@@ -0,0 +1 @@
+declare module '*.less';