refactor: Use @rc-component/trigger (#438)

* refactor: replace with @rc-trigger

* chore: update deps

* chore: update deps

* chore: clean up

* chore: update deps

* test: Update test

Author: zombieJ

.fatherrc.js

@@ -1,9 +1,5 @@
-export default {
-  cjs: 'babel',
-  esm: { type: 'babel', importLibToEs: true },
-  preCommit: {
-    eslint: true,
-    prettier: true,
-  },
-  runtimeHelpers: true,
-};
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  plugins: ['@rc-component/father-plugin'],
+});

assets/bootstrap_white.less

@@ -69,7 +69,8 @@
   &-placement-top &-arrow,
   &-placement-topLeft &-arrow,
   &-placement-topRight &-arrow{
-    bottom: -@tooltip-arrow-width + @tooltip-shadow-width;
+    // bottom: -@tooltip-arrow-width + @tooltip-shadow-width;
+    transform: translate(-50%, @tooltip-arrow-width - @tooltip-shadow-width);
     margin-left: -@tooltip-arrow-width;
     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
     border-top-color: @tooltip-arrow-color;
@@ -161,7 +162,8 @@
   &-placement-bottom &-arrow,
   &-placement-bottomLeft &-arrow,
   &-placement-bottomRight &-arrow {
-    top: -@tooltip-arrow-width + @tooltip-shadow-width;;
+    // top: -@tooltip-arrow-width + @tooltip-shadow-width;;
+    transform: translate(-50%, -@tooltip-arrow-width + @tooltip-shadow-width);
     margin-left: -@tooltip-arrow-width;
     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
     border-bottom-color: @tooltip-arrow-color;

docs/demo/point.md

@@ -0,0 +1,8 @@
+---
+title: Point
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/point.tsx"></code>

docs/examples/point.tsx

@@ -0,0 +1,56 @@
+import Tooltip from 'rc-tooltip';
+import React from 'react';
+import '../../assets/bootstrap_white.less';
+
+const text = <span>Tooltip Text</span>;
+
+const Test = () => {
+  const scrollRef = React.useRef<HTMLDivElement>();
+
+  return (
+    <div style={{ padding: 10 }}>
+      <div
+        ref={scrollRef}
+        style={{
+          border: '1px solid black',
+          width: '100%',
+          height: 'calc(100vh - 40px)',
+          boxSizing: 'border-box',
+          overflow: 'auto',
+        }}
+      >
+        <div
+          style={{
+            background: 'rgba(255,0,0,0.05)',
+            width: '300%',
+            height: '200%',
+            position: 'relative',
+          }}
+        >
+          <Tooltip
+            placement="top"
+            overlay={text}
+            overlayInnerStyle={{ width: 300, height: 50 }}
+            popupVisible
+            arrowContent={<div className="rc-tooltip-arrow-inner" />}
+          >
+            <div
+              style={{
+                background: 'rgba(0,255,0,0.3)',
+                width: 100,
+                height: 50,
+                position: 'absolute',
+                left: '30%',
+                top: '30%',
+              }}
+            >
+              Hover Me
+            </div>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Test;

package.json

@@ -17,32 +17,35 @@
     "url": "git@github.com:react-component/tooltip.git"
   },
   "license": "MIT",
+  "maintainers": [
+    "yiminghe@gmail.com"
+  ],
+  "main": "lib/index",
+  "module": "es/index",
   "files": [
     "dist",
     "lib",
     "es",
     "assets/*.css",
     "assets/*.less"
   ],
-  "main": "lib/index",
-  "module": "es/index",
   "scripts": {
-    "start": "dumi dev",
+    "compile": "father build && lessc assets/bootstrap.less assets/bootstrap.css && lessc assets/bootstrap_white.less assets/bootstrap_white.css",
     "docs:build": "dumi build",
     "docs:deploy": "gh-pages -d .doc",
-    "compile": "father build && lessc assets/bootstrap.less assets/bootstrap.css && lessc assets/bootstrap_white.less assets/bootstrap_white.css",
-    "coverage": "father test --coverage",
     "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
     "now-build": "npm run build",
     "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
-    "test": "father test"
+    "start": "dumi dev",
+    "test": "rc-test"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
-    "classnames": "^2.3.1",
-    "rc-trigger": "^5.3.1"
+    "@rc-component/trigger": "^1.0.4",
+    "classnames": "^2.3.1"
   },
   "devDependencies": {
+    "@rc-component/father-plugin": "^1.0.0",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^26.0.0",
     "@types/react": "^18.0.26",
@@ -51,18 +54,15 @@
     "cross-env": "^7.0.0",
     "dumi": "^2.1.1",
     "eslint": "^7.1.0",
-    "father": "^2.23.1",
-    "father-build": "^1.18.6",
+    "father": "^4.0.0",
     "gh-pages": "^3.1.0",
     "less": "^3.11.1",
     "np": "^7.1.0",
+    "rc-test": "^7.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.0.5"
   },
-  "maintainers": [
-    "yiminghe@gmail.com"
-  ],
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"

src/Popup.tsx

@@ -1,36 +1,20 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 
 export interface ContentProps {
   prefixCls?: string;
   children: (() => React.ReactNode) | React.ReactNode;
   id?: string;
   overlayInnerStyle?: React.CSSProperties;
-  arrowContent?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
-  showArrow?: boolean;
 }
 
 export default function Popup(props: ContentProps) {
-  const {
-    showArrow,
-    arrowContent,
-    children,
-    prefixCls,
-    id,
-    overlayInnerStyle,
-    className,
-    style,
-  } = props;
+  const { children, prefixCls, id, overlayInnerStyle, className, style } = props;
 
   return (
     <div className={classNames(`${prefixCls}-content`, className)} style={style}>
-      {showArrow !== false && (
-        <div className={`${prefixCls}-arrow`} key="arrow">
-          {arrowContent}
-        </div>
-      )}
       <div className={`${prefixCls}-inner`} id={id} role="tooltip" style={overlayInnerStyle}>
         {typeof children === 'function' ? children() : children}
       </div>

src/Tooltip.tsx

@@ -1,8 +1,8 @@
+import type { TriggerProps } 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';
-import { useRef, useImperativeHandle, forwardRef } from 'react';
-import Trigger from 'rc-trigger';
-import type { TriggerProps } from 'rc-trigger';
-import type { AlignType, AnimationType, ActionType } from 'rc-trigger/lib/interface';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { placements } from './placements';
 import Popup from './Popup';
 
@@ -26,11 +26,7 @@ export interface TooltipProps extends Pick<TriggerProps, 'onPopupAlign' | 'built
   mouseEnterDelay?: number;
   mouseLeaveDelay?: number;
   getTooltipContainer?: (node: HTMLElement) => HTMLElement;
-  destroyTooltipOnHide?:
-    | boolean
-    | {
-        keepParent?: boolean;
-      };
+  destroyTooltipOnHide?: boolean;
   align?: AlignType;
   showArrow?: boolean;
   arrowContent?: React.ReactNode;
@@ -77,28 +73,11 @@ const Tooltip = (props: TooltipProps, ref) => {
   }
 
   const getPopupElement = () => (
-    <Popup
-      showArrow={showArrow}
-      arrowContent={arrowContent}
-      key="content"
-      prefixCls={prefixCls}
-      id={id}
-      overlayInnerStyle={overlayInnerStyle}
-    >
+    <Popup key="content" prefixCls={prefixCls} id={id} overlayInnerStyle={overlayInnerStyle}>
       {overlay}
     </Popup>
   );
 
-  let destroyTooltip = false;
-  let autoDestroy = false;
-  if (typeof destroyTooltipOnHide === 'boolean') {
-    destroyTooltip = destroyTooltipOnHide;
-  } else if (destroyTooltipOnHide && typeof destroyTooltipOnHide === 'object') {
-    const { keepParent } = destroyTooltipOnHide;
-    destroyTooltip = keepParent === true;
-    autoDestroy = keepParent === false;
-  }
-
   return (
     <Trigger
       popupClassName={overlayClassName}
@@ -116,11 +95,11 @@ const Tooltip = (props: TooltipProps, ref) => {
       popupAnimation={animation}
       popupMotion={motion}
       defaultPopupVisible={defaultVisible}
-      destroyPopupOnHide={destroyTooltip}
-      autoDestroy={autoDestroy}
+      autoDestroy={destroyTooltipOnHide}
       mouseLeaveDelay={mouseLeaveDelay}
       popupStyle={overlayStyle}
       mouseEnterDelay={mouseEnterDelay}
+      arrow={showArrow}
       {...extraProps}
     >
       {children}

src/placements.tsx

@@ -1,82 +1,84 @@
-import { BuildInPlacements } from 'rc-trigger';
+import type { BuildInPlacements } from '@rc-component/trigger';
 
-const autoAdjustOverflow = {
-  adjustX: 1,
+const autoAdjustOverflowTopBottom = {
+  shiftX: 64,
   adjustY: 1,
 };
 
+const autoAdjustOverflowLeftRight = { adjustX: 1, shiftY: true };
+
 const targetOffset = [0, 0];
 
 export const placements: BuildInPlacements = {
   left: {
     points: ['cr', 'cl'],
-    overflow: autoAdjustOverflow,
+    overflow: autoAdjustOverflowLeftRight,
     offset: [-4, 0],
     targetOffset,
   },
   right: {
     points: ['cl', 'cr'],
-    overflow: autoAdjustOverflow,
+    overflow: autoAdjustOverflowLeftRight,
     offset: [4, 0],
     targetOffset,
   },
   top: {
     points: ['bc', 'tc'],
-    overflow: autoAdjustOverflow,
+    overflow: autoAdjustOverflowTopBottom,
     offset: [0, -4],
     targetOffset,
   },
   bottom: {
     points: ['tc', 'bc'],
-    overflow: autoAdjustOverflow,
+    overflow: autoAdjustOverflowTopBottom,
     offset: [0, 4],
     targetOffset,
   },
   topLeft: {
     points: ['bl', 'tl'],
-    overflow: autoAdjustOverflow,
+    overflow: autoAdjustOverflowTopBottom,
     offset: [0, -4],
     targetOffset,
   },
   leftTop: {
     points: ['tr', 'tl'],
-    overflow: autoAdjustOverflow,
+    overflow: autoAdjustOverflowLeftRight,
     offset: [-4, 0],
     targetOffset,
   },
   topRight: {
     points: ['br', 'tr'],
-    overflow: autoAdjustOverflow,
+    overflow: autoAdjustOverflowTopBottom,
     offset: [0, -4],
     targetOffset,
   },
   rightTop: {
     points: ['tl', 'tr'],
-    overflow: autoAdjustOverflow,
+    overflow: autoAdjustOverflowLeftRight,
     offset: [4, 0],
     targetOffset,
   },
   bottomRight: {
     points: ['tr', 'br'],
-    overflow: autoAdjustOverflow,
+    overflow: autoAdjustOverflowTopBottom,
     offset: [0, 4],
     targetOffset,
   },
   rightBottom: {
     points: ['bl', 'br'],
-    overflow: autoAdjustOverflow,
+    overflow: autoAdjustOverflowLeftRight,
     offset: [4, 0],
     targetOffset,
   },
   bottomLeft: {
     points: ['tl', 'bl'],
-    overflow: autoAdjustOverflow,
+    overflow: autoAdjustOverflowTopBottom,
     offset: [0, 4],
     targetOffset,
   },
   leftBottom: {
     points: ['br', 'bl'],
-    overflow: autoAdjustOverflow,
+    overflow: autoAdjustOverflowLeftRight,
     offset: [-4, 0],
     targetOffset,
   },

tests/__mocks__/@rc-component/trigger.js

@@ -0,0 +1,3 @@
+import Trigger from '@rc-component/trigger/lib/mock';
+
+export default Trigger;