-
Notifications
You must be signed in to change notification settings - Fork 51
/
TransUnitTranslationHeader.js
75 lines (66 loc) · 1.94 KB
/
TransUnitTranslationHeader.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import React from 'react'
import * as PropTypes from 'prop-types'
import Button from 'antd/lib/button'
import 'antd/lib/button/style/css'
import TransUnitLocaleHeading from './TransUnitLocaleHeading'
import { hasTranslationChanged } from '../utils/phrase-util'
import Tooltip from 'antd/lib/tooltip'
/**
* Heading that displays locale name and ID
*/
class TransUnitTranslationHeader extends React.Component {
static propTypes = {
phrase: PropTypes.object.isRequired,
cancelEdit: PropTypes.func.isRequired,
undoEdit: PropTypes.func.isRequired,
translationLocale: PropTypes.shape({
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
}).isRequired
}
// TODO this is duplicated between source header and translation header,
// de-duplicate it
buttonClass =
'Link Link--neutral u-sizeHeight-1_1-2 u-sizeWidth-1 u-textCenter'
closeButtonElement = () => {
return (
<li className="u-sm-hidden">
<Tooltip title="Cancel edit">
<Button size="large"
icon="close"
className={this.buttonClass}
onClick={this.props.cancelEdit} />
</Tooltip>
</li>
)
}
undoButtonElement = () => {
return (
<li>
<Tooltip title="Undo edit">
<Button size="large"
icon="rollback"
className={this.buttonClass}
onClick={this.props.undoEdit} />
</Tooltip>
</li>
)
}
render () {
const displayUndo = hasTranslationChanged(this.props.phrase)
const button = displayUndo
? this.undoButtonElement()
: this.closeButtonElement()
return (
<div
className="TransUnit-panelHeader TransUnit-panelHeader--translation">
<TransUnitLocaleHeading
{...this.props.translationLocale} />
<ul className="u-floatRight u-listHorizontal">
{button}
</ul>
</div>
)
}
}
export default TransUnitTranslationHeader