diff options
author | brunobar79 <brunobar79@gmail.com> | 2018-07-22 04:02:23 +0800 |
---|---|---|
committer | brunobar79 <brunobar79@gmail.com> | 2018-07-22 04:02:23 +0800 |
commit | e2fa3ba415e88c7bfd66b32c807e20f3562a9420 (patch) | |
tree | 361d11abdd2f266acdea4ccb9d6cbfbb50d183b9 /ui/app/components/alert | |
parent | c5520de1159718466ab846add99e0fea1da1cb06 (diff) | |
download | tangerine-wallet-browser-e2fa3ba415e88c7bfd66b32c807e20f3562a9420.tar.gz tangerine-wallet-browser-e2fa3ba415e88c7bfd66b32c807e20f3562a9420.tar.zst tangerine-wallet-browser-e2fa3ba415e88c7bfd66b32c807e20f3562a9420.zip |
refactor Alert component to work properly
Diffstat (limited to 'ui/app/components/alert')
-rw-r--r-- | ui/app/components/alert/index.js | 52 |
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 } } |