This repository has been archived by the owner on Nov 9, 2017. It is now read-only.
/
DocsDropdown.js
72 lines (66 loc) · 2 KB
/
DocsDropdown.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
import { encode } from '../utils/doc-id'
import Dropdown from './Dropdown'
import { Icon } from 'zanata-ui'
import React, { PropTypes } from 'react'
/**
* Dropdown to select the current document to work on.
*/
const DocsDropdown = React.createClass({
propTypes: {
context: PropTypes.shape({
projectVersion: PropTypes.shape({
project: PropTypes.shape({
slug: PropTypes.string.isRequired
}).isRequired,
version: PropTypes.string.isRequired,
docs: PropTypes.arrayOf(PropTypes.string)
}).isRequired,
selectedDoc: PropTypes.shape({
id: PropTypes.string.isRequired
}).isRequired,
selectedLocale: PropTypes.string.isRequired
}).isRequired,
toggleDropdown: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired
},
docUrl: function (docId) {
const { projectVersion, selectedLocale } = this.props.context
const project = projectVersion.project.slug
const version = projectVersion.version
const encodedId = encode(docId)
return '#/' + project + '/' + version + '/translate/' +
encodedId + '/' + selectedLocale
},
render: function () {
const ctx = this.props.context
const selectedDoc = ctx.selectedDoc.id
const items = ctx.projectVersion.docs.map(docId => {
const url = this.docUrl(docId)
// TODO highlight selected
return (
<li key={docId}>
<a href={url} className="Dropdown-item">{docId}</a>
</li>
)
})
return (
<Dropdown onToggle={this.props.toggleDropdown}
isOpen={this.props.isOpen}>
<Dropdown.Button>
<button className="Link--invert">
{selectedDoc}
<div className="u-sML-1-8 Dropdown-toggleIcon">
<Icon name="chevron-down" size="1" />
</div>
</button>
</Dropdown.Button>
<Dropdown.Content>
<ul>
{items}
</ul>
</Dropdown.Content>
</Dropdown>
)
}
})
export default DocsDropdown