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 | export default { past: [], present: undefined, future: [], thereIsAPresent: function() { return this.present != undefined; }, thereIsAPast: function() { return this.past.length > 0; }, thereIsAFuture: function() { return this.future.length > 0; }, setPresent: function(state) { this.present = state; }, movePresentToPast: function() { this.past.push(this.present); }, movePresentToFuture: function() { this.future.push(this.present); }, movePastToPresent: function() { this.setPresent(this.past.pop()); }, moveFutureToPresent: function() { this.setPresent(this.future.pop()); }, push: function(currentState) { if(this.thereIsAPresent()) { this.movePresentToPast(); } this.setPresent(currentState); }, undo: function() { if(this.thereIsAPresent()) { this.movePresentToFuture(); // Moving back in time this.movePastToPresent(); // Moving back in time } }, redo: function() { if(!this.thereIsAFuture()) { // No future! return; } if(this.thereIsAPresent()) { this.movePresentToPast(); // Moving forward in time } this.moveFutureToPresent(); // Moving forward in time }, gotoState: function(i) { const index = Number(i); const allstates = [...this.past, this.present, ...this.future]; this.present = allstates[index] this.past = allstates.slice(0, index) this.future = allstates.slice(index+1, allstates.length) } } |
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 | import React from 'react'; import ControlsContainer from './controls'; import BooksContainer from './books'; import StateViewerContainer from './stateviewer'; const titleStyle = { fontFamily: 'tahoma', fontSize: '24px', textAlign: 'center' } const Title = () => ( <div style={titleStyle}> Book Search </div> ); export default () => ( <div> <Title /> <hr/> <ControlsContainer /> <BooksContainer /> <StateViewerContainer /> </div> ) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import { connect } from 'react-redux'; import StateViewer from '../components/stateviewer'; import stateHistory from '../statehistory'; const mapStateToProps = state => { return { books: state.books, topic: state.topic, currentStatus: state.currentStatus, displayMode: state.displayMode, history: stateHistory } } export default connect( mapStateToProps, null )(StateViewer); |
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 | import React from 'react'; const StateViewer = ({ topic, books, currentStatus, displayMode, history }) => { const styles = { container: { margin: '20px', width: '400px', fontFamily: 'tahoma' }, title: { fontSize: '24px', marginTop: '25px' }, state: { marginTop: '10px' }, hr: { marginTop: '50px' } }; return( <div style={styles.container}> <hr style={styles.hr}/> <div style={styles.title}> Application State </div> <div style={styles.state}> Topic: {topic}<br/> Display mode: { displayMode }<br/> Current status: { currentStatus }<br/> Books displayed: { books.length }<br/> Actions processed: { history.past.length + history.future.length + 1 }<br/> Current action: { history.past.length + 1 } </div> </div> ); } StateViewer.propTypes = { books: React.PropTypes.array.isRequired, currentStatus: React.PropTypes.string.isRequired, displayMode: React.PropTypes.string.isRequired, history: React.PropTypes.object.isRequired, topic: React.PropTypes.string.isRequired, }; export default StateViewer; |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |