feat: add arrow css var (#379)

* feat: add arrow css var

* chore: clean up

* chore: fix arrow

* feat: support content

* test: add test case

Author: zombieJ

assets/index.less

@@ -41,35 +41,35 @@
   }
 
   &-arrow {
+    z-index: 1;
     width: 0px;
     height: 0px;
     background: #000;
     border-radius: 100vw;
     box-shadow: 0 0 0 3px black;
-    z-index: 1;
   }
 
   @keyframes rcTriggerZoomIn {
     0% {
       transform: scale(0, 0);
-      transform-origin: 50% 50%;
+      transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
       opacity: 0;
     }
     100% {
       transform: scale(1, 1);
-      transform-origin: 50% 50%;
+      transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
       opacity: 1;
     }
   }
   @keyframes rcTriggerZoomOut {
     0% {
       transform: scale(1, 1);
-      transform-origin: 50% 50%;
+      transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
       opacity: 1;
     }
     100% {
       transform: scale(0, 0);
-      transform-origin: 50% 50%;
+      transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
       opacity: 0;
     }
   }

docs/examples/container.tsx

@@ -55,7 +55,7 @@ const builtinPlacements = {
   },
 };
 
-const popupPlacement = 'right';
+const popupPlacement = 'top';
 
 export default () => {
   console.log('Demo Render!');
@@ -136,7 +136,7 @@ export default () => {
             }}
           >
             <Trigger
-              arrow
+              arrow={{ content: 'Arrow' }}
               // forceRender
               action="click"
               popup={
@@ -152,12 +152,16 @@ export default () => {
                   Popup
                 </div>
               }
+              popupTransitionName="rc-trigger-popup-zoom"
               popupStyle={{ boxShadow: '0 0 5px red' }}
               // popupVisible
               // getPopupContainer={() => popHolderRef.current}
               popupPlacement={popupPlacement}
               builtinPlacements={builtinPlacements}
               stretch="minWidth"
+              onPopupAlign={(domNode, align) => {
+                console.log('onPopupAlign:', domNode, align);
+              }}
             >
               <span
                 style={{

src/Popup/Arrow.tsx

@@ -1,17 +1,19 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import type { AlignType, ArrowType } from '../interface';
+import * as React from 'react';
+import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
 
 export interface ArrowProps {
   prefixCls: string;
   align: AlignType;
-  arrow: ArrowType;
+  arrow: ArrowTypeOuter;
+  arrowPos: ArrowPos;
 }
 
 export default function Arrow(props: ArrowProps) {
-  const { prefixCls, align, arrow } = props;
+  const { prefixCls, align, arrow, arrowPos } = props;
 
-  const { x = 0, y = 0, className } = arrow || {};
+  const { className, content } = arrow || {};
+  const { x = 0, y = 0 } = arrowPos;
 
   const arrowRef = React.useRef<HTMLDivElement>();
 
@@ -53,6 +55,12 @@ export default function Arrow(props: ArrowProps) {
   }
 
   return (
-    <div ref={arrowRef} className={classNames(`${prefixCls}-arrow`, className)} style={alignStyle} />
+    <div
+      ref={arrowRef}
+      className={classNames(`${prefixCls}-arrow`, className)}
+      style={alignStyle}
+    >
+      {content}
+    </div>
   );
 }

src/Popup/index.tsx

@@ -6,7 +6,7 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import { composeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
 import type { TriggerProps } from '../';
-import type { AlignType, ArrowType } from '../interface';
+import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
 import Arrow from './Arrow';
 import Mask from './Mask';
 import PopupContent from './PopupContent';
@@ -26,7 +26,8 @@ export interface PopupProps {
 
   // Arrow
   align?: AlignType;
-  arrow?: ArrowType;
+  arrow?: ArrowTypeOuter;
+  arrowPos: ArrowPos;
 
   // Open
   open: boolean;
@@ -81,6 +82,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
 
     // Arrow
     arrow,
+    arrowPos,
     align,
 
     // Motion
@@ -206,14 +208,18 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
                   <div
                     ref={composeRef(resizeObserverRef, ref, motionRef)}
                     className={cls}
-                    style={{
-                      ...offsetStyle,
-                      ...miscStyle,
-                      ...motionStyle,
-                      boxSizing: 'border-box',
-                      zIndex,
-                      ...style,
-                    }}
+                    style={
+                      {
+                        '--arrow-x': `${arrowPos.x || 0}px`,
+                        '--arrow-y': `${arrowPos.y || 0}px`,
+                        ...offsetStyle,
+                        ...miscStyle,
+                        ...motionStyle,
+                        boxSizing: 'border-box',
+                        zIndex,
+                        ...style,
+                      } as React.CSSProperties
+                    }
                     onMouseEnter={onMouseEnter}
                     onMouseLeave={onMouseLeave}
                     onClick={onClick}
@@ -222,6 +228,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
                       <Arrow
                         prefixCls={prefixCls}
                         arrow={arrow}
+                        arrowPos={arrowPos}
                         align={align}
                       />
                     )}

src/index.tsx

@@ -18,7 +18,7 @@ import type {
   ActionType,
   AlignType,
   AnimationType,
-  ArrowType,
+  ArrowPos,
   ArrowTypeOuter,
   BuildInPlacements,
   TransitionNameType,
@@ -650,12 +650,15 @@ export function generateTrigger(
       ...passedProps,
     });
 
-    const innerArrow: ArrowType = arrow
+    const arrowPos: ArrowPos = {
+      x: arrowX,
+      y: arrowY,
+    };
+
+    const innerArrow: ArrowTypeOuter = arrow
       ? {
           // true and Object likely
           ...(arrow !== true ? arrow : {}),
-          x: arrowX,
-          y: arrowY,
         }
       : null;
 
@@ -702,6 +705,7 @@ export function generateTrigger(
             // Arrow
             align={alignInfo}
             arrow={innerArrow}
+            arrowPos={arrowPos}
             // Align
             ready={ready}
             offsetX={offsetX}

src/interface.ts

@@ -74,12 +74,13 @@ export interface AlignType {
 
 export interface ArrowTypeOuter {
   className?: string;
+  content?: React.ReactNode;
 }
 
-export type ArrowType = ArrowTypeOuter & {
+export type ArrowPos = {
   x?: number;
   y?: number;
-}
+};
 
 export type BuildInPlacements = Record<string, AlignType>;
 
@@ -106,4 +107,4 @@ export interface MobileConfig {
   popupClassName?: string;
   popupStyle?: React.CSSProperties;
   popupRender?: (originNode: React.ReactNode) => React.ReactNode;
-}
+}

tests/arrow.test.jsx

@@ -187,4 +187,26 @@ describe('Trigger.Arrow', () => {
       expect(arrowDom.classList.contains('abc')).toBeTruthy();
     });
   });
+
+  it('content', async () => {
+    render(
+      <Trigger
+        popupVisible
+        popupAlign={{
+          points: ['cl', 'cr'],
+          autoArrow: false,
+        }}
+        popup={<strong>trigger</strong>}
+        arrow={{
+          content: <span className="my-content" />,
+        }}
+      >
+        <div />
+      </Trigger>,
+    );
+
+    await awaitFakeTimer();
+
+    expect(document.querySelector('.my-content')).toBeTruthy();
+  });
 });