/
index.js
113 lines (106 loc) · 2.56 KB
/
index.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import React from 'react'
import Base from '../Base'
import range from 'lodash.range'
import PropTypes from 'prop-types'
import { animate, animationName, defaults, preside } from '../util'
const defaultSize = 22
const Wave = ({ color, columns, columnWidth, gutterWidth, reverse, scaleYEnd, scaleYStart, size, ...props }, { betterReactSpinkit = {} }) => {
const name = animationName('wave')
const finalSize = preside(size, betterReactSpinkit.size, defaultSize)
const outer = {
display: 'flex',
justifyContent: 'space-between',
height: finalSize - (finalSize * 0.2),
width: finalSize
}
const column = {
...animate({ name }),
backgroundColor: color || betterReactSpinkit.color || defaults.color,
height: '100%',
width: columnWidth
}
const cols = (reverse) ? range(columns).reverse() : range(columns)
return (
<Base
css={`
@-webkit-keyframes ${name} {
0%, 40%, 100% {
-webkit-transform: scaleY(${scaleYStart})
}
20% {
-webkit-transform: scaleY(${scaleYEnd})
}
}
@keyframes ${name} {
0%, 40%, 100% {
transform: scaleY(${scaleYStart});
-webkit-transform: scaleY(${scaleYStart});
}
20% {
transform: scaleY(${scaleYEnd});
-webkit-transform: scaleY(${scaleYEnd});
}
}
`}
{...props}
>
<div style={outer}>
{cols.map((index) =>
<div
key={index}
style={{
...column,
...animate({ delay: `-${index / 10}s` }),
marginRight: index !== columns ? gutterWidth : 0
}}
/>
)}
</div>
</Base>
)
}
Wave.propTypes = {
/**
* The color of the spinner.
*/
color: PropTypes.string,
/**
* The amount of columns.
*/
columns: PropTypes.number,
/**
* The width of each column.
*/
columnWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* The pixel value between columns.
*/
gutterWidth: PropTypes.number,
/**
* Reverse the animation.
*/
reverse: PropTypes.bool,
/**
* Ending column height.
*/
scaleYEnd: PropTypes.number,
/**
* Starting column height.
*/
scaleYStart: PropTypes.number,
/**
* The size of the spinner.
*/
size: PropTypes.number
}
Wave.defaultProps = {
columns: 5,
columnWidth: '20%',
gutterWidth: 1,
reverse: false,
scaleYEnd: 1,
scaleYStart: 0.4,
size: defaultSize
}
Wave.contextTypes = defaults.contextTypes
export default Wave