-
Notifications
You must be signed in to change notification settings - Fork 28
/
demo.jsx
110 lines (94 loc) · 3.59 KB
/
demo.jsx
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
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import prettyBytes from 'pretty-bytes';
import AnimatedNumber from 'react-animated-number';
const getRandomInt = (min, max) => (Math.floor(Math.random() * (max - min + 1)) + min);
class Demo extends Component {
static displayName = 'Demo'
constructor() {
super();
this.state = {
smallValue: 10,
bigValue: 1024,
updates: 0
};
}
componentDidMount() {
this.interval = setInterval(() => this.update(), 3000);
this.interval = setInterval(() => this.mountUnmount(), 11000);
}
update() {
const {updates} = this.state;
this.setState({
smallValue: getRandomInt(10, 1000),
bigValue: getRandomInt(1024, Math.pow(1024, 4)),
updates: updates + 1
});
}
mountUnmount() {
const {updates} = this.state;
this.setState({
updates: updates + 1
});
}
render() {
const {smallValue, bigValue} = this.state;
return (
<div style={{marginTop: 50}}>
<h4>
<AnimatedNumber
style={{
transition: '0.8s ease-out',
transitionProperty:
'background-color, color'
}}
frameStyle={perc => (
perc === 100 ? {} : {backgroundColor: '#ffeb3b'}
)}
stepPrecision={0}
value={smallValue}
formatValue={n => `Animated numbers are ${n} ` +
'times more awesome than regular ones'}/>
</h4>
<div className="alert alert-info">
<AnimatedNumber
style={{
transition: '0.8s ease-out',
transitionProperty:
'background-color, color, opacity'
}}
frameStyle={perc => (
perc === 100 ? {} : {opacity: 0.25}
)}
value={bigValue}
formatValue={n => `You can format numbers like ${n} ` +
`to ${prettyBytes(n)}`}/>
</div>
<div>
<div>
{'And you can even render inside SVG'}
</div>
<svg width={600} height={600}>
<g transform="rotate(-15 150 150) translate(50,100)">
<AnimatedNumber
style={{
transition: '0.8s ease-out',
fontSize: 48,
transitionProperty:
'background-color, color, opacity'
}}
frameStyle={perc => (
perc === 100 ? {} : {opacity: 0.25}
)}
duration={300}
value={bigValue}
component="text"
formatValue={n => prettyBytes(n)}/>
</g>
</svg>
</div>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById('appRoot'));