-
Notifications
You must be signed in to change notification settings - Fork 84
/
CSS.jsx
82 lines (72 loc) · 1.74 KB
/
CSS.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
import React from 'react';
import d3Array from 'd3-array';
import CSSGrid from '../components/CSSGrid';
import pinterestLayout from '../layouts/pinterest';
import { enter, entered, exit } from '../enter-exit-styles/foldDown';
const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
export default React.createClass({
getDefaultProps() {
return {
minItems: 5
};
},
getInitialState() {
return {
data: this.generateData()
};
},
handleShuffle() {
this.setState({
data: this.generateData()
});
},
generateData() {
return d3Array.shuffle(alphabet)
.slice(0, this.props.minItems +
Math.floor(Math.random() * (26 - this.props.minItems)))
.sort()
.map(letter => ({
letter,
number: Math.floor(Math.random() * 100)
}));
},
render() {
const itemWidth = 150;
const items = this.state.data.map(d => {
const height = (d.letter.charCodeAt(0) % 3) * 75 + 75;
return (
<li
className="grid-item"
style={{ height, width: itemWidth }}
key={d.letter}
itemRect={{ height }}
>
<h3>{d.letter.toUpperCase()} - {parseInt(d.number, 10)}</h3>
</li>
);
});
return (
<div>
<button
onClick={this.handleShuffle}
>Randomize</button>
<CSSGrid
className="grid"
component="ul"
columns={4}
columnWidth={itemWidth}
gutterWidth={5}
gutterHeight={5}
duration={800}
layout={pinterestLayout}
enter={enter}
entered={entered}
exit={exit}
perspective={600}
>
{items}
</CSSGrid>
</div>
);
}
});