aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorbrunobar79 <brunobar79@gmail.com>2018-07-22 04:02:23 +0800
committerbrunobar79 <brunobar79@gmail.com>2018-07-22 04:02:23 +0800
commite2fa3ba415e88c7bfd66b32c807e20f3562a9420 (patch)
tree361d11abdd2f266acdea4ccb9d6cbfbb50d183b9 /ui
parentc5520de1159718466ab846add99e0fea1da1cb06 (diff)
downloadtangerine-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')
-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
}
}