/
DelayedList.js
56 lines (48 loc) · 1.13 KB
/
DelayedList.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import React, { Component } from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import { isEqual } from 'lodash'
export default class DelayedList extends Component {
constructor() {
super()
this.state = {
items: []
}
}
shouldComponentUpdate(nextProps, nextState) {
if (!isEqual(this.props.children, nextProps.children)) {
this.setData(nextProps.children);
return true;
} else if (!isEqual(this.state.items, nextState.items)) {
return true;
} else {
return false;
}
}
setData(nextProps) {
let { delay } = this.props
this.state.items = []
if (!Array.isArray(nextProps)) {
nextProps = new Array(1).fill(nextProps);
}
if (nextProps.length === 0) {
return this.setState({
items: []
})
}
nextProps.forEach((item, index )=> {
setTimeout(item => {
let newData = [...this.state.items, item]
this.setState({
items: newData
})
}, delay + (index * delay), item)
})
}
render() {
return (
<div>
{this.state.items}
</div>
)
}
}