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
| import React from 'react';
import Book from './book.js';
let ReactCSSTransitionGroup =
require('react-addons-css-transition-group');
const Books = ({
books,
displayMode,
currentStatus,
}) => {
const styles = {
container: {
width: '100%',
},
spinner: {
textAlign: 'center',
width: '100%',
},
};
const Spinner = () => (
<div style={styles.spinner}>
<img src="./images/spinner.gif"
role="presentation" />
</div>
);
const bookMarkup = () => {
let components = null;
let bookItems = (<span>No items!</span>);
if (books.length > 0) {
components = books.map(item => {
if (item.volumeInfo.imageLinks) {
// Need different keys for different display modes
// to trigger <ReactCSSTransitionGroup> animations
const key = displayMode === 'THUMBNAIL' ?
item.id + 1 :
item.id;
bookItems = (
<Book item={item}
displayMode={displayMode}
key={key} />);
}
return bookItems;
});
}
return components;
}
return (
<div>
{ currentStatus !== 'Fetching...' ? null : <Spinner /> }
<div style={styles.container}>
<ReactCSSTransitionGroup transitionName="books"
transitionLeaveTimeout={1}
transitionEnterTimeout={1000}>
{bookMarkup()}
</ReactCSSTransitionGroup>
</div>
</div>
);
};
Books.propTypes = {
books: React.PropTypes.array.isRequired,
currentStatus: React.PropTypes.string.isRequired,
displayMode: React.PropTypes.string.isRequired,
};
export default Books;
|
