aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--ui/app/components/alert/index.js52
1 files changed, 46 insertions, 6 deletions
diff --git a/ui/app/components/alert/index.js b/ui/app/components/alert/index.js
index fc39d41e2..5620d847a 100644
--- a/ui/app/components/alert/index.js
+++ b/ui/app/components/alert/index.js
@@ -4,13 +4,53 @@ const h = require('react-hyperscript')
class Alert extends Component {
+ constructor (props) {
+ super(props)
+
+ this.state = {
+ visble: false,
+ msg: false,
+ className: '',
+ }
+ }
+
+ componentWillReceiveProps (nextProps) {
+ if (!this.props.visible && nextProps.visible) {
+ this.animateIn(nextProps)
+ } else if (this.props.visible && !nextProps.visible) {
+ this.animateOut(nextProps)
+ }
+ }
+
+ animateIn (props) {
+ this.setState({
+ msg: props.msg,
+ visible: true,
+ className: '.visible',
+ })
+ }
+
+ animateOut (props) {
+ this.setState({
+ msg: null,
+ className: '.hidden',
+ })
+
+ setTimeout(_ => {
+ this.setState({visible: false})
+ }, 500)
+
+ }
+
render () {
- const className = `.global-alert${this.props.visible ? '.visible' : '.hidden'}`
- return (
- h(`div${className}`, {},
- h('a.msg', {}, this.props.msg)
- )
- )
+ if (this.state.visible) {
+ return (
+ h(`div.global-alert${this.state.className}`, {},
+ h('a.msg', {}, this.state.msg)
+ )
+ )
+ }
+ return null
}
}