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 | import React from 'react'; import DisplayModeContainer from '../containers/displayMode'; import TopicSelectorContainer from '../containers/topicSelector'; import HistoryContainer from '../containers/history'; const Controls = ({ topic, displayMode }) => { const styles = { controls: { padding: '15px', marginBottom: '25px' } }; return( <div style={styles.controls}> <TopicSelectorContainer topic={topic} /> <DisplayModeContainer displayMode={displayMode} /> <HistoryContainer /> </div> ); } Controls.propTypes = { displayMode: React.PropTypes.string.isRequired, topic: React.PropTypes.string.isRequired, }; export default Controls; |
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 | import { connect } from 'react-redux'; import { undo, redo, gotoState } from '../actions'; import { History } from '../components/history'; import stateHistory from '../statehistory'; const mapStateToProps = state => { return { past: stateHistory.past, present: stateHistory.present, future: stateHistory.future } } const mapDispatchToProps = dispatch => { return { undo: () => { dispatch(undo()); }, redo: () => { dispatch(redo()); }, gotoState: stateIndex => { dispatch(gotoState(stateIndex)); } } } export default connect( mapStateToProps, mapDispatchToProps )(History); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | ... export const redo = () => { return { type: 'REDO' } } export const undo = () => { return { type: 'UNDO' } } export const gotoState = stateIndex => { return { type: 'GOTO', stateIndex } } |
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 | import React from 'react'; export const History = ({ past, present, future, undo, redo, gotoState, }) => { const styles = { container: { marginLeft: '20px', cursor: 'pointer', }, link: { textDecoration: 'none' }, input: { cursor: 'pointer' } } const RightArrow = () => { return( <a href='#' style={styles.link} onClick={() => redo()}> → </a> ); } const LeftArrow = () => { return( <a href='#' style={styles.link} onClick={() => undo()}> ← </a> ); } const maxRange = () => { return (past ? past.length : 0) + (present? 1 : 0) + (future ? future.length : 0) - 1; } return( <span style={styles.container}> History <input type='range' style={styles.input} min={0} max={maxRange()} value={past ? past.length : 0} onChange={event => gotoState(event.target.value)}/> { (past && past.length > 0) ? <LeftArrow /> : null } { (future && future.length > 0) ? <RightArrow /> : null } </span> ) } History.propTypes = { past: React.PropTypes.array.isRequired, present: React.PropTypes.object.isRequired, future: React.PropTypes.array.isRequired, undo: React.PropTypes.func.isRequired, redo: React.PropTypes.func.isRequired, gotoState: React.PropTypes.func.isRequired, }; |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |