1 2 3 4 5 6 7 8 9 10 11 12 13 | import { connect } from 'react-redux'; import Books from '../components/books'; const mapStateToProps = state => ({ books: state.books, currentStatus: state.currentStatus, displayMode: state.displayMode, }); export default connect( mapStateToProps, null )(Books); |
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; |
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 | import React from 'react'; const Book = ({ item, displayMode, }) => { const styles = { links: { marginTop: '20px', }, link: { padding: '25px', }, image: { boxShadow: '3px 3px 3px #686868', marginBottom: '15px', }, }; const linkMarkup = (currentItem, link) => ( <div style={styles.links}> <a href={link} style={styles.link}> {currentItem.volumeInfo.title} </a> </div> ); const thumbnailMarkup = (currentItem, link) => ( <a href={link} style={styles.link}> <img src={currentItem.volumeInfo.imageLinks.thumbnail} style={styles.image} role="presentation" /> </a> ); const link = item.volumeInfo.canonicalVolumeLink; return displayMode === 'THUMBNAIL' ? thumbnailMarkup(item, link) : linkMarkup (item, link); }; Book.propTypes = { item: React.PropTypes.object.isRequired, displayMode: React.PropTypes.string.isRequired, }; export default Book; |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |