Skip to content

Commit 291df3b

Browse files
jljsj33jljsj33
committed
fix for react 17 #58, ant-design/ant-motion#229 
1 parent 7ce836a commit 291df3b

File tree

4 files changed

+113
-93
lines changed

4 files changed

+113
-93
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "rc-tween-one",
3-
"version": "2.5.0",
3+
"version": "2.6.0",
44
"description": "tween-one anim component for react",
55
"keywords": [
66
"react",
@@ -89,6 +89,7 @@
8989
"prop-types": "^15.6.1",
9090
"babel-runtime": "6.x",
9191
"raf": "~3.4.0",
92+
"react-lifecycles-compat": "^3.0.4",
9293
"style-utils": "~0.2.0",
9394
"tween-functions": "~1.2.0"
9495
},

‎src/TweenOne.jsx

Lines changed: 82 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import ReactDom from 'react-dom';
4+
import { polyfill } from 'react-lifecycles-compat';
45

56
import { objectEqual } from './util';
67
import Tween from './Tween';
@@ -39,6 +40,83 @@ class TweenOne extends Component {
3940
attr: 'style',
4041
onChange: noop,
4142
};
43+
44+
static getDerivedStateFromProps(props, { prevProps, $self }) {
45+
const nextState = {
46+
prevProps: props,
47+
};
48+
if (prevProps) {
49+
if (!$self.tween && !$self.dom) {
50+
$self.updateAnim = true;
51+
return;
52+
}
53+
54+
// 动画处理
55+
const newAnimation = props.animation;
56+
const currentAnimation = prevProps.animation;
57+
const equal = objectEqual(currentAnimation, newAnimation);
58+
if (!equal) {
59+
if (props.resetStyle && $self.tween) {
60+
$self.tween.resetDefaultStyle();
61+
}
62+
$self.updateAnim = true;
63+
}
64+
65+
// 跳帧事件 moment;
66+
const nextMoment = props.moment;
67+
if (typeof nextMoment === 'number' && nextMoment !== prevProps.moment) {
68+
69+
if ($self.tween && !$self.updateAnim) {
70+
$self.startMoment = nextMoment;
71+
$self.startTime = ticker.time;
72+
if (props.paused) {
73+
$self.raf();
74+
}
75+
if ($self.tween.progressTime >= $self.tween.totalTime) {
76+
$self.play();
77+
}
78+
} else {
79+
$self.updateAnim = true;
80+
}
81+
}
82+
83+
// 暂停倒放
84+
if ($self.paused !== props.paused || $self.reverse !== props.reverse) {
85+
$self.paused = props.paused;
86+
$self.reverse = props.reverse;
87+
if ($self.paused) {
88+
$self.cancelRequestAnimationFrame();
89+
} else if ($self.reverse && props.reverseDelay) {
90+
$self.cancelRequestAnimationFrame();
91+
ticker.timeout($self.restart, props.reverseDelay);
92+
} else {
93+
// 在 form 状态下，暂停时拉 moment 时，start 有值恢复播放，在 delay 的时间没有处理。。
94+
if ($self.tween) {
95+
$self.tween.resetAnimData();
96+
$self.tween.resetDefaultStyle();
97+
}
98+
if (!$self.updateAnim) {
99+
$self.restart();
100+
}
101+
}
102+
}
103+
104+
const styleEqual = objectEqual(prevProps.style, props.style);
105+
if (!styleEqual) {
106+
// 在动画时更改了 style, 作为更改开始数值。
107+
if ($self.tween) {
108+
$self.tween.reStart(props.style, prevProps.style,
109+
$self.tween.progressTime < $self.tween.totalTime);
110+
if ($self.paused) {
111+
$self.raf();
112+
}
113+
}
114+
}
115+
$self.setForcedJudg(props);
116+
}
117+
return nextState;// eslint-disable-line
118+
}
119+
42120
constructor(props) {
43121
super(props);
44122
this.rafID = -1;
@@ -49,6 +127,9 @@ class TweenOne extends Component {
49127
this.forced = {};
50128
this.currentRef = null;
51129
this.setForcedJudg(props);
130+
this.state = {
131+
$self: this,
132+
};
52133
}
53134

54135
componentDidMount() {
@@ -58,76 +139,6 @@ class TweenOne extends Component {
58139
}
59140
}
60141

61-
componentWillReceiveProps(nextProps) {
62-
if (!this.tween && !this.dom) {
63-
this.updateAnim = true;
64-
return;
65-
}
66-
67-
// 动画处理
68-
const newAnimation = nextProps.animation;
69-
const currentAnimation = this.props.animation;
70-
const equal = objectEqual(currentAnimation, newAnimation);
71-
if (!equal) {
72-
if (nextProps.resetStyle && this.tween) {
73-
this.tween.resetDefaultStyle();
74-
}
75-
this.updateAnim = true;
76-
}
77-
78-
// 跳帧事件 moment;
79-
const nextMoment = nextProps.moment;
80-
if (typeof nextMoment === 'number' && nextMoment !== this.props.moment) {
81-
if (this.tween && !this.updateAnim) {
82-
this.startMoment = nextMoment;
83-
this.startTime = ticker.time;
84-
if (nextProps.paused) {
85-
this.raf();
86-
}
87-
if (this.tween.progressTime >= this.tween.totalTime) {
88-
this.play();
89-
}
90-
} else {
91-
92-
this.updateAnim = true;
93-
}
94-
}
95-
96-
// 暂停倒放
97-
if (this.paused !== nextProps.paused || this.reverse !== nextProps.reverse) {
98-
this.paused = nextProps.paused;
99-
this.reverse = nextProps.reverse;
100-
if (this.paused) {
101-
this.cancelRequestAnimationFrame();
102-
} else if (this.reverse && nextProps.reverseDelay) {
103-
this.cancelRequestAnimationFrame();
104-
ticker.timeout(this.restart, nextProps.reverseDelay);
105-
} else {
106-
// 在 form 状态下，暂停时拉 moment 时，start 有值恢复播放，在 delay 的时间没有处理。。
107-
if (this.tween) {
108-
this.tween.resetAnimData();
109-
this.tween.resetDefaultStyle();
110-
}
111-
if (!this.updateAnim) {
112-
this.restart();
113-
}
114-
}
115-
}
116-
117-
const styleEqual = objectEqual(this.props.style, nextProps.style);
118-
if (!styleEqual) {
119-
// 在动画时更改了 style, 作为更改开始数值。
120-
if (this.tween) {
121-
this.tween.reStart(nextProps.style, this.props.style,
122-
this.tween.progressTime < this.tween.totalTime);
123-
if (this.paused) {
124-
this.raf();
125-
}
126-
}
127-
}
128-
this.setForcedJudg(nextProps);
129-
}
130-
131142
componentDidUpdate() {
132143
if (!this.dom) {
133144
this.dom = ReactDom.findDOMNode(this);
@@ -348,4 +359,4 @@ class TweenOne extends Component {
348359
}
349360
}
350361
TweenOne.isTweenOne = true;
351-
export default TweenOne;
362+
export default polyfill(TweenOne);

‎src/TweenOneGroup.jsx

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React, { Component, createElement } from 'react';
22
import PropTypes from 'prop-types';
3+
import { polyfill } from 'react-lifecycles-compat';
4+
35
import TweenOne from './TweenOne';
46
import {
57
dataToArray,
@@ -14,6 +16,22 @@ function noop() {
1416
}
1517

1618
class TweenOneGroup extends Component {
19+
static getDerivedStateFromProps(props, { prevProps, $self }) {
20+
const nextState = {
21+
prevProps: props,
22+
};
23+
if (prevProps) {
24+
const nextChildren = toArrayChildren(props.children);
25+
if (Object.keys($self.isTween).length && !props.exclusive) {
26+
$self.animQueue.push(nextChildren);
27+
return;
28+
}
29+
const currentChildren = toArrayChildren($self.currentChildren);
30+
nextState.children = $self.changeChildren(nextChildren, currentChildren);
31+
}
32+
return nextState; // eslint-disable-line
33+
}
34+
1735
constructor(props) {
1836
super(props);
1937
this.keysToEnter = [];
@@ -27,23 +45,14 @@ class TweenOneGroup extends Component {
2745
this.currentChildren = toArrayChildren(getChildrenFromProps(this.props));
2846
this.state = {
2947
children,
48+
$self: this,
3049
};
3150
}
3251

3352
componentDidMount() {
3453
this.onEnterBool = true;
3554
}
3655

37-
componentWillReceiveProps(nextProps) {
38-
const nextChildren = toArrayChildren(nextProps.children);
39-
if (Object.keys(this.isTween).length && !nextProps.exclusive) {
40-
this.animQueue.push(nextChildren);
41-
return;
42-
}
43-
const currentChildren = toArrayChildren(this.currentChildren);
44-
this.changeChildren(nextChildren, currentChildren);
45-
}
46-
4756
onChange = (animation, key, type, obj) => {
4857
const length = dataToArray(animation).length;
4958
const tag = obj.target;
@@ -159,7 +168,10 @@ class TweenOneGroup extends Component {
159168

160169
reAnimQueue = () => {
161170
if (!Object.keys(this.isTween).length && this.animQueue.length) {
162-
this.changeChildren(this.animQueue[this.animQueue.length - 1], this.state.children);
171+
const children = this.changeChildren(this.animQueue[this.animQueue.length - 1], this.state.children);
172+
this.setState({
173+
children,
174+
});
163175
this.animQueue = [];
164176
}
165177
}
@@ -195,9 +207,7 @@ class TweenOneGroup extends Component {
195207
}
196208
});
197209
this.currentChildren = newChildren;
198-
this.setState({
199-
children: newChildren,
200-
});
210+
return newChildren;
201211
}
202212

203213
render() {
@@ -250,4 +260,4 @@ TweenOneGroup.defaultProps = {
250260
exclusive: false,
251261
};
252262
TweenOneGroup.isTweenOneGroup = true;
253-
export default TweenOneGroup;
263+
export default polyfill(TweenOneGroup);

‎tests/tweenOne.spec.jsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,13 @@ import BezierPlugin from '../src/plugin/BezierPlugin';
1212

1313
plugins.push(BezierPlugin);
1414

15-
const Div = (props) => {
16-
return props.show ? <div>text</div> : null;
17-
};
15+
const Div = React.forwardRef(({ show }, ref) => {
16+
return show ? <div ref={ref}>text</div> : null;
17+
});
1818

1919
Div.propTypes = {
2020
show: PropTypes.bool,
21-
children: PropTypes.any,
2221
}
23-
2422
describe('rc-tween-one', () => {
2523
let div;
2624
let instance;
@@ -131,7 +129,7 @@ describe('rc-tween-one', () => {
131129
repeat: -1,
132130
yoyo: true,
133131
},
134-
style: { top: 0},
132+
style: { top: 0 },
135133
});
136134
const child = TestUtils.findRenderedDOMComponentWithTag(instance, 'div');
137135
console.log('start:', child.style.top);

0 commit comments

Comments
 (0)