Skip to content

Commit a4d26f8

Browse files
bplok20010bplok20010
committed
新增动画效果
1 parent dea29e3 commit a4d26f8

File tree

5 files changed

+171
-132
lines changed

5 files changed

+171
-132
lines changed

‎examples/demos/demo1.js

Lines changed: 17 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,7 @@ const animateClassNames = {
1414

1515
function TooltipButton({ text, ...props }) {
1616
return (
17-
<Tooltip
18-
// maskClosable={false}
19-
title="Title----111itle----111itle----111"
20-
content="Content"
21-
{...props}
22-
>
17+
<Tooltip title="Title----111itle----111itle----111" {...props}>
2318
<button>{text || props.placement}</button>
2419
</Tooltip>
2520
);
@@ -35,74 +30,25 @@ export default class DEMO extends Component {
3530
render() {
3631
return (
3732
<div>
38-
<TooltipButton action="hover" placement="bottomLeft" />
39-
<TooltipButton action="hover" placement="bottom" />
40-
<TooltipButton action="hover" placement="bottomRight" />
33+
<TooltipButton placement="bottomLeft" />
34+
<TooltipButton placement="bottom" />
35+
<TooltipButton placement="bottomRight" />
4136
<hr />
42-
<TooltipButton action="hover" placement="topLeft" />
43-
<TooltipButton action="hover" placement="top" />
44-
<TooltipButton action="hover" placement="topRight" />
37+
<TooltipButton placement="topLeft" />
38+
<TooltipButton placement="top" />
39+
<TooltipButton placement="topRight" />
4540
<hr />
46-
<TooltipButton action="hover" placement="leftTop" />
47-
<div
48-
style={{
49-
position: "relative",
50-
}}
51-
>
52-
<TooltipButton action="hover" usePortal={false} placement="left" />
53-
</div>
54-
<TooltipButton action="hover" placement="leftBottom" />
41+
<TooltipButton placement="leftTop" />
42+
<br />
43+
<TooltipButton placement="left" />
44+
<br />
45+
<TooltipButton placement="leftBottom" />
5546
<hr />
56-
<TooltipButton action="hover" placement="rightTop" />
57-
<div
58-
style={{
59-
position: "relative",
60-
}}
61-
>
62-
<TooltipButton action="hover" usePortal={false} placement="right" />
63-
</div>
64-
<TooltipButton action="hover" placement="rightBottom" />
65-
<hr />
66-
<TooltipButton
67-
placement="bottomLeft"
68-
action="contextMenu"
69-
hideAction="mouseDown"
70-
text="action:contextMenu"
71-
popupTransition={{ classNames: animateClassNames, timeout: 300 }}
72-
/>
73-
<TooltipButton
74-
placement="bottomLeft"
75-
action="click"
76-
// hideAction="mouseDown"
77-
text="action:click"
78-
popupTransition={{ classNames: animateClassNames, timeout: 300 }}
79-
/>
80-
<TooltipButton
81-
placement="bottomLeft"
82-
action="hover"
83-
text="action:hover"
84-
delay={200}
85-
popupTransition={{ classNames: animateClassNames, timeout: 300 }}
86-
/>
87-
<TooltipButton
88-
placement="bottomLeft"
89-
action="focus"
90-
text="action:focus"
91-
popupTransition={{ classNames: animateClassNames, timeout: 300 }}
92-
/>
93-
<TooltipButton
94-
placement="bottomLeft"
95-
action="mouseDown"
96-
text="action:mouseDown"
97-
popupTransition={{ classNames: animateClassNames, timeout: 300 }}
98-
/>
99-
<hr />
100-
<TooltipButton placement="bottomLeft" mask text="mask" />
101-
<TooltipButton
102-
placement="bottomLeft"
103-
popupTransition={{ classNames: animateClassNames, timeout: 300 }}
104-
text="popupTransition"
105-
/>
47+
<TooltipButton placement="rightTop" />
48+
<br />
49+
<TooltipButton placement="right" defaultVisible />
50+
<br />
51+
<TooltipButton placement="rightBottom" />
10652
</div>
10753
);
10854
}

‎package-lock.json

Lines changed: 13 additions & 4 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 & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"@babel/runtime": "^7.9.2",
4141
"classnames": "^2.2.6",
4242
"dom-helpers-extra": "^0.2.1",
43-
"react-widget-trigger": "^2.0.5"
43+
"react-widget-trigger": "^2.0.8"
4444
},
4545
"author": "nobo.zhou@foxmail.com",
4646
"license": "MIT",

‎src/index.tsx

Lines changed: 74 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
import React from "react";
2-
import { findDOMNode } from "react-dom";
3-
import Trigger, { TriggerProps, feedbackToPlacement } from "react-widget-trigger";
2+
import Trigger, { TriggerProps, feedbackToPlacement, Feedback } from "react-widget-trigger";
43
import offset from "dom-helpers-extra/offset";
54

65
export interface TooltipProps
7-
extends Omit<TriggerProps, "popup" | "defaultPopupVisible" | "popupVisible"> {
6+
extends Omit<
7+
TriggerProps,
8+
| "popup"
9+
| "defaultPopupVisible"
10+
| "popupVisible"
11+
| "destroyPopupOnHide"
12+
| "action"
13+
| "popupTransition"
14+
| "adjustPosition"
15+
> {
816
title?: React.ReactNode | (() => React.ReactNode);
917
defaultVisible?: boolean;
1018
visible?: boolean;
@@ -15,11 +23,16 @@ export interface TooltipProps
1523

1624
offset?: number;
1725

18-
visibieArrow?: boolean;
26+
visibleArrow?: boolean;
1927
arrowSize?: number;
2028
keepArrowAtCenter?: boolean;
29+
destroyTooltipOnHide?: boolean;
30+
31+
transition?: TriggerProps["popupTransition"];
2132

2233
onVisibleChange?: (visible: boolean) => void;
34+
35+
role?: string;
2336
}
2437

2538
export interface TooltipState {}
@@ -28,18 +41,42 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
2841
static defaultProps: TooltipProps = {
2942
prefixCls: "rw-tooltip",
3043
defaultVisible: false,
31-
visibieArrow: true,
44+
visibleArrow: true,
45+
keepArrowAtCenter: false,
46+
destroyTooltipOnHide: true,
3247
arrowSize: 6,
3348
offset: 0,
34-
keepArrowAtCenter: false,
49+
delay: 100,
50+
trigger: ["hover"],
51+
outsideHideEventName: ["mousedown", "click"],
52+
transition: {
53+
classNames: {
54+
appear: "tooltip-animated",
55+
appearActive: "tooltip-fade-in",
56+
appearDone: "",
57+
enter: "tooltip-animated",
58+
enterActive: "tooltip-fade-in",
59+
enterDone: "",
60+
exit: "tooltip-animated",
61+
exitActive: "tooltip-fade-out",
62+
exitDone: "",
63+
},
64+
timeout: 290,
65+
},
66+
role: "tooltip",
3567
};
3668

3769
arrowRef: React.RefObject<HTMLDivElement> = React.createRef();
3870
triggerRef: React.RefObject<Trigger> = React.createRef();
71+
feedback: Feedback | null;
3972

40-
adjustArrowPosition: TriggerProps["adjustPosition"] = (_, pos, feedback) => {
41-
const { visibieArrow, keepArrowAtCenter } = this.props;
42-
if (!visibieArrow) return;
73+
adjustArrowPosition = () => {
74+
const feedback = this.feedback;
75+
76+
if (!feedback) return;
77+
78+
const { visibleArrow, keepArrowAtCenter } = this.props;
79+
if (!visibleArrow) return;
4380
if (!this.triggerRef.current) return;
4481

4582
const arrowNode = this.arrowRef.current;
@@ -82,19 +119,35 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
82119
});
83120
}
84121
}
122+
123+
//reset
124+
this.feedback = null;
125+
};
126+
127+
saveFeedback: TriggerProps["adjustPosition"] = (_, __, feedback) => {
128+
this.feedback = feedback;
85129
};
86130

131+
componentDidMount() {
132+
this.componentDidUpdate();
133+
}
134+
componentDidUpdate() {
135+
this.adjustArrowPosition();
136+
}
137+
87138
getPopup = () => {
88-
const { prefixCls, title, visibieArrow } = this.props;
139+
const { prefixCls, title, visibleArrow, role } = this.props;
89140

90141
const titleNode = typeof title === "function" ? title() : title;
91142

92143
return (
93144
<>
94-
{visibieArrow ? (
145+
{visibleArrow ? (
95146
<div className={`${prefixCls}-arrow`} ref={this.arrowRef}></div>
96147
) : null}
97-
<div className={`${prefixCls}-inner`}>{titleNode}</div>
148+
<div className={`${prefixCls}-inner`} role={role}>
149+
{titleNode}
150+
</div>
98151
</>
99152
);
100153
};
@@ -107,8 +160,11 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
107160
trigger,
108161
arrowSize,
109162
offset,
110-
visibieArrow,
163+
visibleArrow,
111164
keepArrowAtCenter,
165+
destroyTooltipOnHide,
166+
transition,
167+
role,
112168
// color,
113169
...restProps
114170
} = this.props;
@@ -117,8 +173,11 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
117173
<Trigger
118174
{...restProps}
119175
ref={this.triggerRef}
120-
adjustPosition={this.adjustArrowPosition}
121-
offset={visibieArrow ? offset! + arrowSize! : offset}
176+
popupTransition={transition}
177+
action={trigger}
178+
adjustPosition={this.saveFeedback}
179+
offset={visibleArrow ? offset! + arrowSize! : offset}
180+
destroyPopupOnHide={destroyTooltipOnHide}
122181
defaultPopupVisible={defaultVisible}
123182
popupVisible={visible}
124183
popup={this.getPopup}

0 commit comments

Comments
 (0)