implement better dismissal window for errors
import React from 'react'
import Snackbar from 'material-ui/Snackbar'
+import Dialog from 'material-ui/Dialog'
+import FlatButton from 'material-ui/FlatButton'
+
+export default class ErrorSnackbar extends React.Component {
+ constructor (...args) {
+ super(...args)
+ this.state = { dialogOpen: false }
+ }
+
+ handleOpen = () => {
+ this.setState({ dialogOpen: true })
+ }
+
+ handleClose = () => {
+ const { dismissError } = this.props
+ this.setState({ dialogOpen: false })
+ dismissError()
+ }
+
+ render () {
+ const { error, dismissError } = this.props
+ const { dialogOpen } = this.state
-const ErrorSnackbar = ({ error, dismissError }) => {
if (error) console.error(error)
+
const message = typeof error === 'string' ? error : error.message
const name = (error && error.name) ? error.name : 'Error'
- if (typeof message === 'string' && message.length > 0) {
+ if (typeof message !== 'string' || message.length <= 0) {
+ return null
+ }
+
const fullStr = name + ': ' + message
let str = fullStr
@@ -22,24 +47,36 @@ const ErrorSnackbar = ({ error, dismissError }) => {
if (str.length > 37) {
str = str.slice(0, 37) + '...'
action = 'view & ' + action
- onClick = () => {
- alert(fullStr)
- dismissError()
- }
+ onClick = this.handleOpen
}
- return (
+ const actions = [
+ <FlatButton
+ label="dismiss"
+ primary={true}
+ onTouchTap={this.handleClose}
+ />,
+ ]
+
+ return [
<Snackbar
open={!!error}
message={str}
onRequestClose={() => {/* do nothing */}}
action={action}
onActionClick={onClick}
- />
- )
- } else {
- return null
+ />,
+ <Dialog
+ actions={actions}
+ modal={false}
+ open={dialogOpen}
+ onRequestClose={this.handleClose}
+ >
+ <h1>{name}</h1>
+ <pre style={{ whiteSpace: 'pre-wrap' }}>
+ {message}
+ </pre>
+ </Dialog>
+ ]
}
}
-
-export default ErrorSnackbar
