Merge branch 'ui-2-fixes' into ui-2
This commit is contained in:
commit
4007865bec
@ -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 {
|
||||
|
@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user