Skip to content

Commit bef812a

Browse files
tinyminstinymins
committed
feat: add tooltop component
1 parent 3fb4ad5 commit bef812a

File tree

4 files changed

+388
-5
lines changed

4 files changed

+388
-5
lines changed

‎packages/drip-table/src/components/tooltip/index.module.less‎

Lines changed: 348 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,348 @@
1+
/**
2+
* This file is part of the drip-table project.
3+
* @link : https://drip-table.jd.com/
4+
* @author : Emil Zhai (root@derzh.com)
5+
* @modifier : Emil Zhai (root@derzh.com)
6+
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
7+
*/
8+
9+
@prefixCls: jfe-drip-table-tooltip;
10+
11+
.@{prefixCls} {
12+
box-sizing: border-box;
13+
margin: 0;
14+
padding: 0;
15+
color: #000000d9;
16+
font-size: 14px;
17+
font-variant: tabular-nums;
18+
line-height: 1.5715;
19+
list-style: none;
20+
font-feature-settings: "tnum", "tnum";
21+
position: absolute;
22+
top: 0;
23+
left: 0;
24+
z-index: 1030;
25+
font-weight: 400;
26+
white-space: normal;
27+
text-align: left;
28+
cursor: auto;
29+
user-select: text;
30+
}
31+
32+
.@{prefixCls}:after {
33+
position: absolute;
34+
background: #ffffff03;
35+
content: "";
36+
}
37+
38+
.@{prefixCls}-hidden {
39+
display: none;
40+
}
41+
42+
.@{prefixCls}-placement-top,.@{prefixCls}-placement-topLeft,.@{prefixCls}-placement-topRight {
43+
padding-bottom: 10px;
44+
}
45+
46+
.@{prefixCls}-placement-right,.@{prefixCls}-placement-rightBottom,.@{prefixCls}-placement-rightTop {
47+
padding-left: 10px;
48+
}
49+
50+
.@{prefixCls}-placement-bottom,.@{prefixCls}-placement-bottomLeft,.@{prefixCls}-placement-bottomRight {
51+
padding-top: 10px;
52+
}
53+
54+
.@{prefixCls}-placement-left,.@{prefixCls}-placement-leftBottom,.@{prefixCls}-placement-leftTop {
55+
padding-right: 10px;
56+
}
57+
58+
.@{prefixCls}-inner {
59+
background-color: #ffffff;
60+
background-clip: padding-box;
61+
border-radius: 2px;
62+
box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px 0 #00000014, 0 9px 28px 8px #0000000d;
63+
}
64+
65+
@media (-ms-high-contrast: none), screen and (-ms-high-contrast: active) {
66+
.@{prefixCls}-inner {
67+
box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px 0 #00000014, 0 9px 28px 8px #0000000d;
68+
}
69+
}
70+
71+
.@{prefixCls}-title {
72+
min-width: 177px;
73+
min-height: 32px;
74+
margin: 0;
75+
padding: 5px 16px 4px;
76+
color: #000000d9;
77+
font-weight: 500;
78+
border-bottom: 1px solid #f0f0f0;
79+
}
80+
81+
.@{prefixCls}-inner-content {
82+
padding: 12px 16px;
83+
color: #000000d9;
84+
}
85+
86+
.@{prefixCls}-message {
87+
position: relative;
88+
padding: 4px 0 12px;
89+
color: #000000d9;
90+
font-size: 14px;
91+
}
92+
93+
.@{prefixCls}-message-title {
94+
padding-left: 22px;
95+
}
96+
97+
.@{prefixCls}-buttons {
98+
margin-bottom: 4px;
99+
text-align: right;
100+
}
101+
102+
.@{prefixCls}-buttons button {
103+
margin-left: 8px;
104+
}
105+
106+
.@{prefixCls}-arrow {
107+
position: absolute;
108+
display: block;
109+
width: 8.4852px;
110+
height: 8.4852px;
111+
overflow: hidden;
112+
background: transparent;
113+
pointer-events: none;
114+
}
115+
116+
.@{prefixCls}-arrow-content {
117+
position: absolute;
118+
top: 0;
119+
right: 0;
120+
bottom: 0;
121+
left: 0;
122+
display: block;
123+
width: 6px;
124+
height: 6px;
125+
margin: auto;
126+
background-color: #ffffff;
127+
content: "";
128+
pointer-events: auto;
129+
}
130+
131+
.@{prefixCls}-placement-top .@{prefixCls}-arrow,.@{prefixCls}-placement-topLeft .@{prefixCls}-arrow,.@{prefixCls}-placement-topRight .@{prefixCls}-arrow {
132+
bottom: 1.5147px;
133+
}
134+
135+
.@{prefixCls}-placement-top .@{prefixCls}-arrow-content,.@{prefixCls}-placement-topLeft .@{prefixCls}-arrow-content,.@{prefixCls}-placement-topRight .@{prefixCls}-arrow-content {
136+
box-shadow: 3px 3px 7px #00000012;
137+
transform: translateY(-4.2426px) rotate(45deg);
138+
}
139+
140+
.@{prefixCls}-placement-top .@{prefixCls}-arrow {
141+
left: 50%;
142+
transform: translateX(-50%);
143+
}
144+
145+
.@{prefixCls}-placement-topLeft .@{prefixCls}-arrow {
146+
left: 16px;
147+
}
148+
149+
.@{prefixCls}-placement-topRight .@{prefixCls}-arrow {
150+
right: 16px;
151+
}
152+
153+
.@{prefixCls}-placement-right .@{prefixCls}-arrow,.@{prefixCls}-placement-rightBottom .@{prefixCls}-arrow,.@{prefixCls}-placement-rightTop .@{prefixCls}-arrow {
154+
left: 1.5147px;
155+
}
156+
157+
.@{prefixCls}-placement-right .@{prefixCls}-arrow-content,
158+
.@{prefixCls}-placement-rightBottom .@{prefixCls}-arrow-content,
159+
.@{prefixCls}-placement-rightTop .@{prefixCls}-arrow-content {
160+
box-shadow: -3px 3px 7px #00000012;
161+
transform: translateX(4.2426px) rotate(45deg);
162+
}
163+
164+
.@{prefixCls}-placement-right .@{prefixCls}-arrow {
165+
top: 50%;
166+
transform: translateY(-50%);
167+
}
168+
169+
.@{prefixCls}-placement-rightTop .@{prefixCls}-arrow {
170+
top: 12px;
171+
}
172+
173+
.@{prefixCls}-placement-rightBottom .@{prefixCls}-arrow {
174+
bottom: 12px;
175+
}
176+
177+
.@{prefixCls}-placement-bottom .@{prefixCls}-arrow,.@{prefixCls}-placement-bottomLeft .@{prefixCls}-arrow,.@{prefixCls}-placement-bottomRight .@{prefixCls}-arrow {
178+
top: 1.5147px;
179+
}
180+
181+
.@{prefixCls}-placement-bottom .@{prefixCls}-arrow-content,
182+
.@{prefixCls}-placement-bottomLeft .@{prefixCls}-arrow-content,
183+
.@{prefixCls}-placement-bottomRight .@{prefixCls}-arrow-content {
184+
box-shadow: -2px -2px 5px #0000000f;
185+
transform: translateY(4.2426px) rotate(45deg);
186+
}
187+
188+
.@{prefixCls}-placement-bottom .@{prefixCls}-arrow {
189+
left: 50%;
190+
transform: translateX(-50%);
191+
}
192+
193+
.@{prefixCls}-placement-bottomLeft .@{prefixCls}-arrow {
194+
left: 16px;
195+
}
196+
197+
.@{prefixCls}-placement-bottomRight .@{prefixCls}-arrow {
198+
right: 16px;
199+
}
200+
201+
.@{prefixCls}-placement-left .@{prefixCls}-arrow,
202+
.@{prefixCls}-placement-leftBottom .@{prefixCls}-arrow,
203+
.@{prefixCls}-placement-leftTop .@{prefixCls}-arrow {
204+
right: 1.5147px;
205+
}
206+
207+
.@{prefixCls}-placement-left .@{prefixCls}-arrow-content,
208+
.@{prefixCls}-placement-leftBottom .@{prefixCls}-arrow-content,
209+
.@{prefixCls}-placement-leftTop .@{prefixCls}-arrow-content {
210+
box-shadow: 3px -3px 7px #00000012;
211+
transform: translateX(-4.2426px) rotate(45deg);
212+
}
213+
214+
.@{prefixCls}-placement-left .@{prefixCls}-arrow {
215+
top: 50%;
216+
transform: translateY(-50%);
217+
}
218+
219+
.@{prefixCls}-placement-leftTop .@{prefixCls}-arrow {
220+
top: 12px;
221+
}
222+
223+
.@{prefixCls}-placement-leftBottom .@{prefixCls}-arrow {
224+
bottom: 12px;
225+
}
226+
227+
.@{prefixCls}-pink .@{prefixCls}-inner {
228+
background-color: #eb2f96;
229+
}
230+
231+
.@{prefixCls}-pink .@{prefixCls}-arrow-content {
232+
background-color: #eb2f96;
233+
}
234+
235+
.@{prefixCls}-magenta .@{prefixCls}-inner {
236+
background-color: #eb2f96;
237+
}
238+
239+
.@{prefixCls}-magenta .@{prefixCls}-arrow-content {
240+
background-color: #eb2f96;
241+
}
242+
243+
.@{prefixCls}-red .@{prefixCls}-inner {
244+
background-color: #f5222d;
245+
}
246+
247+
.@{prefixCls}-red .@{prefixCls}-arrow-content {
248+
background-color: #f5222d;
249+
}
250+
251+
.@{prefixCls}-volcano .@{prefixCls}-inner {
252+
background-color: #fa541c;
253+
}
254+
255+
.@{prefixCls}-volcano .@{prefixCls}-arrow-content {
256+
background-color: #fa541c;
257+
}
258+
259+
.@{prefixCls}-orange .@{prefixCls}-inner {
260+
background-color: #fa8c16;
261+
}
262+
263+
.@{prefixCls}-orange .@{prefixCls}-arrow-content {
264+
background-color: #fa8c16;
265+
}
266+
267+
.@{prefixCls}-yellow .@{prefixCls}-inner {
268+
background-color: #fadb14;
269+
}
270+
271+
.@{prefixCls}-yellow .@{prefixCls}-arrow-content {
272+
background-color: #fadb14;
273+
}
274+
275+
.@{prefixCls}-gold .@{prefixCls}-inner {
276+
background-color: #faad14;
277+
}
278+
279+
.@{prefixCls}-gold .@{prefixCls}-arrow-content {
280+
background-color: #faad14;
281+
}
282+
283+
.@{prefixCls}-cyan .@{prefixCls}-inner {
284+
background-color: #13c2c2;
285+
}
286+
287+
.@{prefixCls}-cyan .@{prefixCls}-arrow-content {
288+
background-color: #13c2c2;
289+
}
290+
291+
.@{prefixCls}-lime .@{prefixCls}-inner {
292+
background-color: #a0d911;
293+
}
294+
295+
.@{prefixCls}-lime .@{prefixCls}-arrow-content {
296+
background-color: #a0d911;
297+
}
298+
299+
.@{prefixCls}-green .@{prefixCls}-inner {
300+
background-color: #52c41a;
301+
}
302+
303+
.@{prefixCls}-green .@{prefixCls}-arrow-content {
304+
background-color: #52c41a;
305+
}
306+
307+
.@{prefixCls}-blue .@{prefixCls}-inner {
308+
background-color: #1890ff;
309+
}
310+
311+
.@{prefixCls}-blue .@{prefixCls}-arrow-content {
312+
background-color: #1890ff;
313+
}
314+
315+
.@{prefixCls}-geekblue .@{prefixCls}-inner {
316+
background-color: #2f54eb;
317+
}
318+
319+
.@{prefixCls}-geekblue .@{prefixCls}-arrow-content {
320+
background-color: #2f54eb;
321+
}
322+
323+
.@{prefixCls}-purple .@{prefixCls}-inner {
324+
background-color: #722ed1;
325+
}
326+
327+
.@{prefixCls}-purple .@{prefixCls}-arrow-content {
328+
background-color: #722ed1;
329+
}
330+
331+
.@{prefixCls}-rtl {
332+
direction: rtl;
333+
text-align: right;
334+
}
335+
336+
.@{prefixCls}-rtl .@{prefixCls}-message-title {
337+
padding-right: 22px;
338+
padding-left: 16px;
339+
}
340+
341+
.@{prefixCls}-rtl .@{prefixCls}-buttons {
342+
text-align: left;
343+
}
344+
345+
.@{prefixCls}-rtl .@{prefixCls}-buttons button {
346+
margin-right: 8px;
347+
margin-left: 0;
348+
}

‎packages/drip-table/src/components/tooltip/index.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/*
2+
* This file is part of the drip-table project.
3+
* @link : https://drip-table.jd.com/
4+
* @author : Emil Zhai (root@derzh.com)
5+
* @modifier : Emil Zhai (root@derzh.com)
6+
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
7+
*/
8+
9+
import RcTooltip from 'rc-tooltip';
10+
import { type TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
11+
import React from 'react';
12+
13+
import styles from './index.module.less';
14+
15+
export interface TooltipProps extends RcTooltipProps {}
16+
17+
const Tooltip = React.memo(({ ...props }: TooltipProps) => (
18+
<RcTooltip
19+
{...props}
20+
prefixCls="jfe-drip-table-tooltip"
21+
transitionName="jfe-drip-table-motion-zoom-big"
22+
overlay={<div className={styles['jfe-drip-table-tooltip-inner-content']}>{ props.overlay }</div>}
23+
arrowContent={<span className={styles['jfe-drip-table-tooltip-arrow-content']} />}
24+
/>
25+
));
26+
27+
export default Tooltip;

‎packages/drip-table/src/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
/**
2+
* This file is part of the drip-table project.
3+
* @link : https://drip-table.jd.com/
4+
* @author : Emil Zhai (root@derzh.com)
5+
* @modifier : Emil Zhai (root@derzh.com)
6+
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
7+
*/
8+
9+
import './styles/index.less';
10+
111
export * from './types';
212
export { indexValue } from './utils/operator';
313
export { default as builtInComponents } from './components/built-in';

0 commit comments

Comments
 (0)