feat: arrow config support style (#573)

Author: zombieJ

src/Popup/Arrow.tsx

@@ -12,7 +12,7 @@ export interface ArrowProps {
 export default function Arrow(props: ArrowProps) {
   const { prefixCls, align, arrow, arrowPos } = props;
 
-  const { className, content } = arrow || {};
+  const { className, content, style } = arrow || {};
   const { x = 0, y = 0 } = arrowPos;
 
   const arrowRef = React.useRef<HTMLDivElement>(null);
@@ -58,7 +58,7 @@ export default function Arrow(props: ArrowProps) {
     <div
       ref={arrowRef}
       className={classNames(`${prefixCls}-arrow`, className)}
-      style={alignStyle}
+      style={{ ...alignStyle, ...style }}
     >
       {content}
     </div>

src/interface.ts

@@ -89,6 +89,7 @@ export interface AlignType {
 }
 
 export interface ArrowTypeOuter {
+  style?: React.CSSProperties;
   className?: string;
   content?: React.ReactNode;
 }

tests/arrow.test.jsx

@@ -188,6 +188,66 @@ describe('Trigger.Arrow', () => {
       const arrowDom = document.querySelector('.rc-trigger-popup-arrow');
       expect(arrowDom.classList.contains('abc')).toBeTruthy();
     });
+
+    it('arrow style', async () => {
+      render(
+        <Trigger
+          popupVisible
+          popupAlign={{
+            points: ['cl', 'cr'],
+            autoArrow: false,
+          }}
+          popup={<strong>trigger</strong>}
+          arrow={{
+            style: {
+              color: 'red',
+              backgroundColor: 'blue',
+            },
+          }}
+        >
+          <div />
+        </Trigger>,
+      );
+
+      await awaitFakeTimer();
+
+      const arrowDom = document.querySelector('.rc-trigger-popup-arrow');
+      expect(arrowDom).toHaveStyle({
+        color: 'red',
+        backgroundColor: 'blue',
+      });
+    });
+
+    it('arrow style should merge with align style', async () => {
+      render(
+        <Trigger
+          popupVisible
+          popupAlign={{
+            points: ['cl', 'cr'],
+            autoArrow: true,
+          }}
+          popup={<strong>trigger</strong>}
+          arrow={{
+            style: {
+              color: 'red',
+              backgroundColor: 'blue',
+            },
+          }}
+        >
+          <div />
+        </Trigger>,
+      );
+
+      await awaitFakeTimer();
+
+      const arrowDom = document.querySelector('.rc-trigger-popup-arrow');
+      // Should have both align style (left: 0) and custom style
+      expect(arrowDom).toHaveStyle({
+        left: 0,
+        color: 'red',
+        backgroundColor: 'blue',
+      });
+    });
   });
 
   it('content', async () => {