Skip to content

Commit 2270ac6

Browse files
zombieJzombieJ
authored
refactor: Popup component (#352)
* refactor: Popup component * chore: fix render * test: coverage
1 parent eb22b7b commit 2270ac6

File tree

5 files changed

+150
-105
lines changed

5 files changed

+150
-105
lines changed

‎docs/examples/placement.tsx

+81-67
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react';
22
import Tooltip from 'rc-tooltip';
33
import '../../assets/bootstrap.less';
4+
import Popup from '../../src/Popup';
45

56
const text = <span>Tooltip Text</span>;
6-
const styles = {
7+
const styles: React.CSSProperties = {
78
display: 'table-cell',
89
height: '60px',
910
width: '80px',
@@ -18,74 +19,87 @@ const rowStyle = {
1819
};
1920

2021
const Test = () => (
21-
<div style={{ display: 'table', padding: 120 }}>
22-
<div style={rowStyle}>
23-
<Tooltip placement="left" overlay={text}>
24-
<a href="#" style={styles}>
25-
Left
26-
</a>
27-
</Tooltip>
28-
<Tooltip placement="top" overlay={text}>
29-
<a href="#" style={styles}>
30-
Top
31-
</a>
32-
</Tooltip>
33-
<Tooltip placement="bottom" overlay={text}>
34-
<a href="#" style={styles}>
35-
Bottom
36-
</a>
37-
</Tooltip>
38-
<Tooltip placement="right" overlay={text}>
39-
<a href="#" style={styles}>
40-
Right
41-
</a>
42-
</Tooltip>
22+
<>
23+
<div style={{ display: 'table', padding: 120 }}>
24+
<div style={rowStyle}>
25+
<Tooltip placement="left" overlay={text}>
26+
<a href="#" style={styles}>
27+
Left
28+
</a>
29+
</Tooltip>
30+
<Tooltip placement="top" overlay={text}>
31+
<a href="#" style={styles}>
32+
Top
33+
</a>
34+
</Tooltip>
35+
<Tooltip placement="bottom" overlay={text}>
36+
<a href="#" style={styles}>
37+
Bottom
38+
</a>
39+
</Tooltip>
40+
<Tooltip placement="right" overlay={text}>
41+
<a href="#" style={styles}>
42+
Right
43+
</a>
44+
</Tooltip>
45+
</div>
46+
<div style={rowStyle}>
47+
<Tooltip placement="leftTop" overlay={text}>
48+
<a href="#" style={styles}>
49+
Left Top
50+
</a>
51+
</Tooltip>
52+
<Tooltip placement="leftBottom" overlay={text}>
53+
<a href="#" style={styles}>
54+
Left Bottom
55+
</a>
56+
</Tooltip>
57+
<Tooltip placement="rightTop" overlay={text}>
58+
<a href="#" style={styles}>
59+
Right Top
60+
</a>
61+
</Tooltip>
62+
<Tooltip placement="rightBottom" overlay={text}>
63+
<a href="#" style={styles}>
64+
Right Bottom
65+
</a>
66+
</Tooltip>
67+
</div>
68+
<div style={rowStyle}>
69+
<Tooltip placement="topLeft" overlay={text}>
70+
<a href="#" style={styles}>
71+
Top Left
72+
</a>
73+
</Tooltip>
74+
<Tooltip placement="topRight" overlay={text}>
75+
<a href="#" style={styles}>
76+
Top Right
77+
</a>
78+
</Tooltip>
79+
<Tooltip placement="bottomLeft" overlay={text}>
80+
<a href="#" style={styles}>
81+
Bottom Left
82+
</a>
83+
</Tooltip>
84+
<Tooltip placement="bottomRight" overlay={text}>
85+
<a href="#" style={styles}>
86+
Bottom Right
87+
</a>
88+
</Tooltip>
89+
</div>
4390
</div>
44-
<div style={rowStyle}>
45-
<Tooltip placement="leftTop" overlay={text}>
46-
<a href="#" style={styles}>
47-
Left Top
48-
</a>
49-
</Tooltip>
50-
<Tooltip placement="leftBottom" overlay={text}>
51-
<a href="#" style={styles}>
52-
Left Bottom
53-
</a>
54-
</Tooltip>
55-
<Tooltip placement="rightTop" overlay={text}>
56-
<a href="#" style={styles}>
57-
Right Top
58-
</a>
59-
</Tooltip>
60-
<Tooltip placement="rightBottom" overlay={text}>
61-
<a href="#" style={styles}>
62-
Right Bottom
63-
</a>
64-
</Tooltip>
91+
<hr />
92+
<div>
93+
<h5>Debug Usage</h5>
94+
<Popup
95+
prefixCls="rc-tooltip"
96+
className="rc-tooltip-placement-top"
97+
style={{ display: 'inline-block', position: 'relative' }}
98+
>
99+
Test
100+
</Popup>
65101
</div>
66-
<div style={rowStyle}>
67-
<Tooltip placement="topLeft" overlay={text}>
68-
<a href="#" style={styles}>
69-
Top Left
70-
</a>
71-
</Tooltip>
72-
<Tooltip placement="topRight" overlay={text}>
73-
<a href="#" style={styles}>
74-
Top Right
75-
</a>
76-
</Tooltip>
77-
<Tooltip placement="bottomLeft" overlay={text}>
78-
<a href="#" style={styles}>
79-
Bottom Left
80-
</a>
81-
</Tooltip>
82-
<Tooltip placement="bottomRight" overlay={text}>
83-
<a href="#" style={styles}>
84-
Bottom Right
85-
</a>
86-
</Tooltip>
87-
</div>
88-
</div>
102+
</>
89103
);
90104

91105
export default Test;

‎src/Content.tsx

-20
This file was deleted.

‎src/Popup.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
4+
export interface ContentProps {
5+
prefixCls?: string;
6+
children: (() => React.ReactNode) | React.ReactNode;
7+
id?: string;
8+
overlayInnerStyle?: React.CSSProperties;
9+
arrowContent?: React.ReactNode;
10+
className?: string;
11+
style?: React.CSSProperties;
12+
showArrow?: boolean;
13+
}
14+
15+
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;
26+
27+
return (
28+
<div className={classNames(`${prefixCls}-content`, className)} style={style}>
29+
{showArrow !== false && (
30+
<div className={`${prefixCls}-arrow`} key="arrow">
31+
{arrowContent}
32+
</div>
33+
)}
34+
<div className={`${prefixCls}-inner`} id={id} role="tooltip" style={overlayInnerStyle}>
35+
{typeof children === 'function' ? children() : children}
36+
</div>
37+
</div>
38+
);
39+
}

‎src/Tooltip.tsx

+17-18
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Trigger from 'rc-trigger';
44
import type { TriggerProps } from 'rc-trigger';
55
import type { AlignType, AnimationType, ActionType } from 'rc-trigger/lib/interface';
66
import { placements } from './placements';
7-
import Content from './Content';
7+
import Popup from './Popup';
88

99
export interface TooltipProps extends Pick<TriggerProps, 'onPopupAlign' | 'builtinPlacements'> {
1010
trigger?: ActionType | ActionType[];
@@ -61,6 +61,10 @@ const Tooltip = (props: TooltipProps, ref) => {
6161
defaultVisible,
6262
getTooltipContainer,
6363
overlayInnerStyle,
64+
arrowContent,
65+
overlay,
66+
id,
67+
showArrow,
6468
...restProps
6569
} = props;
6670

@@ -72,23 +76,18 @@ const Tooltip = (props: TooltipProps, ref) => {
7276
extraProps.popupVisible = props.visible;
7377
}
7478

75-
const getPopupElement = () => {
76-
const { showArrow = true, arrowContent = null, overlay, id } = props;
77-
return [
78-
showArrow && (
79-
<div className={`${prefixCls}-arrow`} key="arrow">
80-
{arrowContent}
81-
</div>
82-
),
83-
<Content
84-
key="content"
85-
prefixCls={prefixCls}
86-
id={id}
87-
overlay={overlay}
88-
overlayInnerStyle={overlayInnerStyle}
89-
/>,
90-
];
91-
};
79+
const getPopupElement = () => (
80+
<Popup
81+
showArrow={showArrow}
82+
arrowContent={arrowContent}
83+
key="content"
84+
prefixCls={prefixCls}
85+
id={id}
86+
overlayInnerStyle={overlayInnerStyle}
87+
>
88+
{overlay}
89+
</Popup>
90+
);
9291

9392
let destroyTooltip = false;
9493
let autoDestroy = false;

‎tests/index.test.js

+13
Original file line numberDiff line numberDiff line change
@@ -223,4 +223,17 @@ describe('rc-tooltip', () => {
223223
);
224224
});
225225
});
226+
227+
it('visible', () => {
228+
const wrapper = mount(
229+
<Tooltip overlay={<strong className="x-content">Tooltip content</strong>} visible={false}>
230+
<div />
231+
</Tooltip>,
232+
);
233+
234+
expect(wrapper.exists('.x-content')).toBeFalsy();
235+
236+
wrapper.setProps({ visible: true });
237+
expect(wrapper.exists('.x-content')).toBeTruthy();
238+
});
226239
});

0 commit comments

Comments
 (0)