Merge branch 'ui-2-fixes' into ui-2

This commit is contained in:
Jaco Greeff 2017-05-09 14:23:03 +02:00
commit 4007865bec
2 changed files with 25 additions and 33 deletions

View File

@ -27,6 +27,7 @@
background-color: rgba(0, 0, 0, 0.75);
z-index: 3000;
transition: transform 0.75s;
transform: translateX(-50%) translateY(0px);
}
#action {

View File

@ -21,9 +21,7 @@ import styles from './snackbar.css';
export default class Snackbar extends Component {
state = {
snackStyle: {
transform: 'translateX(-50%) translateY(40px)'
}
opened: false
};
static propTypes = {
@ -32,7 +30,7 @@ export default class Snackbar extends Component {
message: PropTypes.string,
autoHideDuration: PropTypes.number,
bodyStyle: PropTypes.object,
onRequestClose: PropTypes.Func
onRequestClose: PropTypes.func
};
defaultProps = {
@ -40,46 +38,26 @@ export default class Snackbar extends Component {
};
componentWillUpdate (nextProps) {
const self = this;
if (this.openStatus) {
if (this.state.opened) {
return;
}
if (nextProps.open === true) {
this.openStatus = true;
this.show();
self.autoShow();
setTimeout(() => {
self.autoHide();
}, nextProps.autoHideDuration);
setTimeout(this.hide, nextProps.autoHideDuration);
}
}
autoShow () {
this.setState({
snackStyle: {
transform: 'translateX(-50%) translateY(0px)'
}
});
}
autoHide () {
this.props.onRequestClose();
this.openStatus = false;
this.setState({
snackStyle: {
transform: 'translateX(-50%) translateY(40px)'
}
});
}
render () {
const { bodyStyle, message } = this.props;
const { snackStyle } = this.state;
const { opened } = this.state;
let { action } = this.props;
if (!opened) {
return false;
}
if (action === null || action === 'undefined') {
action = (
<FormattedMessage
@ -90,7 +68,7 @@ export default class Snackbar extends Component {
}
return (
<div className={ styles.snacks } style={ snackStyle }>
<div className={ styles.snacks }>
<div style={ bodyStyle }>
<span>{ message }</span>
<span id={ styles.action } onClick={ this.autoHide }>{ action }</span>
@ -98,4 +76,17 @@ export default class Snackbar extends Component {
</div>
);
}
show = () => {
this.setState({
opened: true
});
}
hide = () => {
this.props.onRequestClose();
this.setState({
opened: false
});
}
}