Better Erros Snackbar in UI #3473

This commit is contained in:
Nicolas Gotchac 2016-11-16 19:57:41 +01:00
parent 18f570327e
commit 05dc1ab05e
3 changed files with 54 additions and 6 deletions

View File

@ -17,4 +17,10 @@
.container { .container {
z-index: 10101 !important; z-index: 10101 !important;
button {
color: white !important;
margin: 0 !important;
margin-right: -16px !important;
}
} }

View File

@ -23,9 +23,12 @@ import { closeErrors } from './actions';
import styles from './errors.css'; import styles from './errors.css';
const ERROR_REGEX = /-(\d+): (.+)$/;
class Errors extends Component { class Errors extends Component {
static propTypes = { static propTypes = {
message: PropTypes.string, message: PropTypes.string,
error: PropTypes.object,
visible: PropTypes.bool, visible: PropTypes.bool,
onCloseErrors: PropTypes.func onCloseErrors: PropTypes.func
}; };
@ -37,22 +40,60 @@ class Errors extends Component {
return null; return null;
} }
const text = this.getErrorMessage();
return ( return (
<Snackbar <Snackbar
open
className={ styles.container } className={ styles.container }
message={ message } open
autoHideDuration={ 5000 } action='close'
onRequestClose={ onCloseErrors } /> autoHideDuration={ 60000 }
message={ text }
onActionTouchTap={ onCloseErrors }
onRequestClose={ this.onRequestClose }
bodyStyle={ {
whiteSpace: 'pre-line',
height: 'auto'
} }
contentStyle={ {
display: 'flex',
flexDirection: 'row',
lineHeight: '1.5em',
padding: '0.75em 0',
alignItems: 'center'
} }
/>
); );
} }
getErrorMessage = () => {
const { message, error } = this.props;
if (!error.text && !ERROR_REGEX.test(message)) {
return message;
}
const matches = ERROR_REGEX.exec(message);
const code = error.code || parseInt(matches[1]) * -1;
const text = error.text || matches[2];
return `[${code}] ${text}`;
}
onRequestClose = (reason) => {
if (reason === 'timeout') {
this.props.onCloseErrors();
}
}
} }
function mapStateToProps (state) { function mapStateToProps (state) {
const { message, visible } = state.errors; const { message, error, visible } = state.errors;
return { return {
message, message,
error,
visible visible
}; };
} }

View File

@ -19,7 +19,8 @@ function newError (state, action) {
return Object.assign({}, state, { return Object.assign({}, state, {
visible: true, visible: true,
message: error.message message: error.message,
error
}); });
} }