2016-11-28 18:47:47 +01:00
|
|
|
import React from 'react'
|
|
|
|
import {connect} from 'react-redux'
|
|
|
|
|
2016-11-30 20:57:35 +01:00
|
|
|
import {Button, Icon, Segment} from 'semantic-ui-react'
|
|
|
|
|
2016-11-28 18:47:47 +01:00
|
|
|
import * as Actions from '../actions'
|
|
|
|
import * as Selectors from '../selectors'
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({
|
|
|
|
isMarkdownFormat: Selectors.isMarkdownFormat(state),
|
|
|
|
isShowOriginal: Selectors.isShowOriginal(state),
|
|
|
|
isShowFinal: Selectors.isShowFinal(state),
|
2017-01-18 02:41:53 +01:00
|
|
|
isShowDifference: Selectors.isShowDifference(state)
|
2016-11-28 18:47:47 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
|
|
onSetPlaintextFormat: () => dispatch(Actions.setPlaintextFormat()),
|
2017-01-18 02:41:53 +01:00
|
|
|
onSetMarkdownFormat: () => dispatch(Actions.setMarkdownFormat()),
|
2016-11-28 18:47:47 +01:00
|
|
|
onShowOriginal: () => dispatch(Actions.showOriginal()),
|
|
|
|
onShowFinal: () => dispatch(Actions.showFinal()),
|
|
|
|
onShowDifference: () => dispatch(Actions.showDifference()),
|
2016-12-17 06:26:04 +01:00
|
|
|
onEdit: () => dispatch(Actions.edit())
|
2016-11-28 18:47:47 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
class CompareControls extends React.Component {
|
|
|
|
|
2017-01-18 02:41:53 +01:00
|
|
|
onClickMarkdownFormat () {
|
|
|
|
if (this.props.isMarkdownFormat) {
|
2016-11-28 18:47:47 +01:00
|
|
|
this.props.onSetPlaintextFormat()
|
2017-01-18 02:41:53 +01:00
|
|
|
} else {
|
2016-11-28 18:47:47 +01:00
|
|
|
this.props.onSetMarkdownFormat()
|
2017-01-18 02:41:53 +01:00
|
|
|
}
|
2016-11-28 18:47:47 +01:00
|
|
|
}
|
|
|
|
|
2017-01-18 02:41:53 +01:00
|
|
|
render () {
|
2016-11-28 18:47:47 +01:00
|
|
|
return (
|
2016-11-30 20:57:35 +01:00
|
|
|
<Segment.Group>
|
2016-12-09 23:07:42 +01:00
|
|
|
<Segment>
|
2017-01-18 02:41:53 +01:00
|
|
|
<Button fluid onClick={this.props.onEdit}>Edit</Button>
|
2016-12-09 23:07:42 +01:00
|
|
|
</Segment>
|
|
|
|
|
2016-11-30 20:57:35 +01:00
|
|
|
<Segment >
|
|
|
|
<Button fluid onClick={this.props.onShowOriginal} active={this.props.isShowOriginal}>Original</Button>
|
|
|
|
<Button fluid onClick={this.props.onShowFinal} active={this.props.isShowFinal}>Final</Button>
|
|
|
|
<Button fluid onClick={this.props.onShowDifference} active={this.props.isShowDifference}>Difference</Button>
|
|
|
|
</Segment>
|
|
|
|
|
|
|
|
<Segment >
|
2017-01-18 02:41:53 +01:00
|
|
|
<Button fluid active={this.props.isMarkdownFormat} type='submit' onClick={this.onClickMarkdownFormat.bind(this)}>
|
|
|
|
{this.props.isMarkdownFormat ? <Icon name='checkmark' /> : <span />}
|
2016-11-30 20:57:35 +01:00
|
|
|
As Markdown
|
|
|
|
</Button>
|
|
|
|
</Segment>
|
|
|
|
</Segment.Group>
|
2016-11-28 18:47:47 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(CompareControls)
|
|
|
|
|