From 7623455cb6e139ce28f81002c62dc77a578df034 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Tue, 9 May 2017 14:20:36 +0200 Subject: [PATCH] Snackbar update --- js/src/ui/Snackbar/snackbar.css | 1 + js/src/ui/Snackbar/snackbar.js | 57 ++++++++++++++------------------- 2 files changed, 25 insertions(+), 33 deletions(-) diff --git a/js/src/ui/Snackbar/snackbar.css b/js/src/ui/Snackbar/snackbar.css index 894581faf..aa328f133 100644 --- a/js/src/ui/Snackbar/snackbar.css +++ b/js/src/ui/Snackbar/snackbar.css @@ -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 { diff --git a/js/src/ui/Snackbar/snackbar.js b/js/src/ui/Snackbar/snackbar.js index 6d5dcef44..d84bc9eab 100644 --- a/js/src/ui/Snackbar/snackbar.js +++ b/js/src/ui/Snackbar/snackbar.js @@ -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 = ( +
{ message } { action } @@ -98,4 +76,17 @@ export default class Snackbar extends Component {
); } + + show = () => { + this.setState({ + opened: true + }); + } + + hide = () => { + this.props.onRequestClose(); + this.setState({ + opened: false + }); + } }