Permalink
Aug 29, 2018
May 2, 2018
May 2, 2018
Aug 29, 2018
May 2, 2018
May 3, 2018
May 3, 2018
May 3, 2018
May 2, 2018
May 2, 2018
Newer
100644
118 lines (115 sloc)
3.56 KB
1
import
React
,
{
Component
}
from
'react'
2
import
NodeGroup
from
'react-move/NodeGroup'
3
import
Animate
from
'react-move/Animate'
4
import
{
easeElastic
}
from
'd3-ease'
5
import
animationTimings
from
'./common/animationTimings'
6
41
<
div
43
style
=
{
{
44
opacity
:
opacity
,
45
transform
:
`translateX(
${
translateX
}
px)`
46
}
}
47
>
49
<
NodeGroup
50
data
=
{
items
}
51
keyAccessor
=
{
item
=>
item
}
52
start
=
{
(
item
,
i
)
=>
{
53
return
{
54
opacity
:
[
]
,
55
translateY
:
[
-
50
]
,
56
timing
:
{
delay
:
i
*
100
}
57
}
58
}
}
59
enter
=
{
(
item
,
i
)
=>
{
60
return
[
61
{
63
timing
:
{
64
duration
:
animationTimings
.
cardEnter
,
65
delay
:
i
*
100
66
}
67
}
,
68
{
69
translateY
:
[
]
,
70
timing
:
{
71
duration
:
animationTimings
.
cardEnter
,
72
ease
:
easeElastic
,
73
delay
:
i
*
100
74
}
75
}
76
]
77
}
}
78
leave
=
{
(
item
,
i
)
=>
{
79
return
{
82
timing
:
{
delay
:
(
items
.
length
-
i
)
*
100
}
83
}
84
}
}
85
>
86
{
nodes
=>
{
87
return
(
88
<
ul
className
=
"grid"
>
89
{
nodes
.
map
(
(
{
key
,
data
,
state
}
)
=>
{
90
return
(
91
<
li
92
key
=
{
key
}
93
className
=
"card"
94
style
=
{
{
95
opacity
:
state
.
opacity
,
96
transform
:
`translateY(
${
state
.
translateY
}
px)`
97
}
}
98
onClick
=
{
(
)
=>
removeItem
(
data
)
}
99
>
100
<
div
className
=
"close-card"
>
✕
<
/
div
>
101
<
div
>
{
data
}
<
/
div
>
102
<
/
li
>
103
)
104
}
)
}
105
<
/
ul
>
106
)
107
}
}
108
<
/
NodeGroup
>
110
<
/
div
>
116
}
117