Skip to content

Commit dea29e3

Browse files
bplok20010bplok20010
committed
完善keepArrowAtCenter功能
1 parent 36ac39e commit dea29e3

6 files changed

Lines changed: 230 additions & 18 deletions

File tree

‎examples/demos/demo1.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function TooltipButton({ text, ...props }) {
1616
return (
1717
<Tooltip
1818
// maskClosable={false}
19-
title="Title"
19+
title="Title----111itle----111itle----111"
2020
content="Content"
2121
{...props}
2222
>

‎examples/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import ReactDOM from "react-dom";
33

44
import "./style/index.scss";
5+
import "./style/animate.scss";
56

67
import "../src/style/index.css";
78

‎examples/style/animate.scss‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
.animated {
2+
animation-duration: .3s;
3+
animation-fill-mode: both;
4+
}
5+
6+
.animated.infinite {
7+
animation-iteration-count: infinite;
8+
}
9+
10+
.animated.delay500 {
11+
12+
animation-delay:.5s;
13+
}
14+
15+
@keyframes fadeIn {
16+
from {
17+
opacity: 0;
18+
}
19+
20+
to {
21+
opacity: .1;
22+
}
23+
}
24+
25+
.fadeIn {
26+
animation-name: fadeIn;
27+
}
28+
29+
@keyframes fadeOut {
30+
from {
31+
opacity: .1;
32+
}
33+
34+
to {
35+
opacity: 0;
36+
}
37+
}
38+
39+
.fadeOut {
40+
animation-name: fadeOut;
41+
}
42+
43+
@keyframes fadeInDown {
44+
0% {
45+
opacity:0;
46+
-webkit-transform:translateY(-20px);
47+
-ms-transform:translateY(-20px);
48+
transform:translateY(-20px)
49+
}
50+
100% {
51+
opacity:1;
52+
-webkit-transform:translateY(0);
53+
-ms-transform:translateY(0);
54+
transform:translateY(0)
55+
}
56+
}
57+
.fadeInDown {
58+
-webkit-animation-name:fadeInDown;
59+
animation-name:fadeInDown;
60+
}
61+
62+
63+
@keyframes fadeBottomIn {
64+
from {
65+
opacity: 0;
66+
transform: translateY(20%);
67+
}
68+
69+
to {
70+
opacity: 1;
71+
//transform: scale(1);
72+
transform: translateY(0);
73+
}
74+
}
75+
76+
.fadeBottomIn {
77+
//animation-duration: .3s;
78+
animation-name: fadeBottomIn;
79+
}
80+
81+
@keyframes fadeBottomOut {
82+
from {
83+
opacity: 1;
84+
transform: translateY(0);
85+
}
86+
87+
to {
88+
opacity: 0;
89+
transform: translateY(20%);
90+
}
91+
}
92+
93+
.fadeBottomOut {
94+
//animation-duration: .3s;
95+
animation-name: fadeBottomOut;
96+
}
97+
98+
@keyframes fadeInTop {
99+
from {
100+
opacity: 0;
101+
transform: translate3d(0, 20px, 0);
102+
}
103+
104+
to {
105+
opacity: 1;
106+
transform: translate3d(0, 0, 0);
107+
}
108+
}
109+
110+
.fadeInTop {
111+
animation-name: fadeInTop;
112+
}
113+
114+
@keyframes fadeInRight {
115+
from {
116+
opacity: 0;
117+
transform: translate3d(20px, 0, 0);
118+
}
119+
120+
to {
121+
opacity: 1;
122+
transform: translate3d(0, 0, 0);
123+
}
124+
}
125+
126+
.fadeInRight {
127+
animation-name: fadeInRight;
128+
}
129+
130+
@keyframes fadeOutLeft {
131+
from {
132+
opacity: 1;
133+
transform: translate3d(0, 0, 0);
134+
}
135+
136+
to {
137+
opacity: 0;
138+
transform: translate3d(-20px, 0, 0);
139+
}
140+
}
141+
142+
.fadeOutLeft {
143+
animation-name: fadeOutLeft;
144+
}
145+
146+
@keyframes k-loadingF {
147+
0% {
148+
opacity:0
149+
}
150+
100% {
151+
opacity:1
152+
}
153+
}
154+
155+
.k-letter {
156+
animation-name:k-loadingF;
157+
//animation-duration:1.6s;
158+
animation-iteration-count:infinite;
159+
animation-direction:linear;
160+
display:inline-block;
161+
}
162+
163+
@-webkit-keyframes cycle-loader {
164+
0% {
165+
-webkit-transform: rotate(0deg);
166+
transform: rotate(0deg);
167+
}
168+
100% {
169+
-webkit-transform: rotate(360deg);
170+
transform: rotate(360deg);
171+
}
172+
}
173+
174+
@-moz-keyframes cycle-loader {
175+
0% {
176+
-webkit-transform: rotate(0deg);
177+
transform: rotate(0deg);
178+
}
179+
100% {
180+
-webkit-transform: rotate(360deg);
181+
transform: rotate(360deg);
182+
}
183+
}
184+
185+
@keyframes cycle-loader {
186+
0% {
187+
-webkit-transform: rotate(0deg);
188+
transform: rotate(0deg);
189+
}
190+
100% {
191+
-webkit-transform: rotate(360deg);
192+
transform: rotate(360deg);
193+
}
194+
}
195+
196+
.cycle-loading {
197+
display: inline-block;
198+
border-radius: 50%;
199+
position: relative;
200+
border-style: solid;
201+
//-webkit-animation: cycle-loader 1.1s infinite linear;
202+
animation: cycle-loader 1.1s infinite linear;
203+
}

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"dependencies": {
4040
"@babel/runtime": "^7.9.2",
4141
"classnames": "^2.2.6",
42+
"dom-helpers-extra": "^0.2.1",
4243
"react-widget-trigger": "^2.0.5"
4344
},
4445
"author": "nobo.zhou@foxmail.com",

‎src/index.tsx‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from "react";
22
import { findDOMNode } from "react-dom";
33
import Trigger, { TriggerProps, feedbackToPlacement } from "react-widget-trigger";
4+
import offset from "dom-helpers-extra/offset";
45

56
export interface TooltipProps
67
extends Omit<TriggerProps, "popup" | "defaultPopupVisible" | "popupVisible"> {
78
title?: React.ReactNode | (() => React.ReactNode);
89
defaultVisible?: boolean;
910
visible?: boolean;
10-
11-
color?: string;
11+
// TODO:
12+
// color?: string;
1213

1314
trigger?: TriggerProps["action"];
1415

@@ -37,13 +38,19 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
3738
triggerRef: React.RefObject<Trigger> = React.createRef();
3839

3940
adjustArrowPosition: TriggerProps["adjustPosition"] = (_, pos, feedback) => {
40-
const { visibieArrow } = this.props;
41+
const { visibieArrow, keepArrowAtCenter } = this.props;
4142
if (!visibieArrow) return;
4243
if (!this.triggerRef.current) return;
4344

4445
const arrowNode = this.arrowRef.current;
4546
if (!arrowNode) return;
4647

48+
//reset
49+
arrowNode.style.left = "";
50+
arrowNode.style.top = "";
51+
52+
if (!keepArrowAtCenter) return;
53+
4754
const triggerNode = this.triggerRef.current.getTriggerNode();
4855
const popupNode = this.triggerRef.current.getPopupNode() as HTMLDivElement;
4956

@@ -54,25 +61,25 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
5461
const popupWidth = popupNode.offsetWidth;
5562
const popupHeight = popupNode.offsetHeight;
5663

57-
console.log(placement);
64+
const rect = triggerNode.getBoundingClientRect();
5865

5966
if (/^(top|bottom)/.test(placement)) {
6067
if (triggerWidth > popupWidth) {
61-
arrowNode.style.top = "";
62-
arrowNode.style.marginTop = "";
6368
arrowNode.style.left = "50%";
64-
arrowNode.style.marginLeft = `-${arrowNode.offsetWidth / 2}px`;
6569
} else {
66-
//TODO
70+
const m = rect.left + triggerWidth / 2 - arrowNode.offsetWidth / 2;
71+
offset(arrowNode, {
72+
left: m,
73+
});
6774
}
6875
} else {
6976
if (triggerHeight > popupHeight) {
70-
arrowNode.style.left = "";
71-
arrowNode.style.marginLeft = "";
7277
arrowNode.style.top = "50%";
73-
arrowNode.style.marginTop = `-${arrowNode.offsetHeight / 2}px`;
7478
} else {
75-
//TODO
79+
const m = rect.top + triggerHeight / 2 - arrowNode.offsetHeight / 2;
80+
offset(arrowNode, {
81+
top: m,
82+
});
7683
}
7784
}
7885
};
@@ -102,15 +109,15 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
102109
offset,
103110
visibieArrow,
104111
keepArrowAtCenter,
105-
color,
112+
// color,
106113
...restProps
107114
} = this.props;
108115

109116
return (
110117
<Trigger
111118
{...restProps}
112119
ref={this.triggerRef}
113-
adjustPosition={keepArrowAtCenter ? this.adjustArrowPosition : undefined}
120+
adjustPosition={this.adjustArrowPosition}
114121
offset={visibieArrow ? offset! + arrowSize! : offset}
115122
defaultPopupVisible={defaultVisible}
116123
popupVisible={visible}

0 commit comments

Comments
 (0)