-
Notifications
You must be signed in to change notification settings - Fork 51
/
index.js
171 lines (162 loc) · 5.66 KB
/
index.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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
// @ts-nocheck
import React from 'react'
import { Component } from 'react'
import * as PropTypes from 'prop-types'
import Button from '../Button'
import Dropdown from '../Dropdown'
import { Row } from 'react-bootstrap'
import { Modal } from '../../../components'
import { Icon } from '../../../components'
/**
* TODO add a concise description of this component
*/
export const MINOR = 'Minor'
export const MAJOR = 'Major'
export const CRITICAL = 'Critical'
export class RejectTranslationModal extends Component {
static propTypes = {
show: PropTypes.bool,
className: PropTypes.string,
key: PropTypes.string,
onHide: PropTypes.func,
toggleDropdown: PropTypes.func,
isOpen: PropTypes.bool,
priority: PropTypes.oneOf(
[
MINOR,
MAJOR,
CRITICAL
]
),
textState: PropTypes.oneOf (
[
'u-textWarning',
'u-textDanger'
]
),
criteria: PropTypes.string
}
constructor (props) {
super(props)
this.state = {
dropdownOpen: false,
dropdownOpen2: false
}
}
toggleDropdown = () => {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen
}))
}
toggleDropdown2 = () => {
this.setState(prevState => ({
dropdownOpen2: !prevState.dropdownOpen2
}))
}
render () {
const {
show,
key,
className,
onHide,
isOpen,
criteria,
priority,
textState
} = this.props
return (
<Modal show={show}
onHide={close}
key="reject-translation-modal"
id="RejectTranslationModal">
<Modal.Header>
<Modal.Title>Reject translation</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="flex">
<span id="CriteriaTitle">
Criteria
</span>
<Dropdown enabled isOpen={this.state.dropdownOpen}
onToggle={this.toggleDropdown}
className="dropdown-menu Criteria">
<Dropdown.Button>
<a className="EditorDropdown-item ellipsis">
{this.props.criteria}
<span className='arrow'>
<Icon className="n1" name="chevron-down" />
</span>
</a>
</Dropdown.Button>
<Dropdown.Content>
<ul>
<li className="EditorDropdown-item" onClick={this.toggleDropdown}>
Translation Errors: terminology, mistranslated, addition, omission, un-localized, do not translate, etc</li>
<li className="EditorDropdown-item" onClick={this.toggleDropdown}>
Language Quality: grammar, spelling, punctuation, typo, ambiguous wording, product name, sentence structuring,
readability, word choice, not natural, too literal, style and tone, etc
</li>
<li className="EditorDropdown-item" onClick={this.toggleDropdown}>
Consistency: inconsistent style or vocabulary, brand inconsistency, etc</li>
<li className="EditorDropdown-item" onClick={this.toggleDropdown}>Style Guide & Glossary Violations</li>
<li className="EditorDropdown-item" onClick={this.toggleDropdown}>
Format: mismatches, white-spaces, tag error or missing, special character, numeric format, truncated, etc</li>
<li className="EditorDropdown-item" onClick={this.toggleDropdown}>
Other (reason may be in comment section/history if necessary)</li>
</ul>
</Dropdown.Content>
</Dropdown>
<span className="PriorityDropdown">
<Icon name="warning" className="s2"
parentClassName="u-textWarning"/>
<span id="PriorityTitle">Priority</span>
<Dropdown enabled isOpen={this.state.dropdownOpen2}
onToggle={this.toggleDropdown2}
className="dropdown-menu priority">
<Dropdown.Button>
<a className="EditorDropdown-item">
<span className={textState}>{this.props.priority}</span>
<span className='arrow'>
<Icon className="n1" name="chevron-down" />
</span>
</a>
</Dropdown.Button>
<Dropdown.Content>
<ul>
<li className="EditorDropdown-item" onClick={this.toggleDropdown2}>
<span>Minor</span></li>
<li className="EditorDropdown-item" onClick={this.toggleDropdown2}>
<span className="u-textWarning">Major</span></li>
<li className="EditorDropdown-item" onClick={this.toggleDropdown2}>
<span className="u-textDanger">Critical</span></li>
</ul>
</Dropdown.Content>
</Dropdown>
</span>
</div>
<div className="EditorRejection-input">
<textarea ref="input"
type="comment"
placeholder="Provide a comment for why this translation has been rejected"
cols="50"
rows="10"
className='EditorInputGroup-input is-focused InputGroup--outlined Commenting' />
</div>
</Modal.Body>
<Modal.Footer>
<span>
<Row>
<Button className="EditorButton Button--large u-rounded Button--secondary">
Cancel
</Button>
<Button className="EditorButton Button--large u-rounded Button--primary">
Reject translation
</Button>
</Row>
</span>
</Modal.Footer>
</Modal>
)
}
}
export default RejectTranslationModal