/
PlainSuggestionContents.js
56 lines (51 loc) · 1.82 KB
/
PlainSuggestionContents.js
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
/**
* Displays just the content text for source and translation of a suggestion
*/
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import SuggestionContents from '../../components/SuggestionContents'
import cx from 'classnames'
class PlainSuggestionContents extends Component {
static propTypes = {
/* Optional match type colour to display on the status bar. */
matchType: PropTypes.string,
suggestion: PropTypes.shape({
sourceContents: PropTypes.arrayOf(PropTypes.string).isRequired,
targetContents: PropTypes.arrayOf(PropTypes.string).isRequired
}).isRequired,
displayHeader: PropTypes.bool
}
matchTypeClass = (matchType) => {
return ({
imported: 'TransUnit--secondary',
translated: 'TransUnit--success',
approved: 'TransUnit--highlight'
})[matchType]
}
render () {
const { sourceContents, targetContents } = this.props.suggestion
const displayHeader = this.props.displayHeader
const className = cx('TransUnit TransUnit--suggestion u-bgHigh u-sMB-1',
this.matchTypeClass(this.props.matchType))
return (
<div className={className}>
<div className="TransUnit-status" />
{displayHeader && <span className="TransUnit-sourceHeading">
Source</span>}
<div className="TransUnit-panel TransUnit-source">
<SuggestionContents
plural={sourceContents.length > 1}
contents={sourceContents} />
</div>
{displayHeader && <span className="TransUnit-targetHeading">
Translation</span>}
<div className="TransUnit-panel TransUnit-translation rtl u-sPV-1-2">
<SuggestionContents
plural={sourceContents.length > 1}
contents={targetContents} />
</div>
</div>
)
}
}
export default PlainSuggestionContents