/
MailboxNavigationToolbar.js
151 lines (139 loc) · 5.21 KB
/
MailboxNavigationToolbar.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
import PropTypes from 'prop-types'
import React from 'react'
import shallowCompare from 'react-addons-shallow-compare'
import * as Colors from 'material-ui/styles/colors'
import {
Paper, IconButton, FontIcon, CircularProgress,
Toolbar, ToolbarGroup, ToolbarTitle
} from 'material-ui'
import { CHROME_PDF_URL } from 'shared/constants'
import URI from 'urijs'
export default class MailboxNavigationToolbar extends React.Component {
/* **************************************************************************/
// Class
/* **************************************************************************/
static propTypes = {
handleGoHome: PropTypes.func.isRequired,
handleGoBack: PropTypes.func.isRequired,
handleGoForward: PropTypes.func.isRequired,
handleStop: PropTypes.func.isRequired,
handleReload: PropTypes.func.isRequired
}
/* **************************************************************************/
// Public
/* **************************************************************************/
/**
* A quite non-react way to update the state
* @param updates: an object containing some or all of the following keys:
* canGoBack: true if the browser can go back
* canGoForward: true if the browser can go forward
* isLoading: true if the browser is loading
* currentUrl: the current url
*/
updateBrowserState = (updates) => {
this.setState(updates)
}
/* **************************************************************************/
// Data lifecylce
/* **************************************************************************/
state = (() => {
return {
isLoading: false,
currentUrl: '',
canGoBack: false,
canGoForward: false
}
})()
/**
* Converts a url to a url that can be shown and used externally
* @param url: the true url
* @return the url to load in external browsers and show to the user
*/
externalUrl (url) {
if (url.startsWith(CHROME_PDF_URL)) {
return URI(url).search(true).src
} else {
return url
}
}
/* **************************************************************************/
// Rendering
/* **************************************************************************/
shouldComponentUpdate (nextProps, nextState) {
return shallowCompare(this, nextProps, nextState)
}
render () {
const { className, handleGoHome, handleGoBack, handleGoForward, handleStop, handleReload, ...passProps } = this.props
const { isLoading, currentUrl, canGoBack, canGoForward } = this.state
const fullClassName = [
'ReactComponent-MailboxNavigationToolbar',
className
].filter((c) => !!c).join(' ')
return (
<Paper {...passProps} className={fullClassName}>
<Toolbar style={{ height: 40, backgroundColor: Colors.blueGrey900 }}>
<ToolbarGroup firstChild>
<IconButton
style={{WebkitAppRegion: 'no-drag'}}
onClick={handleGoHome}>
<FontIcon
className='material-icons'
color={Colors.blueGrey100}
hoverColor={Colors.blueGrey50}>
home
</FontIcon>
</IconButton>
<IconButton
style={{WebkitAppRegion: 'no-drag'}}
disableTouchRipple={!canGoBack}
onClick={canGoBack ? handleGoBack : undefined}>
<FontIcon
className='material-icons'
color={canGoBack ? Colors.blueGrey100 : Colors.blueGrey400}
hoverColor={canGoBack ? Colors.blueGrey50 : Colors.blueGrey400}>
arrow_back
</FontIcon>
</IconButton>
<IconButton
style={{WebkitAppRegion: 'no-drag'}}
disableTouchRipple={!canGoForward}
onClick={canGoForward ? handleGoForward : undefined}>
<FontIcon
className='material-icons'
color={canGoForward ? Colors.blueGrey100 : Colors.blueGrey400}
hoverColor={canGoForward ? Colors.blueGrey50 : Colors.blueGrey400}>
arrow_forward
</FontIcon>
</IconButton>
<IconButton
style={{WebkitAppRegion: 'no-drag'}}
onClick={isLoading ? handleStop : handleReload}>
<FontIcon
className='material-icons'
color={Colors.blueGrey100}
hoverColor={Colors.blueGrey50}>
{isLoading ? 'close' : 'refresh'}
</FontIcon>
</IconButton>
</ToolbarGroup>
<ToolbarGroup style={{ minWidth: 0 }}>
<ToolbarTitle
text={this.externalUrl(currentUrl)}
style={{ fontSize: '14px', color: Colors.blueGrey50 }} />
</ToolbarGroup>
<ToolbarGroup lastChild>
{isLoading ? (
<CircularProgress
size={18}
thickness={2}
color={Colors.cyan200}
style={{ margin: 10 }} />
) : (
<div style={{ width: 18, height: 18, margin: 10 }} />
)}
</ToolbarGroup>
</Toolbar>
</Paper>
)
}
}