1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 20:57:12 +01:00
metamask-extension/ui/app/components/alert/index.js
2018-07-21 16:02:23 -04:00

63 lines
1.2 KiB
JavaScript

const { Component } = require('react')
const PropTypes = require('prop-types')
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 () {
if (this.state.visible) {
return (
h(`div.global-alert${this.state.className}`, {},
h('a.msg', {}, this.state.msg)
)
)
}
return null
}
}
Alert.propTypes = {
visible: PropTypes.bool.isRequired,
msg: PropTypes.string,
}
module.exports = Alert