feat: arrow support className (#449)

* feat: arrow support className

* chore: clear

Author: yoyo837

README.md

@@ -170,7 +170,7 @@ Online examples: <https://react-component.github.io/tooltip/examples/>
         </tr>
         <tr>
           <td>showArrow</td>
-          <td>boolean</td>
+          <td>boolean | { className?: string }</td>
           <td>true</td>
           <td>arrow visible</td>
         </tr>

package.json

@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
-    "@rc-component/trigger": "^1.0.4",
+    "@rc-component/trigger": "^1.10.0",
     "classnames": "^2.3.1"
   },
   "devDependencies": {

src/Tooltip.tsx

@@ -1,4 +1,4 @@
-import type { TriggerProps, TriggerRef } from '@rc-component/trigger';
+import type { TriggerProps, TriggerRef, ArrowType } from '@rc-component/trigger';
 import Trigger from '@rc-component/trigger';
 import type { ActionType, AlignType, AnimationType } from '@rc-component/trigger/lib/interface';
 import * as React from 'react';
@@ -28,7 +28,7 @@ export interface TooltipProps extends Pick<TriggerProps, 'onPopupAlign' | 'built
   getTooltipContainer?: (node: HTMLElement) => HTMLElement;
   destroyTooltipOnHide?: boolean;
   align?: AlignType;
-  showArrow?: boolean;
+  showArrow?: boolean | ArrowType;
   arrowContent?: React.ReactNode;
   id?: string;
   children?: React.ReactElement;

tests/index.test.tsx

@@ -178,9 +178,26 @@ describe('rc-tooltip', () => {
         </Tooltip>,
       );
       fireEvent.click(container.querySelector('.target'));
-      console.log(container.innerHTML);
       expect(container.querySelector('.rc-tooltip-arrow')).toBeTruthy();
     });
+    it('should show tooltip arrow when showArrow is object', () => {
+      const { container } = render(
+        <Tooltip
+          destroyTooltipOnHide
+          trigger={['click']}
+          placement="left"
+          overlay={<strong className="x-content">Tooltip content</strong>}
+          showArrow={{
+            className: 'abc'
+          }}
+        >
+          <div className="target">Click this</div>
+        </Tooltip>,
+      );
+      fireEvent.click(container.querySelector('.target'));
+      expect(container.querySelector('.rc-tooltip-arrow')).toBeTruthy();
+      expect(container.querySelector('.rc-tooltip-arrow').classList.contains('abc')).toBeTruthy();
+    });
     it('should hide tooltip arrow when showArrow is false', () => {
       const { container } = render(
         <Tooltip