Skip to content

Commit ab67fdc

Browse files
afc163afc163
committed
do not wrapper custom component
1 parent 98ee08d commit ab67fdc

File tree

2 files changed

+50
-37
lines changed

2 files changed

+50
-37
lines changed

‎src/QueueAnim.jsx

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ const BackEase = {
1616
easeInOutBack: [0.68, -0.55, 0.265, 1.55],
1717
};
1818

19+
const placeholderKeyPrefix = 'ant-queue-anim-placeholder-';
20+
1921
class QueueAnim extends React.Component {
2022
constructor() {
2123
super(...arguments);
@@ -146,26 +148,45 @@ class QueueAnim extends React.Component {
146148
}
147149

148150
performEnter(key, i) {
149-
const node = findDOMNode(this.refs[key]);
150-
if (!node) {
151+
const placeholderNode = findDOMNode(this.refs[placeholderKeyPrefix + key]);
152+
if (!placeholderNode) {
151153
return;
152154
}
153155
const interval = transformArguments(this.props.interval)[0];
154156
const delay = transformArguments(this.props.delay)[0];
157+
placeholderNode.style.visibility = 'hidden';
158+
velocity(placeholderNode, 'stop');
159+
velocity(placeholderNode, { opacity: [0, 0] }, {
160+
delay: interval * i + delay,
161+
duration: 0,
162+
begin: this.performEnterBegin.bind(this, key),
163+
});
164+
if (this.keysToEnter.indexOf(key) >= 0) {
165+
this.keysToEnter.splice(this.keysToEnter.indexOf(key), 1);
166+
}
167+
}
168+
169+
performEnterBegin(key) {
170+
const childrenShow = this.state.childrenShow;
171+
childrenShow[key] = true;
172+
this.setState({ childrenShow }, this.realPerformEnter.bind(this, key));
173+
}
174+
175+
realPerformEnter(key) {
176+
const node = findDOMNode(this.refs[key]);
177+
if (!node) {
178+
return;
179+
}
155180
const duration = transformArguments(this.props.duration)[0];
156181
node.style.visibility = 'hidden';
157182
velocity(node, 'stop');
158183
velocity(node, this.getVelocityEnterConfig('enter'), {
159-
delay: interval * i + delay,
160184
duration: duration,
161185
easing: this.getVelocityEasing()[0],
162186
visibility: 'visible',
163187
begin: this.enterBegin.bind(this, key),
164188
complete: this.enterComplete.bind(this, key),
165189
});
166-
if (this.keysToEnter.indexOf(key) >= 0) {
167-
this.keysToEnter.splice(this.keysToEnter.indexOf(key), 1);
168-
}
169190
}
170191

171192
performLeave(key, i) {
@@ -188,11 +209,6 @@ class QueueAnim extends React.Component {
188209
}
189210

190211
enterBegin(key, elements) {
191-
const childrenShow = this.state.childrenShow;
192-
childrenShow[key] = true;
193-
this.setState({
194-
childrenShow: childrenShow,
195-
});
196212
elements.forEach((elem) => {
197213
elem.className += (' ' + this.props.animatingClassName[0]);
198214
});
@@ -240,16 +256,13 @@ class QueueAnim extends React.Component {
240256
if (!child || !child.key) {
241257
return child;
242258
}
243-
// handle Component without props, like <App />
244-
if (typeof child.type === 'function') {
245-
return createElement('div', {
246-
ref: child.key,
247-
key: child.key,
248-
}, this.state.childrenShow[child.key] ? child : null);
249-
}
250-
return cloneElement(child, {
259+
return this.state.childrenShow[child.key] ? cloneElement(child, {
251260
ref: child.key,
252-
}, this.state.childrenShow[child.key] ? child.props.children : null);
261+
key: child.key,
262+
}) : createElement('div', {
263+
ref: placeholderKeyPrefix + child.key,
264+
key: placeholderKeyPrefix + child.key,
265+
});
253266
});
254267
return createElement(this.props.component, this.props, childrenToRender);
255268
}

‎tests/index.spec.js

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ describe('rc-queue-anim', function () {
1919
return parseFloat(node.style.left);
2020
}
2121

22-
function shouldAnimatingThisOne(children, index) {
22+
function shouldAnimatingThisOne(instance, index) {
23+
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
2324
children.forEach(function(node, i) {
2425
console.log(i, node.style.visibility, getOpacity(node));
2526
if (i === 0) {
@@ -97,13 +98,13 @@ describe('rc-queue-anim', function () {
9798
const interval = defaultInterval;
9899
instance = createQueueAnimInstance();
99100
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
100-
shouldAnimatingThisOne(children, 0);
101+
shouldAnimatingThisOne(instance, 0);
101102
setTimeout(function() {
102-
shouldAnimatingThisOne(children, 1);
103+
shouldAnimatingThisOne(instance, 1);
103104
setTimeout(function() {
104-
shouldAnimatingThisOne(children, 2);
105+
shouldAnimatingThisOne(instance, 2);
105106
setTimeout(function() {
106-
shouldAnimatingThisOne(children, 3);
107+
shouldAnimatingThisOne(instance, 3);
107108
done();
108109
}, interval);
109110
}, interval);
@@ -113,14 +114,13 @@ describe('rc-queue-anim', function () {
113114
it('should have interval', function(done) {
114115
const interval = 300;
115116
instance = createQueueAnimInstance({ interval });
116-
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
117-
shouldAnimatingThisOne(children, 0);
117+
shouldAnimatingThisOne(instance, 0);
118118
setTimeout(function() {
119-
shouldAnimatingThisOne(children, 1);
119+
shouldAnimatingThisOne(instance, 1);
120120
setTimeout(function() {
121-
shouldAnimatingThisOne(children, 2);
121+
shouldAnimatingThisOne(instance, 2);
122122
setTimeout(function() {
123-
shouldAnimatingThisOne(children, 3);
123+
shouldAnimatingThisOne(instance, 3);
124124
done();
125125
}, interval);
126126
}, interval);
@@ -132,15 +132,15 @@ describe('rc-queue-anim', function () {
132132
const delay = 1000;
133133
instance = createQueueAnimInstance({ delay });
134134
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
135-
shouldAnimatingThisOne(children, 0);
135+
shouldAnimatingThisOne(instance, 0);
136136
setTimeout(function() {
137-
shouldAnimatingThisOne(children, 0);
137+
shouldAnimatingThisOne(instance, 0);
138138
setTimeout(function() {
139-
shouldAnimatingThisOne(children, 1);
139+
shouldAnimatingThisOne(instance, 1);
140140
setTimeout(function() {
141-
shouldAnimatingThisOne(children, 2);
141+
shouldAnimatingThisOne(instance, 2);
142142
setTimeout(function() {
143-
shouldAnimatingThisOne(children, 3);
143+
shouldAnimatingThisOne(instance, 3);
144144
done();
145145
}, interval);
146146
}, interval);
@@ -153,7 +153,7 @@ describe('rc-queue-anim', function () {
153153
const duration = 300;
154154
instance = createQueueAnimInstance({ duration });
155155
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
156-
shouldAnimatingThisOne(children, 0);
156+
shouldAnimatingThisOne(instance, 0);
157157
setTimeout(function() {
158158
expect(getOpacity(children[1])).to.be.above(0);
159159
setTimeout(function() {
@@ -166,8 +166,8 @@ describe('rc-queue-anim', function () {
166166
it('should have leave animation', function(done) {
167167
const interval = defaultInterval;
168168
instance = createQueueAnimInstance();
169-
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
170169
setTimeout(function() {
170+
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
171171
expect(getOpacity(children[3])).to.be(1);
172172
const removeIndex = instance.removeOne();
173173
setTimeout(function() {

0 commit comments

Comments
 (0)