Skip to content

Commit fb9d8bd

Browse files
zombieJzombieJ
authored
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
1 parent 72554eb commit fb9d8bd

File tree

12 files changed

+148
-137
lines changed

12 files changed

+148
-137
lines changed

‎.fatherrc.js‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
export default {
2-
cjs: 'babel',
3-
esm: { type: 'babel', importLibToEs: true },
4-
preCommit: {
5-
eslint: true,
6-
prettier: true,
7-
},
8-
runtimeHelpers: true,
9-
};
1+
import { defineConfig } from 'father';
2+
3+
export default defineConfig({
4+
plugins: ['@rc-component/father-plugin'],
5+
});

‎assets/bootstrap_white.less‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@
6969
&-placement-top &-arrow,
7070
&-placement-topLeft &-arrow,
7171
&-placement-topRight &-arrow{
72-
bottom: -@tooltip-arrow-width + @tooltip-shadow-width;
72+
// bottom: -@tooltip-arrow-width + @tooltip-shadow-width;
73+
transform: translate(-50%, @tooltip-arrow-width - @tooltip-shadow-width);
7374
margin-left: -@tooltip-arrow-width;
7475
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
7576
border-top-color: @tooltip-arrow-color;
@@ -161,7 +162,8 @@
161162
&-placement-bottom &-arrow,
162163
&-placement-bottomLeft &-arrow,
163164
&-placement-bottomRight &-arrow {
164-
top: -@tooltip-arrow-width + @tooltip-shadow-width;;
165+
// top: -@tooltip-arrow-width + @tooltip-shadow-width;;
166+
transform: translate(-50%, -@tooltip-arrow-width + @tooltip-shadow-width);
165167
margin-left: -@tooltip-arrow-width;
166168
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
167169
border-bottom-color: @tooltip-arrow-color;

‎docs/demo/point.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Point
3+
nav:
4+
title: Demo
5+
path: /demo
6+
---
7+
8+
<code src="../examples/point.tsx"></code>

‎docs/examples/point.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import Tooltip from 'rc-tooltip';
2+
import React from 'react';
3+
import '../../assets/bootstrap_white.less';
4+
5+
const text = <span>Tooltip Text</span>;
6+
7+
const Test = () => {
8+
const scrollRef = React.useRef<HTMLDivElement>();
9+
10+
return (
11+
<div style={{ padding: 10 }}>
12+
<div
13+
ref={scrollRef}
14+
style={{
15+
border: '1px solid black',
16+
width: '100%',
17+
height: 'calc(100vh - 40px)',
18+
boxSizing: 'border-box',
19+
overflow: 'auto',
20+
}}
21+
>
22+
<div
23+
style={{
24+
background: 'rgba(255,0,0,0.05)',
25+
width: '300%',
26+
height: '200%',
27+
position: 'relative',
28+
}}
29+
>
30+
<Tooltip
31+
placement="top"
32+
overlay={text}
33+
overlayInnerStyle={{ width: 300, height: 50 }}
34+
popupVisible
35+
arrowContent={<div className="rc-tooltip-arrow-inner" />}
36+
>
37+
<div
38+
style={{
39+
background: 'rgba(0,255,0,0.3)',
40+
width: 100,
41+
height: 50,
42+
position: 'absolute',
43+
left: '30%',
44+
top: '30%',
45+
}}
46+
>
47+
Hover Me
48+
</div>
49+
</Tooltip>
50+
</div>
51+
</div>
52+
</div>
53+
);
54+
};
55+
56+
export default Test;

‎package.json‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,35 @@
1717
"url": "[email protected]:react-component/tooltip.git"
1818
},
1919
"license": "MIT",
20+
"maintainers": [
21+
"[email protected]"
22+
],
23+
"main": "lib/index",
24+
"module": "es/index",
2025
"files": [
2126
"dist",
2227
"lib",
2328
"es",
2429
"assets/*.css",
2530
"assets/*.less"
2631
],
27-
"main": "lib/index",
28-
"module": "es/index",
2932
"scripts": {
30-
"start": "dumi dev",
33+
"compile": "father build && lessc assets/bootstrap.less assets/bootstrap.css && lessc assets/bootstrap_white.less assets/bootstrap_white.css",
3134
"docs:build": "dumi build",
3235
"docs:deploy": "gh-pages -d .doc",
33-
"compile": "father build && lessc assets/bootstrap.less assets/bootstrap.css && lessc assets/bootstrap_white.less assets/bootstrap_white.css",
34-
"coverage": "father test --coverage",
3536
"lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
3637
"now-build": "npm run build",
3738
"prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
38-
"test": "father test"
39+
"start": "dumi dev",
40+
"test": "rc-test"
3941
},
4042
"dependencies": {
4143
"@babel/runtime": "^7.11.2",
42-
"classnames": "^2.3.1",
43-
"rc-trigger": "^5.3.1"
44+
"@rc-component/trigger": "^1.0.4",
45+
"classnames": "^2.3.1"
4446
},
4547
"devDependencies": {
48+
"@rc-component/father-plugin": "^1.0.0",
4649
"@testing-library/react": "^13.4.0",
4750
"@types/jest": "^26.0.0",
4851
"@types/react": "^18.0.26",
@@ -51,18 +54,15 @@
5154
"cross-env": "^7.0.0",
5255
"dumi": "^2.1.1",
5356
"eslint": "^7.1.0",
54-
"father": "^2.23.1",
55-
"father-build": "^1.18.6",
57+
"father": "^4.0.0",
5658
"gh-pages": "^3.1.0",
5759
"less": "^3.11.1",
5860
"np": "^7.1.0",
61+
"rc-test": "^7.0.9",
5962
"react": "^18.2.0",
6063
"react-dom": "^18.2.0",
6164
"typescript": "^4.0.5"
6265
},
63-
"maintainers": [
64-
"[email protected]"
65-
],
6666
"peerDependencies": {
6767
"react": ">=16.9.0",
6868
"react-dom": ">=16.9.0"

‎src/Popup.tsx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,20 @@
1-
import * as React from 'react';
21
import classNames from 'classnames';
2+
import * as React from 'react';
33

44
export interface ContentProps {
55
prefixCls?: string;
66
children: (() => React.ReactNode) | React.ReactNode;
77
id?: string;
88
overlayInnerStyle?: React.CSSProperties;
9-
arrowContent?: React.ReactNode;
109
className?: string;
1110
style?: React.CSSProperties;
12-
showArrow?: boolean;
1311
}
1412

1513
export default function Popup(props: ContentProps) {
16-
const {
17-
showArrow,
18-
arrowContent,
19-
children,
20-
prefixCls,
21-
id,
22-
overlayInnerStyle,
23-
className,
24-
style,
25-
} = props;
14+
const { children, prefixCls, id, overlayInnerStyle, className, style } = props;
2615

2716
return (
2817
<div className={classNames(`${prefixCls}-content`, className)} style={style}>
29-
{showArrow !== false && (
30-
<div className={`${prefixCls}-arrow`} key="arrow">
31-
{arrowContent}
32-
</div>
33-
)}
3418
<div className={`${prefixCls}-inner`} id={id} role="tooltip" style={overlayInnerStyle}>
3519
{typeof children === 'function' ? children() : children}
3620
</div>

‎src/Tooltip.tsx‎

Lines changed: 8 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
import type { TriggerProps } from '@rc-component/trigger';
2+
import Trigger from '@rc-component/trigger';
3+
import type { ActionType, AlignType, AnimationType } from '@rc-component/trigger/lib/interface';
14
import * as React from 'react';
2-
import { useRef, useImperativeHandle, forwardRef } from 'react';
3-
import Trigger from 'rc-trigger';
4-
import type { TriggerProps } from 'rc-trigger';
5-
import type { AlignType, AnimationType, ActionType } from 'rc-trigger/lib/interface';
5+
import { forwardRef, useImperativeHandle, useRef } from 'react';
66
import { placements } from './placements';
77
import Popup from './Popup';
88

@@ -26,11 +26,7 @@ export interface TooltipProps extends Pick<TriggerProps, 'onPopupAlign' | 'built
2626
mouseEnterDelay?: number;
2727
mouseLeaveDelay?: number;
2828
getTooltipContainer?: (node: HTMLElement) => HTMLElement;
29-
destroyTooltipOnHide?:
30-
| boolean
31-
| {
32-
keepParent?: boolean;
33-
};
29+
destroyTooltipOnHide?: boolean;
3430
align?: AlignType;
3531
showArrow?: boolean;
3632
arrowContent?: React.ReactNode;
@@ -77,28 +73,11 @@ const Tooltip = (props: TooltipProps, ref) => {
7773
}
7874

7975
const getPopupElement = () => (
80-
<Popup
81-
showArrow={showArrow}
82-
arrowContent={arrowContent}
83-
key="content"
84-
prefixCls={prefixCls}
85-
id={id}
86-
overlayInnerStyle={overlayInnerStyle}
87-
>
76+
<Popup key="content" prefixCls={prefixCls} id={id} overlayInnerStyle={overlayInnerStyle}>
8877
{overlay}
8978
</Popup>
9079
);
9180

92-
let destroyTooltip = false;
93-
let autoDestroy = false;
94-
if (typeof destroyTooltipOnHide === 'boolean') {
95-
destroyTooltip = destroyTooltipOnHide;
96-
} else if (destroyTooltipOnHide && typeof destroyTooltipOnHide === 'object') {
97-
const { keepParent } = destroyTooltipOnHide;
98-
destroyTooltip = keepParent === true;
99-
autoDestroy = keepParent === false;
100-
}
101-
10281
return (
10382
<Trigger
10483
popupClassName={overlayClassName}
@@ -116,11 +95,11 @@ const Tooltip = (props: TooltipProps, ref) => {
11695
popupAnimation={animation}
11796
popupMotion={motion}
11897
defaultPopupVisible={defaultVisible}
119-
destroyPopupOnHide={destroyTooltip}
120-
autoDestroy={autoDestroy}
98+
autoDestroy={destroyTooltipOnHide}
12199
mouseLeaveDelay={mouseLeaveDelay}
122100
popupStyle={overlayStyle}
123101
mouseEnterDelay={mouseEnterDelay}
102+
arrow={showArrow}
124103
{...extraProps}
125104
>
126105
{children}

‎src/placements.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,84 @@
1-
import { BuildInPlacements } from 'rc-trigger';
1+
import type { BuildInPlacements } from '@rc-component/trigger';
22

3-
const autoAdjustOverflow = {
4-
adjustX: 1,
3+
const autoAdjustOverflowTopBottom = {
4+
shiftX: 64,
55
adjustY: 1,
66
};
77

8+
const autoAdjustOverflowLeftRight = { adjustX: 1, shiftY: true };
9+
810
const targetOffset = [0, 0];
911

1012
export const placements: BuildInPlacements = {
1113
left: {
1214
points: ['cr', 'cl'],
13-
overflow: autoAdjustOverflow,
15+
overflow: autoAdjustOverflowLeftRight,
1416
offset: [-4, 0],
1517
targetOffset,
1618
},
1719
right: {
1820
points: ['cl', 'cr'],
19-
overflow: autoAdjustOverflow,
21+
overflow: autoAdjustOverflowLeftRight,
2022
offset: [4, 0],
2123
targetOffset,
2224
},
2325
top: {
2426
points: ['bc', 'tc'],
25-
overflow: autoAdjustOverflow,
27+
overflow: autoAdjustOverflowTopBottom,
2628
offset: [0, -4],
2729
targetOffset,
2830
},
2931
bottom: {
3032
points: ['tc', 'bc'],
31-
overflow: autoAdjustOverflow,
33+
overflow: autoAdjustOverflowTopBottom,
3234
offset: [0, 4],
3335
targetOffset,
3436
},
3537
topLeft: {
3638
points: ['bl', 'tl'],
37-
overflow: autoAdjustOverflow,
39+
overflow: autoAdjustOverflowTopBottom,
3840
offset: [0, -4],
3941
targetOffset,
4042
},
4143
leftTop: {
4244
points: ['tr', 'tl'],
43-
overflow: autoAdjustOverflow,
45+
overflow: autoAdjustOverflowLeftRight,
4446
offset: [-4, 0],
4547
targetOffset,
4648
},
4749
topRight: {
4850
points: ['br', 'tr'],
49-
overflow: autoAdjustOverflow,
51+
overflow: autoAdjustOverflowTopBottom,
5052
offset: [0, -4],
5153
targetOffset,
5254
},
5355
rightTop: {
5456
points: ['tl', 'tr'],
55-
overflow: autoAdjustOverflow,
57+
overflow: autoAdjustOverflowLeftRight,
5658
offset: [4, 0],
5759
targetOffset,
5860
},
5961
bottomRight: {
6062
points: ['tr', 'br'],
61-
overflow: autoAdjustOverflow,
63+
overflow: autoAdjustOverflowTopBottom,
6264
offset: [0, 4],
6365
targetOffset,
6466
},
6567
rightBottom: {
6668
points: ['bl', 'br'],
67-
overflow: autoAdjustOverflow,
69+
overflow: autoAdjustOverflowLeftRight,
6870
offset: [4, 0],
6971
targetOffset,
7072
},
7173
bottomLeft: {
7274
points: ['tl', 'bl'],
73-
overflow: autoAdjustOverflow,
75+
overflow: autoAdjustOverflowTopBottom,
7476
offset: [0, 4],
7577
targetOffset,
7678
},
7779
leftBottom: {
7880
points: ['br', 'bl'],
79-
overflow: autoAdjustOverflow,
81+
overflow: autoAdjustOverflowLeftRight,
8082
offset: [-4, 0],
8183
targetOffset,
8284
},

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Trigger from '@rc-component/trigger/lib/mock';
2+
3+
export default Trigger;

‎tests/__mocks__/rc-trigger.js‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)