You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.2 KiB
62 lines
1.2 KiB
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
|
|
|
|
|