Skip to content
Snippets Groups Projects
Select Git revision
  • f02aec1dbeda04ab440ed4a68ce66475d5aebdc7
  • master default protected
  • 2023-ujoncdelutan
  • 2023-update
  • 1.4.7 protected
  • 1.4.6 protected
  • 1.4.5 protected
  • 1.4.4 protected
  • 1.4.3 protected
  • 1.4.2 protected
  • 1.4.1 protected
  • 1.4.0 protected
  • 1.3.19 protected
  • 1.3.18 protected
  • 1.3.17 protected
  • 1.3.16 protected
  • 1.3.15 protected
  • 1.3.14 protected
  • 1.3.13 protected
  • 1.3.12 protected
  • 1.3.10 protected
  • 1.3.11 protected
  • 1.3.9 protected
  • 1.3.8 protected
24 results

AlertMessage.js

Blame
  • AlertMessage.js 1.71 KiB
    import React, { Component } from 'react';
    import { Message, Container } from 'semantic-ui-react';
    import { connect } from 'react-redux';
    import { dismissMessage } from '../actions/messages';
    
    const messages = [
      {
        type: 'success',
        icon: 'thumbs up',
        title: 'Sikeres művelet',
        success: true,
        warning: false,
        error: false,
      },
      {
        type: 'warning',
        icon: 'warning',
        title: 'Figyelmeztetés',
        success: false,
        warning: true,
        error: false,
      },
      {
        type: 'error',
        icon: 'times circle',
        title: 'Sikertelen művelet',
        success: false,
        warning: false,
        error: true,
      },
    ];
    
    class AlertMessage extends Component {
      constructor (props) {
        super(props);
        this.state = {
          timeout: null,
        }
      }
    componentWillReceiveProps() {
        clearTimeout(this.state.timeout);
        const time = setTimeout(() => {
          this.props.dismissMessage();
        }, 4000);
        this.setState({ timeout: time });
      }
    
      render() {
        const { visible, messageType, text } = this.props.message;
        const messageProps = messages.find(item => item.type === messageType);
        return (
          <Container style={visible ? { padding: '1.5em', paddingBottom: '0.5em' } : { padding: '0em' }}>
            { messageProps ?
              <Message
                icon={messageProps.icon}
                visible={visible}
                header={messageProps.title}
                content={text}
                positive={messageProps.success}
                warning={messageProps.warning}
                negative={messageProps.error}
              />
            :
            null
            }
          </Container>
        );
      }
    }