diff options
Diffstat (limited to 'frontend/src/components/Err.js')
| -rw-r--r-- | frontend/src/components/Err.js | 50 |
1 files changed, 43 insertions, 7 deletions
diff --git a/frontend/src/components/Err.js b/frontend/src/components/Err.js index 8562a74..dc78398 100644 --- a/frontend/src/components/Err.js +++ b/frontend/src/components/Err.js @@ -1,18 +1,54 @@ import React from 'react'; -import styled from 'styled-components' +import styled, { css } from 'styled-components' const ErrMsg = styled.p` display: inline; font-weight: 700; margin-left: 2em; - color: #ff3333 + color: #ff3333; + opacity: 0; + transition: opacity 0.3s cubic-bezier(.25,.8,.25,1); + + ${props => + (props.active) && css` + opacity: 1 + ` + }; ` -const Error = (props) => { - const msg = props.msg.toString().toLowerCase() - return ( - <ErrMsg> {msg} </ErrMsg> - ); +class Error extends React.Component { + + constructor(props) { + super(props); + + this.state = { + active: false, + msg: '', + }; + + this.showMessage = this.showMessage.bind(this); + } + + showMessage(msg, duration = 3000) { + this.setState({ + active: true, + msg: msg + }) + + // fadeout after duration ms if duration != -1 + if (duration !== -1) { + setTimeout(() => { + this.setState({ active: false }) + }, duration); + } + } + + render() { + const msg = this.state.msg.toString().toLowerCase() + return ( + <ErrMsg active={this.state.active}> {msg} </ErrMsg> + ); + } } export default Error
\ No newline at end of file |